@mekari/pixel3-chart 0.0.6-dev.0 → 0.0.7-dev.0
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 +84 -43
- package/dist/chart.mjs +2 -2
- package/dist/{chunk-5SYLA56O.mjs → chunk-GVSW6CH3.mjs} +79 -42
- package/dist/{chunk-RG3PDKE3.mjs → chunk-TTRBJAW4.mjs} +7 -3
- package/dist/index.js +84 -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 +78 -41
- package/dist/modules/chart.hooks.mjs +1 -1
- package/package.json +4 -4
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,7 @@ function useChart(props, emit) {
|
|
|
246
252
|
maintainAspectRatio: false,
|
|
247
253
|
responsive: true,
|
|
248
254
|
animation: true,
|
|
249
|
-
cutout: type.value === "doughnut" ?
|
|
255
|
+
cutout: type.value === "doughnut" ? "65%" : 0,
|
|
250
256
|
...isHorizontalBarChart.value && {
|
|
251
257
|
indexAxis: "y"
|
|
252
258
|
},
|
|
@@ -273,7 +279,7 @@ function useChart(props, emit) {
|
|
|
273
279
|
},
|
|
274
280
|
datalabels: {
|
|
275
281
|
display: isShowDataLabels.value,
|
|
276
|
-
color: "#626B79",
|
|
282
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.default")) : "#626B79",
|
|
277
283
|
clamp: true,
|
|
278
284
|
font: {
|
|
279
285
|
size: 10
|
|
@@ -295,12 +301,12 @@ function useChart(props, emit) {
|
|
|
295
301
|
top: !isHorizontal.value ? 2 : 0,
|
|
296
302
|
right: isHorizontal.value ? 2 : 0
|
|
297
303
|
},
|
|
298
|
-
borderColor: "#FFFFFF"
|
|
304
|
+
borderColor: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.inverse")) : "#FFFFFF"
|
|
299
305
|
}
|
|
300
306
|
},
|
|
301
307
|
line: {
|
|
302
|
-
borderColor: isArea.value ? "#FFFFFF" : getListColors.value[1],
|
|
303
|
-
borderWidth: 2,
|
|
308
|
+
borderColor: isArea.value ? isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.inverse")) : "#FFFFFF" : getListColors.value[1],
|
|
309
|
+
borderWidth: isArea.value ? isNextTheme.value ? 4 : 2 : 2,
|
|
304
310
|
tension: isArea.value ? 0.4 : 0
|
|
305
311
|
},
|
|
306
312
|
point: {
|
|
@@ -311,8 +317,9 @@ function useChart(props, emit) {
|
|
|
311
317
|
},
|
|
312
318
|
arc: {
|
|
313
319
|
backgroundColor: getListColors.value[1],
|
|
314
|
-
borderColor: "#FFFFFF",
|
|
315
|
-
hoverBorderColor: "#FFFFFF"
|
|
320
|
+
borderColor: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.inverse")) : "#FFFFFF",
|
|
321
|
+
hoverBorderColor: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.inverse")) : "#FFFFFF",
|
|
322
|
+
borderWidth: isNextTheme.value ? 4 : 2
|
|
316
323
|
}
|
|
317
324
|
},
|
|
318
325
|
scales: {
|
|
@@ -324,11 +331,12 @@ function useChart(props, emit) {
|
|
|
324
331
|
grid: {
|
|
325
332
|
display: false,
|
|
326
333
|
drawOnChartArea: false,
|
|
327
|
-
drawTicks: false
|
|
334
|
+
drawTicks: false,
|
|
335
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.default")) : "#D0D6DD"
|
|
328
336
|
},
|
|
329
337
|
ticks: {
|
|
330
338
|
display: !isCircularChart.value && type.value !== "radar",
|
|
331
|
-
color: "#626B79"
|
|
339
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.secondary")) : "#626B79"
|
|
332
340
|
}
|
|
333
341
|
},
|
|
334
342
|
y: {
|
|
@@ -340,12 +348,12 @@ function useChart(props, emit) {
|
|
|
340
348
|
display: !isHorizontal.value,
|
|
341
349
|
drawOnChartArea: !isCircularChart.value && type.value !== "radar",
|
|
342
350
|
drawTicks: false,
|
|
343
|
-
color: "#D0D6DD"
|
|
351
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.default")) : "#D0D6DD"
|
|
344
352
|
},
|
|
345
353
|
ticks: {
|
|
346
354
|
display: !isCircularChart.value && type.value !== "radar",
|
|
347
355
|
beginAtZero: true,
|
|
348
|
-
color: "#626B79",
|
|
356
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.secondary")) : "#626B79",
|
|
349
357
|
padding: 8
|
|
350
358
|
}
|
|
351
359
|
},
|
|
@@ -353,16 +361,17 @@ function useChart(props, emit) {
|
|
|
353
361
|
r: {
|
|
354
362
|
angleLines: {
|
|
355
363
|
display: true,
|
|
356
|
-
color: "#D0D6DD"
|
|
364
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.default")) : "#D0D6DD"
|
|
357
365
|
},
|
|
358
366
|
grid: {
|
|
359
|
-
color: "#D0D6DD"
|
|
367
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.default")) : "#D0D6DD"
|
|
360
368
|
},
|
|
361
369
|
ticks: {
|
|
362
|
-
|
|
370
|
+
backdropColor: "transparent",
|
|
371
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.disabled")) : "#626B79"
|
|
363
372
|
},
|
|
364
373
|
pointLabels: {
|
|
365
|
-
color: "#626B79"
|
|
374
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.secondary")) : "#626B79"
|
|
366
375
|
}
|
|
367
376
|
}
|
|
368
377
|
}
|
|
@@ -399,37 +408,62 @@ function useChart(props, emit) {
|
|
|
399
408
|
datasets.forEach((item, index) => {
|
|
400
409
|
item.backgroundColor = item.backgroundColor || handleColorPattern(index, isFading);
|
|
401
410
|
item.borderColor = item.borderColor || handleColorPattern(index);
|
|
402
|
-
item.pointBackgroundColor = item.pointBackgroundColor ||
|
|
411
|
+
item.pointBackgroundColor = item.pointBackgroundColor || item.borderColor || handleColorPattern(index);
|
|
403
412
|
});
|
|
404
413
|
}
|
|
405
414
|
return datasets;
|
|
406
415
|
});
|
|
407
416
|
const getListColors = (0, import_vue.computed)(() => {
|
|
417
|
+
const newToken = {
|
|
418
|
+
1: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat01.bold")),
|
|
419
|
+
2: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat01")),
|
|
420
|
+
3: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat02.bold")),
|
|
421
|
+
4: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat02")),
|
|
422
|
+
5: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat03.bold")),
|
|
423
|
+
6: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat03")),
|
|
424
|
+
7: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat04.bold")),
|
|
425
|
+
8: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat04")),
|
|
426
|
+
9: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat05.bold")),
|
|
427
|
+
10: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat05")),
|
|
428
|
+
11: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat06.bold")),
|
|
429
|
+
12: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat06")),
|
|
430
|
+
13: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat07.bold")),
|
|
431
|
+
14: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat07")),
|
|
432
|
+
15: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat08.bold")),
|
|
433
|
+
16: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat08"))
|
|
434
|
+
};
|
|
435
|
+
if (isNextTheme.value) {
|
|
436
|
+
if (isDark.value) {
|
|
437
|
+
return newToken;
|
|
438
|
+
} else {
|
|
439
|
+
return newToken;
|
|
440
|
+
}
|
|
441
|
+
}
|
|
408
442
|
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: (
|
|
443
|
+
1: getComputedCSSVariableValue(import_tokens.token.var("colors.sky.400")),
|
|
444
|
+
2: getComputedCSSVariableValue(import_tokens.token.var("colors.sky.100")),
|
|
445
|
+
3: getComputedCSSVariableValue(import_tokens.token.var("colors.teal.400")),
|
|
446
|
+
4: getComputedCSSVariableValue(import_tokens.token.var("colors.teal.100")),
|
|
447
|
+
5: getComputedCSSVariableValue(import_tokens.token.var("colors.violet.400")),
|
|
448
|
+
6: getComputedCSSVariableValue(import_tokens.token.var("colors.violet.100")),
|
|
449
|
+
7: getComputedCSSVariableValue(import_tokens.token.var("colors.amber.400")),
|
|
450
|
+
8: getComputedCSSVariableValue(import_tokens.token.var("colors.amber.100")),
|
|
451
|
+
9: getComputedCSSVariableValue(import_tokens.token.var("colors.rose.400")),
|
|
452
|
+
10: getComputedCSSVariableValue(import_tokens.token.var("colors.rose.100")),
|
|
453
|
+
11: getComputedCSSVariableValue(import_tokens.token.var("colors.stone.400")),
|
|
454
|
+
12: getComputedCSSVariableValue(import_tokens.token.var("colors.stone.100")),
|
|
455
|
+
13: getComputedCSSVariableValue(import_tokens.token.var("colors.lime.400")),
|
|
456
|
+
14: getComputedCSSVariableValue(import_tokens.token.var("colors.lime.100")),
|
|
457
|
+
15: getComputedCSSVariableValue(import_tokens.token.var("colors.pink.400")),
|
|
458
|
+
16: getComputedCSSVariableValue(import_tokens.token.var("colors.pink.100")),
|
|
459
|
+
17: getComputedCSSVariableValue(import_tokens.token.var("colors.apricot.400")),
|
|
460
|
+
18: getComputedCSSVariableValue(import_tokens.token.var("colors.apricot.100")),
|
|
461
|
+
19: getComputedCSSVariableValue(import_tokens.token.var("colors.aqua.400")),
|
|
462
|
+
20: getComputedCSSVariableValue(import_tokens.token.var("colors.aqua.100")),
|
|
463
|
+
21: getComputedCSSVariableValue(import_tokens.token.var("colors.leaf.400")),
|
|
464
|
+
22: getComputedCSSVariableValue(import_tokens.token.var("colors.leaf.100")),
|
|
465
|
+
23: getComputedCSSVariableValue(import_tokens.token.var("colors.fuchsia.400")),
|
|
466
|
+
24: getComputedCSSVariableValue(import_tokens.token.var("colors.fuchsia.100"))
|
|
433
467
|
};
|
|
434
468
|
});
|
|
435
469
|
const rootAttrs = (0, import_vue.computed)(() => {
|
|
@@ -543,7 +577,7 @@ function useChart(props, emit) {
|
|
|
543
577
|
return {
|
|
544
578
|
class: (0, import_recipes.chartSlotRecipe)().tooltipBox,
|
|
545
579
|
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
|
|
580
|
+
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
581
|
}
|
|
548
582
|
};
|
|
549
583
|
});
|
|
@@ -748,6 +782,10 @@ function useChart(props, emit) {
|
|
|
748
782
|
}
|
|
749
783
|
}, {
|
|
750
784
|
deep: true
|
|
785
|
+
}), (0, import_vue.watch)(() => isDark.value, (newVal, oldVal) => {
|
|
786
|
+
if (newVal !== oldVal) {
|
|
787
|
+
updateChart();
|
|
788
|
+
}
|
|
751
789
|
});
|
|
752
790
|
(0, import_vue.onMounted)(() => {
|
|
753
791
|
createChart();
|
|
@@ -792,6 +830,9 @@ var MpChart = (0, import_vue3.defineComponent)({
|
|
|
792
830
|
slots,
|
|
793
831
|
emit
|
|
794
832
|
}) {
|
|
833
|
+
const {
|
|
834
|
+
isNextTheme
|
|
835
|
+
} = (0, import_pixel3_utils2.usePixelTheme)();
|
|
795
836
|
const {
|
|
796
837
|
rootAttrs,
|
|
797
838
|
chartHeaderAttrs,
|
|
@@ -834,7 +875,7 @@ var MpChart = (0, import_vue3.defineComponent)({
|
|
|
834
875
|
})
|
|
835
876
|
]) : "", 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
877
|
"size": "label",
|
|
837
|
-
"color": "gray.600"
|
|
878
|
+
"color": isNextTheme.value ? "text.secondary" : "gray.600"
|
|
838
879
|
}, {
|
|
839
880
|
default: () => {
|
|
840
881
|
var _a, _b;
|
|
@@ -850,7 +891,7 @@ var MpChart = (0, import_vue3.defineComponent)({
|
|
|
850
891
|
}
|
|
851
892
|
})]), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
|
|
852
893
|
"size": "label-small",
|
|
853
|
-
"color": "gray.600"
|
|
894
|
+
"color": isNextTheme.value ? "text.secondary" : "gray.600"
|
|
854
895
|
}, {
|
|
855
896
|
default: () => {
|
|
856
897
|
var _a, _b;
|
package/dist/chart.mjs
CHANGED
|
@@ -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,7 @@ function useChart(props, emit) {
|
|
|
87
92
|
maintainAspectRatio: false,
|
|
88
93
|
responsive: true,
|
|
89
94
|
animation: true,
|
|
90
|
-
cutout: type.value === "doughnut" ?
|
|
95
|
+
cutout: type.value === "doughnut" ? "65%" : 0,
|
|
91
96
|
...isHorizontalBarChart.value && {
|
|
92
97
|
indexAxis: "y"
|
|
93
98
|
},
|
|
@@ -114,7 +119,7 @@ function useChart(props, emit) {
|
|
|
114
119
|
},
|
|
115
120
|
datalabels: {
|
|
116
121
|
display: isShowDataLabels.value,
|
|
117
|
-
color: "#626B79",
|
|
122
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(token.var("colors.text.default")) : "#626B79",
|
|
118
123
|
clamp: true,
|
|
119
124
|
font: {
|
|
120
125
|
size: 10
|
|
@@ -136,12 +141,12 @@ function useChart(props, emit) {
|
|
|
136
141
|
top: !isHorizontal.value ? 2 : 0,
|
|
137
142
|
right: isHorizontal.value ? 2 : 0
|
|
138
143
|
},
|
|
139
|
-
borderColor: "#FFFFFF"
|
|
144
|
+
borderColor: isNextTheme.value ? getComputedCSSVariableValue(token.var("colors.border.inverse")) : "#FFFFFF"
|
|
140
145
|
}
|
|
141
146
|
},
|
|
142
147
|
line: {
|
|
143
|
-
borderColor: isArea.value ? "#FFFFFF" : getListColors.value[1],
|
|
144
|
-
borderWidth: 2,
|
|
148
|
+
borderColor: isArea.value ? isNextTheme.value ? getComputedCSSVariableValue(token.var("colors.border.inverse")) : "#FFFFFF" : getListColors.value[1],
|
|
149
|
+
borderWidth: isArea.value ? isNextTheme.value ? 4 : 2 : 2,
|
|
145
150
|
tension: isArea.value ? 0.4 : 0
|
|
146
151
|
},
|
|
147
152
|
point: {
|
|
@@ -152,8 +157,9 @@ function useChart(props, emit) {
|
|
|
152
157
|
},
|
|
153
158
|
arc: {
|
|
154
159
|
backgroundColor: getListColors.value[1],
|
|
155
|
-
borderColor: "#FFFFFF",
|
|
156
|
-
hoverBorderColor: "#FFFFFF"
|
|
160
|
+
borderColor: isNextTheme.value ? getComputedCSSVariableValue(token.var("colors.border.inverse")) : "#FFFFFF",
|
|
161
|
+
hoverBorderColor: isNextTheme.value ? getComputedCSSVariableValue(token.var("colors.border.inverse")) : "#FFFFFF",
|
|
162
|
+
borderWidth: isNextTheme.value ? 4 : 2
|
|
157
163
|
}
|
|
158
164
|
},
|
|
159
165
|
scales: {
|
|
@@ -165,11 +171,12 @@ function useChart(props, emit) {
|
|
|
165
171
|
grid: {
|
|
166
172
|
display: false,
|
|
167
173
|
drawOnChartArea: false,
|
|
168
|
-
drawTicks: false
|
|
174
|
+
drawTicks: false,
|
|
175
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(token.var("colors.border.default")) : "#D0D6DD"
|
|
169
176
|
},
|
|
170
177
|
ticks: {
|
|
171
178
|
display: !isCircularChart.value && type.value !== "radar",
|
|
172
|
-
color: "#626B79"
|
|
179
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(token.var("colors.text.secondary")) : "#626B79"
|
|
173
180
|
}
|
|
174
181
|
},
|
|
175
182
|
y: {
|
|
@@ -181,12 +188,12 @@ function useChart(props, emit) {
|
|
|
181
188
|
display: !isHorizontal.value,
|
|
182
189
|
drawOnChartArea: !isCircularChart.value && type.value !== "radar",
|
|
183
190
|
drawTicks: false,
|
|
184
|
-
color: "#D0D6DD"
|
|
191
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(token.var("colors.border.default")) : "#D0D6DD"
|
|
185
192
|
},
|
|
186
193
|
ticks: {
|
|
187
194
|
display: !isCircularChart.value && type.value !== "radar",
|
|
188
195
|
beginAtZero: true,
|
|
189
|
-
color: "#626B79",
|
|
196
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(token.var("colors.text.secondary")) : "#626B79",
|
|
190
197
|
padding: 8
|
|
191
198
|
}
|
|
192
199
|
},
|
|
@@ -194,16 +201,17 @@ function useChart(props, emit) {
|
|
|
194
201
|
r: {
|
|
195
202
|
angleLines: {
|
|
196
203
|
display: true,
|
|
197
|
-
color: "#D0D6DD"
|
|
204
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(token.var("colors.border.default")) : "#D0D6DD"
|
|
198
205
|
},
|
|
199
206
|
grid: {
|
|
200
|
-
color: "#D0D6DD"
|
|
207
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(token.var("colors.border.default")) : "#D0D6DD"
|
|
201
208
|
},
|
|
202
209
|
ticks: {
|
|
203
|
-
|
|
210
|
+
backdropColor: "transparent",
|
|
211
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(token.var("colors.text.disabled")) : "#626B79"
|
|
204
212
|
},
|
|
205
213
|
pointLabels: {
|
|
206
|
-
color: "#626B79"
|
|
214
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(token.var("colors.text.secondary")) : "#626B79"
|
|
207
215
|
}
|
|
208
216
|
}
|
|
209
217
|
}
|
|
@@ -240,37 +248,62 @@ function useChart(props, emit) {
|
|
|
240
248
|
datasets.forEach((item, index) => {
|
|
241
249
|
item.backgroundColor = item.backgroundColor || handleColorPattern(index, isFading);
|
|
242
250
|
item.borderColor = item.borderColor || handleColorPattern(index);
|
|
243
|
-
item.pointBackgroundColor = item.pointBackgroundColor ||
|
|
251
|
+
item.pointBackgroundColor = item.pointBackgroundColor || item.borderColor || handleColorPattern(index);
|
|
244
252
|
});
|
|
245
253
|
}
|
|
246
254
|
return datasets;
|
|
247
255
|
});
|
|
248
256
|
const getListColors = computed(() => {
|
|
257
|
+
const newToken = {
|
|
258
|
+
1: getComputedCSSVariableValue(token.var("colors.chart.cat01.bold")),
|
|
259
|
+
2: getComputedCSSVariableValue(token.var("colors.chart.cat01")),
|
|
260
|
+
3: getComputedCSSVariableValue(token.var("colors.chart.cat02.bold")),
|
|
261
|
+
4: getComputedCSSVariableValue(token.var("colors.chart.cat02")),
|
|
262
|
+
5: getComputedCSSVariableValue(token.var("colors.chart.cat03.bold")),
|
|
263
|
+
6: getComputedCSSVariableValue(token.var("colors.chart.cat03")),
|
|
264
|
+
7: getComputedCSSVariableValue(token.var("colors.chart.cat04.bold")),
|
|
265
|
+
8: getComputedCSSVariableValue(token.var("colors.chart.cat04")),
|
|
266
|
+
9: getComputedCSSVariableValue(token.var("colors.chart.cat05.bold")),
|
|
267
|
+
10: getComputedCSSVariableValue(token.var("colors.chart.cat05")),
|
|
268
|
+
11: getComputedCSSVariableValue(token.var("colors.chart.cat06.bold")),
|
|
269
|
+
12: getComputedCSSVariableValue(token.var("colors.chart.cat06")),
|
|
270
|
+
13: getComputedCSSVariableValue(token.var("colors.chart.cat07.bold")),
|
|
271
|
+
14: getComputedCSSVariableValue(token.var("colors.chart.cat07")),
|
|
272
|
+
15: getComputedCSSVariableValue(token.var("colors.chart.cat08.bold")),
|
|
273
|
+
16: getComputedCSSVariableValue(token.var("colors.chart.cat08"))
|
|
274
|
+
};
|
|
275
|
+
if (isNextTheme.value) {
|
|
276
|
+
if (isDark.value) {
|
|
277
|
+
return newToken;
|
|
278
|
+
} else {
|
|
279
|
+
return newToken;
|
|
280
|
+
}
|
|
281
|
+
}
|
|
249
282
|
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")
|
|
283
|
+
1: getComputedCSSVariableValue(token.var("colors.sky.400")),
|
|
284
|
+
2: getComputedCSSVariableValue(token.var("colors.sky.100")),
|
|
285
|
+
3: getComputedCSSVariableValue(token.var("colors.teal.400")),
|
|
286
|
+
4: getComputedCSSVariableValue(token.var("colors.teal.100")),
|
|
287
|
+
5: getComputedCSSVariableValue(token.var("colors.violet.400")),
|
|
288
|
+
6: getComputedCSSVariableValue(token.var("colors.violet.100")),
|
|
289
|
+
7: getComputedCSSVariableValue(token.var("colors.amber.400")),
|
|
290
|
+
8: getComputedCSSVariableValue(token.var("colors.amber.100")),
|
|
291
|
+
9: getComputedCSSVariableValue(token.var("colors.rose.400")),
|
|
292
|
+
10: getComputedCSSVariableValue(token.var("colors.rose.100")),
|
|
293
|
+
11: getComputedCSSVariableValue(token.var("colors.stone.400")),
|
|
294
|
+
12: getComputedCSSVariableValue(token.var("colors.stone.100")),
|
|
295
|
+
13: getComputedCSSVariableValue(token.var("colors.lime.400")),
|
|
296
|
+
14: getComputedCSSVariableValue(token.var("colors.lime.100")),
|
|
297
|
+
15: getComputedCSSVariableValue(token.var("colors.pink.400")),
|
|
298
|
+
16: getComputedCSSVariableValue(token.var("colors.pink.100")),
|
|
299
|
+
17: getComputedCSSVariableValue(token.var("colors.apricot.400")),
|
|
300
|
+
18: getComputedCSSVariableValue(token.var("colors.apricot.100")),
|
|
301
|
+
19: getComputedCSSVariableValue(token.var("colors.aqua.400")),
|
|
302
|
+
20: getComputedCSSVariableValue(token.var("colors.aqua.100")),
|
|
303
|
+
21: getComputedCSSVariableValue(token.var("colors.leaf.400")),
|
|
304
|
+
22: getComputedCSSVariableValue(token.var("colors.leaf.100")),
|
|
305
|
+
23: getComputedCSSVariableValue(token.var("colors.fuchsia.400")),
|
|
306
|
+
24: getComputedCSSVariableValue(token.var("colors.fuchsia.100"))
|
|
274
307
|
};
|
|
275
308
|
});
|
|
276
309
|
const rootAttrs = computed(() => {
|
|
@@ -384,7 +417,7 @@ function useChart(props, emit) {
|
|
|
384
417
|
return {
|
|
385
418
|
class: chartSlotRecipe().tooltipBox,
|
|
386
419
|
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
|
|
420
|
+
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
421
|
}
|
|
389
422
|
};
|
|
390
423
|
});
|
|
@@ -589,6 +622,10 @@ function useChart(props, emit) {
|
|
|
589
622
|
}
|
|
590
623
|
}, {
|
|
591
624
|
deep: true
|
|
625
|
+
}), watch(() => isDark.value, (newVal, oldVal) => {
|
|
626
|
+
if (newVal !== oldVal) {
|
|
627
|
+
updateChart();
|
|
628
|
+
}
|
|
592
629
|
});
|
|
593
630
|
onMounted(() => {
|
|
594
631
|
createChart();
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useChart
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-GVSW6CH3.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;
|
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,7 @@ function useChart(props, emit) {
|
|
|
248
254
|
maintainAspectRatio: false,
|
|
249
255
|
responsive: true,
|
|
250
256
|
animation: true,
|
|
251
|
-
cutout: type.value === "doughnut" ?
|
|
257
|
+
cutout: type.value === "doughnut" ? "65%" : 0,
|
|
252
258
|
...isHorizontalBarChart.value && {
|
|
253
259
|
indexAxis: "y"
|
|
254
260
|
},
|
|
@@ -275,7 +281,7 @@ function useChart(props, emit) {
|
|
|
275
281
|
},
|
|
276
282
|
datalabels: {
|
|
277
283
|
display: isShowDataLabels.value,
|
|
278
|
-
color: "#626B79",
|
|
284
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.default")) : "#626B79",
|
|
279
285
|
clamp: true,
|
|
280
286
|
font: {
|
|
281
287
|
size: 10
|
|
@@ -297,12 +303,12 @@ function useChart(props, emit) {
|
|
|
297
303
|
top: !isHorizontal.value ? 2 : 0,
|
|
298
304
|
right: isHorizontal.value ? 2 : 0
|
|
299
305
|
},
|
|
300
|
-
borderColor: "#FFFFFF"
|
|
306
|
+
borderColor: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.inverse")) : "#FFFFFF"
|
|
301
307
|
}
|
|
302
308
|
},
|
|
303
309
|
line: {
|
|
304
|
-
borderColor: isArea.value ? "#FFFFFF" : getListColors.value[1],
|
|
305
|
-
borderWidth: 2,
|
|
310
|
+
borderColor: isArea.value ? isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.inverse")) : "#FFFFFF" : getListColors.value[1],
|
|
311
|
+
borderWidth: isArea.value ? isNextTheme.value ? 4 : 2 : 2,
|
|
306
312
|
tension: isArea.value ? 0.4 : 0
|
|
307
313
|
},
|
|
308
314
|
point: {
|
|
@@ -313,8 +319,9 @@ function useChart(props, emit) {
|
|
|
313
319
|
},
|
|
314
320
|
arc: {
|
|
315
321
|
backgroundColor: getListColors.value[1],
|
|
316
|
-
borderColor: "#FFFFFF",
|
|
317
|
-
hoverBorderColor: "#FFFFFF"
|
|
322
|
+
borderColor: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.inverse")) : "#FFFFFF",
|
|
323
|
+
hoverBorderColor: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.inverse")) : "#FFFFFF",
|
|
324
|
+
borderWidth: isNextTheme.value ? 4 : 2
|
|
318
325
|
}
|
|
319
326
|
},
|
|
320
327
|
scales: {
|
|
@@ -326,11 +333,12 @@ function useChart(props, emit) {
|
|
|
326
333
|
grid: {
|
|
327
334
|
display: false,
|
|
328
335
|
drawOnChartArea: false,
|
|
329
|
-
drawTicks: false
|
|
336
|
+
drawTicks: false,
|
|
337
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.default")) : "#D0D6DD"
|
|
330
338
|
},
|
|
331
339
|
ticks: {
|
|
332
340
|
display: !isCircularChart.value && type.value !== "radar",
|
|
333
|
-
color: "#626B79"
|
|
341
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.secondary")) : "#626B79"
|
|
334
342
|
}
|
|
335
343
|
},
|
|
336
344
|
y: {
|
|
@@ -342,12 +350,12 @@ function useChart(props, emit) {
|
|
|
342
350
|
display: !isHorizontal.value,
|
|
343
351
|
drawOnChartArea: !isCircularChart.value && type.value !== "radar",
|
|
344
352
|
drawTicks: false,
|
|
345
|
-
color: "#D0D6DD"
|
|
353
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.default")) : "#D0D6DD"
|
|
346
354
|
},
|
|
347
355
|
ticks: {
|
|
348
356
|
display: !isCircularChart.value && type.value !== "radar",
|
|
349
357
|
beginAtZero: true,
|
|
350
|
-
color: "#626B79",
|
|
358
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.secondary")) : "#626B79",
|
|
351
359
|
padding: 8
|
|
352
360
|
}
|
|
353
361
|
},
|
|
@@ -355,16 +363,17 @@ function useChart(props, emit) {
|
|
|
355
363
|
r: {
|
|
356
364
|
angleLines: {
|
|
357
365
|
display: true,
|
|
358
|
-
color: "#D0D6DD"
|
|
366
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.default")) : "#D0D6DD"
|
|
359
367
|
},
|
|
360
368
|
grid: {
|
|
361
|
-
color: "#D0D6DD"
|
|
369
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.default")) : "#D0D6DD"
|
|
362
370
|
},
|
|
363
371
|
ticks: {
|
|
364
|
-
|
|
372
|
+
backdropColor: "transparent",
|
|
373
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.disabled")) : "#626B79"
|
|
365
374
|
},
|
|
366
375
|
pointLabels: {
|
|
367
|
-
color: "#626B79"
|
|
376
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.secondary")) : "#626B79"
|
|
368
377
|
}
|
|
369
378
|
}
|
|
370
379
|
}
|
|
@@ -401,37 +410,62 @@ function useChart(props, emit) {
|
|
|
401
410
|
datasets.forEach((item, index) => {
|
|
402
411
|
item.backgroundColor = item.backgroundColor || handleColorPattern(index, isFading);
|
|
403
412
|
item.borderColor = item.borderColor || handleColorPattern(index);
|
|
404
|
-
item.pointBackgroundColor = item.pointBackgroundColor ||
|
|
413
|
+
item.pointBackgroundColor = item.pointBackgroundColor || item.borderColor || handleColorPattern(index);
|
|
405
414
|
});
|
|
406
415
|
}
|
|
407
416
|
return datasets;
|
|
408
417
|
});
|
|
409
418
|
const getListColors = (0, import_vue.computed)(() => {
|
|
419
|
+
const newToken = {
|
|
420
|
+
1: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat01.bold")),
|
|
421
|
+
2: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat01")),
|
|
422
|
+
3: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat02.bold")),
|
|
423
|
+
4: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat02")),
|
|
424
|
+
5: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat03.bold")),
|
|
425
|
+
6: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat03")),
|
|
426
|
+
7: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat04.bold")),
|
|
427
|
+
8: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat04")),
|
|
428
|
+
9: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat05.bold")),
|
|
429
|
+
10: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat05")),
|
|
430
|
+
11: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat06.bold")),
|
|
431
|
+
12: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat06")),
|
|
432
|
+
13: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat07.bold")),
|
|
433
|
+
14: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat07")),
|
|
434
|
+
15: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat08.bold")),
|
|
435
|
+
16: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat08"))
|
|
436
|
+
};
|
|
437
|
+
if (isNextTheme.value) {
|
|
438
|
+
if (isDark.value) {
|
|
439
|
+
return newToken;
|
|
440
|
+
} else {
|
|
441
|
+
return newToken;
|
|
442
|
+
}
|
|
443
|
+
}
|
|
410
444
|
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: (
|
|
445
|
+
1: getComputedCSSVariableValue(import_tokens.token.var("colors.sky.400")),
|
|
446
|
+
2: getComputedCSSVariableValue(import_tokens.token.var("colors.sky.100")),
|
|
447
|
+
3: getComputedCSSVariableValue(import_tokens.token.var("colors.teal.400")),
|
|
448
|
+
4: getComputedCSSVariableValue(import_tokens.token.var("colors.teal.100")),
|
|
449
|
+
5: getComputedCSSVariableValue(import_tokens.token.var("colors.violet.400")),
|
|
450
|
+
6: getComputedCSSVariableValue(import_tokens.token.var("colors.violet.100")),
|
|
451
|
+
7: getComputedCSSVariableValue(import_tokens.token.var("colors.amber.400")),
|
|
452
|
+
8: getComputedCSSVariableValue(import_tokens.token.var("colors.amber.100")),
|
|
453
|
+
9: getComputedCSSVariableValue(import_tokens.token.var("colors.rose.400")),
|
|
454
|
+
10: getComputedCSSVariableValue(import_tokens.token.var("colors.rose.100")),
|
|
455
|
+
11: getComputedCSSVariableValue(import_tokens.token.var("colors.stone.400")),
|
|
456
|
+
12: getComputedCSSVariableValue(import_tokens.token.var("colors.stone.100")),
|
|
457
|
+
13: getComputedCSSVariableValue(import_tokens.token.var("colors.lime.400")),
|
|
458
|
+
14: getComputedCSSVariableValue(import_tokens.token.var("colors.lime.100")),
|
|
459
|
+
15: getComputedCSSVariableValue(import_tokens.token.var("colors.pink.400")),
|
|
460
|
+
16: getComputedCSSVariableValue(import_tokens.token.var("colors.pink.100")),
|
|
461
|
+
17: getComputedCSSVariableValue(import_tokens.token.var("colors.apricot.400")),
|
|
462
|
+
18: getComputedCSSVariableValue(import_tokens.token.var("colors.apricot.100")),
|
|
463
|
+
19: getComputedCSSVariableValue(import_tokens.token.var("colors.aqua.400")),
|
|
464
|
+
20: getComputedCSSVariableValue(import_tokens.token.var("colors.aqua.100")),
|
|
465
|
+
21: getComputedCSSVariableValue(import_tokens.token.var("colors.leaf.400")),
|
|
466
|
+
22: getComputedCSSVariableValue(import_tokens.token.var("colors.leaf.100")),
|
|
467
|
+
23: getComputedCSSVariableValue(import_tokens.token.var("colors.fuchsia.400")),
|
|
468
|
+
24: getComputedCSSVariableValue(import_tokens.token.var("colors.fuchsia.100"))
|
|
435
469
|
};
|
|
436
470
|
});
|
|
437
471
|
const rootAttrs = (0, import_vue.computed)(() => {
|
|
@@ -545,7 +579,7 @@ function useChart(props, emit) {
|
|
|
545
579
|
return {
|
|
546
580
|
class: (0, import_recipes.chartSlotRecipe)().tooltipBox,
|
|
547
581
|
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
|
|
582
|
+
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
583
|
}
|
|
550
584
|
};
|
|
551
585
|
});
|
|
@@ -750,6 +784,10 @@ function useChart(props, emit) {
|
|
|
750
784
|
}
|
|
751
785
|
}, {
|
|
752
786
|
deep: true
|
|
787
|
+
}), (0, import_vue.watch)(() => isDark.value, (newVal, oldVal) => {
|
|
788
|
+
if (newVal !== oldVal) {
|
|
789
|
+
updateChart();
|
|
790
|
+
}
|
|
753
791
|
});
|
|
754
792
|
(0, import_vue.onMounted)(() => {
|
|
755
793
|
createChart();
|
|
@@ -794,6 +832,9 @@ var MpChart = (0, import_vue3.defineComponent)({
|
|
|
794
832
|
slots,
|
|
795
833
|
emit
|
|
796
834
|
}) {
|
|
835
|
+
const {
|
|
836
|
+
isNextTheme
|
|
837
|
+
} = (0, import_pixel3_utils2.usePixelTheme)();
|
|
797
838
|
const {
|
|
798
839
|
rootAttrs,
|
|
799
840
|
chartHeaderAttrs,
|
|
@@ -836,7 +877,7 @@ var MpChart = (0, import_vue3.defineComponent)({
|
|
|
836
877
|
})
|
|
837
878
|
]) : "", 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
879
|
"size": "label",
|
|
839
|
-
"color": "gray.600"
|
|
880
|
+
"color": isNextTheme.value ? "text.secondary" : "gray.600"
|
|
840
881
|
}, {
|
|
841
882
|
default: () => {
|
|
842
883
|
var _a, _b;
|
|
@@ -852,7 +893,7 @@ var MpChart = (0, import_vue3.defineComponent)({
|
|
|
852
893
|
}
|
|
853
894
|
})]), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
|
|
854
895
|
"size": "label-small",
|
|
855
|
-
"color": "gray.600"
|
|
896
|
+
"color": isNextTheme.value ? "text.secondary" : "gray.600"
|
|
856
897
|
}, {
|
|
857
898
|
default: () => {
|
|
858
899
|
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":23967,"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":25006}},"bytes":32566},"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":25006}},"bytes":32577},"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":25151}},"bytes":26770},"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":23967,"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-TTRBJAW4.mjs","kind":"import-statement"},{"path":"dist/chunk-GVSW6CH3.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-TTRBJAW4.mjs","kind":"import-statement"},{"path":"dist/chunk-GVSW6CH3.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-TTRBJAW4.mjs":{"imports":[{"path":"dist/chunk-GVSW6CH3.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-GVSW6CH3.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-GVSW6CH3.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":23223}},"bytes":23327},"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,7 @@ function useChart(props, emit) {
|
|
|
118
123
|
maintainAspectRatio: false,
|
|
119
124
|
responsive: true,
|
|
120
125
|
animation: true,
|
|
121
|
-
cutout: type.value === "doughnut" ?
|
|
126
|
+
cutout: type.value === "doughnut" ? "65%" : 0,
|
|
122
127
|
...isHorizontalBarChart.value && {
|
|
123
128
|
indexAxis: "y"
|
|
124
129
|
},
|
|
@@ -145,7 +150,7 @@ function useChart(props, emit) {
|
|
|
145
150
|
},
|
|
146
151
|
datalabels: {
|
|
147
152
|
display: isShowDataLabels.value,
|
|
148
|
-
color: "#626B79",
|
|
153
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.default")) : "#626B79",
|
|
149
154
|
clamp: true,
|
|
150
155
|
font: {
|
|
151
156
|
size: 10
|
|
@@ -167,12 +172,12 @@ function useChart(props, emit) {
|
|
|
167
172
|
top: !isHorizontal.value ? 2 : 0,
|
|
168
173
|
right: isHorizontal.value ? 2 : 0
|
|
169
174
|
},
|
|
170
|
-
borderColor: "#FFFFFF"
|
|
175
|
+
borderColor: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.inverse")) : "#FFFFFF"
|
|
171
176
|
}
|
|
172
177
|
},
|
|
173
178
|
line: {
|
|
174
|
-
borderColor: isArea.value ? "#FFFFFF" : getListColors.value[1],
|
|
175
|
-
borderWidth: 2,
|
|
179
|
+
borderColor: isArea.value ? isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.inverse")) : "#FFFFFF" : getListColors.value[1],
|
|
180
|
+
borderWidth: isArea.value ? isNextTheme.value ? 4 : 2 : 2,
|
|
176
181
|
tension: isArea.value ? 0.4 : 0
|
|
177
182
|
},
|
|
178
183
|
point: {
|
|
@@ -183,8 +188,9 @@ function useChart(props, emit) {
|
|
|
183
188
|
},
|
|
184
189
|
arc: {
|
|
185
190
|
backgroundColor: getListColors.value[1],
|
|
186
|
-
borderColor: "#FFFFFF",
|
|
187
|
-
hoverBorderColor: "#FFFFFF"
|
|
191
|
+
borderColor: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.inverse")) : "#FFFFFF",
|
|
192
|
+
hoverBorderColor: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.inverse")) : "#FFFFFF",
|
|
193
|
+
borderWidth: isNextTheme.value ? 4 : 2
|
|
188
194
|
}
|
|
189
195
|
},
|
|
190
196
|
scales: {
|
|
@@ -196,11 +202,12 @@ function useChart(props, emit) {
|
|
|
196
202
|
grid: {
|
|
197
203
|
display: false,
|
|
198
204
|
drawOnChartArea: false,
|
|
199
|
-
drawTicks: false
|
|
205
|
+
drawTicks: false,
|
|
206
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.default")) : "#D0D6DD"
|
|
200
207
|
},
|
|
201
208
|
ticks: {
|
|
202
209
|
display: !isCircularChart.value && type.value !== "radar",
|
|
203
|
-
color: "#626B79"
|
|
210
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.secondary")) : "#626B79"
|
|
204
211
|
}
|
|
205
212
|
},
|
|
206
213
|
y: {
|
|
@@ -212,12 +219,12 @@ function useChart(props, emit) {
|
|
|
212
219
|
display: !isHorizontal.value,
|
|
213
220
|
drawOnChartArea: !isCircularChart.value && type.value !== "radar",
|
|
214
221
|
drawTicks: false,
|
|
215
|
-
color: "#D0D6DD"
|
|
222
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.default")) : "#D0D6DD"
|
|
216
223
|
},
|
|
217
224
|
ticks: {
|
|
218
225
|
display: !isCircularChart.value && type.value !== "radar",
|
|
219
226
|
beginAtZero: true,
|
|
220
|
-
color: "#626B79",
|
|
227
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.secondary")) : "#626B79",
|
|
221
228
|
padding: 8
|
|
222
229
|
}
|
|
223
230
|
},
|
|
@@ -225,16 +232,17 @@ function useChart(props, emit) {
|
|
|
225
232
|
r: {
|
|
226
233
|
angleLines: {
|
|
227
234
|
display: true,
|
|
228
|
-
color: "#D0D6DD"
|
|
235
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.default")) : "#D0D6DD"
|
|
229
236
|
},
|
|
230
237
|
grid: {
|
|
231
|
-
color: "#D0D6DD"
|
|
238
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.border.default")) : "#D0D6DD"
|
|
232
239
|
},
|
|
233
240
|
ticks: {
|
|
234
|
-
|
|
241
|
+
backdropColor: "transparent",
|
|
242
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.disabled")) : "#626B79"
|
|
235
243
|
},
|
|
236
244
|
pointLabels: {
|
|
237
|
-
color: "#626B79"
|
|
245
|
+
color: isNextTheme.value ? getComputedCSSVariableValue(import_tokens.token.var("colors.text.secondary")) : "#626B79"
|
|
238
246
|
}
|
|
239
247
|
}
|
|
240
248
|
}
|
|
@@ -271,37 +279,62 @@ function useChart(props, emit) {
|
|
|
271
279
|
datasets.forEach((item, index) => {
|
|
272
280
|
item.backgroundColor = item.backgroundColor || handleColorPattern(index, isFading);
|
|
273
281
|
item.borderColor = item.borderColor || handleColorPattern(index);
|
|
274
|
-
item.pointBackgroundColor = item.pointBackgroundColor ||
|
|
282
|
+
item.pointBackgroundColor = item.pointBackgroundColor || item.borderColor || handleColorPattern(index);
|
|
275
283
|
});
|
|
276
284
|
}
|
|
277
285
|
return datasets;
|
|
278
286
|
});
|
|
279
287
|
const getListColors = (0, import_vue.computed)(() => {
|
|
288
|
+
const newToken = {
|
|
289
|
+
1: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat01.bold")),
|
|
290
|
+
2: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat01")),
|
|
291
|
+
3: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat02.bold")),
|
|
292
|
+
4: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat02")),
|
|
293
|
+
5: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat03.bold")),
|
|
294
|
+
6: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat03")),
|
|
295
|
+
7: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat04.bold")),
|
|
296
|
+
8: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat04")),
|
|
297
|
+
9: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat05.bold")),
|
|
298
|
+
10: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat05")),
|
|
299
|
+
11: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat06.bold")),
|
|
300
|
+
12: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat06")),
|
|
301
|
+
13: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat07.bold")),
|
|
302
|
+
14: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat07")),
|
|
303
|
+
15: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat08.bold")),
|
|
304
|
+
16: getComputedCSSVariableValue(import_tokens.token.var("colors.chart.cat08"))
|
|
305
|
+
};
|
|
306
|
+
if (isNextTheme.value) {
|
|
307
|
+
if (isDark.value) {
|
|
308
|
+
return newToken;
|
|
309
|
+
} else {
|
|
310
|
+
return newToken;
|
|
311
|
+
}
|
|
312
|
+
}
|
|
280
313
|
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: (
|
|
314
|
+
1: getComputedCSSVariableValue(import_tokens.token.var("colors.sky.400")),
|
|
315
|
+
2: getComputedCSSVariableValue(import_tokens.token.var("colors.sky.100")),
|
|
316
|
+
3: getComputedCSSVariableValue(import_tokens.token.var("colors.teal.400")),
|
|
317
|
+
4: getComputedCSSVariableValue(import_tokens.token.var("colors.teal.100")),
|
|
318
|
+
5: getComputedCSSVariableValue(import_tokens.token.var("colors.violet.400")),
|
|
319
|
+
6: getComputedCSSVariableValue(import_tokens.token.var("colors.violet.100")),
|
|
320
|
+
7: getComputedCSSVariableValue(import_tokens.token.var("colors.amber.400")),
|
|
321
|
+
8: getComputedCSSVariableValue(import_tokens.token.var("colors.amber.100")),
|
|
322
|
+
9: getComputedCSSVariableValue(import_tokens.token.var("colors.rose.400")),
|
|
323
|
+
10: getComputedCSSVariableValue(import_tokens.token.var("colors.rose.100")),
|
|
324
|
+
11: getComputedCSSVariableValue(import_tokens.token.var("colors.stone.400")),
|
|
325
|
+
12: getComputedCSSVariableValue(import_tokens.token.var("colors.stone.100")),
|
|
326
|
+
13: getComputedCSSVariableValue(import_tokens.token.var("colors.lime.400")),
|
|
327
|
+
14: getComputedCSSVariableValue(import_tokens.token.var("colors.lime.100")),
|
|
328
|
+
15: getComputedCSSVariableValue(import_tokens.token.var("colors.pink.400")),
|
|
329
|
+
16: getComputedCSSVariableValue(import_tokens.token.var("colors.pink.100")),
|
|
330
|
+
17: getComputedCSSVariableValue(import_tokens.token.var("colors.apricot.400")),
|
|
331
|
+
18: getComputedCSSVariableValue(import_tokens.token.var("colors.apricot.100")),
|
|
332
|
+
19: getComputedCSSVariableValue(import_tokens.token.var("colors.aqua.400")),
|
|
333
|
+
20: getComputedCSSVariableValue(import_tokens.token.var("colors.aqua.100")),
|
|
334
|
+
21: getComputedCSSVariableValue(import_tokens.token.var("colors.leaf.400")),
|
|
335
|
+
22: getComputedCSSVariableValue(import_tokens.token.var("colors.leaf.100")),
|
|
336
|
+
23: getComputedCSSVariableValue(import_tokens.token.var("colors.fuchsia.400")),
|
|
337
|
+
24: getComputedCSSVariableValue(import_tokens.token.var("colors.fuchsia.100"))
|
|
305
338
|
};
|
|
306
339
|
});
|
|
307
340
|
const rootAttrs = (0, import_vue.computed)(() => {
|
|
@@ -415,7 +448,7 @@ function useChart(props, emit) {
|
|
|
415
448
|
return {
|
|
416
449
|
class: (0, import_recipes.chartSlotRecipe)().tooltipBox,
|
|
417
450
|
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
|
|
451
|
+
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
452
|
}
|
|
420
453
|
};
|
|
421
454
|
});
|
|
@@ -620,6 +653,10 @@ function useChart(props, emit) {
|
|
|
620
653
|
}
|
|
621
654
|
}, {
|
|
622
655
|
deep: true
|
|
656
|
+
}), (0, import_vue.watch)(() => isDark.value, (newVal, oldVal) => {
|
|
657
|
+
if (newVal !== oldVal) {
|
|
658
|
+
updateChart();
|
|
659
|
+
}
|
|
623
660
|
});
|
|
624
661
|
(0, import_vue.onMounted)(() => {
|
|
625
662
|
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.0",
|
|
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.
|
|
16
|
-
"@mekari/pixel3-
|
|
17
|
-
"@mekari/pixel3-
|
|
15
|
+
"@mekari/pixel3-styled-system": "0.1.2-dev.0",
|
|
16
|
+
"@mekari/pixel3-utils": "0.0.7-dev.0",
|
|
17
|
+
"@mekari/pixel3-text": "0.0.16-dev.0"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"vue": "^3.4.9"
|