chartjs-plugin-autocolors 0.0.5 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -17,7 +17,7 @@ This plugin requires Chart.js 3.0.0 or later. Could work with v2, but it is not
|
|
|
17
17
|
NPM:
|
|
18
18
|
|
|
19
19
|
```bash
|
|
20
|
-
npm i --save
|
|
20
|
+
npm i --save chartjs-plugin-autocolors
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
CDN:
|
|
@@ -55,9 +55,9 @@ Single chart
|
|
|
55
55
|
```js
|
|
56
56
|
const chart = new Chart(ctx, {
|
|
57
57
|
// ...
|
|
58
|
-
plugins:
|
|
58
|
+
plugins: [
|
|
59
59
|
autocolors
|
|
60
|
-
|
|
60
|
+
]
|
|
61
61
|
});
|
|
62
62
|
```
|
|
63
63
|
|
|
@@ -125,6 +125,23 @@ const chart = new Chart(ctx, {
|
|
|
125
125
|
});
|
|
126
126
|
```
|
|
127
127
|
|
|
128
|
+
### Offset
|
|
129
|
+
|
|
130
|
+
`offset` option can be used to offset the color generation by a number of colors.
|
|
131
|
+
|
|
132
|
+
```js
|
|
133
|
+
const chart = new Chart(ctx, {
|
|
134
|
+
// ...
|
|
135
|
+
options: {
|
|
136
|
+
plugins: {
|
|
137
|
+
autocolors: {
|
|
138
|
+
offset: 5
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
});
|
|
143
|
+
```
|
|
144
|
+
|
|
128
145
|
## Browser compatibility
|
|
129
146
|
|
|
130
147
|
This plugin uses a generator function, so it is not compatible with Internet Explorer.
|
|
@@ -1,46 +1,45 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* chartjs-plugin-autocolors v0.0.
|
|
2
|
+
* chartjs-plugin-autocolors v0.0.7
|
|
3
3
|
* https://github.com/kurkle/chartjs-plugin-autocolors#readme
|
|
4
|
-
* (c)
|
|
4
|
+
* (c) 2022 Jukka Kurkela
|
|
5
5
|
* Released under the MIT License
|
|
6
6
|
*/
|
|
7
7
|
/*!
|
|
8
|
-
* @kurkle/color v0.1
|
|
8
|
+
* @kurkle/color v0.2.1
|
|
9
9
|
* https://github.com/kurkle/color#readme
|
|
10
|
-
* (c)
|
|
10
|
+
* (c) 2022 Jukka Kurkela
|
|
11
11
|
* Released under the MIT License
|
|
12
12
|
*/
|
|
13
|
-
|
|
14
13
|
function round(v) {
|
|
15
|
-
|
|
14
|
+
return v + 0.5 | 0;
|
|
16
15
|
}
|
|
17
16
|
const lim = (v, l, h) => Math.max(Math.min(v, h), l);
|
|
18
17
|
function n2b(v) {
|
|
19
|
-
|
|
18
|
+
return lim(round(v * 255), 0, 255);
|
|
20
19
|
}
|
|
21
20
|
function b2n(v) {
|
|
22
|
-
|
|
23
|
-
}
|
|
24
|
-
function rgbString(v) {
|
|
25
|
-
return v && (
|
|
26
|
-
v.a < 255
|
|
27
|
-
? `rgba(${v.r}, ${v.g}, ${v.b}, ${b2n(v.a)})`
|
|
28
|
-
: `rgb(${v.r}, ${v.g}, ${v.b})`
|
|
29
|
-
);
|
|
21
|
+
return lim(round(v / 2.55) / 100, 0, 1);
|
|
30
22
|
}
|
|
31
23
|
function hsv2rgbn(h, s, v) {
|
|
32
|
-
|
|
33
|
-
|
|
24
|
+
const f = (n, k = (n + h / 60) % 6) => v - v * s * Math.max(Math.min(k, 4 - k, 1), 0);
|
|
25
|
+
return [f(5), f(3), f(1)];
|
|
34
26
|
}
|
|
35
27
|
function calln(f, a, b, c) {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
28
|
+
return (
|
|
29
|
+
Array.isArray(a)
|
|
30
|
+
? f(a[0], a[1], a[2])
|
|
31
|
+
: f(a, b, c)
|
|
32
|
+
).map(n2b);
|
|
41
33
|
}
|
|
42
34
|
function hsv2rgb(h, s, v) {
|
|
43
|
-
|
|
35
|
+
return calln(hsv2rgbn, h, s, v);
|
|
36
|
+
}
|
|
37
|
+
function rgbString(v) {
|
|
38
|
+
return v && (
|
|
39
|
+
v.a < 255
|
|
40
|
+
? `rgba(${v.r}, ${v.g}, ${v.b}, ${b2n(v.a)})`
|
|
41
|
+
: `rgb(${v.r}, ${v.g}, ${v.b})`
|
|
42
|
+
);
|
|
44
43
|
}
|
|
45
44
|
|
|
46
45
|
function* hueGen() {
|
|
@@ -87,20 +86,27 @@ var index = {
|
|
|
87
86
|
return;
|
|
88
87
|
}
|
|
89
88
|
|
|
90
|
-
|
|
89
|
+
if (!chart._autocolor) {
|
|
90
|
+
chart._autocolor = colorGen();
|
|
91
|
+
if (options.offset) {
|
|
92
|
+
for (let i = 0; i < options.offset; i++) {
|
|
93
|
+
chart._autocolor.next();
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
91
97
|
|
|
92
98
|
for (const dataset of chart.data.datasets) {
|
|
93
99
|
if (dataset.backgroundColor && dataset.borderColor) {
|
|
94
100
|
continue;
|
|
95
101
|
}
|
|
96
102
|
if (mode === 'dataset') {
|
|
97
|
-
const c = getNext(
|
|
103
|
+
const c = getNext(chart._autocolor, customize, {chart, datasetIndex: dataset.index});
|
|
98
104
|
setColors(dataset, c.background, c.border);
|
|
99
105
|
} else {
|
|
100
106
|
const background = [];
|
|
101
107
|
const border = [];
|
|
102
108
|
for (let i = 0; i < dataset.data.length; i++) {
|
|
103
|
-
const c = getNext(
|
|
109
|
+
const c = getNext(chart._autocolor, customize, {chart, datasetIndex: dataset.index, dataIndex: i});
|
|
104
110
|
background.push(c.background);
|
|
105
111
|
border.push(c.border);
|
|
106
112
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* chartjs-plugin-autocolors v0.0.
|
|
2
|
+
* chartjs-plugin-autocolors v0.0.7
|
|
3
3
|
* https://github.com/kurkle/chartjs-plugin-autocolors#readme
|
|
4
|
-
* (c)
|
|
4
|
+
* (c) 2022 Jukka Kurkela
|
|
5
5
|
* Released under the MIT License
|
|
6
6
|
*/
|
|
7
7
|
(function (global, factory) {
|
|
@@ -11,42 +11,41 @@ typeof define === 'function' && define.amd ? define(factory) :
|
|
|
11
11
|
})(this, (function () { 'use strict';
|
|
12
12
|
|
|
13
13
|
/*!
|
|
14
|
-
* @kurkle/color v0.1
|
|
14
|
+
* @kurkle/color v0.2.1
|
|
15
15
|
* https://github.com/kurkle/color#readme
|
|
16
|
-
* (c)
|
|
16
|
+
* (c) 2022 Jukka Kurkela
|
|
17
17
|
* Released under the MIT License
|
|
18
18
|
*/
|
|
19
|
-
|
|
20
19
|
function round(v) {
|
|
21
|
-
|
|
20
|
+
return v + 0.5 | 0;
|
|
22
21
|
}
|
|
23
22
|
const lim = (v, l, h) => Math.max(Math.min(v, h), l);
|
|
24
23
|
function n2b(v) {
|
|
25
|
-
|
|
24
|
+
return lim(round(v * 255), 0, 255);
|
|
26
25
|
}
|
|
27
26
|
function b2n(v) {
|
|
28
|
-
|
|
29
|
-
}
|
|
30
|
-
function rgbString(v) {
|
|
31
|
-
return v && (
|
|
32
|
-
v.a < 255
|
|
33
|
-
? `rgba(${v.r}, ${v.g}, ${v.b}, ${b2n(v.a)})`
|
|
34
|
-
: `rgb(${v.r}, ${v.g}, ${v.b})`
|
|
35
|
-
);
|
|
27
|
+
return lim(round(v / 2.55) / 100, 0, 1);
|
|
36
28
|
}
|
|
37
29
|
function hsv2rgbn(h, s, v) {
|
|
38
|
-
|
|
39
|
-
|
|
30
|
+
const f = (n, k = (n + h / 60) % 6) => v - v * s * Math.max(Math.min(k, 4 - k, 1), 0);
|
|
31
|
+
return [f(5), f(3), f(1)];
|
|
40
32
|
}
|
|
41
33
|
function calln(f, a, b, c) {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
34
|
+
return (
|
|
35
|
+
Array.isArray(a)
|
|
36
|
+
? f(a[0], a[1], a[2])
|
|
37
|
+
: f(a, b, c)
|
|
38
|
+
).map(n2b);
|
|
47
39
|
}
|
|
48
40
|
function hsv2rgb(h, s, v) {
|
|
49
|
-
|
|
41
|
+
return calln(hsv2rgbn, h, s, v);
|
|
42
|
+
}
|
|
43
|
+
function rgbString(v) {
|
|
44
|
+
return v && (
|
|
45
|
+
v.a < 255
|
|
46
|
+
? `rgba(${v.r}, ${v.g}, ${v.b}, ${b2n(v.a)})`
|
|
47
|
+
: `rgb(${v.r}, ${v.g}, ${v.b})`
|
|
48
|
+
);
|
|
50
49
|
}
|
|
51
50
|
|
|
52
51
|
function* hueGen() {
|
|
@@ -93,20 +92,27 @@ var index = {
|
|
|
93
92
|
return;
|
|
94
93
|
}
|
|
95
94
|
|
|
96
|
-
|
|
95
|
+
if (!chart._autocolor) {
|
|
96
|
+
chart._autocolor = colorGen();
|
|
97
|
+
if (options.offset) {
|
|
98
|
+
for (let i = 0; i < options.offset; i++) {
|
|
99
|
+
chart._autocolor.next();
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
97
103
|
|
|
98
104
|
for (const dataset of chart.data.datasets) {
|
|
99
105
|
if (dataset.backgroundColor && dataset.borderColor) {
|
|
100
106
|
continue;
|
|
101
107
|
}
|
|
102
108
|
if (mode === 'dataset') {
|
|
103
|
-
const c = getNext(
|
|
109
|
+
const c = getNext(chart._autocolor, customize, {chart, datasetIndex: dataset.index});
|
|
104
110
|
setColors(dataset, c.background, c.border);
|
|
105
111
|
} else {
|
|
106
112
|
const background = [];
|
|
107
113
|
const border = [];
|
|
108
114
|
for (let i = 0; i < dataset.data.length; i++) {
|
|
109
|
-
const c = getNext(
|
|
115
|
+
const c = getNext(chart._autocolor, customize, {chart, datasetIndex: dataset.index, dataIndex: i});
|
|
110
116
|
background.push(c.background);
|
|
111
117
|
border.push(c.border);
|
|
112
118
|
}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* chartjs-plugin-autocolors v0.0.
|
|
2
|
+
* chartjs-plugin-autocolors v0.0.7
|
|
3
3
|
* https://github.com/kurkle/chartjs-plugin-autocolors#readme
|
|
4
|
-
* (c)
|
|
4
|
+
* (c) 2022 Jukka Kurkela
|
|
5
5
|
* Released under the MIT License
|
|
6
6
|
*/
|
|
7
7
|
!function(o,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(o="undefined"!=typeof globalThis?globalThis:o||self)["chartjs-plugin-autocolors"]=t()}(this,(function(){"use strict";
|
|
8
8
|
/*!
|
|
9
|
-
* @kurkle/color v0.1
|
|
9
|
+
* @kurkle/color v0.2.1
|
|
10
10
|
* https://github.com/kurkle/color#readme
|
|
11
|
-
* (c)
|
|
11
|
+
* (c) 2022 Jukka Kurkela
|
|
12
12
|
* Released under the MIT License
|
|
13
|
-
*/function o(o){return o+.5|0}const t=(o,t,
|
|
13
|
+
*/function o(o){return o+.5|0}const t=(o,t,r)=>Math.max(Math.min(o,r),t);function r(r){return t(o(255*r),0,255)}function e(o,t,r){const e=(e,n=(e+o/60)%6)=>r-r*t*Math.max(Math.min(n,4-n,1),0);return[e(5),e(3),e(1)]}function n(o,t,n){return a=e,u=o,d=t,c=n,(Array.isArray(u)?a(u[0],u[1],u[2]):a(u,d,c)).map(r);var a,u,d,c}function a(r){return r&&(r.a<255?`rgba(${r.r}, ${r.g}, ${r.b}, ${function(r){return t(o(r/2.55)/100,0,1)}(r.a)})`:`rgb(${r.r}, ${r.g}, ${r.b})`)}function u(o,t,r){o.backgroundColor=o.backgroundColor||t,o.borderColor=o.borderColor||r}function d(o,t,r){const e=o.next().value;return"function"==typeof t?t(Object.assign({colors:e},r)):e}return{id:"autocolors",beforeUpdate(o,t,r){const{mode:e="dataset",enabled:c=!0,customize:f}=r;if(c){if(!o._autocolor&&(o._autocolor=function*(){const o=function*(){yield 0;for(let o=1;o<10;o++){const t=1<<o;for(let o=1;o<=t;o+=2)yield o/t}}();let t=o.next();for(;!t.done;){let r=n(Math.round(360*t.value),.6,.8);yield{background:a({r:r[0],g:r[1],b:r[2],a:192}),border:a({r:r[0],g:r[1],b:r[2],a:144})},r=n(Math.round(360*t.value),.6,.5),yield{background:a({r:r[0],g:r[1],b:r[2],a:192}),border:a({r:r[0],g:r[1],b:r[2],a:144})},t=o.next()}}(),r.offset))for(let t=0;t<r.offset;t++)o._autocolor.next();for(const t of o.data.datasets)if(!t.backgroundColor||!t.borderColor)if("dataset"===e){const r=d(o._autocolor,f,{chart:o,datasetIndex:t.index});u(t,r.background,r.border)}else{const r=[],e=[];for(let n=0;n<t.data.length;n++){const a=d(o._autocolor,f,{chart:o,datasetIndex:t.index,dataIndex:n});r.push(a.background),e.push(a.border)}u(t,r,e)}}}}}));
|
|
14
14
|
//# sourceMappingURL=chartjs-plugin-autocolors.min.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "chartjs-plugin-autocolors",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.7",
|
|
4
4
|
"description": "Automatic color generation for Chart.js",
|
|
5
5
|
"main": "dist/chartjs-plugin-autocolors.js",
|
|
6
6
|
"module": "dist/chartjs-plugin-autocolors.esm.js",
|
|
@@ -30,13 +30,13 @@
|
|
|
30
30
|
},
|
|
31
31
|
"homepage": "https://github.com/kurkle/chartjs-plugin-autocolors#readme",
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@kurkle/color": "^0.1
|
|
34
|
-
"@rollup/plugin-node-resolve": "^
|
|
35
|
-
"eslint": "^8.
|
|
33
|
+
"@kurkle/color": "^0.2.1",
|
|
34
|
+
"@rollup/plugin-node-resolve": "^14.1.0",
|
|
35
|
+
"eslint": "^8.17.0",
|
|
36
36
|
"eslint-config-chartjs": "^0.3.0",
|
|
37
37
|
"eslint-plugin-es": "^4.1.0",
|
|
38
|
-
"eslint-plugin-html": "^
|
|
39
|
-
"eslint-plugin-markdown": "^
|
|
38
|
+
"eslint-plugin-html": "^7.1.0",
|
|
39
|
+
"eslint-plugin-markdown": "^3.0.0",
|
|
40
40
|
"rollup": "^2.33.2",
|
|
41
41
|
"rollup-plugin-terser": "^7.0.2"
|
|
42
42
|
}
|