@x-plat/design-system 0.5.7 → 0.5.8
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/components/Chart/index.cjs +33 -24
- package/dist/components/Chart/index.js +33 -24
- package/dist/components/index.cjs +33 -24
- package/dist/components/index.js +33 -24
- package/dist/index.cjs +33 -24
- package/dist/index.js +33 -24
- package/package.json +1 -1
|
@@ -37,23 +37,30 @@ module.exports = __toCommonJS(Chart_exports);
|
|
|
37
37
|
// src/components/Chart/Chart.tsx
|
|
38
38
|
var import_react = __toESM(require("react"), 1);
|
|
39
39
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
40
|
-
var
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
[
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
var
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
40
|
+
var CATEGORICAL_COUNT = 8;
|
|
41
|
+
var LINE_BAR_PALETTES = Array.from({ length: CATEGORICAL_COUNT }, (_, i) => {
|
|
42
|
+
const n = i + 1;
|
|
43
|
+
return [
|
|
44
|
+
`var(--semantic-categorical-${n}-bg)`,
|
|
45
|
+
`var(--semantic-categorical-${n}-area)`,
|
|
46
|
+
`var(--semantic-categorical-${n}-fill)`,
|
|
47
|
+
`var(--semantic-categorical-${n}-text)`
|
|
48
|
+
];
|
|
49
|
+
});
|
|
50
|
+
var PIE_COLORS = Array.from(
|
|
51
|
+
{ length: CATEGORICAL_COUNT },
|
|
52
|
+
(_, i) => `var(--semantic-categorical-${i + 1}-fill)`
|
|
53
|
+
);
|
|
54
|
+
var hashString = (str) => {
|
|
55
|
+
let hash = 0;
|
|
56
|
+
for (let i = 0; i < str.length; i++) {
|
|
57
|
+
hash = (hash << 5) - hash + str.charCodeAt(i) | 0;
|
|
58
|
+
}
|
|
59
|
+
return Math.abs(hash);
|
|
60
|
+
};
|
|
61
|
+
var getPalette = (palettes, index, key) => {
|
|
62
|
+
const offset = key ? hashString(key) : 0;
|
|
63
|
+
return palettes[(index + offset) % palettes.length];
|
|
57
64
|
};
|
|
58
65
|
var PADDING = { top: 20, right: 20, bottom: 30, left: 40 };
|
|
59
66
|
var useChartTooltip = (enabled) => {
|
|
@@ -123,8 +130,8 @@ var LineChart = import_react.default.memo(({ data, labels, onHover, onMove, onLe
|
|
|
123
130
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
|
|
124
131
|
}),
|
|
125
132
|
entries.map(([key], di) => {
|
|
126
|
-
const palette = getPalette(LINE_BAR_PALETTES, di);
|
|
127
|
-
const color = palette[
|
|
133
|
+
const palette = getPalette(LINE_BAR_PALETTES, di, key);
|
|
134
|
+
const color = palette[2];
|
|
128
135
|
const points = seriesPoints[di];
|
|
129
136
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
|
|
130
137
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -189,8 +196,8 @@ var BarChart = import_react.default.memo(({ data, labels, onHover, onMove, onLea
|
|
|
189
196
|
}),
|
|
190
197
|
labels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: PADDING.left + groupW * i + groupW / 2, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i)),
|
|
191
198
|
entries.map(([key], di) => {
|
|
192
|
-
const palette = getPalette(LINE_BAR_PALETTES, di);
|
|
193
|
-
const color = palette[
|
|
199
|
+
const palette = getPalette(LINE_BAR_PALETTES, di, key);
|
|
200
|
+
const color = palette[2];
|
|
194
201
|
return bars[di].map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
195
202
|
"rect",
|
|
196
203
|
{
|
|
@@ -213,13 +220,15 @@ var BarChart = import_react.default.memo(({ data, labels, onHover, onMove, onLea
|
|
|
213
220
|
BarChart.displayName = "BarChart";
|
|
214
221
|
var PieDonutChart = import_react.default.memo(
|
|
215
222
|
({ data, labels, isDoughnut, onHover, onMove, onLeave }) => {
|
|
216
|
-
const
|
|
223
|
+
const entries = import_react.default.useMemo(() => Object.entries(data), [data]);
|
|
224
|
+
const values = import_react.default.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
|
|
217
225
|
const total = import_react.default.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
|
|
218
226
|
const cx = 150;
|
|
219
227
|
const cy = 150;
|
|
220
228
|
const r = 120;
|
|
221
229
|
const innerR = isDoughnut ? 60 : 0;
|
|
222
|
-
const
|
|
230
|
+
const firstKey = entries[0]?.[0] ?? "";
|
|
231
|
+
const colorOffset = hashString(firstKey);
|
|
223
232
|
const sliceData = import_react.default.useMemo(() => {
|
|
224
233
|
let angle0 = -Math.PI / 2;
|
|
225
234
|
return values.map((v, i) => {
|
|
@@ -254,7 +263,7 @@ var PieDonutChart = import_react.default.memo(
|
|
|
254
263
|
"path",
|
|
255
264
|
{
|
|
256
265
|
d: s.d,
|
|
257
|
-
fill:
|
|
266
|
+
fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
|
|
258
267
|
className: "chart-slice",
|
|
259
268
|
onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
|
|
260
269
|
onMouseMove: onMove,
|
|
@@ -1,23 +1,30 @@
|
|
|
1
1
|
// src/components/Chart/Chart.tsx
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
-
var
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
[
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
var
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
4
|
+
var CATEGORICAL_COUNT = 8;
|
|
5
|
+
var LINE_BAR_PALETTES = Array.from({ length: CATEGORICAL_COUNT }, (_, i) => {
|
|
6
|
+
const n = i + 1;
|
|
7
|
+
return [
|
|
8
|
+
`var(--semantic-categorical-${n}-bg)`,
|
|
9
|
+
`var(--semantic-categorical-${n}-area)`,
|
|
10
|
+
`var(--semantic-categorical-${n}-fill)`,
|
|
11
|
+
`var(--semantic-categorical-${n}-text)`
|
|
12
|
+
];
|
|
13
|
+
});
|
|
14
|
+
var PIE_COLORS = Array.from(
|
|
15
|
+
{ length: CATEGORICAL_COUNT },
|
|
16
|
+
(_, i) => `var(--semantic-categorical-${i + 1}-fill)`
|
|
17
|
+
);
|
|
18
|
+
var hashString = (str) => {
|
|
19
|
+
let hash = 0;
|
|
20
|
+
for (let i = 0; i < str.length; i++) {
|
|
21
|
+
hash = (hash << 5) - hash + str.charCodeAt(i) | 0;
|
|
22
|
+
}
|
|
23
|
+
return Math.abs(hash);
|
|
24
|
+
};
|
|
25
|
+
var getPalette = (palettes, index, key) => {
|
|
26
|
+
const offset = key ? hashString(key) : 0;
|
|
27
|
+
return palettes[(index + offset) % palettes.length];
|
|
21
28
|
};
|
|
22
29
|
var PADDING = { top: 20, right: 20, bottom: 30, left: 40 };
|
|
23
30
|
var useChartTooltip = (enabled) => {
|
|
@@ -87,8 +94,8 @@ var LineChart = React.memo(({ data, labels, onHover, onMove, onLeave }) => {
|
|
|
87
94
|
return /* @__PURE__ */ jsx("text", { x, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
|
|
88
95
|
}),
|
|
89
96
|
entries.map(([key], di) => {
|
|
90
|
-
const palette = getPalette(LINE_BAR_PALETTES, di);
|
|
91
|
-
const color = palette[
|
|
97
|
+
const palette = getPalette(LINE_BAR_PALETTES, di, key);
|
|
98
|
+
const color = palette[2];
|
|
92
99
|
const points = seriesPoints[di];
|
|
93
100
|
return /* @__PURE__ */ jsxs("g", { children: [
|
|
94
101
|
/* @__PURE__ */ jsx(
|
|
@@ -153,8 +160,8 @@ var BarChart = React.memo(({ data, labels, onHover, onMove, onLeave }) => {
|
|
|
153
160
|
}),
|
|
154
161
|
labels.map((label, i) => /* @__PURE__ */ jsx("text", { x: PADDING.left + groupW * i + groupW / 2, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i)),
|
|
155
162
|
entries.map(([key], di) => {
|
|
156
|
-
const palette = getPalette(LINE_BAR_PALETTES, di);
|
|
157
|
-
const color = palette[
|
|
163
|
+
const palette = getPalette(LINE_BAR_PALETTES, di, key);
|
|
164
|
+
const color = palette[2];
|
|
158
165
|
return bars[di].map((b, i) => /* @__PURE__ */ jsx(
|
|
159
166
|
"rect",
|
|
160
167
|
{
|
|
@@ -177,13 +184,15 @@ var BarChart = React.memo(({ data, labels, onHover, onMove, onLeave }) => {
|
|
|
177
184
|
BarChart.displayName = "BarChart";
|
|
178
185
|
var PieDonutChart = React.memo(
|
|
179
186
|
({ data, labels, isDoughnut, onHover, onMove, onLeave }) => {
|
|
180
|
-
const
|
|
187
|
+
const entries = React.useMemo(() => Object.entries(data), [data]);
|
|
188
|
+
const values = React.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
|
|
181
189
|
const total = React.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
|
|
182
190
|
const cx = 150;
|
|
183
191
|
const cy = 150;
|
|
184
192
|
const r = 120;
|
|
185
193
|
const innerR = isDoughnut ? 60 : 0;
|
|
186
|
-
const
|
|
194
|
+
const firstKey = entries[0]?.[0] ?? "";
|
|
195
|
+
const colorOffset = hashString(firstKey);
|
|
187
196
|
const sliceData = React.useMemo(() => {
|
|
188
197
|
let angle0 = -Math.PI / 2;
|
|
189
198
|
return values.map((v, i) => {
|
|
@@ -218,7 +227,7 @@ var PieDonutChart = React.memo(
|
|
|
218
227
|
"path",
|
|
219
228
|
{
|
|
220
229
|
d: s.d,
|
|
221
|
-
fill:
|
|
230
|
+
fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
|
|
222
231
|
className: "chart-slice",
|
|
223
232
|
onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
|
|
224
233
|
onMouseMove: onMove,
|
|
@@ -2103,23 +2103,30 @@ var CardTab_default = CardTab;
|
|
|
2103
2103
|
// src/components/Chart/Chart.tsx
|
|
2104
2104
|
var import_react5 = __toESM(require("react"), 1);
|
|
2105
2105
|
var import_jsx_runtime305 = require("react/jsx-runtime");
|
|
2106
|
-
var
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
[
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
|
|
2113
|
-
|
|
2114
|
-
|
|
2115
|
-
|
|
2116
|
-
var
|
|
2117
|
-
|
|
2118
|
-
|
|
2119
|
-
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
|
|
2106
|
+
var CATEGORICAL_COUNT2 = 8;
|
|
2107
|
+
var LINE_BAR_PALETTES = Array.from({ length: CATEGORICAL_COUNT2 }, (_, i) => {
|
|
2108
|
+
const n = i + 1;
|
|
2109
|
+
return [
|
|
2110
|
+
`var(--semantic-categorical-${n}-bg)`,
|
|
2111
|
+
`var(--semantic-categorical-${n}-area)`,
|
|
2112
|
+
`var(--semantic-categorical-${n}-fill)`,
|
|
2113
|
+
`var(--semantic-categorical-${n}-text)`
|
|
2114
|
+
];
|
|
2115
|
+
});
|
|
2116
|
+
var PIE_COLORS = Array.from(
|
|
2117
|
+
{ length: CATEGORICAL_COUNT2 },
|
|
2118
|
+
(_, i) => `var(--semantic-categorical-${i + 1}-fill)`
|
|
2119
|
+
);
|
|
2120
|
+
var hashString = (str) => {
|
|
2121
|
+
let hash = 0;
|
|
2122
|
+
for (let i = 0; i < str.length; i++) {
|
|
2123
|
+
hash = (hash << 5) - hash + str.charCodeAt(i) | 0;
|
|
2124
|
+
}
|
|
2125
|
+
return Math.abs(hash);
|
|
2126
|
+
};
|
|
2127
|
+
var getPalette = (palettes, index, key) => {
|
|
2128
|
+
const offset = key ? hashString(key) : 0;
|
|
2129
|
+
return palettes[(index + offset) % palettes.length];
|
|
2123
2130
|
};
|
|
2124
2131
|
var PADDING = { top: 20, right: 20, bottom: 30, left: 40 };
|
|
2125
2132
|
var useChartTooltip = (enabled) => {
|
|
@@ -2189,8 +2196,8 @@ var LineChart = import_react5.default.memo(({ data, labels, onHover, onMove, onL
|
|
|
2189
2196
|
return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
|
|
2190
2197
|
}),
|
|
2191
2198
|
entries.map(([key], di) => {
|
|
2192
|
-
const palette = getPalette(LINE_BAR_PALETTES, di);
|
|
2193
|
-
const color = palette[
|
|
2199
|
+
const palette = getPalette(LINE_BAR_PALETTES, di, key);
|
|
2200
|
+
const color = palette[2];
|
|
2194
2201
|
const points = seriesPoints[di];
|
|
2195
2202
|
return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { children: [
|
|
2196
2203
|
/* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
|
|
@@ -2255,8 +2262,8 @@ var BarChart = import_react5.default.memo(({ data, labels, onHover, onMove, onLe
|
|
|
2255
2262
|
}),
|
|
2256
2263
|
labels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x: PADDING.left + groupW * i + groupW / 2, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i)),
|
|
2257
2264
|
entries.map(([key], di) => {
|
|
2258
|
-
const palette = getPalette(LINE_BAR_PALETTES, di);
|
|
2259
|
-
const color = palette[
|
|
2265
|
+
const palette = getPalette(LINE_BAR_PALETTES, di, key);
|
|
2266
|
+
const color = palette[2];
|
|
2260
2267
|
return bars[di].map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
|
|
2261
2268
|
"rect",
|
|
2262
2269
|
{
|
|
@@ -2279,13 +2286,15 @@ var BarChart = import_react5.default.memo(({ data, labels, onHover, onMove, onLe
|
|
|
2279
2286
|
BarChart.displayName = "BarChart";
|
|
2280
2287
|
var PieDonutChart = import_react5.default.memo(
|
|
2281
2288
|
({ data, labels, isDoughnut, onHover, onMove, onLeave }) => {
|
|
2282
|
-
const
|
|
2289
|
+
const entries = import_react5.default.useMemo(() => Object.entries(data), [data]);
|
|
2290
|
+
const values = import_react5.default.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
|
|
2283
2291
|
const total = import_react5.default.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
|
|
2284
2292
|
const cx = 150;
|
|
2285
2293
|
const cy = 150;
|
|
2286
2294
|
const r2 = 120;
|
|
2287
2295
|
const innerR = isDoughnut ? 60 : 0;
|
|
2288
|
-
const
|
|
2296
|
+
const firstKey = entries[0]?.[0] ?? "";
|
|
2297
|
+
const colorOffset = hashString(firstKey);
|
|
2289
2298
|
const sliceData = import_react5.default.useMemo(() => {
|
|
2290
2299
|
let angle0 = -Math.PI / 2;
|
|
2291
2300
|
return values.map((v, i) => {
|
|
@@ -2320,7 +2329,7 @@ var PieDonutChart = import_react5.default.memo(
|
|
|
2320
2329
|
"path",
|
|
2321
2330
|
{
|
|
2322
2331
|
d: s.d,
|
|
2323
|
-
fill:
|
|
2332
|
+
fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
|
|
2324
2333
|
className: "chart-slice",
|
|
2325
2334
|
onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
|
|
2326
2335
|
onMouseMove: onMove,
|
package/dist/components/index.js
CHANGED
|
@@ -2015,23 +2015,30 @@ var CardTab_default = CardTab;
|
|
|
2015
2015
|
// src/components/Chart/Chart.tsx
|
|
2016
2016
|
import React5 from "react";
|
|
2017
2017
|
import { jsx as jsx305, jsxs as jsxs196 } from "react/jsx-runtime";
|
|
2018
|
-
var
|
|
2019
|
-
|
|
2020
|
-
|
|
2021
|
-
[
|
|
2022
|
-
|
|
2023
|
-
|
|
2024
|
-
|
|
2025
|
-
|
|
2026
|
-
|
|
2027
|
-
|
|
2028
|
-
var
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
|
|
2033
|
-
|
|
2034
|
-
|
|
2018
|
+
var CATEGORICAL_COUNT2 = 8;
|
|
2019
|
+
var LINE_BAR_PALETTES = Array.from({ length: CATEGORICAL_COUNT2 }, (_, i) => {
|
|
2020
|
+
const n = i + 1;
|
|
2021
|
+
return [
|
|
2022
|
+
`var(--semantic-categorical-${n}-bg)`,
|
|
2023
|
+
`var(--semantic-categorical-${n}-area)`,
|
|
2024
|
+
`var(--semantic-categorical-${n}-fill)`,
|
|
2025
|
+
`var(--semantic-categorical-${n}-text)`
|
|
2026
|
+
];
|
|
2027
|
+
});
|
|
2028
|
+
var PIE_COLORS = Array.from(
|
|
2029
|
+
{ length: CATEGORICAL_COUNT2 },
|
|
2030
|
+
(_, i) => `var(--semantic-categorical-${i + 1}-fill)`
|
|
2031
|
+
);
|
|
2032
|
+
var hashString = (str) => {
|
|
2033
|
+
let hash = 0;
|
|
2034
|
+
for (let i = 0; i < str.length; i++) {
|
|
2035
|
+
hash = (hash << 5) - hash + str.charCodeAt(i) | 0;
|
|
2036
|
+
}
|
|
2037
|
+
return Math.abs(hash);
|
|
2038
|
+
};
|
|
2039
|
+
var getPalette = (palettes, index, key) => {
|
|
2040
|
+
const offset = key ? hashString(key) : 0;
|
|
2041
|
+
return palettes[(index + offset) % palettes.length];
|
|
2035
2042
|
};
|
|
2036
2043
|
var PADDING = { top: 20, right: 20, bottom: 30, left: 40 };
|
|
2037
2044
|
var useChartTooltip = (enabled) => {
|
|
@@ -2101,8 +2108,8 @@ var LineChart = React5.memo(({ data, labels, onHover, onMove, onLeave }) => {
|
|
|
2101
2108
|
return /* @__PURE__ */ jsx305("text", { x, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
|
|
2102
2109
|
}),
|
|
2103
2110
|
entries.map(([key], di) => {
|
|
2104
|
-
const palette = getPalette(LINE_BAR_PALETTES, di);
|
|
2105
|
-
const color = palette[
|
|
2111
|
+
const palette = getPalette(LINE_BAR_PALETTES, di, key);
|
|
2112
|
+
const color = palette[2];
|
|
2106
2113
|
const points = seriesPoints[di];
|
|
2107
2114
|
return /* @__PURE__ */ jsxs196("g", { children: [
|
|
2108
2115
|
/* @__PURE__ */ jsx305(
|
|
@@ -2167,8 +2174,8 @@ var BarChart = React5.memo(({ data, labels, onHover, onMove, onLeave }) => {
|
|
|
2167
2174
|
}),
|
|
2168
2175
|
labels.map((label, i) => /* @__PURE__ */ jsx305("text", { x: PADDING.left + groupW * i + groupW / 2, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i)),
|
|
2169
2176
|
entries.map(([key], di) => {
|
|
2170
|
-
const palette = getPalette(LINE_BAR_PALETTES, di);
|
|
2171
|
-
const color = palette[
|
|
2177
|
+
const palette = getPalette(LINE_BAR_PALETTES, di, key);
|
|
2178
|
+
const color = palette[2];
|
|
2172
2179
|
return bars[di].map((b, i) => /* @__PURE__ */ jsx305(
|
|
2173
2180
|
"rect",
|
|
2174
2181
|
{
|
|
@@ -2191,13 +2198,15 @@ var BarChart = React5.memo(({ data, labels, onHover, onMove, onLeave }) => {
|
|
|
2191
2198
|
BarChart.displayName = "BarChart";
|
|
2192
2199
|
var PieDonutChart = React5.memo(
|
|
2193
2200
|
({ data, labels, isDoughnut, onHover, onMove, onLeave }) => {
|
|
2194
|
-
const
|
|
2201
|
+
const entries = React5.useMemo(() => Object.entries(data), [data]);
|
|
2202
|
+
const values = React5.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
|
|
2195
2203
|
const total = React5.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
|
|
2196
2204
|
const cx = 150;
|
|
2197
2205
|
const cy = 150;
|
|
2198
2206
|
const r2 = 120;
|
|
2199
2207
|
const innerR = isDoughnut ? 60 : 0;
|
|
2200
|
-
const
|
|
2208
|
+
const firstKey = entries[0]?.[0] ?? "";
|
|
2209
|
+
const colorOffset = hashString(firstKey);
|
|
2201
2210
|
const sliceData = React5.useMemo(() => {
|
|
2202
2211
|
let angle0 = -Math.PI / 2;
|
|
2203
2212
|
return values.map((v, i) => {
|
|
@@ -2232,7 +2241,7 @@ var PieDonutChart = React5.memo(
|
|
|
2232
2241
|
"path",
|
|
2233
2242
|
{
|
|
2234
2243
|
d: s.d,
|
|
2235
|
-
fill:
|
|
2244
|
+
fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
|
|
2236
2245
|
className: "chart-slice",
|
|
2237
2246
|
onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
|
|
2238
2247
|
onMouseMove: onMove,
|
package/dist/index.cjs
CHANGED
|
@@ -6514,23 +6514,30 @@ var CardTab_default = CardTab;
|
|
|
6514
6514
|
// src/components/Chart/Chart.tsx
|
|
6515
6515
|
var import_react5 = __toESM(require("react"), 1);
|
|
6516
6516
|
var import_jsx_runtime305 = require("react/jsx-runtime");
|
|
6517
|
-
var
|
|
6518
|
-
|
|
6519
|
-
|
|
6520
|
-
[
|
|
6521
|
-
|
|
6522
|
-
|
|
6523
|
-
|
|
6524
|
-
|
|
6525
|
-
|
|
6526
|
-
|
|
6527
|
-
var
|
|
6528
|
-
|
|
6529
|
-
|
|
6530
|
-
|
|
6531
|
-
|
|
6532
|
-
|
|
6533
|
-
|
|
6517
|
+
var CATEGORICAL_COUNT2 = 8;
|
|
6518
|
+
var LINE_BAR_PALETTES = Array.from({ length: CATEGORICAL_COUNT2 }, (_, i) => {
|
|
6519
|
+
const n = i + 1;
|
|
6520
|
+
return [
|
|
6521
|
+
`var(--semantic-categorical-${n}-bg)`,
|
|
6522
|
+
`var(--semantic-categorical-${n}-area)`,
|
|
6523
|
+
`var(--semantic-categorical-${n}-fill)`,
|
|
6524
|
+
`var(--semantic-categorical-${n}-text)`
|
|
6525
|
+
];
|
|
6526
|
+
});
|
|
6527
|
+
var PIE_COLORS = Array.from(
|
|
6528
|
+
{ length: CATEGORICAL_COUNT2 },
|
|
6529
|
+
(_, i) => `var(--semantic-categorical-${i + 1}-fill)`
|
|
6530
|
+
);
|
|
6531
|
+
var hashString = (str) => {
|
|
6532
|
+
let hash = 0;
|
|
6533
|
+
for (let i = 0; i < str.length; i++) {
|
|
6534
|
+
hash = (hash << 5) - hash + str.charCodeAt(i) | 0;
|
|
6535
|
+
}
|
|
6536
|
+
return Math.abs(hash);
|
|
6537
|
+
};
|
|
6538
|
+
var getPalette = (palettes, index, key) => {
|
|
6539
|
+
const offset = key ? hashString(key) : 0;
|
|
6540
|
+
return palettes[(index + offset) % palettes.length];
|
|
6534
6541
|
};
|
|
6535
6542
|
var PADDING = { top: 20, right: 20, bottom: 30, left: 40 };
|
|
6536
6543
|
var useChartTooltip = (enabled) => {
|
|
@@ -6600,8 +6607,8 @@ var LineChart = import_react5.default.memo(({ data, labels, onHover, onMove, onL
|
|
|
6600
6607
|
return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
|
|
6601
6608
|
}),
|
|
6602
6609
|
entries.map(([key], di) => {
|
|
6603
|
-
const palette = getPalette(LINE_BAR_PALETTES, di);
|
|
6604
|
-
const color = palette[
|
|
6610
|
+
const palette = getPalette(LINE_BAR_PALETTES, di, key);
|
|
6611
|
+
const color = palette[2];
|
|
6605
6612
|
const points = seriesPoints[di];
|
|
6606
6613
|
return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { children: [
|
|
6607
6614
|
/* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
|
|
@@ -6666,8 +6673,8 @@ var BarChart = import_react5.default.memo(({ data, labels, onHover, onMove, onLe
|
|
|
6666
6673
|
}),
|
|
6667
6674
|
labels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x: PADDING.left + groupW * i + groupW / 2, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i)),
|
|
6668
6675
|
entries.map(([key], di) => {
|
|
6669
|
-
const palette = getPalette(LINE_BAR_PALETTES, di);
|
|
6670
|
-
const color = palette[
|
|
6676
|
+
const palette = getPalette(LINE_BAR_PALETTES, di, key);
|
|
6677
|
+
const color = palette[2];
|
|
6671
6678
|
return bars[di].map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
|
|
6672
6679
|
"rect",
|
|
6673
6680
|
{
|
|
@@ -6690,13 +6697,15 @@ var BarChart = import_react5.default.memo(({ data, labels, onHover, onMove, onLe
|
|
|
6690
6697
|
BarChart.displayName = "BarChart";
|
|
6691
6698
|
var PieDonutChart = import_react5.default.memo(
|
|
6692
6699
|
({ data, labels, isDoughnut, onHover, onMove, onLeave }) => {
|
|
6693
|
-
const
|
|
6700
|
+
const entries = import_react5.default.useMemo(() => Object.entries(data), [data]);
|
|
6701
|
+
const values = import_react5.default.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
|
|
6694
6702
|
const total = import_react5.default.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
|
|
6695
6703
|
const cx = 150;
|
|
6696
6704
|
const cy = 150;
|
|
6697
6705
|
const r2 = 120;
|
|
6698
6706
|
const innerR = isDoughnut ? 60 : 0;
|
|
6699
|
-
const
|
|
6707
|
+
const firstKey = entries[0]?.[0] ?? "";
|
|
6708
|
+
const colorOffset = hashString(firstKey);
|
|
6700
6709
|
const sliceData = import_react5.default.useMemo(() => {
|
|
6701
6710
|
let angle0 = -Math.PI / 2;
|
|
6702
6711
|
return values.map((v, i) => {
|
|
@@ -6731,7 +6740,7 @@ var PieDonutChart = import_react5.default.memo(
|
|
|
6731
6740
|
"path",
|
|
6732
6741
|
{
|
|
6733
6742
|
d: s.d,
|
|
6734
|
-
fill:
|
|
6743
|
+
fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
|
|
6735
6744
|
className: "chart-slice",
|
|
6736
6745
|
onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
|
|
6737
6746
|
onMouseMove: onMove,
|
package/dist/index.js
CHANGED
|
@@ -6117,23 +6117,30 @@ var CardTab_default = CardTab;
|
|
|
6117
6117
|
// src/components/Chart/Chart.tsx
|
|
6118
6118
|
import React5 from "react";
|
|
6119
6119
|
import { jsx as jsx305, jsxs as jsxs196 } from "react/jsx-runtime";
|
|
6120
|
-
var
|
|
6121
|
-
|
|
6122
|
-
|
|
6123
|
-
[
|
|
6124
|
-
|
|
6125
|
-
|
|
6126
|
-
|
|
6127
|
-
|
|
6128
|
-
|
|
6129
|
-
|
|
6130
|
-
var
|
|
6131
|
-
|
|
6132
|
-
|
|
6133
|
-
|
|
6134
|
-
|
|
6135
|
-
|
|
6136
|
-
|
|
6120
|
+
var CATEGORICAL_COUNT2 = 8;
|
|
6121
|
+
var LINE_BAR_PALETTES = Array.from({ length: CATEGORICAL_COUNT2 }, (_, i) => {
|
|
6122
|
+
const n = i + 1;
|
|
6123
|
+
return [
|
|
6124
|
+
`var(--semantic-categorical-${n}-bg)`,
|
|
6125
|
+
`var(--semantic-categorical-${n}-area)`,
|
|
6126
|
+
`var(--semantic-categorical-${n}-fill)`,
|
|
6127
|
+
`var(--semantic-categorical-${n}-text)`
|
|
6128
|
+
];
|
|
6129
|
+
});
|
|
6130
|
+
var PIE_COLORS = Array.from(
|
|
6131
|
+
{ length: CATEGORICAL_COUNT2 },
|
|
6132
|
+
(_, i) => `var(--semantic-categorical-${i + 1}-fill)`
|
|
6133
|
+
);
|
|
6134
|
+
var hashString = (str) => {
|
|
6135
|
+
let hash = 0;
|
|
6136
|
+
for (let i = 0; i < str.length; i++) {
|
|
6137
|
+
hash = (hash << 5) - hash + str.charCodeAt(i) | 0;
|
|
6138
|
+
}
|
|
6139
|
+
return Math.abs(hash);
|
|
6140
|
+
};
|
|
6141
|
+
var getPalette = (palettes, index, key) => {
|
|
6142
|
+
const offset = key ? hashString(key) : 0;
|
|
6143
|
+
return palettes[(index + offset) % palettes.length];
|
|
6137
6144
|
};
|
|
6138
6145
|
var PADDING = { top: 20, right: 20, bottom: 30, left: 40 };
|
|
6139
6146
|
var useChartTooltip = (enabled) => {
|
|
@@ -6203,8 +6210,8 @@ var LineChart = React5.memo(({ data, labels, onHover, onMove, onLeave }) => {
|
|
|
6203
6210
|
return /* @__PURE__ */ jsx305("text", { x, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
|
|
6204
6211
|
}),
|
|
6205
6212
|
entries.map(([key], di) => {
|
|
6206
|
-
const palette = getPalette(LINE_BAR_PALETTES, di);
|
|
6207
|
-
const color = palette[
|
|
6213
|
+
const palette = getPalette(LINE_BAR_PALETTES, di, key);
|
|
6214
|
+
const color = palette[2];
|
|
6208
6215
|
const points = seriesPoints[di];
|
|
6209
6216
|
return /* @__PURE__ */ jsxs196("g", { children: [
|
|
6210
6217
|
/* @__PURE__ */ jsx305(
|
|
@@ -6269,8 +6276,8 @@ var BarChart = React5.memo(({ data, labels, onHover, onMove, onLeave }) => {
|
|
|
6269
6276
|
}),
|
|
6270
6277
|
labels.map((label, i) => /* @__PURE__ */ jsx305("text", { x: PADDING.left + groupW * i + groupW / 2, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i)),
|
|
6271
6278
|
entries.map(([key], di) => {
|
|
6272
|
-
const palette = getPalette(LINE_BAR_PALETTES, di);
|
|
6273
|
-
const color = palette[
|
|
6279
|
+
const palette = getPalette(LINE_BAR_PALETTES, di, key);
|
|
6280
|
+
const color = palette[2];
|
|
6274
6281
|
return bars[di].map((b, i) => /* @__PURE__ */ jsx305(
|
|
6275
6282
|
"rect",
|
|
6276
6283
|
{
|
|
@@ -6293,13 +6300,15 @@ var BarChart = React5.memo(({ data, labels, onHover, onMove, onLeave }) => {
|
|
|
6293
6300
|
BarChart.displayName = "BarChart";
|
|
6294
6301
|
var PieDonutChart = React5.memo(
|
|
6295
6302
|
({ data, labels, isDoughnut, onHover, onMove, onLeave }) => {
|
|
6296
|
-
const
|
|
6303
|
+
const entries = React5.useMemo(() => Object.entries(data), [data]);
|
|
6304
|
+
const values = React5.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
|
|
6297
6305
|
const total = React5.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
|
|
6298
6306
|
const cx = 150;
|
|
6299
6307
|
const cy = 150;
|
|
6300
6308
|
const r2 = 120;
|
|
6301
6309
|
const innerR = isDoughnut ? 60 : 0;
|
|
6302
|
-
const
|
|
6310
|
+
const firstKey = entries[0]?.[0] ?? "";
|
|
6311
|
+
const colorOffset = hashString(firstKey);
|
|
6303
6312
|
const sliceData = React5.useMemo(() => {
|
|
6304
6313
|
let angle0 = -Math.PI / 2;
|
|
6305
6314
|
return values.map((v, i) => {
|
|
@@ -6334,7 +6343,7 @@ var PieDonutChart = React5.memo(
|
|
|
6334
6343
|
"path",
|
|
6335
6344
|
{
|
|
6336
6345
|
d: s.d,
|
|
6337
|
-
fill:
|
|
6346
|
+
fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
|
|
6338
6347
|
className: "chart-slice",
|
|
6339
6348
|
onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
|
|
6340
6349
|
onMouseMove: onMove,
|