From aad748dc5adda1cadf7702f0e44f1b16a73f37d7 Mon Sep 17 00:00:00 2001 From: Dan Manastireanu <498419+danmana@users.noreply.github.com> Date: Wed, 28 Oct 2020 17:28:17 +0200 Subject: [PATCH] feat: Make options.layout.padding scriptable. Closes #7873 (#7968) --- docs/docs/configuration/layout.md | 6 +-- src/core/core.layouts.js | 5 ++- test/fixtures/core.layouts/scriptable.js | 49 ++++++++++++++++++++++ test/fixtures/core.layouts/scriptable.png | Bin 0 -> 12493 bytes types/core/interfaces.d.ts | 2 +- 5 files changed, 56 insertions(+), 6 deletions(-) create mode 100644 test/fixtures/core.layouts/scriptable.js create mode 100644 test/fixtures/core.layouts/scriptable.png 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` | number|object | `0` | The padding to add inside the chart. [more...](#padding) +| Name | Type | Default | [Scriptable](../general/options.md#scriptable-options) | Description +| ---- | ---- | ------- | :----: | ----------- +| `padding` | number|object | `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 0000000000000000000000000000000000000000..6b3da5d1017fd376380aefccb626fa04e233b818 GIT binary patch literal 12493 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 literal 0 HcmV?d00001 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; }; }