From: Dan Manastireanu <498419+danmana@users.noreply.github.com>
Date: Wed, 28 Oct 2020 15:28:17 +0000 (+0200)
Subject: feat: Make options.layout.padding scriptable. Closes #7873 (#7968)
X-Git-Tag: v3.0.0-beta.5~11
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=aad748dc5adda1cadf7702f0e44f1b16a73f37d7;p=thirdparty%2FChart.js.git

feat: Make options.layout.padding scriptable. Closes #7873 (#7968)
---

diff --git a/docs/docs/configuration/layout.md b/docs/docs/configuration/layout.md
index 1818fa2e3..afe2471d4 100644
--- a/docs/docs/configuration/layout.md
+++ b/docs/docs/configuration/layout.md
@@ -4,9 +4,9 @@ title: Layout
 
 The layout configuration is passed into the `options.layout` namespace. The global options for the chart layout is defined in `Chart.defaults.layout`.
 
-| Name | Type | Default | Description
-| ---- | ---- | ------- | -----------
-| `padding` | <code>number&#124;object</code> | `0` | The padding to add inside the chart. [more...](#padding)
+| Name | Type | Default | [Scriptable](../general/options.md#scriptable-options) | Description
+| ---- | ---- | ------- | :----: | -----------
+| `padding` | <code>number&#124;object</code> | `0` | Yes | The padding to add inside the chart. [more...](#padding)
 
 ## Padding
 If this value is a number, it is applied to all sides of the chart (left, top, right, bottom). If this value is an object, the `left` property defines the left padding. Similarly the `right`, `top` and `bottom` properties can also be specified.
diff --git a/src/core/core.layouts.js b/src/core/core.layouts.js
index 789731a30..61876c367 100644
--- a/src/core/core.layouts.js
+++ b/src/core/core.layouts.js
@@ -1,6 +1,6 @@
 import defaults from './core.defaults';
 import {each, isObject} from '../helpers/helpers.core';
-import {toPadding} from '../helpers/helpers.options';
+import {toPadding, resolve} from '../helpers/helpers.options';
 
 /**
  * @typedef { import("./core.controller").default } Chart
@@ -310,7 +310,8 @@ export default {
 		}
 
 		const layoutOptions = chart.options.layout || {};
-		const padding = toPadding(layoutOptions.padding);
+		const context = {chart};
+		const padding = toPadding(resolve([layoutOptions.padding], context));
 
 		const availableWidth = width - padding.width;
 		const availableHeight = height - padding.height;
diff --git a/test/fixtures/core.layouts/scriptable.js b/test/fixtures/core.layouts/scriptable.js
new file mode 100644
index 000000000..3087398af
--- /dev/null
+++ b/test/fixtures/core.layouts/scriptable.js
@@ -0,0 +1,49 @@
+module.exports = {
+	config: {
+		type: 'line',
+		data: {
+			datasets: [
+				{data: [10, 5, 0, 25, 78, -10]}
+			],
+			labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5', 'tick6']
+		},
+		options: {
+			layout: {
+				padding: function(ctx) {
+					// 10% padding
+					const horizontalPadding = ctx.chart.width * 0.1;
+					const verticalPadding = ctx.chart.height * 0.1;
+					return {
+						top: verticalPadding,
+						right: horizontalPadding,
+						bottom: verticalPadding,
+						left: horizontalPadding
+					};
+				}
+			},
+			legend: {
+				display: false
+			},
+			scales: {
+				x: {
+					type: 'category',
+					ticks: {
+						maxRotation: 0,
+						autoSkip: false
+					}
+				},
+				y: {
+					type: 'linear',
+					position: 'right'
+				}
+			}
+		}
+	},
+	options: {
+		spriteText: true,
+		canvas: {
+			height: 150,
+			width: 512
+		}
+	}
+};
diff --git a/test/fixtures/core.layouts/scriptable.png b/test/fixtures/core.layouts/scriptable.png
new file mode 100644
index 000000000..6b3da5d10
Binary files /dev/null and b/test/fixtures/core.layouts/scriptable.png differ
diff --git a/types/core/interfaces.d.ts b/types/core/interfaces.d.ts
index accf6257c..6c2fca495 100644
--- a/types/core/interfaces.d.ts
+++ b/types/core/interfaces.d.ts
@@ -149,7 +149,7 @@ export interface ICoreChartOptions {
   elements: { [key: string]: IElementOptions };
 
   layout: {
-    padding: number | IChartArea;
+    padding: Scriptable<number | IChartArea>;
   };
 }