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

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.

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;

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
+		}
+	}
+};

types/core/interfaces.d.ts

@@ -149,7 +149,7 @@ export interface ICoreChartOptions {
   elements: { [key: string]: IElementOptions };
 
   layout: {
-    padding: number | IChartArea;
+    padding: Scriptable<number | IChartArea>;
   };
 }