From b439e8210e2139cabe708e2e78903215ee4feb36 Mon Sep 17 00:00:00 2001 From: Jacco van den Berg Date: Mon, 12 Dec 2022 21:33:49 +0100 Subject: [PATCH 1/2] Allow dynamic datasets to be colored --- docs/general/colors.md | 16 ++++++++++++++++ src/plugins/plugin.colors.ts | 11 ++++++----- 2 files changed, 22 insertions(+), 5 deletions(-) diff --git a/docs/general/colors.md b/docs/general/colors.md index 913cf548207..03fca24b5d9 100644 --- a/docs/general/colors.md +++ b/docs/general/colors.md @@ -84,6 +84,22 @@ const options = { ::: +### Dynamic datasets at runtime + +By default the colors plugin only works when you initialize the chart without any colors for the border or background specified. +If you want to force the colors plugin to always color your datasets, for example when using dynamic datasets at runtime you will need to set the `forceColorsPlugin` option to true: + +```js +const options = { + plugins: { + colors: { + forceColorsPlugin: true + } + } +}; +``` + + ### Advanced color palettes See the [awesome list](https://github.com/chartjs/awesome#plugins) for plugins that would give you more flexibility defining color palettes. diff --git a/src/plugins/plugin.colors.ts b/src/plugins/plugin.colors.ts index 14292ca6cbf..9c21c59840d 100644 --- a/src/plugins/plugin.colors.ts +++ b/src/plugins/plugin.colors.ts @@ -1,8 +1,9 @@ import {DoughnutController, PolarAreaController} from '../index.js'; -import type {Chart, ChartConfiguration, ChartDataset} from '../types.js'; +import type {Chart, ChartDataset} from '../types.js'; export interface ColorsPluginOptions { enabled?: boolean; + forceColorsPlugin: boolean; } interface ColorsDescriptor { @@ -85,20 +86,20 @@ export default { defaults: { enabled: true, + forceColorsPlugin: false }, - beforeLayout(chart: Chart, _args, options: ColorsPluginOptions) { + beforeDatasetsUpdate(chart: Chart, _args, options: ColorsPluginOptions) { if (!options.enabled) { return; } const { - type, options: {elements}, data: {datasets} - } = chart.config as ChartConfiguration; + } = chart.config; - if (containsColorsDefinitions(datasets) || elements && containsColorsDefinitions(elements)) { + if ((containsColorsDefinitions(datasets) || elements && containsColorsDefinitions(elements)) && !options.forceColorsPlugin) { return; } From 01929aa7cd0a7bc21624603a91d072f23354d3b3 Mon Sep 17 00:00:00 2001 From: Jacco van den Berg Date: Mon, 12 Dec 2022 21:52:14 +0100 Subject: [PATCH 2/2] revieuw --- docs/general/colors.md | 4 +- src/plugins/plugin.colors.ts | 10 ++-- .../plugin.colors/dynamic-datasets-default.js | 42 +++++++++++++++++ .../dynamic-datasets-default.png | Bin 0 -> 15854 bytes .../dynamic-datasets-force-override.js | 43 ++++++++++++++++++ .../dynamic-datasets-force-override.png | Bin 0 -> 15443 bytes 6 files changed, 92 insertions(+), 7 deletions(-) create mode 100644 test/fixtures/plugin.colors/dynamic-datasets-default.js create mode 100644 test/fixtures/plugin.colors/dynamic-datasets-default.png create mode 100644 test/fixtures/plugin.colors/dynamic-datasets-force-override.js create mode 100644 test/fixtures/plugin.colors/dynamic-datasets-force-override.png diff --git a/docs/general/colors.md b/docs/general/colors.md index 03fca24b5d9..287ee389dba 100644 --- a/docs/general/colors.md +++ b/docs/general/colors.md @@ -87,13 +87,13 @@ const options = { ### Dynamic datasets at runtime By default the colors plugin only works when you initialize the chart without any colors for the border or background specified. -If you want to force the colors plugin to always color your datasets, for example when using dynamic datasets at runtime you will need to set the `forceColorsPlugin` option to true: +If you want to force the colors plugin to always color your datasets, for example when using dynamic datasets at runtime you will need to set the `forceOverride` option to true: ```js const options = { plugins: { colors: { - forceColorsPlugin: true + forceOverride: true } } }; diff --git a/src/plugins/plugin.colors.ts b/src/plugins/plugin.colors.ts index 9c21c59840d..b2817c85a12 100644 --- a/src/plugins/plugin.colors.ts +++ b/src/plugins/plugin.colors.ts @@ -3,7 +3,7 @@ import type {Chart, ChartDataset} from '../types.js'; export interface ColorsPluginOptions { enabled?: boolean; - forceColorsPlugin: boolean; + forceOverride?: boolean; } interface ColorsDescriptor { @@ -86,10 +86,10 @@ export default { defaults: { enabled: true, - forceColorsPlugin: false - }, + forceOverride: false + } as ColorsPluginOptions, - beforeDatasetsUpdate(chart: Chart, _args, options: ColorsPluginOptions) { + beforeLayout(chart: Chart, _args, options: ColorsPluginOptions) { if (!options.enabled) { return; } @@ -99,7 +99,7 @@ export default { data: {datasets} } = chart.config; - if ((containsColorsDefinitions(datasets) || elements && containsColorsDefinitions(elements)) && !options.forceColorsPlugin) { + if (!options.forceOverride && (containsColorsDefinitions(datasets) || elements && containsColorsDefinitions(elements))) { return; } diff --git a/test/fixtures/plugin.colors/dynamic-datasets-default.js b/test/fixtures/plugin.colors/dynamic-datasets-default.js new file mode 100644 index 00000000000..9969d3e2a8e --- /dev/null +++ b/test/fixtures/plugin.colors/dynamic-datasets-default.js @@ -0,0 +1,42 @@ +module.exports = { + config: { + type: 'bar', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + data: [5, 5, 5, 5, 5, 5] + } + ] + }, + options: { + scales: { + x: { + ticks: { + display: false, + } + }, + y: { + ticks: { + display: false, + } + } + }, + plugins: { + legend: false, + colors: { + enabled: true + } + } + } + }, + options: { + run(chart) { + chart.data.datasets.push({ + data: [5, 5, 5, 5, 5, 5] + }); + + chart.update(); + } + } +}; diff --git a/test/fixtures/plugin.colors/dynamic-datasets-default.png b/test/fixtures/plugin.colors/dynamic-datasets-default.png new file mode 100644 index 0000000000000000000000000000000000000000..38f281077b377953362548010225510526f738e2 GIT binary patch literal 15854 zcmeHOYgAKL7CuP|C^W??mTFW|2a4Eb(b9so*CaR~1uZGysQ(!2wMBnf3@FX5hPip$O4IrK3ru(B`s>c#Br$73XPJ!?O#wI^Y^=FcfanBJO7~UdZe6E zck~i*=It##I>)2N3c2;J+|<`$>XWZkHVUjA)q%AY)Wt3(w26*9f`HU3TPc2|P& z(m^r(+AH;>)W##;8}X)1wT(j3uAY7Fi=wmK!$NY#WgX5$+PoLH`k=#i*Jk|wKR;(k zcLawR#J9hT#`ktRb%L@8`aSGs^L#t1+xr~8yPUwRtMaWoMq1Ae-N0CgFbx}=d%gC^ zB|*4Y&**7o)p-%zNpB+j?VU;MmfpF6M9qt!O{glu=)A$RIQEK(ET-{rul1T2L?2b# zh^I~q5Wg|~+efmu6|spKi$sidA90nZ!4SrTg&M)uk@m-=J~amkb~5fWO6Nz)vQz{QqB zidwyAbNKuB@`u$S3@Ii&ubQnno#3E#eRYrav-$SqxNI#Q8>p?~bR?Q`)#E;g|FPHQ zn5o~VV4!?K!1IIB8Ws{~DoR5PxoVmH;A>K$OhImN1~N0>|d^=Ww=kqSes>H%MqTOF48aLc!Mi> zNi1d?W7?eoS*8#NZ`Ips8%RewOvj!AFxg^o@68QfgxqQ9hUMp99p=w|(~5nKGSq1= zS2FPZQNH;3^C9?3|4+x|D-gC12a0m`Gtt~7{z`S~h7020g0PHH1;Q+6ztchygUz2R z^1ja@O<~DNHk#f~6C%Ntgcg(0K|iCmgX>0M#$;VDvolxi^4v^B%<>15MT2|y$(ak&h>{NX@p3m34EU+m6uVp>ZYndeu; z9#tUB7B28ur?KVXuA0cE#IE5Yy4ha!X93KxH)>B$H{I67nNL;sWp|h~x{58bgfrzu za!Xr!hr~dZ3Cx4HVz`M_;WDmysfuh@NPZXYg`S8NW*`1>6`BOHRaJ9R&1l4s<-7I@ztpGHO2&z#r(XCz^X%=>$qYU~5^RGXEDT9Jw&L*ih zfw!Dk6i;Ipu4qaOKmCsbYVUF`Iy<1<{-}uA9hOn&4dXNy>(r^0z z382P;e%~nfQ>y(pl!-SLuK3re0&a67CluUr!Y=#R=c z3H?PSEj?tB+%BP=HB@q?%1ykf7%RJasE#c7vF(wvR^Mwg8soc;I{yKD8>1*Rq|lH; zLkbO_Ei|OkwcieH+K`CL8Q2BqF&9U0K@xecWuQG#+j<|jj6`vhtV*IIN!PfYFc0eD z5-o!UDG|@GPA@NWC7AmjrR0z0=2a+irH3e5M`!1m?I%d=jnmPLPhgk$#Ih1O+8FYF zc3u_A$P7>xtqsgAnkU{1vL23cZrx;p8+m`>i9U->Ehlz0Zz69l&z?J~K;D01(IMDK zNx#w4c|mhF%Qm@vju&*khi`IogRFmBj1Oe}H*%ogt8Vu>o*z|QieY`S69eUQ*nwWi zN`bupr&b5#A#O@6-cnLAi;>wp9_IIBB zxAsv={#b7AJbGa7c|06W>;<$55_>tFI_;m3+OXY{xD=t;d84%e6wN_#IuwCLv2}kU zHTiHEa8DXr26Rtz8JLi`l~bfI#c)$}K2^Iw6>9utRVftoQ}sSnaT8UxM%Cz11&L2q zUq&%h=AlZ@@RAnKp7^BUOO670yrEurG=8KCGL?;n^TphEK zKG`*cN1tr!an5i?BhJloi*>d2y2-PFY~}96$b=76t^6L&sI1{{K-i8{m+OK_lfGSp zKk?_bhQZ6iH!e|OvgsmyBV5=Wmv&I7>A3!Oz-Gl0zaMS?l-pQcj{H2o=}h)f94>I9 NK>uLBk5eSh=Bx!RUV2~ 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 ZRGH53sU2J+9=s(C*1B$RDRd4x@Lydfj;#Oy literal 0 HcmV?d00001