@mekari/pixel3-chart 0.0.6 → 0.0.7-dev.1
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/dist/chart.js +88 -43
- package/dist/chart.mjs +2 -2
- package/dist/{chunk-RG3PDKE3.mjs → chunk-CXRIHJSJ.mjs} +7 -3
- package/dist/{chunk-5SYLA56O.mjs → chunk-LU452YL3.mjs} +83 -42
- package/dist/index.js +88 -43
- package/dist/index.mjs +2 -2
- package/dist/metafile-cjs.json +1 -1
- package/dist/metafile-esm.json +1 -1
- package/dist/modules/chart.hooks.js +82 -41
- package/dist/modules/chart.hooks.mjs +1 -1
- package/package.json +6 -5
package/dist/chart.js
CHANGED
|
@@ -37,6 +37,7 @@ module.exports = __toCommonJS(chart_exports);
|
|
|
37
37
|
var import_vue2 = require("vue");
|
|
38
38
|
var import_vue3 = require("vue");
|
|
39
39
|
var import_pixel3_text = require("@mekari/pixel3-text");
|
|
40
|
+
var import_pixel3_utils2 = require("@mekari/pixel3-utils");
|
|
40
41
|
|
|
41
42
|
// src/modules/chart.props.ts
|
|
42
43
|
var chartProps = {
|
|
@@ -211,6 +212,11 @@ function useChart(props, emit) {
|
|
|
211
212
|
const chartContainerNode = (0, import_vue.ref)();
|
|
212
213
|
const chartLegendNode = (0, import_vue.ref)();
|
|
213
214
|
const chartCanvasNode = (0, import_vue.ref)();
|
|
215
|
+
const {
|
|
216
|
+
isNextTheme,
|
|
217
|
+
isDark,
|
|
218
|
+
getComputedCSSVariableValue
|
|
219
|
+
} = (0, import_pixel3_utils.usePixelTheme)();
|
|
214
220
|
const getId = id.value || (0, import_pixel3_utils.getUniqueId)("", "chart").value;
|
|
215
221
|
const isHorizontalBarChart = (0, import_vue.computed)(() => {
|
|
216
222
|
return type.value === "bar" && isHorizontal.value;
|
|
@@ -246,7 +252,10 @@ function useChart(props, emit) {
|
|
|
246
252
|
maintainAspectRatio: false,
|
|
247
253
|
responsive: true,
|
|
248
254
|
animation: true,
|
|
249
|
-
|
|
255
|
+
hover: {
|
|
256
|
+
mode: null
|
|
257
|
+
},
|
|
258
|
+
cutout: type.value === "doughnut" ? "65%" : 0,
|
|
250
259
|
...isHorizontalBarChart.value && {
|
|
251
260
|
indexAxis: "y"
|
|
252
261
|
},
|
|
@@ -273,7 +282,7 @@ function useChart(props, emit) {
|
|
|
273
282
|
},
|
|
274
283
|
datalabels: {
|
|
275
284
|
display: isShowDataLabels.value,
|
|
276
|
-
color: "#626B79",
|
|
285
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.default")) : "#626B79",
|
|
277
286
|
clamp: true,
|
|
278
287
|
font: {
|
|
279
288
|
size: 10
|
|
@@ -288,6 +297,7 @@ function useChart(props, emit) {
|
|
|
288
297
|
},
|
|
289
298
|
elements: {
|
|
290
299
|
bar: {
|
|
300
|
+
hoverBackgroundColor: getListColors.value[1],
|
|
291
301
|
backgroundColor: getListColors.value[1],
|
|
292
302
|
borderRadius: "4",
|
|
293
303
|
...isStacked.value && {
|
|
@@ -295,12 +305,12 @@ function useChart(props, emit) {
|
|
|
295
305
|
top: !isHorizontal.value ? 2 : 0,
|
|
296
306
|
right: isHorizontal.value ? 2 : 0
|
|
297
307
|
},
|
|
298
|
-
borderColor: "#FFFFFF"
|
|
308
|
+
borderColor: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.inverse")) : "#FFFFFF"
|
|
299
309
|
}
|
|
300
310
|
},
|
|
301
311
|
line: {
|
|
302
|
-
borderColor: isArea.value ? "#FFFFFF" : getListColors.value[1],
|
|
303
|
-
borderWidth: 2,
|
|
312
|
+
borderColor: isArea.value ? isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.inverse")) : "#FFFFFF" : getListColors.value[1],
|
|
313
|
+
borderWidth: isArea.value ? isNextTheme.value ? 4 : 2 : 2,
|
|
304
314
|
tension: isArea.value ? 0.4 : 0
|
|
305
315
|
},
|
|
306
316
|
point: {
|
|
@@ -311,8 +321,9 @@ function useChart(props, emit) {
|
|
|
311
321
|
},
|
|
312
322
|
arc: {
|
|
313
323
|
backgroundColor: getListColors.value[1],
|
|
314
|
-
borderColor: "#FFFFFF",
|
|
315
|
-
hoverBorderColor: "#FFFFFF"
|
|
324
|
+
borderColor: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.inverse")) : "#FFFFFF",
|
|
325
|
+
hoverBorderColor: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.inverse")) : "#FFFFFF",
|
|
326
|
+
borderWidth: isNextTheme.value ? 4 : 2
|
|
316
327
|
}
|
|
317
328
|
},
|
|
318
329
|
scales: {
|
|
@@ -324,11 +335,12 @@ function useChart(props, emit) {
|
|
|
324
335
|
grid: {
|
|
325
336
|
display: false,
|
|
326
337
|
drawOnChartArea: false,
|
|
327
|
-
drawTicks: false
|
|
338
|
+
drawTicks: false,
|
|
339
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.default")) : "#D0D6DD"
|
|
328
340
|
},
|
|
329
341
|
ticks: {
|
|
330
342
|
display: !isCircularChart.value && type.value !== "radar",
|
|
331
|
-
color: "#626B79"
|
|
343
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.secondary")) : "#626B79"
|
|
332
344
|
}
|
|
333
345
|
},
|
|
334
346
|
y: {
|
|
@@ -340,12 +352,12 @@ function useChart(props, emit) {
|
|
|
340
352
|
display: !isHorizontal.value,
|
|
341
353
|
drawOnChartArea: !isCircularChart.value && type.value !== "radar",
|
|
342
354
|
drawTicks: false,
|
|
343
|
-
color: "#D0D6DD"
|
|
355
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.default")) : "#D0D6DD"
|
|
344
356
|
},
|
|
345
357
|
ticks: {
|
|
346
358
|
display: !isCircularChart.value && type.value !== "radar",
|
|
347
359
|
beginAtZero: true,
|
|
348
|
-
color: "#626B79",
|
|
360
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.secondary")) : "#626B79",
|
|
349
361
|
padding: 8
|
|
350
362
|
}
|
|
351
363
|
},
|
|
@@ -353,16 +365,17 @@ function useChart(props, emit) {
|
|
|
353
365
|
r: {
|
|
354
366
|
angleLines: {
|
|
355
367
|
display: true,
|
|
356
|
-
color: "#D0D6DD"
|
|
368
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.default")) : "#D0D6DD"
|
|
357
369
|
},
|
|
358
370
|
grid: {
|
|
359
|
-
color: "#D0D6DD"
|
|
371
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.default")) : "#D0D6DD"
|
|
360
372
|
},
|
|
361
373
|
ticks: {
|
|
362
|
-
|
|
374
|
+
backdropColor: "transparent",
|
|
375
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.disabled")) : "#626B79"
|
|
363
376
|
},
|
|
364
377
|
pointLabels: {
|
|
365
|
-
color: "#626B79"
|
|
378
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.secondary")) : "#626B79"
|
|
366
379
|
}
|
|
367
380
|
}
|
|
368
381
|
}
|
|
@@ -399,37 +412,62 @@ function useChart(props, emit) {
|
|
|
399
412
|
datasets.forEach((item, index) => {
|
|
400
413
|
item.backgroundColor = item.backgroundColor || handleColorPattern(index, isFading);
|
|
401
414
|
item.borderColor = item.borderColor || handleColorPattern(index);
|
|
402
|
-
item.pointBackgroundColor = item.pointBackgroundColor ||
|
|
415
|
+
item.pointBackgroundColor = item.pointBackgroundColor || item.borderColor || handleColorPattern(index);
|
|
403
416
|
});
|
|
404
417
|
}
|
|
405
418
|
return datasets;
|
|
406
419
|
});
|
|
407
420
|
const getListColors = (0, import_vue.computed)(() => {
|
|
421
|
+
const newToken = {
|
|
422
|
+
1: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat01.bold")),
|
|
423
|
+
2: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat01")),
|
|
424
|
+
3: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat02.bold")),
|
|
425
|
+
4: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat02")),
|
|
426
|
+
5: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat03.bold")),
|
|
427
|
+
6: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat03")),
|
|
428
|
+
7: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat04.bold")),
|
|
429
|
+
8: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat04")),
|
|
430
|
+
9: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat05.bold")),
|
|
431
|
+
10: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat05")),
|
|
432
|
+
11: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat06.bold")),
|
|
433
|
+
12: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat06")),
|
|
434
|
+
13: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat07.bold")),
|
|
435
|
+
14: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat07")),
|
|
436
|
+
15: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat08.bold")),
|
|
437
|
+
16: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat08"))
|
|
438
|
+
};
|
|
439
|
+
if (isNextTheme.value) {
|
|
440
|
+
if (isDark.value) {
|
|
441
|
+
return newToken;
|
|
442
|
+
} else {
|
|
443
|
+
return newToken;
|
|
444
|
+
}
|
|
445
|
+
}
|
|
408
446
|
return {
|
|
409
|
-
1: (
|
|
410
|
-
2: (
|
|
411
|
-
3: (
|
|
412
|
-
4: (
|
|
413
|
-
5: (
|
|
414
|
-
6: (
|
|
415
|
-
7: (
|
|
416
|
-
8: (
|
|
417
|
-
9: (
|
|
418
|
-
10: (
|
|
419
|
-
11: (
|
|
420
|
-
12: (
|
|
421
|
-
13: (
|
|
422
|
-
14: (
|
|
423
|
-
15: (
|
|
424
|
-
16: (
|
|
425
|
-
17: (
|
|
426
|
-
18: (
|
|
427
|
-
19: (
|
|
428
|
-
20: (
|
|
429
|
-
21: (
|
|
430
|
-
22: (
|
|
431
|
-
23: (
|
|
432
|
-
24: (
|
|
447
|
+
1: getComputedCSSVariableValue(import_tokens.token.var("colors.sky.400")),
|
|
448
|
+
2: getComputedCSSVariableValue(import_tokens.token.var("colors.sky.100")),
|
|
449
|
+
3: getComputedCSSVariableValue(import_tokens.token.var("colors.teal.400")),
|
|
450
|
+
4: getComputedCSSVariableValue(import_tokens.token.var("colors.teal.100")),
|
|
451
|
+
5: getComputedCSSVariableValue(import_tokens.token.var("colors.violet.400")),
|
|
452
|
+
6: getComputedCSSVariableValue(import_tokens.token.var("colors.violet.100")),
|
|
453
|
+
7: getComputedCSSVariableValue(import_tokens.token.var("colors.amber.400")),
|
|
454
|
+
8: getComputedCSSVariableValue(import_tokens.token.var("colors.amber.100")),
|
|
455
|
+
9: getComputedCSSVariableValue(import_tokens.token.var("colors.rose.400")),
|
|
456
|
+
10: getComputedCSSVariableValue(import_tokens.token.var("colors.rose.100")),
|
|
457
|
+
11: getComputedCSSVariableValue(import_tokens.token.var("colors.stone.400")),
|
|
458
|
+
12: getComputedCSSVariableValue(import_tokens.token.var("colors.stone.100")),
|
|
459
|
+
13: getComputedCSSVariableValue(import_tokens.token.var("colors.lime.400")),
|
|
460
|
+
14: getComputedCSSVariableValue(import_tokens.token.var("colors.lime.100")),
|
|
461
|
+
15: getComputedCSSVariableValue(import_tokens.token.var("colors.pink.400")),
|
|
462
|
+
16: getComputedCSSVariableValue(import_tokens.token.var("colors.pink.100")),
|
|
463
|
+
17: getComputedCSSVariableValue(import_tokens.token.var("colors.apricot.400")),
|
|
464
|
+
18: getComputedCSSVariableValue(import_tokens.token.var("colors.apricot.100")),
|
|
465
|
+
19: getComputedCSSVariableValue(import_tokens.token.var("colors.aqua.400")),
|
|
466
|
+
20: getComputedCSSVariableValue(import_tokens.token.var("colors.aqua.100")),
|
|
467
|
+
21: getComputedCSSVariableValue(import_tokens.token.var("colors.leaf.400")),
|
|
468
|
+
22: getComputedCSSVariableValue(import_tokens.token.var("colors.leaf.100")),
|
|
469
|
+
23: getComputedCSSVariableValue(import_tokens.token.var("colors.fuchsia.400")),
|
|
470
|
+
24: getComputedCSSVariableValue(import_tokens.token.var("colors.fuchsia.100"))
|
|
433
471
|
};
|
|
434
472
|
});
|
|
435
473
|
const rootAttrs = (0, import_vue.computed)(() => {
|
|
@@ -543,7 +581,7 @@ function useChart(props, emit) {
|
|
|
543
581
|
return {
|
|
544
582
|
class: (0, import_recipes.chartSlotRecipe)().tooltipBox,
|
|
545
583
|
style: {
|
|
546
|
-
backgroundColor: type.value === "line" ? (_b = (_a = tooltip.value.data) == null ? void 0 : _a.labelColors[0]) == null ? void 0 : _b.borderColor : (_d = (_c = tooltip.value.data) == null ? void 0 : _c.labelColors[0]) == null ? void 0 : _d.backgroundColor
|
|
584
|
+
backgroundColor: type.value === "line" && !isArea.value ? (_b = (_a = tooltip.value.data) == null ? void 0 : _a.labelColors[0]) == null ? void 0 : _b.borderColor : (_d = (_c = tooltip.value.data) == null ? void 0 : _c.labelColors[0]) == null ? void 0 : _d.backgroundColor
|
|
547
585
|
}
|
|
548
586
|
};
|
|
549
587
|
});
|
|
@@ -748,6 +786,10 @@ function useChart(props, emit) {
|
|
|
748
786
|
}
|
|
749
787
|
}, {
|
|
750
788
|
deep: true
|
|
789
|
+
}), (0, import_vue.watch)(() => isDark.value, (newVal, oldVal) => {
|
|
790
|
+
if (newVal !== oldVal) {
|
|
791
|
+
updateChart();
|
|
792
|
+
}
|
|
751
793
|
});
|
|
752
794
|
(0, import_vue.onMounted)(() => {
|
|
753
795
|
createChart();
|
|
@@ -792,6 +834,9 @@ var MpChart = (0, import_vue3.defineComponent)({
|
|
|
792
834
|
slots,
|
|
793
835
|
emit
|
|
794
836
|
}) {
|
|
837
|
+
const {
|
|
838
|
+
isNextTheme
|
|
839
|
+
} = (0, import_pixel3_utils2.usePixelTheme)();
|
|
795
840
|
const {
|
|
796
841
|
rootAttrs,
|
|
797
842
|
chartHeaderAttrs,
|
|
@@ -834,7 +879,7 @@ var MpChart = (0, import_vue3.defineComponent)({
|
|
|
834
879
|
})
|
|
835
880
|
]) : "", isShowTooltip && (0, import_vue2.createVNode)("div", chartTooltipAttrs.value, [slots.tooltip ? slots.tooltip(tooltip.value.data) : (0, import_vue2.createVNode)("div", tooltipWrapperAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_text.MpText, {
|
|
836
881
|
"size": "label",
|
|
837
|
-
"color": "gray.600"
|
|
882
|
+
"color": isNextTheme.value ? "text.secondary" : "gray.600"
|
|
838
883
|
}, {
|
|
839
884
|
default: () => {
|
|
840
885
|
var _a, _b;
|
|
@@ -850,7 +895,7 @@ var MpChart = (0, import_vue3.defineComponent)({
|
|
|
850
895
|
}
|
|
851
896
|
})]), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
|
|
852
897
|
"size": "label-small",
|
|
853
|
-
"color": "gray.600"
|
|
898
|
+
"color": isNextTheme.value ? "text.secondary" : "gray.600"
|
|
854
899
|
}, {
|
|
855
900
|
default: () => {
|
|
856
901
|
var _a, _b;
|
package/dist/chart.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useChart
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-LU452YL3.mjs";
|
|
4
4
|
import {
|
|
5
5
|
chartProps
|
|
6
6
|
} from "./chunk-4Y625OEJ.mjs";
|
|
@@ -12,6 +12,7 @@ import {
|
|
|
12
12
|
import { createVNode as _createVNode, isVNode as _isVNode } from "vue";
|
|
13
13
|
import { defineComponent } from "vue";
|
|
14
14
|
import { MpText } from "@mekari/pixel3-text";
|
|
15
|
+
import { usePixelTheme } from "@mekari/pixel3-utils";
|
|
15
16
|
import { merge } from "lodash-es";
|
|
16
17
|
function _isSlot(s) {
|
|
17
18
|
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !_isVNode(s);
|
|
@@ -25,6 +26,9 @@ var MpChart = defineComponent({
|
|
|
25
26
|
slots,
|
|
26
27
|
emit
|
|
27
28
|
}) {
|
|
29
|
+
const {
|
|
30
|
+
isNextTheme
|
|
31
|
+
} = usePixelTheme();
|
|
28
32
|
const {
|
|
29
33
|
rootAttrs,
|
|
30
34
|
chartHeaderAttrs,
|
|
@@ -67,7 +71,7 @@ var MpChart = defineComponent({
|
|
|
67
71
|
})
|
|
68
72
|
]) : "", isShowTooltip && _createVNode("div", chartTooltipAttrs.value, [slots.tooltip ? slots.tooltip(tooltip.value.data) : _createVNode("div", tooltipWrapperAttrs.value, [_createVNode(MpText, {
|
|
69
73
|
"size": "label",
|
|
70
|
-
"color": "gray.600"
|
|
74
|
+
"color": isNextTheme.value ? "text.secondary" : "gray.600"
|
|
71
75
|
}, {
|
|
72
76
|
default: () => {
|
|
73
77
|
var _a, _b;
|
|
@@ -83,7 +87,7 @@ var MpChart = defineComponent({
|
|
|
83
87
|
}
|
|
84
88
|
})]), _createVNode(MpText, {
|
|
85
89
|
"size": "label-small",
|
|
86
|
-
"color": "gray.600"
|
|
90
|
+
"color": isNextTheme.value ? "text.secondary" : "gray.600"
|
|
87
91
|
}, {
|
|
88
92
|
default: () => {
|
|
89
93
|
var _a, _b;
|
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
|
|
5
5
|
// src/modules/chart.hooks.ts
|
|
6
6
|
import { computed, watch, ref, shallowRef, toRefs, onMounted, onUnmounted } from "vue";
|
|
7
|
-
import { getUniqueId } from "@mekari/pixel3-utils";
|
|
7
|
+
import { getUniqueId, usePixelTheme } from "@mekari/pixel3-utils";
|
|
8
8
|
import { chartSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
|
|
9
9
|
import { token } from "@mekari/pixel3-styled-system/tokens";
|
|
10
10
|
import { merge } from "lodash-es";
|
|
@@ -52,6 +52,11 @@ function useChart(props, emit) {
|
|
|
52
52
|
const chartContainerNode = ref();
|
|
53
53
|
const chartLegendNode = ref();
|
|
54
54
|
const chartCanvasNode = ref();
|
|
55
|
+
const {
|
|
56
|
+
isNextTheme,
|
|
57
|
+
isDark,
|
|
58
|
+
getComputedCSSVariableValue
|
|
59
|
+
} = usePixelTheme();
|
|
55
60
|
const getId = id.value || getUniqueId("", "chart").value;
|
|
56
61
|
const isHorizontalBarChart = computed(() => {
|
|
57
62
|
return type.value === "bar" && isHorizontal.value;
|
|
@@ -87,7 +92,10 @@ function useChart(props, emit) {
|
|
|
87
92
|
maintainAspectRatio: false,
|
|
88
93
|
responsive: true,
|
|
89
94
|
animation: true,
|
|
90
|
-
|
|
95
|
+
hover: {
|
|
96
|
+
mode: null
|
|
97
|
+
},
|
|
98
|
+
cutout: type.value === "doughnut" ? "65%" : 0,
|
|
91
99
|
...isHorizontalBarChart.value && {
|
|
92
100
|
indexAxis: "y"
|
|
93
101
|
},
|
|
@@ -114,7 +122,7 @@ function useChart(props, emit) {
|
|
|
114
122
|
},
|
|
115
123
|
datalabels: {
|
|
116
124
|
display: isShowDataLabels.value,
|
|
117
|
-
color: "#626B79",
|
|
125
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(token.var("colors.text.default")) : "#626B79",
|
|
118
126
|
clamp: true,
|
|
119
127
|
font: {
|
|
120
128
|
size: 10
|
|
@@ -129,6 +137,7 @@ function useChart(props, emit) {
|
|
|
129
137
|
},
|
|
130
138
|
elements: {
|
|
131
139
|
bar: {
|
|
140
|
+
hoverBackgroundColor: getListColors.value[1],
|
|
132
141
|
backgroundColor: getListColors.value[1],
|
|
133
142
|
borderRadius: "4",
|
|
134
143
|
...isStacked.value && {
|
|
@@ -136,12 +145,12 @@ function useChart(props, emit) {
|
|
|
136
145
|
top: !isHorizontal.value ? 2 : 0,
|
|
137
146
|
right: isHorizontal.value ? 2 : 0
|
|
138
147
|
},
|
|
139
|
-
borderColor: "#FFFFFF"
|
|
148
|
+
borderColor: isNextTheme.value ? getComputedCSSVariableValue(token.var("colors.border.inverse")) : "#FFFFFF"
|
|
140
149
|
}
|
|
141
150
|
},
|
|
142
151
|
line: {
|
|
143
|
-
borderColor: isArea.value ? "#FFFFFF" : getListColors.value[1],
|
|
144
|
-
borderWidth: 2,
|
|
152
|
+
borderColor: isArea.value ? isNextTheme.value ? getComputedCSSVariableValue(token.var("colors.border.inverse")) : "#FFFFFF" : getListColors.value[1],
|
|
153
|
+
borderWidth: isArea.value ? isNextTheme.value ? 4 : 2 : 2,
|
|
145
154
|
tension: isArea.value ? 0.4 : 0
|
|
146
155
|
},
|
|
147
156
|
point: {
|
|
@@ -152,8 +161,9 @@ function useChart(props, emit) {
|
|
|
152
161
|
},
|
|
153
162
|
arc: {
|
|
154
163
|
backgroundColor: getListColors.value[1],
|
|
155
|
-
borderColor: "#FFFFFF",
|
|
156
|
-
hoverBorderColor: "#FFFFFF"
|
|
164
|
+
borderColor: isNextTheme.value ? getComputedCSSVariableValue(token.var("colors.border.inverse")) : "#FFFFFF",
|
|
165
|
+
hoverBorderColor: isNextTheme.value ? getComputedCSSVariableValue(token.var("colors.border.inverse")) : "#FFFFFF",
|
|
166
|
+
borderWidth: isNextTheme.value ? 4 : 2
|
|
157
167
|
}
|
|
158
168
|
},
|
|
159
169
|
scales: {
|
|
@@ -165,11 +175,12 @@ function useChart(props, emit) {
|
|
|
165
175
|
grid: {
|
|
166
176
|
display: false,
|
|
167
177
|
drawOnChartArea: false,
|
|
168
|
-
drawTicks: false
|
|
178
|
+
drawTicks: false,
|
|
179
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(token.var("colors.border.default")) : "#D0D6DD"
|
|
169
180
|
},
|
|
170
181
|
ticks: {
|
|
171
182
|
display: !isCircularChart.value && type.value !== "radar",
|
|
172
|
-
color: "#626B79"
|
|
183
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(token.var("colors.text.secondary")) : "#626B79"
|
|
173
184
|
}
|
|
174
185
|
},
|
|
175
186
|
y: {
|
|
@@ -181,12 +192,12 @@ function useChart(props, emit) {
|
|
|
181
192
|
display: !isHorizontal.value,
|
|
182
193
|
drawOnChartArea: !isCircularChart.value && type.value !== "radar",
|
|
183
194
|
drawTicks: false,
|
|
184
|
-
color: "#D0D6DD"
|
|
195
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(token.var("colors.border.default")) : "#D0D6DD"
|
|
185
196
|
},
|
|
186
197
|
ticks: {
|
|
187
198
|
display: !isCircularChart.value && type.value !== "radar",
|
|
188
199
|
beginAtZero: true,
|
|
189
|
-
color: "#626B79",
|
|
200
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(token.var("colors.text.secondary")) : "#626B79",
|
|
190
201
|
padding: 8
|
|
191
202
|
}
|
|
192
203
|
},
|
|
@@ -194,16 +205,17 @@ function useChart(props, emit) {
|
|
|
194
205
|
r: {
|
|
195
206
|
angleLines: {
|
|
196
207
|
display: true,
|
|
197
|
-
color: "#D0D6DD"
|
|
208
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(token.var("colors.border.default")) : "#D0D6DD"
|
|
198
209
|
},
|
|
199
210
|
grid: {
|
|
200
|
-
color: "#D0D6DD"
|
|
211
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(token.var("colors.border.default")) : "#D0D6DD"
|
|
201
212
|
},
|
|
202
213
|
ticks: {
|
|
203
|
-
|
|
214
|
+
backdropColor: "transparent",
|
|
215
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(token.var("colors.text.disabled")) : "#626B79"
|
|
204
216
|
},
|
|
205
217
|
pointLabels: {
|
|
206
|
-
color: "#626B79"
|
|
218
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(token.var("colors.text.secondary")) : "#626B79"
|
|
207
219
|
}
|
|
208
220
|
}
|
|
209
221
|
}
|
|
@@ -240,37 +252,62 @@ function useChart(props, emit) {
|
|
|
240
252
|
datasets.forEach((item, index) => {
|
|
241
253
|
item.backgroundColor = item.backgroundColor || handleColorPattern(index, isFading);
|
|
242
254
|
item.borderColor = item.borderColor || handleColorPattern(index);
|
|
243
|
-
item.pointBackgroundColor = item.pointBackgroundColor ||
|
|
255
|
+
item.pointBackgroundColor = item.pointBackgroundColor || item.borderColor || handleColorPattern(index);
|
|
244
256
|
});
|
|
245
257
|
}
|
|
246
258
|
return datasets;
|
|
247
259
|
});
|
|
248
260
|
const getListColors = computed(() => {
|
|
261
|
+
const newToken = {
|
|
262
|
+
1: getComputedCSSVariableValue(token.var("colors.chart.cat01.bold")),
|
|
263
|
+
2: getComputedCSSVariableValue(token.var("colors.chart.cat01")),
|
|
264
|
+
3: getComputedCSSVariableValue(token.var("colors.chart.cat02.bold")),
|
|
265
|
+
4: getComputedCSSVariableValue(token.var("colors.chart.cat02")),
|
|
266
|
+
5: getComputedCSSVariableValue(token.var("colors.chart.cat03.bold")),
|
|
267
|
+
6: getComputedCSSVariableValue(token.var("colors.chart.cat03")),
|
|
268
|
+
7: getComputedCSSVariableValue(token.var("colors.chart.cat04.bold")),
|
|
269
|
+
8: getComputedCSSVariableValue(token.var("colors.chart.cat04")),
|
|
270
|
+
9: getComputedCSSVariableValue(token.var("colors.chart.cat05.bold")),
|
|
271
|
+
10: getComputedCSSVariableValue(token.var("colors.chart.cat05")),
|
|
272
|
+
11: getComputedCSSVariableValue(token.var("colors.chart.cat06.bold")),
|
|
273
|
+
12: getComputedCSSVariableValue(token.var("colors.chart.cat06")),
|
|
274
|
+
13: getComputedCSSVariableValue(token.var("colors.chart.cat07.bold")),
|
|
275
|
+
14: getComputedCSSVariableValue(token.var("colors.chart.cat07")),
|
|
276
|
+
15: getComputedCSSVariableValue(token.var("colors.chart.cat08.bold")),
|
|
277
|
+
16: getComputedCSSVariableValue(token.var("colors.chart.cat08"))
|
|
278
|
+
};
|
|
279
|
+
if (isNextTheme.value) {
|
|
280
|
+
if (isDark.value) {
|
|
281
|
+
return newToken;
|
|
282
|
+
} else {
|
|
283
|
+
return newToken;
|
|
284
|
+
}
|
|
285
|
+
}
|
|
249
286
|
return {
|
|
250
|
-
1: token("colors.sky.400"),
|
|
251
|
-
2: token("colors.sky.100"),
|
|
252
|
-
3: token("colors.teal.400"),
|
|
253
|
-
4: token("colors.teal.100"),
|
|
254
|
-
5: token("colors.violet.400"),
|
|
255
|
-
6: token("colors.violet.100"),
|
|
256
|
-
7: token("colors.amber.400"),
|
|
257
|
-
8: token("colors.amber.100"),
|
|
258
|
-
9: token("colors.rose.400"),
|
|
259
|
-
10: token("colors.rose.100"),
|
|
260
|
-
11: token("colors.stone.400"),
|
|
261
|
-
12: token("colors.stone.100"),
|
|
262
|
-
13: token("colors.lime.400"),
|
|
263
|
-
14: token("colors.lime.100"),
|
|
264
|
-
15: token("colors.pink.400"),
|
|
265
|
-
16: token("colors.pink.100"),
|
|
266
|
-
17: token("colors.apricot.400"),
|
|
267
|
-
18: token("colors.apricot.100"),
|
|
268
|
-
19: token("colors.aqua.400"),
|
|
269
|
-
20: token("colors.aqua.100"),
|
|
270
|
-
21: token("colors.leaf.400"),
|
|
271
|
-
22: token("colors.leaf.100"),
|
|
272
|
-
23: token("colors.fuchsia.400"),
|
|
273
|
-
24: token("colors.fuchsia.100")
|
|
287
|
+
1: getComputedCSSVariableValue(token.var("colors.sky.400")),
|
|
288
|
+
2: getComputedCSSVariableValue(token.var("colors.sky.100")),
|
|
289
|
+
3: getComputedCSSVariableValue(token.var("colors.teal.400")),
|
|
290
|
+
4: getComputedCSSVariableValue(token.var("colors.teal.100")),
|
|
291
|
+
5: getComputedCSSVariableValue(token.var("colors.violet.400")),
|
|
292
|
+
6: getComputedCSSVariableValue(token.var("colors.violet.100")),
|
|
293
|
+
7: getComputedCSSVariableValue(token.var("colors.amber.400")),
|
|
294
|
+
8: getComputedCSSVariableValue(token.var("colors.amber.100")),
|
|
295
|
+
9: getComputedCSSVariableValue(token.var("colors.rose.400")),
|
|
296
|
+
10: getComputedCSSVariableValue(token.var("colors.rose.100")),
|
|
297
|
+
11: getComputedCSSVariableValue(token.var("colors.stone.400")),
|
|
298
|
+
12: getComputedCSSVariableValue(token.var("colors.stone.100")),
|
|
299
|
+
13: getComputedCSSVariableValue(token.var("colors.lime.400")),
|
|
300
|
+
14: getComputedCSSVariableValue(token.var("colors.lime.100")),
|
|
301
|
+
15: getComputedCSSVariableValue(token.var("colors.pink.400")),
|
|
302
|
+
16: getComputedCSSVariableValue(token.var("colors.pink.100")),
|
|
303
|
+
17: getComputedCSSVariableValue(token.var("colors.apricot.400")),
|
|
304
|
+
18: getComputedCSSVariableValue(token.var("colors.apricot.100")),
|
|
305
|
+
19: getComputedCSSVariableValue(token.var("colors.aqua.400")),
|
|
306
|
+
20: getComputedCSSVariableValue(token.var("colors.aqua.100")),
|
|
307
|
+
21: getComputedCSSVariableValue(token.var("colors.leaf.400")),
|
|
308
|
+
22: getComputedCSSVariableValue(token.var("colors.leaf.100")),
|
|
309
|
+
23: getComputedCSSVariableValue(token.var("colors.fuchsia.400")),
|
|
310
|
+
24: getComputedCSSVariableValue(token.var("colors.fuchsia.100"))
|
|
274
311
|
};
|
|
275
312
|
});
|
|
276
313
|
const rootAttrs = computed(() => {
|
|
@@ -384,7 +421,7 @@ function useChart(props, emit) {
|
|
|
384
421
|
return {
|
|
385
422
|
class: chartSlotRecipe().tooltipBox,
|
|
386
423
|
style: {
|
|
387
|
-
backgroundColor: type.value === "line" ? (_b = (_a = tooltip.value.data) == null ? void 0 : _a.labelColors[0]) == null ? void 0 : _b.borderColor : (_d = (_c = tooltip.value.data) == null ? void 0 : _c.labelColors[0]) == null ? void 0 : _d.backgroundColor
|
|
424
|
+
backgroundColor: type.value === "line" && !isArea.value ? (_b = (_a = tooltip.value.data) == null ? void 0 : _a.labelColors[0]) == null ? void 0 : _b.borderColor : (_d = (_c = tooltip.value.data) == null ? void 0 : _c.labelColors[0]) == null ? void 0 : _d.backgroundColor
|
|
388
425
|
}
|
|
389
426
|
};
|
|
390
427
|
});
|
|
@@ -589,6 +626,10 @@ function useChart(props, emit) {
|
|
|
589
626
|
}
|
|
590
627
|
}, {
|
|
591
628
|
deep: true
|
|
629
|
+
}), watch(() => isDark.value, (newVal, oldVal) => {
|
|
630
|
+
if (newVal !== oldVal) {
|
|
631
|
+
updateChart();
|
|
632
|
+
}
|
|
592
633
|
});
|
|
593
634
|
onMounted(() => {
|
|
594
635
|
createChart();
|
package/dist/index.js
CHANGED
|
@@ -39,6 +39,7 @@ module.exports = __toCommonJS(src_exports);
|
|
|
39
39
|
var import_vue2 = require("vue");
|
|
40
40
|
var import_vue3 = require("vue");
|
|
41
41
|
var import_pixel3_text = require("@mekari/pixel3-text");
|
|
42
|
+
var import_pixel3_utils2 = require("@mekari/pixel3-utils");
|
|
42
43
|
|
|
43
44
|
// src/modules/chart.props.ts
|
|
44
45
|
var chartProps = {
|
|
@@ -213,6 +214,11 @@ function useChart(props, emit) {
|
|
|
213
214
|
const chartContainerNode = (0, import_vue.ref)();
|
|
214
215
|
const chartLegendNode = (0, import_vue.ref)();
|
|
215
216
|
const chartCanvasNode = (0, import_vue.ref)();
|
|
217
|
+
const {
|
|
218
|
+
isNextTheme,
|
|
219
|
+
isDark,
|
|
220
|
+
getComputedCSSVariableValue
|
|
221
|
+
} = (0, import_pixel3_utils.usePixelTheme)();
|
|
216
222
|
const getId = id.value || (0, import_pixel3_utils.getUniqueId)("", "chart").value;
|
|
217
223
|
const isHorizontalBarChart = (0, import_vue.computed)(() => {
|
|
218
224
|
return type.value === "bar" && isHorizontal.value;
|
|
@@ -248,7 +254,10 @@ function useChart(props, emit) {
|
|
|
248
254
|
maintainAspectRatio: false,
|
|
249
255
|
responsive: true,
|
|
250
256
|
animation: true,
|
|
251
|
-
|
|
257
|
+
hover: {
|
|
258
|
+
mode: null
|
|
259
|
+
},
|
|
260
|
+
cutout: type.value === "doughnut" ? "65%" : 0,
|
|
252
261
|
...isHorizontalBarChart.value && {
|
|
253
262
|
indexAxis: "y"
|
|
254
263
|
},
|
|
@@ -275,7 +284,7 @@ function useChart(props, emit) {
|
|
|
275
284
|
},
|
|
276
285
|
datalabels: {
|
|
277
286
|
display: isShowDataLabels.value,
|
|
278
|
-
color: "#626B79",
|
|
287
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.default")) : "#626B79",
|
|
279
288
|
clamp: true,
|
|
280
289
|
font: {
|
|
281
290
|
size: 10
|
|
@@ -290,6 +299,7 @@ function useChart(props, emit) {
|
|
|
290
299
|
},
|
|
291
300
|
elements: {
|
|
292
301
|
bar: {
|
|
302
|
+
hoverBackgroundColor: getListColors.value[1],
|
|
293
303
|
backgroundColor: getListColors.value[1],
|
|
294
304
|
borderRadius: "4",
|
|
295
305
|
...isStacked.value && {
|
|
@@ -297,12 +307,12 @@ function useChart(props, emit) {
|
|
|
297
307
|
top: !isHorizontal.value ? 2 : 0,
|
|
298
308
|
right: isHorizontal.value ? 2 : 0
|
|
299
309
|
},
|
|
300
|
-
borderColor: "#FFFFFF"
|
|
310
|
+
borderColor: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.inverse")) : "#FFFFFF"
|
|
301
311
|
}
|
|
302
312
|
},
|
|
303
313
|
line: {
|
|
304
|
-
borderColor: isArea.value ? "#FFFFFF" : getListColors.value[1],
|
|
305
|
-
borderWidth: 2,
|
|
314
|
+
borderColor: isArea.value ? isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.inverse")) : "#FFFFFF" : getListColors.value[1],
|
|
315
|
+
borderWidth: isArea.value ? isNextTheme.value ? 4 : 2 : 2,
|
|
306
316
|
tension: isArea.value ? 0.4 : 0
|
|
307
317
|
},
|
|
308
318
|
point: {
|
|
@@ -313,8 +323,9 @@ function useChart(props, emit) {
|
|
|
313
323
|
},
|
|
314
324
|
arc: {
|
|
315
325
|
backgroundColor: getListColors.value[1],
|
|
316
|
-
borderColor: "#FFFFFF",
|
|
317
|
-
hoverBorderColor: "#FFFFFF"
|
|
326
|
+
borderColor: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.inverse")) : "#FFFFFF",
|
|
327
|
+
hoverBorderColor: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.inverse")) : "#FFFFFF",
|
|
328
|
+
borderWidth: isNextTheme.value ? 4 : 2
|
|
318
329
|
}
|
|
319
330
|
},
|
|
320
331
|
scales: {
|
|
@@ -326,11 +337,12 @@ function useChart(props, emit) {
|
|
|
326
337
|
grid: {
|
|
327
338
|
display: false,
|
|
328
339
|
drawOnChartArea: false,
|
|
329
|
-
drawTicks: false
|
|
340
|
+
drawTicks: false,
|
|
341
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.default")) : "#D0D6DD"
|
|
330
342
|
},
|
|
331
343
|
ticks: {
|
|
332
344
|
display: !isCircularChart.value && type.value !== "radar",
|
|
333
|
-
color: "#626B79"
|
|
345
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.secondary")) : "#626B79"
|
|
334
346
|
}
|
|
335
347
|
},
|
|
336
348
|
y: {
|
|
@@ -342,12 +354,12 @@ function useChart(props, emit) {
|
|
|
342
354
|
display: !isHorizontal.value,
|
|
343
355
|
drawOnChartArea: !isCircularChart.value && type.value !== "radar",
|
|
344
356
|
drawTicks: false,
|
|
345
|
-
color: "#D0D6DD"
|
|
357
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.default")) : "#D0D6DD"
|
|
346
358
|
},
|
|
347
359
|
ticks: {
|
|
348
360
|
display: !isCircularChart.value && type.value !== "radar",
|
|
349
361
|
beginAtZero: true,
|
|
350
|
-
color: "#626B79",
|
|
362
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.secondary")) : "#626B79",
|
|
351
363
|
padding: 8
|
|
352
364
|
}
|
|
353
365
|
},
|
|
@@ -355,16 +367,17 @@ function useChart(props, emit) {
|
|
|
355
367
|
r: {
|
|
356
368
|
angleLines: {
|
|
357
369
|
display: true,
|
|
358
|
-
color: "#D0D6DD"
|
|
370
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.default")) : "#D0D6DD"
|
|
359
371
|
},
|
|
360
372
|
grid: {
|
|
361
|
-
color: "#D0D6DD"
|
|
373
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.default")) : "#D0D6DD"
|
|
362
374
|
},
|
|
363
375
|
ticks: {
|
|
364
|
-
|
|
376
|
+
backdropColor: "transparent",
|
|
377
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.disabled")) : "#626B79"
|
|
365
378
|
},
|
|
366
379
|
pointLabels: {
|
|
367
|
-
color: "#626B79"
|
|
380
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.secondary")) : "#626B79"
|
|
368
381
|
}
|
|
369
382
|
}
|
|
370
383
|
}
|
|
@@ -401,37 +414,62 @@ function useChart(props, emit) {
|
|
|
401
414
|
datasets.forEach((item, index) => {
|
|
402
415
|
item.backgroundColor = item.backgroundColor || handleColorPattern(index, isFading);
|
|
403
416
|
item.borderColor = item.borderColor || handleColorPattern(index);
|
|
404
|
-
item.pointBackgroundColor = item.pointBackgroundColor ||
|
|
417
|
+
item.pointBackgroundColor = item.pointBackgroundColor || item.borderColor || handleColorPattern(index);
|
|
405
418
|
});
|
|
406
419
|
}
|
|
407
420
|
return datasets;
|
|
408
421
|
});
|
|
409
422
|
const getListColors = (0, import_vue.computed)(() => {
|
|
423
|
+
const newToken = {
|
|
424
|
+
1: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat01.bold")),
|
|
425
|
+
2: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat01")),
|
|
426
|
+
3: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat02.bold")),
|
|
427
|
+
4: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat02")),
|
|
428
|
+
5: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat03.bold")),
|
|
429
|
+
6: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat03")),
|
|
430
|
+
7: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat04.bold")),
|
|
431
|
+
8: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat04")),
|
|
432
|
+
9: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat05.bold")),
|
|
433
|
+
10: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat05")),
|
|
434
|
+
11: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat06.bold")),
|
|
435
|
+
12: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat06")),
|
|
436
|
+
13: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat07.bold")),
|
|
437
|
+
14: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat07")),
|
|
438
|
+
15: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat08.bold")),
|
|
439
|
+
16: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat08"))
|
|
440
|
+
};
|
|
441
|
+
if (isNextTheme.value) {
|
|
442
|
+
if (isDark.value) {
|
|
443
|
+
return newToken;
|
|
444
|
+
} else {
|
|
445
|
+
return newToken;
|
|
446
|
+
}
|
|
447
|
+
}
|
|
410
448
|
return {
|
|
411
|
-
1: (
|
|
412
|
-
2: (
|
|
413
|
-
3: (
|
|
414
|
-
4: (
|
|
415
|
-
5: (
|
|
416
|
-
6: (
|
|
417
|
-
7: (
|
|
418
|
-
8: (
|
|
419
|
-
9: (
|
|
420
|
-
10: (
|
|
421
|
-
11: (
|
|
422
|
-
12: (
|
|
423
|
-
13: (
|
|
424
|
-
14: (
|
|
425
|
-
15: (
|
|
426
|
-
16: (
|
|
427
|
-
17: (
|
|
428
|
-
18: (
|
|
429
|
-
19: (
|
|
430
|
-
20: (
|
|
431
|
-
21: (
|
|
432
|
-
22: (
|
|
433
|
-
23: (
|
|
434
|
-
24: (
|
|
449
|
+
1: getComputedCSSVariableValue(import_tokens.token.var("colors.sky.400")),
|
|
450
|
+
2: getComputedCSSVariableValue(import_tokens.token.var("colors.sky.100")),
|
|
451
|
+
3: getComputedCSSVariableValue(import_tokens.token.var("colors.teal.400")),
|
|
452
|
+
4: getComputedCSSVariableValue(import_tokens.token.var("colors.teal.100")),
|
|
453
|
+
5: getComputedCSSVariableValue(import_tokens.token.var("colors.violet.400")),
|
|
454
|
+
6: getComputedCSSVariableValue(import_tokens.token.var("colors.violet.100")),
|
|
455
|
+
7: getComputedCSSVariableValue(import_tokens.token.var("colors.amber.400")),
|
|
456
|
+
8: getComputedCSSVariableValue(import_tokens.token.var("colors.amber.100")),
|
|
457
|
+
9: getComputedCSSVariableValue(import_tokens.token.var("colors.rose.400")),
|
|
458
|
+
10: getComputedCSSVariableValue(import_tokens.token.var("colors.rose.100")),
|
|
459
|
+
11: getComputedCSSVariableValue(import_tokens.token.var("colors.stone.400")),
|
|
460
|
+
12: getComputedCSSVariableValue(import_tokens.token.var("colors.stone.100")),
|
|
461
|
+
13: getComputedCSSVariableValue(import_tokens.token.var("colors.lime.400")),
|
|
462
|
+
14: getComputedCSSVariableValue(import_tokens.token.var("colors.lime.100")),
|
|
463
|
+
15: getComputedCSSVariableValue(import_tokens.token.var("colors.pink.400")),
|
|
464
|
+
16: getComputedCSSVariableValue(import_tokens.token.var("colors.pink.100")),
|
|
465
|
+
17: getComputedCSSVariableValue(import_tokens.token.var("colors.apricot.400")),
|
|
466
|
+
18: getComputedCSSVariableValue(import_tokens.token.var("colors.apricot.100")),
|
|
467
|
+
19: getComputedCSSVariableValue(import_tokens.token.var("colors.aqua.400")),
|
|
468
|
+
20: getComputedCSSVariableValue(import_tokens.token.var("colors.aqua.100")),
|
|
469
|
+
21: getComputedCSSVariableValue(import_tokens.token.var("colors.leaf.400")),
|
|
470
|
+
22: getComputedCSSVariableValue(import_tokens.token.var("colors.leaf.100")),
|
|
471
|
+
23: getComputedCSSVariableValue(import_tokens.token.var("colors.fuchsia.400")),
|
|
472
|
+
24: getComputedCSSVariableValue(import_tokens.token.var("colors.fuchsia.100"))
|
|
435
473
|
};
|
|
436
474
|
});
|
|
437
475
|
const rootAttrs = (0, import_vue.computed)(() => {
|
|
@@ -545,7 +583,7 @@ function useChart(props, emit) {
|
|
|
545
583
|
return {
|
|
546
584
|
class: (0, import_recipes.chartSlotRecipe)().tooltipBox,
|
|
547
585
|
style: {
|
|
548
|
-
backgroundColor: type.value === "line" ? (_b = (_a = tooltip.value.data) == null ? void 0 : _a.labelColors[0]) == null ? void 0 : _b.borderColor : (_d = (_c = tooltip.value.data) == null ? void 0 : _c.labelColors[0]) == null ? void 0 : _d.backgroundColor
|
|
586
|
+
backgroundColor: type.value === "line" && !isArea.value ? (_b = (_a = tooltip.value.data) == null ? void 0 : _a.labelColors[0]) == null ? void 0 : _b.borderColor : (_d = (_c = tooltip.value.data) == null ? void 0 : _c.labelColors[0]) == null ? void 0 : _d.backgroundColor
|
|
549
587
|
}
|
|
550
588
|
};
|
|
551
589
|
});
|
|
@@ -750,6 +788,10 @@ function useChart(props, emit) {
|
|
|
750
788
|
}
|
|
751
789
|
}, {
|
|
752
790
|
deep: true
|
|
791
|
+
}), (0, import_vue.watch)(() => isDark.value, (newVal, oldVal) => {
|
|
792
|
+
if (newVal !== oldVal) {
|
|
793
|
+
updateChart();
|
|
794
|
+
}
|
|
753
795
|
});
|
|
754
796
|
(0, import_vue.onMounted)(() => {
|
|
755
797
|
createChart();
|
|
@@ -794,6 +836,9 @@ var MpChart = (0, import_vue3.defineComponent)({
|
|
|
794
836
|
slots,
|
|
795
837
|
emit
|
|
796
838
|
}) {
|
|
839
|
+
const {
|
|
840
|
+
isNextTheme
|
|
841
|
+
} = (0, import_pixel3_utils2.usePixelTheme)();
|
|
797
842
|
const {
|
|
798
843
|
rootAttrs,
|
|
799
844
|
chartHeaderAttrs,
|
|
@@ -836,7 +881,7 @@ var MpChart = (0, import_vue3.defineComponent)({
|
|
|
836
881
|
})
|
|
837
882
|
]) : "", isShowTooltip && (0, import_vue2.createVNode)("div", chartTooltipAttrs.value, [slots.tooltip ? slots.tooltip(tooltip.value.data) : (0, import_vue2.createVNode)("div", tooltipWrapperAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_text.MpText, {
|
|
838
883
|
"size": "label",
|
|
839
|
-
"color": "gray.600"
|
|
884
|
+
"color": isNextTheme.value ? "text.secondary" : "gray.600"
|
|
840
885
|
}, {
|
|
841
886
|
default: () => {
|
|
842
887
|
var _a, _b;
|
|
@@ -852,7 +897,7 @@ var MpChart = (0, import_vue3.defineComponent)({
|
|
|
852
897
|
}
|
|
853
898
|
})]), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
|
|
854
899
|
"size": "label-small",
|
|
855
|
-
"color": "gray.600"
|
|
900
|
+
"color": isNextTheme.value ? "text.secondary" : "gray.600"
|
|
856
901
|
}, {
|
|
857
902
|
default: () => {
|
|
858
903
|
var _a, _b;
|
package/dist/index.mjs
CHANGED
package/dist/metafile-cjs.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/modules/chart.props.ts":{"bytes":2837,"imports":[{"path":"vue","kind":"import-statement","external":true}],"format":"esm"},"src/modules/chart.hooks.ts":{"bytes":
|
|
1
|
+
{"inputs":{"src/modules/chart.props.ts":{"bytes":2837,"imports":[{"path":"vue","kind":"import-statement","external":true}],"format":"esm"},"src/modules/chart.hooks.ts":{"bytes":24066,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"lodash-es","kind":"import-statement","external":true},{"path":"color","kind":"import-statement","external":true},{"path":"chart.js/auto","kind":"import-statement","external":true},{"path":"chartjs-plugin-datalabels","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/chart.tsx":{"bytes":3337,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"src/modules/chart.props.ts","kind":"import-statement","original":"./modules/chart.props"},{"path":"src/modules/chart.hooks.ts","kind":"import-statement","original":"./modules/chart.hooks"},{"path":"lodash-es","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":119,"imports":[{"path":"src/chart.tsx","kind":"import-statement","original":"./chart"}],"format":"esm"}},"outputs":{"dist/chart.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true},{"path":"lodash-es","kind":"require-call","external":true},{"path":"color","kind":"require-call","external":true},{"path":"chart.js/auto","kind":"require-call","external":true},{"path":"chartjs-plugin-datalabels","kind":"require-call","external":true},{"path":"lodash-es","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/chart.tsx","inputs":{"src/chart.tsx":{"bytesInOutput":4090},"src/modules/chart.props.ts":{"bytesInOutput":1785},"src/modules/chart.hooks.ts":{"bytesInOutput":25105}},"bytes":32665},"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true},{"path":"lodash-es","kind":"require-call","external":true},{"path":"color","kind":"require-call","external":true},{"path":"chart.js/auto","kind":"require-call","external":true},{"path":"chartjs-plugin-datalabels","kind":"require-call","external":true},{"path":"lodash-es","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":119},"src/chart.tsx":{"bytesInOutput":3965},"src/modules/chart.props.ts":{"bytesInOutput":1785},"src/modules/chart.hooks.ts":{"bytesInOutput":25105}},"bytes":32676},"dist/modules/chart.hooks.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true},{"path":"lodash-es","kind":"require-call","external":true},{"path":"color","kind":"require-call","external":true},{"path":"chart.js/auto","kind":"require-call","external":true},{"path":"chartjs-plugin-datalabels","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/chart.hooks.ts","inputs":{"src/modules/chart.hooks.ts":{"bytesInOutput":25250}},"bytes":26869},"dist/modules/chart.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/chart.props.ts","inputs":{"src/modules/chart.props.ts":{"bytesInOutput":2030}},"bytes":2977}}}
|
package/dist/metafile-esm.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/modules/chart.props.ts":{"bytes":2837,"imports":[{"path":"vue","kind":"import-statement","external":true}],"format":"esm"},"src/modules/chart.hooks.ts":{"bytes":
|
|
1
|
+
{"inputs":{"src/modules/chart.props.ts":{"bytes":2837,"imports":[{"path":"vue","kind":"import-statement","external":true}],"format":"esm"},"src/modules/chart.hooks.ts":{"bytes":24066,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"lodash-es","kind":"import-statement","external":true},{"path":"color","kind":"import-statement","external":true},{"path":"chart.js/auto","kind":"import-statement","external":true},{"path":"chartjs-plugin-datalabels","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/chart.tsx":{"bytes":3337,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"src/modules/chart.props.ts","kind":"import-statement","original":"./modules/chart.props"},{"path":"src/modules/chart.hooks.ts","kind":"import-statement","original":"./modules/chart.hooks"},{"path":"lodash-es","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":119,"imports":[{"path":"src/chart.tsx","kind":"import-statement","original":"./chart"}],"format":"esm"}},"outputs":{"dist/chart.mjs":{"imports":[{"path":"dist/chunk-CXRIHJSJ.mjs","kind":"import-statement"},{"path":"dist/chunk-LU452YL3.mjs","kind":"import-statement"},{"path":"dist/chunk-4Y625OEJ.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpChart"],"entryPoint":"src/chart.tsx","inputs":{},"bytes":165},"dist/index.mjs":{"imports":[{"path":"dist/chunk-CXRIHJSJ.mjs","kind":"import-statement"},{"path":"dist/chunk-LU452YL3.mjs","kind":"import-statement"},{"path":"dist/chunk-4Y625OEJ.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpChart"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":165},"dist/chunk-CXRIHJSJ.mjs":{"imports":[{"path":"dist/chunk-LU452YL3.mjs","kind":"import-statement"},{"path":"dist/chunk-4Y625OEJ.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"lodash-es","kind":"import-statement","external":true}],"exports":["MpChart"],"inputs":{"src/chart.tsx":{"bytesInOutput":3499}},"bytes":3693},"dist/modules/chart.hooks.mjs":{"imports":[{"path":"dist/chunk-LU452YL3.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["useChart"],"entryPoint":"src/modules/chart.hooks.ts","inputs":{},"bytes":107},"dist/chunk-LU452YL3.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"lodash-es","kind":"import-statement","external":true},{"path":"color","kind":"import-statement","external":true},{"path":"chart.js/auto","kind":"import-statement","external":true},{"path":"chartjs-plugin-datalabels","kind":"import-statement","external":true}],"exports":["useChart"],"inputs":{"src/modules/chart.hooks.ts":{"bytesInOutput":23322}},"bytes":23426},"dist/modules/chart.props.mjs":{"imports":[{"path":"dist/chunk-4Y625OEJ.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["chartEmit","chartProps"],"entryPoint":"src/modules/chart.props.ts","inputs":{},"bytes":137},"dist/chunk-4Y625OEJ.mjs":{"imports":[],"exports":["chartEmit","chartProps"],"inputs":{"src/modules/chart.props.ts":{"bytesInOutput":1851}},"bytes":1920},"dist/chunk-QZ7VFGWC.mjs":{"imports":[],"exports":["__name"],"inputs":{},"bytes":151}}}
|
|
@@ -83,6 +83,11 @@ function useChart(props, emit) {
|
|
|
83
83
|
const chartContainerNode = (0, import_vue.ref)();
|
|
84
84
|
const chartLegendNode = (0, import_vue.ref)();
|
|
85
85
|
const chartCanvasNode = (0, import_vue.ref)();
|
|
86
|
+
const {
|
|
87
|
+
isNextTheme,
|
|
88
|
+
isDark,
|
|
89
|
+
getComputedCSSVariableValue
|
|
90
|
+
} = (0, import_pixel3_utils.usePixelTheme)();
|
|
86
91
|
const getId = id.value || (0, import_pixel3_utils.getUniqueId)("", "chart").value;
|
|
87
92
|
const isHorizontalBarChart = (0, import_vue.computed)(() => {
|
|
88
93
|
return type.value === "bar" && isHorizontal.value;
|
|
@@ -118,7 +123,10 @@ function useChart(props, emit) {
|
|
|
118
123
|
maintainAspectRatio: false,
|
|
119
124
|
responsive: true,
|
|
120
125
|
animation: true,
|
|
121
|
-
|
|
126
|
+
hover: {
|
|
127
|
+
mode: null
|
|
128
|
+
},
|
|
129
|
+
cutout: type.value === "doughnut" ? "65%" : 0,
|
|
122
130
|
...isHorizontalBarChart.value && {
|
|
123
131
|
indexAxis: "y"
|
|
124
132
|
},
|
|
@@ -145,7 +153,7 @@ function useChart(props, emit) {
|
|
|
145
153
|
},
|
|
146
154
|
datalabels: {
|
|
147
155
|
display: isShowDataLabels.value,
|
|
148
|
-
color: "#626B79",
|
|
156
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.default")) : "#626B79",
|
|
149
157
|
clamp: true,
|
|
150
158
|
font: {
|
|
151
159
|
size: 10
|
|
@@ -160,6 +168,7 @@ function useChart(props, emit) {
|
|
|
160
168
|
},
|
|
161
169
|
elements: {
|
|
162
170
|
bar: {
|
|
171
|
+
hoverBackgroundColor: getListColors.value[1],
|
|
163
172
|
backgroundColor: getListColors.value[1],
|
|
164
173
|
borderRadius: "4",
|
|
165
174
|
...isStacked.value && {
|
|
@@ -167,12 +176,12 @@ function useChart(props, emit) {
|
|
|
167
176
|
top: !isHorizontal.value ? 2 : 0,
|
|
168
177
|
right: isHorizontal.value ? 2 : 0
|
|
169
178
|
},
|
|
170
|
-
borderColor: "#FFFFFF"
|
|
179
|
+
borderColor: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.inverse")) : "#FFFFFF"
|
|
171
180
|
}
|
|
172
181
|
},
|
|
173
182
|
line: {
|
|
174
|
-
borderColor: isArea.value ? "#FFFFFF" : getListColors.value[1],
|
|
175
|
-
borderWidth: 2,
|
|
183
|
+
borderColor: isArea.value ? isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.inverse")) : "#FFFFFF" : getListColors.value[1],
|
|
184
|
+
borderWidth: isArea.value ? isNextTheme.value ? 4 : 2 : 2,
|
|
176
185
|
tension: isArea.value ? 0.4 : 0
|
|
177
186
|
},
|
|
178
187
|
point: {
|
|
@@ -183,8 +192,9 @@ function useChart(props, emit) {
|
|
|
183
192
|
},
|
|
184
193
|
arc: {
|
|
185
194
|
backgroundColor: getListColors.value[1],
|
|
186
|
-
borderColor: "#FFFFFF",
|
|
187
|
-
hoverBorderColor: "#FFFFFF"
|
|
195
|
+
borderColor: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.inverse")) : "#FFFFFF",
|
|
196
|
+
hoverBorderColor: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.inverse")) : "#FFFFFF",
|
|
197
|
+
borderWidth: isNextTheme.value ? 4 : 2
|
|
188
198
|
}
|
|
189
199
|
},
|
|
190
200
|
scales: {
|
|
@@ -196,11 +206,12 @@ function useChart(props, emit) {
|
|
|
196
206
|
grid: {
|
|
197
207
|
display: false,
|
|
198
208
|
drawOnChartArea: false,
|
|
199
|
-
drawTicks: false
|
|
209
|
+
drawTicks: false,
|
|
210
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.default")) : "#D0D6DD"
|
|
200
211
|
},
|
|
201
212
|
ticks: {
|
|
202
213
|
display: !isCircularChart.value && type.value !== "radar",
|
|
203
|
-
color: "#626B79"
|
|
214
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.secondary")) : "#626B79"
|
|
204
215
|
}
|
|
205
216
|
},
|
|
206
217
|
y: {
|
|
@@ -212,12 +223,12 @@ function useChart(props, emit) {
|
|
|
212
223
|
display: !isHorizontal.value,
|
|
213
224
|
drawOnChartArea: !isCircularChart.value && type.value !== "radar",
|
|
214
225
|
drawTicks: false,
|
|
215
|
-
color: "#D0D6DD"
|
|
226
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.default")) : "#D0D6DD"
|
|
216
227
|
},
|
|
217
228
|
ticks: {
|
|
218
229
|
display: !isCircularChart.value && type.value !== "radar",
|
|
219
230
|
beginAtZero: true,
|
|
220
|
-
color: "#626B79",
|
|
231
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.secondary")) : "#626B79",
|
|
221
232
|
padding: 8
|
|
222
233
|
}
|
|
223
234
|
},
|
|
@@ -225,16 +236,17 @@ function useChart(props, emit) {
|
|
|
225
236
|
r: {
|
|
226
237
|
angleLines: {
|
|
227
238
|
display: true,
|
|
228
|
-
color: "#D0D6DD"
|
|
239
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.default")) : "#D0D6DD"
|
|
229
240
|
},
|
|
230
241
|
grid: {
|
|
231
|
-
color: "#D0D6DD"
|
|
242
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.default")) : "#D0D6DD"
|
|
232
243
|
},
|
|
233
244
|
ticks: {
|
|
234
|
-
|
|
245
|
+
backdropColor: "transparent",
|
|
246
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.disabled")) : "#626B79"
|
|
235
247
|
},
|
|
236
248
|
pointLabels: {
|
|
237
|
-
color: "#626B79"
|
|
249
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.secondary")) : "#626B79"
|
|
238
250
|
}
|
|
239
251
|
}
|
|
240
252
|
}
|
|
@@ -271,37 +283,62 @@ function useChart(props, emit) {
|
|
|
271
283
|
datasets.forEach((item, index) => {
|
|
272
284
|
item.backgroundColor = item.backgroundColor || handleColorPattern(index, isFading);
|
|
273
285
|
item.borderColor = item.borderColor || handleColorPattern(index);
|
|
274
|
-
item.pointBackgroundColor = item.pointBackgroundColor ||
|
|
286
|
+
item.pointBackgroundColor = item.pointBackgroundColor || item.borderColor || handleColorPattern(index);
|
|
275
287
|
});
|
|
276
288
|
}
|
|
277
289
|
return datasets;
|
|
278
290
|
});
|
|
279
291
|
const getListColors = (0, import_vue.computed)(() => {
|
|
292
|
+
const newToken = {
|
|
293
|
+
1: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat01.bold")),
|
|
294
|
+
2: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat01")),
|
|
295
|
+
3: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat02.bold")),
|
|
296
|
+
4: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat02")),
|
|
297
|
+
5: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat03.bold")),
|
|
298
|
+
6: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat03")),
|
|
299
|
+
7: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat04.bold")),
|
|
300
|
+
8: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat04")),
|
|
301
|
+
9: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat05.bold")),
|
|
302
|
+
10: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat05")),
|
|
303
|
+
11: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat06.bold")),
|
|
304
|
+
12: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat06")),
|
|
305
|
+
13: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat07.bold")),
|
|
306
|
+
14: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat07")),
|
|
307
|
+
15: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat08.bold")),
|
|
308
|
+
16: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat08"))
|
|
309
|
+
};
|
|
310
|
+
if (isNextTheme.value) {
|
|
311
|
+
if (isDark.value) {
|
|
312
|
+
return newToken;
|
|
313
|
+
} else {
|
|
314
|
+
return newToken;
|
|
315
|
+
}
|
|
316
|
+
}
|
|
280
317
|
return {
|
|
281
|
-
1: (
|
|
282
|
-
2: (
|
|
283
|
-
3: (
|
|
284
|
-
4: (
|
|
285
|
-
5: (
|
|
286
|
-
6: (
|
|
287
|
-
7: (
|
|
288
|
-
8: (
|
|
289
|
-
9: (
|
|
290
|
-
10: (
|
|
291
|
-
11: (
|
|
292
|
-
12: (
|
|
293
|
-
13: (
|
|
294
|
-
14: (
|
|
295
|
-
15: (
|
|
296
|
-
16: (
|
|
297
|
-
17: (
|
|
298
|
-
18: (
|
|
299
|
-
19: (
|
|
300
|
-
20: (
|
|
301
|
-
21: (
|
|
302
|
-
22: (
|
|
303
|
-
23: (
|
|
304
|
-
24: (
|
|
318
|
+
1: getComputedCSSVariableValue(import_tokens.token.var("colors.sky.400")),
|
|
319
|
+
2: getComputedCSSVariableValue(import_tokens.token.var("colors.sky.100")),
|
|
320
|
+
3: getComputedCSSVariableValue(import_tokens.token.var("colors.teal.400")),
|
|
321
|
+
4: getComputedCSSVariableValue(import_tokens.token.var("colors.teal.100")),
|
|
322
|
+
5: getComputedCSSVariableValue(import_tokens.token.var("colors.violet.400")),
|
|
323
|
+
6: getComputedCSSVariableValue(import_tokens.token.var("colors.violet.100")),
|
|
324
|
+
7: getComputedCSSVariableValue(import_tokens.token.var("colors.amber.400")),
|
|
325
|
+
8: getComputedCSSVariableValue(import_tokens.token.var("colors.amber.100")),
|
|
326
|
+
9: getComputedCSSVariableValue(import_tokens.token.var("colors.rose.400")),
|
|
327
|
+
10: getComputedCSSVariableValue(import_tokens.token.var("colors.rose.100")),
|
|
328
|
+
11: getComputedCSSVariableValue(import_tokens.token.var("colors.stone.400")),
|
|
329
|
+
12: getComputedCSSVariableValue(import_tokens.token.var("colors.stone.100")),
|
|
330
|
+
13: getComputedCSSVariableValue(import_tokens.token.var("colors.lime.400")),
|
|
331
|
+
14: getComputedCSSVariableValue(import_tokens.token.var("colors.lime.100")),
|
|
332
|
+
15: getComputedCSSVariableValue(import_tokens.token.var("colors.pink.400")),
|
|
333
|
+
16: getComputedCSSVariableValue(import_tokens.token.var("colors.pink.100")),
|
|
334
|
+
17: getComputedCSSVariableValue(import_tokens.token.var("colors.apricot.400")),
|
|
335
|
+
18: getComputedCSSVariableValue(import_tokens.token.var("colors.apricot.100")),
|
|
336
|
+
19: getComputedCSSVariableValue(import_tokens.token.var("colors.aqua.400")),
|
|
337
|
+
20: getComputedCSSVariableValue(import_tokens.token.var("colors.aqua.100")),
|
|
338
|
+
21: getComputedCSSVariableValue(import_tokens.token.var("colors.leaf.400")),
|
|
339
|
+
22: getComputedCSSVariableValue(import_tokens.token.var("colors.leaf.100")),
|
|
340
|
+
23: getComputedCSSVariableValue(import_tokens.token.var("colors.fuchsia.400")),
|
|
341
|
+
24: getComputedCSSVariableValue(import_tokens.token.var("colors.fuchsia.100"))
|
|
305
342
|
};
|
|
306
343
|
});
|
|
307
344
|
const rootAttrs = (0, import_vue.computed)(() => {
|
|
@@ -415,7 +452,7 @@ function useChart(props, emit) {
|
|
|
415
452
|
return {
|
|
416
453
|
class: (0, import_recipes.chartSlotRecipe)().tooltipBox,
|
|
417
454
|
style: {
|
|
418
|
-
backgroundColor: type.value === "line" ? (_b = (_a = tooltip.value.data) == null ? void 0 : _a.labelColors[0]) == null ? void 0 : _b.borderColor : (_d = (_c = tooltip.value.data) == null ? void 0 : _c.labelColors[0]) == null ? void 0 : _d.backgroundColor
|
|
455
|
+
backgroundColor: type.value === "line" && !isArea.value ? (_b = (_a = tooltip.value.data) == null ? void 0 : _a.labelColors[0]) == null ? void 0 : _b.borderColor : (_d = (_c = tooltip.value.data) == null ? void 0 : _c.labelColors[0]) == null ? void 0 : _d.backgroundColor
|
|
419
456
|
}
|
|
420
457
|
};
|
|
421
458
|
});
|
|
@@ -620,6 +657,10 @@ function useChart(props, emit) {
|
|
|
620
657
|
}
|
|
621
658
|
}, {
|
|
622
659
|
deep: true
|
|
660
|
+
}), (0, import_vue.watch)(() => isDark.value, (newVal, oldVal) => {
|
|
661
|
+
if (newVal !== oldVal) {
|
|
662
|
+
updateChart();
|
|
663
|
+
}
|
|
623
664
|
});
|
|
624
665
|
(0, import_vue.onMounted)(() => {
|
|
625
666
|
createChart();
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mekari/pixel3-chart",
|
|
3
3
|
"description": "Chart component for mekari pixel 3",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.7-dev.1",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"files": [
|
|
@@ -12,9 +12,9 @@
|
|
|
12
12
|
"chartjs-plugin-datalabels": "^2.2.0",
|
|
13
13
|
"color": "^4.2.3",
|
|
14
14
|
"lodash-es": "^4.17.21",
|
|
15
|
-
"@mekari/pixel3-styled-system": "0.1.1",
|
|
16
|
-
"@mekari/pixel3-
|
|
17
|
-
"@mekari/pixel3-
|
|
15
|
+
"@mekari/pixel3-styled-system": "0.1.2-dev.1",
|
|
16
|
+
"@mekari/pixel3-utils": "0.0.7-dev.1",
|
|
17
|
+
"@mekari/pixel3-text": "0.0.16-dev.1"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"vue": "^3.4.9"
|
|
@@ -43,6 +43,7 @@
|
|
|
43
43
|
"build:types": "tsup src --dts-only",
|
|
44
44
|
"types:check": "tsc --noEmit",
|
|
45
45
|
"replace-config": "clean-package",
|
|
46
|
-
"restore-config": "clean-package restore"
|
|
46
|
+
"restore-config": "clean-package restore",
|
|
47
|
+
"types:vue": "vue-tsc --noEmit"
|
|
47
48
|
}
|
|
48
49
|
}
|