feat: colors for mixed charts (#10870)

diff --git a/src/plugins/plugin.colors.ts b/src/plugins/plugin.colors.ts
index fdc8d7e3b6992bec5d619409f5a24fee9f538717..8286c27c5697aefb343b0cef359bdbfdbf9caefc 100644 (file)
--- a/src/plugins/plugin.colors.ts
+++ b/src/plugins/plugin.colors.ts
@@ -4,8 +4,6 @@ export interface ColorsPluginOptions {
   enabled?: boolean;
 }
 
-type DatasetColorizer = (dataset: ChartDataset, i: number) => void;
-
 interface ColorsDescriptor {
   backgroundColor?: unknown;
   borderColor?: unknown;
@@ -32,38 +30,41 @@ function getBackgroundColor(i: number) {
   return BACKGROUND_COLORS[i % BACKGROUND_COLORS.length];
 }
 
-function createDefaultDatasetColorizer() {
-  return (dataset: ChartDataset, i: number) => {
-    dataset.borderColor = getBorderColor(i);
-    dataset.backgroundColor = getBackgroundColor(i);
-  };
+function colorizeDefaultDataset(dataset: ChartDataset, i: number) {
+  dataset.borderColor = getBorderColor(i);
+  dataset.backgroundColor = getBackgroundColor(i);
+
+  return ++i;
 }
 
-function createDoughnutDatasetColorizer() {
-  let i = 0;
+function colorizeDoughnutDataset(dataset: ChartDataset, i: number) {
+  dataset.backgroundColor = dataset.data.map(() => getBorderColor(i++));
 
-  return (dataset: ChartDataset) => {
-    dataset.backgroundColor = dataset.data.map(() => getBorderColor(i++));
-  };
+  return i;
+}
+
+function colorizePolarAreaDataset(dataset: ChartDataset, i: number) {
+  dataset.backgroundColor = dataset.data.map(() => getBackgroundColor(i++));
+
+  return i;
 }
 
-function createPolarAreaDatasetColorizer() {
+function getColorizer(chartType: string) {
   let i = 0;
 
   return (dataset: ChartDataset) => {
-    dataset.backgroundColor = dataset.data.map(() => getBackgroundColor(i++));
+    const type = dataset.type || chartType;
+
+    if (type === 'doughnut' || type === 'pie') {
+      i = colorizeDoughnutDataset(dataset, i);
+    } else if (type === 'polarArea') {
+      i = colorizePolarAreaDataset(dataset, i);
+    } else if (type) {
+      i = colorizeDefaultDataset(dataset, i);
+    }
   };
 }
 
-function getColorizer(type: string) {
-  if (type === 'doughnut' || type === 'pie') {
-    return createDoughnutDatasetColorizer();
-  } else if (type === 'polarArea') {
-    return createPolarAreaDatasetColorizer();
-  }
-  return createDefaultDatasetColorizer();
-}
-
 function containsColorsDefinitions(
   descriptors: ColorsDescriptor[] | Record<string, ColorsDescriptor>
 ) {
@@ -100,7 +101,8 @@ export default {
       return;
     }
 
-    const colorizer: DatasetColorizer = getColorizer(type);
+    const colorizer = getColorizer(type);
+
     datasets.forEach(colorizer);
   }
 };

diff --git a/test/fixtures/plugin.colors/mixed.js b/test/fixtures/plugin.colors/mixed.js
new file mode 100644 (file)
index 0000000..2ea5b83
--- /dev/null
+++ b/test/fixtures/plugin.colors/mixed.js
@@ -0,0 +1,41 @@
+module.exports = {
+  config: {
+    data: {
+      labels: [0, 1, 2, 3],
+      datasets: [
+        {
+          type: 'line',
+          data: [5, 20, 1, 10],
+        },
+        {
+          type: 'bar',
+          data: [6, 16, 3, 19]
+        },
+        {
+          type: 'pie',
+          data: [5, 20, 1, 10],
+        }
+      ]
+    },
+    options: {
+      scales: {
+        x: {
+          ticks: {
+            display: false,
+          }
+        },
+        y: {
+          ticks: {
+            display: false,
+          }
+        }
+      },
+      plugins: {
+        legend: false,
+        colors: {
+          enabled: true
+        }
+      }
+    }
+  }
+};

diff --git a/test/fixtures/plugin.colors/mixed.png b/test/fixtures/plugin.colors/mixed.png
new file mode 100644 (file)
index 0000000..d507dd0
Binary files /dev/null and b/test/fixtures/plugin.colors/mixed.png differ