/
plugin.colors.ts
110 lines (85 loc) · 2.66 KB
/
plugin.colors.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import {DoughnutController, PolarAreaController} from '../index.js';
import type {Chart, ChartDataset} from '../types.js';
export interface ColorsPluginOptions {
enabled?: boolean;
forceOverride?: boolean;
}
interface ColorsDescriptor {
backgroundColor?: unknown;
borderColor?: unknown;
}
const BORDER_COLORS = [
'rgb(54, 162, 235)', // blue
'rgb(255, 99, 132)', // red
'rgb(255, 159, 64)', // orange
'rgb(255, 205, 86)', // yellow
'rgb(75, 192, 192)', // green
'rgb(153, 102, 255)', // purple
'rgb(201, 203, 207)' // grey
];
// Border colors with 50% transparency
const BACKGROUND_COLORS = /* #__PURE__ */ BORDER_COLORS.map(color => color.replace('rgb(', 'rgba(').replace(')', ', 0.5)'));
function getBorderColor(i: number) {
return BORDER_COLORS[i % BORDER_COLORS.length];
}
function getBackgroundColor(i: number) {
return BACKGROUND_COLORS[i % BACKGROUND_COLORS.length];
}
function colorizeDefaultDataset(dataset: ChartDataset, i: number) {
dataset.borderColor = getBorderColor(i);
dataset.backgroundColor = getBackgroundColor(i);
return ++i;
}
function colorizeDoughnutDataset(dataset: ChartDataset, i: number) {
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 getColorizer(chart: Chart) {
let i = 0;
return (dataset: ChartDataset, datasetIndex: number) => {
const controller = chart.getDatasetMeta(datasetIndex).controller;
if (controller instanceof DoughnutController) {
i = colorizeDoughnutDataset(dataset, i);
} else if (controller instanceof PolarAreaController) {
i = colorizePolarAreaDataset(dataset, i);
} else if (controller) {
i = colorizeDefaultDataset(dataset, i);
}
};
}
function containsColorsDefinitions(
descriptors: ColorsDescriptor[] | Record<string, ColorsDescriptor>
) {
let k: number | string;
for (k in descriptors) {
if (descriptors[k].borderColor || descriptors[k].backgroundColor) {
return true;
}
}
return false;
}
export default {
id: 'colors',
defaults: {
enabled: true,
forceOverride: false
} as ColorsPluginOptions,
beforeLayout(chart: Chart, _args, options: ColorsPluginOptions) {
if (!options.enabled) {
return;
}
const {
options: {elements},
data: {datasets}
} = chart.config;
if (!options.forceOverride && (containsColorsDefinitions(datasets) || elements && containsColorsDefinitions(elements))) {
return;
}
const colorizer = getColorizer(chart);
datasets.forEach(colorizer);
}
};