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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 z zn#ZuKr9HvzIB#|Gtxt)ucI~R$+bQP5PK`X~sg>1>;G>L`+ctgWzT3@FcZAo8r1S{1 zHF&8KXmv*bblPnwI`@@I+SfV9M>#^9)ooh%Z~WU{f0=TdSd0VUxYRt=rL9V@vUmUj z`RrkSPqHAzuwH(xdo-lH2qAzw>3+F2Ap|KL$6D&T^2lmCFqs4JD>Ho{V;m&)lwMz4 zbv=#g@_M+U3lW?Gf;J+A94Yxoqt2~T6PhEp$>Sfqy=_=aEzG`IPXcr?8Q&5Zy6Ou+ zQc8KuZQq6y1yDIx&G^;Tb%t|frCd!l>K!hSMG__KNo?xg$Z(6Od0*$CZK8)1Ftp=)mSDR6^K)O!;two1J3p^%l&=UB zULOkyd`gI-mMyiKoUDFDgAm*JGKhUXAewR?HrvG-?K&6J9!Zsa3kZ7H6$)@n#-UVO zWFg5y%<&*x%D(xWA8zmqf(W>1Cia_^ahfxNWC1z4)F@)V?LhknZXGmM)uqsQAt$?R zb9lbP_Z;a@?OZ)rjt9fKy}3&97U#!1mUsZKt#itEj(YAOr4|@4(A^-pm)f68#yw6h z2T%(kq<>b@Lztpk>KE@_#I_g8UXo|yc~cIETK$s{P4VMB%m^>aJU@vXmPC-818PbFElPeCgl#SVkB z+zG;~dSC(ZWwB_ZU+l)Rh=55c-l`D{x;w@x9mkn%{&hZ6>}b+uXEl$En-Id(8A5-n zg>iwGzyBeLb=AyooD=p?)|YvSXkAV6f%pe+B|mF0qaxgVRv+gf+rj{8 zO2-ZiA&NtV2nE$}-Byvg^%hFTs+7b=fRnnwLZJ|_iG*Nn=dd|%j!@@b$zkBL=>ZYL zbpDwr;1PUz((f<2bti=0VZ1ArbqYUQE~1|iO)j%R_**dU0{7^h6_0^W9PbY1{?eU) zSgZY1Ewm$C_`Z`Bfo3%kzy{E;TkCxEYvRBV_qB&Oj`^YvdO`-+*k_Aeo&ylTV)4_MHE4E6LJ}A6p_J^ucQY9J-z1_=+-R z;INd(!&!@56DaXszP>^9W;BQA*HGPAgJkd;el897 zII)i5IzFd14j_(xrMr)X`kq|MV@~P2>(zeV-fmUT`+<^s{IlD}IMiY;5C`2q zfoMM8T5^|)KH0gheojn(0x`Ml+`7EyW0kg3(2iE{6^w; }; } -- 2.47.2