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

diff --git a/docs/docs/configuration/layout.md b/docs/docs/configuration/layout.md
index 1818fa2e3bb7a8656c820f352b0227360cd8384f..afe2471d4fd6a0a60c250ac6a1a91d9944d61245 100644 (file)
--- 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 789731a303f5f02731092c91b0e9653961fb5840..61876c367104f74e9d22d193bbb07bd044e37980 100644 (file)
--- 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 (file)
index 0000000..3087398
--- /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 (file)
index 0000000..6b3da5d
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 accf6257c513eaaa84b1afb7491e6aa86f3fed83..6c2fca495b276672ea48435f2496109ec0b9fa41 100644 (file)
--- 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>;
   };
 }