@demokit-ui/demokit 0.1.1 → 0.1.2
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.
|
@@ -16,7 +16,6 @@ export interface TweakPanelProps {
|
|
|
16
16
|
showRadius?: boolean;
|
|
17
17
|
showContainer?: boolean;
|
|
18
18
|
}
|
|
19
|
-
export
|
|
20
|
-
}
|
|
19
|
+
export type TweakScopeProps = ComponentPropsWithoutRef<'div'>;
|
|
21
20
|
export declare function TweakScope({ className, ...props }: TweakScopeProps): import("react/jsx-runtime").JSX.Element;
|
|
22
21
|
export declare function TweakPanel({ triggerLabel, triggerTitle, title, description, resetLabel, side, align, sideOffset, triggerClassName, contentClassName, showTheme, showDensity, showRadius, showContainer, }: TweakPanelProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -8,6 +8,17 @@ export declare function ChartMixed(): import("react/jsx-runtime").JSX.Element;
|
|
|
8
8
|
export declare function ChartRadialBar(): import("react/jsx-runtime").JSX.Element;
|
|
9
9
|
export declare function ChartRadar(): import("react/jsx-runtime").JSX.Element;
|
|
10
10
|
export declare function ChartHeatmap(): import("react/jsx-runtime").JSX.Element;
|
|
11
|
-
export
|
|
11
|
+
export interface ChartFunnelStage {
|
|
12
|
+
label: string;
|
|
13
|
+
value: number;
|
|
14
|
+
}
|
|
15
|
+
export interface ChartFunnelProps {
|
|
16
|
+
stages?: ChartFunnelStage[];
|
|
17
|
+
height?: number;
|
|
18
|
+
seriesName?: string;
|
|
19
|
+
unit?: string;
|
|
20
|
+
valueFormatter?: (value: number, stage: ChartFunnelStage) => string;
|
|
21
|
+
}
|
|
22
|
+
export declare function ChartFunnel({ stages, height, seriesName, unit, valueFormatter, }?: ChartFunnelProps): import("react/jsx-runtime").JSX.Element;
|
|
12
23
|
export declare function ChartTimeline(): import("react/jsx-runtime").JSX.Element;
|
|
13
24
|
export declare function ChartShowcase(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,7 +1,12 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { Suspense as g, lazy as
|
|
1
|
+
import { jsxs as a, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { Suspense as g, lazy as y } from "react";
|
|
3
3
|
import { useChartPalette as c } from "../../../tokens/chart-palette.js";
|
|
4
|
-
const
|
|
4
|
+
const v = y(async () => {
|
|
5
|
+
const o = (await import("react-apexcharts")).default, t = o && typeof o == "object" && "default" in o ? o.default : o;
|
|
6
|
+
if (!t)
|
|
7
|
+
throw new Error("react-apexcharts default export is unavailable");
|
|
8
|
+
return { default: t };
|
|
9
|
+
});
|
|
5
10
|
function d(r) {
|
|
6
11
|
return /* @__PURE__ */ e(
|
|
7
12
|
g,
|
|
@@ -14,19 +19,19 @@ function d(r) {
|
|
|
14
19
|
children: "加载图表..."
|
|
15
20
|
}
|
|
16
21
|
),
|
|
17
|
-
children: /* @__PURE__ */ e(
|
|
22
|
+
children: /* @__PURE__ */ e(v, { ...r })
|
|
18
23
|
}
|
|
19
24
|
);
|
|
20
25
|
}
|
|
21
|
-
function
|
|
22
|
-
return /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-x-4 gap-y-1 text-sm mt-2", children: r.map((o) => /* @__PURE__ */
|
|
26
|
+
function u({ items: r }) {
|
|
27
|
+
return /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-x-4 gap-y-1 text-sm mt-2", children: r.map((o) => /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
|
|
23
28
|
/* @__PURE__ */ e("span", { className: "size-2 rounded-full shrink-0", style: { background: o.color } }),
|
|
24
29
|
/* @__PURE__ */ e("span", { children: o.name })
|
|
25
30
|
] }, o.name)) });
|
|
26
31
|
}
|
|
27
|
-
function
|
|
28
|
-
const r = c(), o = ["文档模板", "检查单", "评审规范", "其他"],
|
|
29
|
-
return /* @__PURE__ */
|
|
32
|
+
function w() {
|
|
33
|
+
const r = c(), o = ["文档模板", "检查单", "评审规范", "其他"], t = [40, 24, 18, 18], n = o.map((s, m) => r[m % r.length]);
|
|
34
|
+
return /* @__PURE__ */ a("div", { className: "flex items-center gap-6", children: [
|
|
30
35
|
/* @__PURE__ */ e(d, { options: {
|
|
31
36
|
chart: { type: "donut" },
|
|
32
37
|
labels: o,
|
|
@@ -47,18 +52,18 @@ function v() {
|
|
|
47
52
|
}
|
|
48
53
|
}
|
|
49
54
|
}
|
|
50
|
-
}, series:
|
|
51
|
-
/* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-2 text-sm", children: o.map((s,
|
|
52
|
-
/* @__PURE__ */ e("span", { className: "size-2 rounded-full shrink-0", style: { background: n[
|
|
55
|
+
}, series: t, type: "donut", height: 200, width: 200 }),
|
|
56
|
+
/* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-2 text-sm", children: o.map((s, m) => /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
|
|
57
|
+
/* @__PURE__ */ e("span", { className: "size-2 rounded-full shrink-0", style: { background: n[m] } }),
|
|
53
58
|
/* @__PURE__ */ e("span", { className: "flex-1", children: s }),
|
|
54
|
-
/* @__PURE__ */
|
|
55
|
-
|
|
59
|
+
/* @__PURE__ */ a("span", { className: "font-mono text-xs text-muted-foreground", children: [
|
|
60
|
+
t[m],
|
|
56
61
|
"%"
|
|
57
62
|
] })
|
|
58
63
|
] }, s)) })
|
|
59
64
|
] });
|
|
60
65
|
}
|
|
61
|
-
function
|
|
66
|
+
function k() {
|
|
62
67
|
const r = c(), o = {
|
|
63
68
|
chart: { type: "area", sparkline: { enabled: !0 } },
|
|
64
69
|
stroke: { curve: "smooth", width: 2, colors: [r[0]] },
|
|
@@ -66,20 +71,20 @@ function w() {
|
|
|
66
71
|
colors: [r[0]],
|
|
67
72
|
tooltip: { enabled: !1 }
|
|
68
73
|
};
|
|
69
|
-
return /* @__PURE__ */
|
|
70
|
-
/* @__PURE__ */
|
|
74
|
+
return /* @__PURE__ */ a("div", { className: "flex items-center gap-6", children: [
|
|
75
|
+
/* @__PURE__ */ a("div", { children: [
|
|
71
76
|
/* @__PURE__ */ e("div", { className: "text-xs text-muted-foreground", children: "本周流程" }),
|
|
72
77
|
/* @__PURE__ */ e("div", { className: "text-2xl font-semibold", children: "14" })
|
|
73
78
|
] }),
|
|
74
79
|
/* @__PURE__ */ e(d, { options: o, series: [{ data: [8, 10, 9, 11, 13, 12, 14] }], type: "area", height: 42, width: 120 })
|
|
75
80
|
] });
|
|
76
81
|
}
|
|
77
|
-
function
|
|
82
|
+
function N() {
|
|
78
83
|
const r = c(), o = [
|
|
79
84
|
{ name: "2024", data: [44, 55, 57, 56] },
|
|
80
85
|
{ name: "2025", data: [76, 85, 101, 98] }
|
|
81
|
-
],
|
|
82
|
-
return /* @__PURE__ */
|
|
86
|
+
], t = r.slice(0, 2);
|
|
87
|
+
return /* @__PURE__ */ a("div", { children: [
|
|
83
88
|
/* @__PURE__ */ e(d, { options: {
|
|
84
89
|
chart: { type: "bar", toolbar: { show: !1 } },
|
|
85
90
|
plotOptions: { bar: { horizontal: !1, columnWidth: "50%", borderRadius: 4, borderRadiusApplication: "end" } },
|
|
@@ -87,17 +92,17 @@ function k() {
|
|
|
87
92
|
stroke: { show: !0, width: 2, colors: ["transparent"] },
|
|
88
93
|
xaxis: { categories: ["Q1", "Q2", "Q3", "Q4"], axisBorder: { color: "var(--color-border)" }, axisTicks: { color: "var(--color-border)" } },
|
|
89
94
|
yaxis: { labels: { style: { colors: "var(--color-muted-foreground)" } } },
|
|
90
|
-
colors:
|
|
95
|
+
colors: t,
|
|
91
96
|
fill: { opacity: 1 },
|
|
92
97
|
tooltip: { y: { formatter: (l) => `${l} 万` } },
|
|
93
98
|
legend: { show: !1 },
|
|
94
99
|
grid: { borderColor: "var(--color-border)", strokeDashArray: 3 }
|
|
95
100
|
}, series: o, type: "bar", height: 260 }),
|
|
96
|
-
/* @__PURE__ */ e(
|
|
101
|
+
/* @__PURE__ */ e(u, { items: o.map((l, s) => ({ name: l.name, color: t[s] })) })
|
|
97
102
|
] });
|
|
98
103
|
}
|
|
99
104
|
function C() {
|
|
100
|
-
const r = c(), o = ["研发部", "产品部", "设计部", "运营部", "市场部", "行政部"],
|
|
105
|
+
const r = c(), o = ["研发部", "产品部", "设计部", "运营部", "市场部", "行政部"], t = [44, 55, 57, 56, 61, 58], n = {
|
|
101
106
|
chart: { type: "bar", toolbar: { show: !1 } },
|
|
102
107
|
plotOptions: { bar: { horizontal: !0, borderRadius: 4, borderRadiusApplication: "end", barHeight: "60%" } },
|
|
103
108
|
dataLabels: { enabled: !0, style: { colors: ["var(--color-card)"], fontSize: "11px", fontWeight: 600 } },
|
|
@@ -108,54 +113,54 @@ function C() {
|
|
|
108
113
|
legend: { show: !1 },
|
|
109
114
|
tooltip: { y: { formatter: (l) => `${l} 人` } }
|
|
110
115
|
};
|
|
111
|
-
return /* @__PURE__ */ e(d, { options: n, series: [{ name: "人员数", data:
|
|
116
|
+
return /* @__PURE__ */ e(d, { options: n, series: [{ name: "人员数", data: t }], type: "bar", height: 280 });
|
|
112
117
|
}
|
|
113
|
-
function
|
|
118
|
+
function z() {
|
|
114
119
|
const r = c(), o = [
|
|
115
120
|
{ name: "申报量", data: [31, 40, 28, 51, 42, 109] },
|
|
116
121
|
{ name: "通过数", data: [11, 32, 45, 32, 34, 52] },
|
|
117
122
|
{ name: "驳回数", data: [4, 8, 6, 10, 7, 9] }
|
|
118
|
-
],
|
|
119
|
-
return /* @__PURE__ */
|
|
123
|
+
], t = r.slice(0, 3);
|
|
124
|
+
return /* @__PURE__ */ a("div", { children: [
|
|
120
125
|
/* @__PURE__ */ e(d, { options: {
|
|
121
126
|
chart: { type: "line", toolbar: { show: !1 }, zoom: { enabled: !1 } },
|
|
122
127
|
stroke: { curve: "smooth", width: 2 },
|
|
123
128
|
markers: { size: 0, hover: { size: 5 } },
|
|
124
129
|
xaxis: { categories: ["1月", "2月", "3月", "4月", "5月", "6月"], axisBorder: { color: "var(--color-border)" }, axisTicks: { color: "var(--color-border)" }, labels: { style: { colors: "var(--color-muted-foreground)" } } },
|
|
125
130
|
yaxis: { labels: { style: { colors: "var(--color-muted-foreground)" } } },
|
|
126
|
-
colors:
|
|
131
|
+
colors: t,
|
|
127
132
|
legend: { show: !1 },
|
|
128
133
|
grid: { borderColor: "var(--color-border)", strokeDashArray: 3 },
|
|
129
134
|
tooltip: { shared: !0, intersect: !1 }
|
|
130
135
|
}, series: o, type: "line", height: 260 }),
|
|
131
|
-
/* @__PURE__ */ e(
|
|
136
|
+
/* @__PURE__ */ e(u, { items: o.map((l, s) => ({ name: l.name, color: t[s] })) })
|
|
132
137
|
] });
|
|
133
138
|
}
|
|
134
|
-
function
|
|
139
|
+
function T() {
|
|
135
140
|
const r = c(), o = [
|
|
136
141
|
{ name: "研发", data: [31, 40, 28, 51, 42, 20, 15] },
|
|
137
142
|
{ name: "设计", data: [11, 32, 45, 32, 34, 18, 12] },
|
|
138
143
|
{ name: "测试", data: [14, 18, 22, 28, 26, 15, 10] }
|
|
139
|
-
],
|
|
140
|
-
return /* @__PURE__ */
|
|
144
|
+
], t = r.slice(0, 3);
|
|
145
|
+
return /* @__PURE__ */ a("div", { children: [
|
|
141
146
|
/* @__PURE__ */ e(d, { options: {
|
|
142
147
|
chart: { type: "area", stacked: !0, toolbar: { show: !1 }, zoom: { enabled: !1 } },
|
|
143
148
|
stroke: { curve: "smooth", width: 2, colors: ["var(--color-card)"] },
|
|
144
149
|
fill: { type: "gradient", gradient: { opacityFrom: 0.7, opacityTo: 0.2 } },
|
|
145
150
|
xaxis: { categories: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], axisBorder: { color: "var(--color-border)" }, axisTicks: { color: "var(--color-border)" }, labels: { style: { colors: "var(--color-muted-foreground)" } } },
|
|
146
151
|
yaxis: { labels: { style: { colors: "var(--color-muted-foreground)" } } },
|
|
147
|
-
colors:
|
|
152
|
+
colors: t,
|
|
148
153
|
legend: { show: !1 },
|
|
149
154
|
grid: { borderColor: "var(--color-border)", strokeDashArray: 3 },
|
|
150
155
|
dataLabels: { enabled: !1 },
|
|
151
156
|
tooltip: { shared: !0 }
|
|
152
157
|
}, series: o, type: "area", height: 260 }),
|
|
153
|
-
/* @__PURE__ */ e(
|
|
158
|
+
/* @__PURE__ */ e(u, { items: o.map((l, s) => ({ name: l.name, color: t[s] })) })
|
|
154
159
|
] });
|
|
155
160
|
}
|
|
156
|
-
function
|
|
161
|
+
function B() {
|
|
157
162
|
const r = c(), o = [r[0], r[2]];
|
|
158
|
-
return /* @__PURE__ */
|
|
163
|
+
return /* @__PURE__ */ a("div", { children: [
|
|
159
164
|
/* @__PURE__ */ e(d, { options: {
|
|
160
165
|
chart: { toolbar: { show: !1 } },
|
|
161
166
|
stroke: { width: [0, 3], curve: "smooth" },
|
|
@@ -174,10 +179,10 @@ function T() {
|
|
|
174
179
|
{ name: "营收", type: "column", data: [120, 132, 108, 145, 168, 155] },
|
|
175
180
|
{ name: "增长率", type: "line", data: [12, 14, -8, 15, 18, 10] }
|
|
176
181
|
], type: "line", height: 260 }),
|
|
177
|
-
/* @__PURE__ */ e(
|
|
182
|
+
/* @__PURE__ */ e(u, { items: [{ name: "营收", color: o[0] }, { name: "增长率", color: o[1] }] })
|
|
178
183
|
] });
|
|
179
184
|
}
|
|
180
|
-
function
|
|
185
|
+
function D() {
|
|
181
186
|
const r = c(), o = {
|
|
182
187
|
chart: { type: "radialBar" },
|
|
183
188
|
plotOptions: {
|
|
@@ -186,7 +191,7 @@ function B() {
|
|
|
186
191
|
track: { background: "var(--color-muted)", strokeWidth: "100%" },
|
|
187
192
|
dataLabels: {
|
|
188
193
|
name: { show: !0, fontSize: "12px", color: "var(--color-muted-foreground)", offsetY: -4 },
|
|
189
|
-
value: { show: !0, fontSize: "26px", fontWeight: 600, color: "var(--color-foreground)", offsetY: 6, formatter: (
|
|
194
|
+
value: { show: !0, fontSize: "26px", fontWeight: 600, color: "var(--color-foreground)", offsetY: 6, formatter: (t) => `${t}%` }
|
|
190
195
|
}
|
|
191
196
|
}
|
|
192
197
|
},
|
|
@@ -194,11 +199,11 @@ function B() {
|
|
|
194
199
|
stroke: { lineCap: "round" },
|
|
195
200
|
labels: ["达成率"]
|
|
196
201
|
};
|
|
197
|
-
return /* @__PURE__ */
|
|
202
|
+
return /* @__PURE__ */ a("div", { className: "flex items-center gap-6", children: [
|
|
198
203
|
/* @__PURE__ */ e(d, { options: o, series: [72], type: "radialBar", height: 200, width: 200 }),
|
|
199
|
-
/* @__PURE__ */
|
|
204
|
+
/* @__PURE__ */ a("div", { className: "grid grid-cols-1 gap-2 text-sm", children: [
|
|
200
205
|
/* @__PURE__ */ e("div", { className: "text-muted-foreground text-xs", children: "季度目标" }),
|
|
201
|
-
/* @__PURE__ */
|
|
206
|
+
/* @__PURE__ */ a("div", { children: [
|
|
202
207
|
/* @__PURE__ */ e("span", { className: "text-2xl font-semibold font-mono", children: "72" }),
|
|
203
208
|
/* @__PURE__ */ e("span", { className: "text-muted-foreground text-sm", children: " / 100" })
|
|
204
209
|
] }),
|
|
@@ -206,28 +211,28 @@ function B() {
|
|
|
206
211
|
] })
|
|
207
212
|
] });
|
|
208
213
|
}
|
|
209
|
-
function
|
|
214
|
+
function A() {
|
|
210
215
|
const r = c(), o = [
|
|
211
216
|
{ name: "当前版本", data: [80, 65, 70, 88, 75, 82] },
|
|
212
217
|
{ name: "上一版本", data: [65, 55, 60, 70, 68, 72] }
|
|
213
|
-
],
|
|
218
|
+
], t = r.slice(0, 2), n = {
|
|
214
219
|
chart: { type: "radar", toolbar: { show: !1 } },
|
|
215
220
|
xaxis: { categories: ["响应", "稳定", "扩展", "安全", "易用", "性能"], labels: { style: { colors: Array(6).fill("var(--color-muted-foreground)") } } },
|
|
216
221
|
yaxis: { show: !1 },
|
|
217
|
-
colors:
|
|
222
|
+
colors: t,
|
|
218
223
|
stroke: { width: 2 },
|
|
219
224
|
fill: { opacity: 0.2 },
|
|
220
|
-
markers: { size: 3, strokeColors:
|
|
225
|
+
markers: { size: 3, strokeColors: t },
|
|
221
226
|
legend: { show: !1 },
|
|
222
227
|
plotOptions: { radar: { polygons: { strokeColors: "var(--color-border)", connectorColors: "var(--color-border)" } } }
|
|
223
228
|
};
|
|
224
|
-
return /* @__PURE__ */
|
|
229
|
+
return /* @__PURE__ */ a("div", { children: [
|
|
225
230
|
/* @__PURE__ */ e(d, { options: n, series: o, type: "radar", height: 280 }),
|
|
226
|
-
/* @__PURE__ */ e(
|
|
231
|
+
/* @__PURE__ */ e(u, { items: o.map((l, s) => ({ name: l.name, color: t[s] })) })
|
|
227
232
|
] });
|
|
228
233
|
}
|
|
229
|
-
function
|
|
230
|
-
const r = c(), o = ["0", "3", "6", "9", "12", "15", "18", "21"],
|
|
234
|
+
function L() {
|
|
235
|
+
const r = c(), o = ["0", "3", "6", "9", "12", "15", "18", "21"], t = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], n = [
|
|
231
236
|
[5, 2, 12, 58, 72, 64, 48, 22],
|
|
232
237
|
[7, 3, 15, 62, 78, 70, 52, 25],
|
|
233
238
|
[6, 2, 14, 60, 80, 74, 55, 28],
|
|
@@ -235,10 +240,10 @@ function A() {
|
|
|
235
240
|
[10, 5, 18, 68, 85, 80, 62, 35],
|
|
236
241
|
[12, 8, 22, 45, 55, 50, 42, 28],
|
|
237
242
|
[15, 10, 20, 38, 42, 40, 35, 22]
|
|
238
|
-
], l =
|
|
243
|
+
], l = t.map((p, f) => ({
|
|
239
244
|
name: p,
|
|
240
|
-
data: o.map((
|
|
241
|
-
})), s = r[0],
|
|
245
|
+
data: o.map((x, i) => ({ x: `${x}时`, y: n[f][i] }))
|
|
246
|
+
})), s = r[0], m = [r[0], r[2], r[4]], b = {
|
|
242
247
|
chart: { type: "heatmap", toolbar: { show: !1 } },
|
|
243
248
|
dataLabels: { enabled: !1 },
|
|
244
249
|
colors: [s],
|
|
@@ -249,9 +254,9 @@ function A() {
|
|
|
249
254
|
useFillColorAsStroke: !1,
|
|
250
255
|
colorScale: {
|
|
251
256
|
ranges: [
|
|
252
|
-
{ from: 0, to: 20, color:
|
|
253
|
-
{ from: 21, to: 50, color:
|
|
254
|
-
{ from: 51, to: 100, color:
|
|
257
|
+
{ from: 0, to: 20, color: m[0], name: "冷" },
|
|
258
|
+
{ from: 21, to: 50, color: m[1], name: "中" },
|
|
259
|
+
{ from: 51, to: 100, color: m[2], name: "热" }
|
|
255
260
|
]
|
|
256
261
|
}
|
|
257
262
|
}
|
|
@@ -262,11 +267,26 @@ function A() {
|
|
|
262
267
|
grid: { borderColor: "var(--color-border)" },
|
|
263
268
|
legend: { show: !1 }
|
|
264
269
|
};
|
|
265
|
-
return /* @__PURE__ */ e(d, { options:
|
|
270
|
+
return /* @__PURE__ */ e(d, { options: b, series: l, type: "heatmap", height: 280 });
|
|
266
271
|
}
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
272
|
+
const S = [
|
|
273
|
+
{ label: "访问", value: 5200 },
|
|
274
|
+
{ label: "注册", value: 3120 },
|
|
275
|
+
{ label: "激活", value: 1580 },
|
|
276
|
+
{ label: "付费", value: 620 },
|
|
277
|
+
{ label: "续费", value: 380 }
|
|
278
|
+
];
|
|
279
|
+
function R({
|
|
280
|
+
stages: r = S,
|
|
281
|
+
height: o = 280,
|
|
282
|
+
seriesName: t = "用户",
|
|
283
|
+
unit: n = "人",
|
|
284
|
+
valueFormatter: l
|
|
285
|
+
} = {}) {
|
|
286
|
+
const s = c(), m = r.map((i) => i.label), b = r.map((i) => i.value), p = r.map((i, h) => s[h % s.length]), f = l ?? ((i) => `${new Intl.NumberFormat("zh-CN", {
|
|
287
|
+
maximumFractionDigits: 1
|
|
288
|
+
}).format(i)} ${n}`);
|
|
289
|
+
return /* @__PURE__ */ a("div", { children: [
|
|
270
290
|
/* @__PURE__ */ e(d, { options: {
|
|
271
291
|
chart: { type: "bar", toolbar: { show: !1 } },
|
|
272
292
|
plotOptions: {
|
|
@@ -280,22 +300,34 @@ function R() {
|
|
|
280
300
|
},
|
|
281
301
|
dataLabels: {
|
|
282
302
|
enabled: !0,
|
|
283
|
-
formatter: (
|
|
303
|
+
formatter: (i, h) => m[h.dataPointIndex],
|
|
284
304
|
style: { colors: ["var(--color-card)"], fontWeight: 600, fontSize: "12px" },
|
|
285
305
|
dropShadow: { enabled: !1 }
|
|
286
306
|
},
|
|
287
|
-
xaxis: { categories:
|
|
307
|
+
xaxis: { categories: m, labels: { show: !1 } },
|
|
288
308
|
yaxis: { labels: { show: !1 } },
|
|
289
|
-
colors:
|
|
309
|
+
colors: p,
|
|
290
310
|
legend: { show: !1 },
|
|
291
311
|
grid: { show: !1, padding: { left: 0, right: 0 } },
|
|
292
|
-
tooltip: {
|
|
293
|
-
|
|
294
|
-
|
|
312
|
+
tooltip: {
|
|
313
|
+
y: {
|
|
314
|
+
formatter: (i, h) => f(i, r[h.dataPointIndex])
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
}, series: [{ name: t, data: b }], type: "bar", height: o }),
|
|
318
|
+
/* @__PURE__ */ e(
|
|
319
|
+
u,
|
|
320
|
+
{
|
|
321
|
+
items: r.map((i, h) => ({
|
|
322
|
+
name: `${i.label} · ${f(i.value, i)}`,
|
|
323
|
+
color: p[h]
|
|
324
|
+
}))
|
|
325
|
+
}
|
|
326
|
+
)
|
|
295
327
|
] });
|
|
296
328
|
}
|
|
297
|
-
function
|
|
298
|
-
const o = c().slice(0, 4),
|
|
329
|
+
function F() {
|
|
330
|
+
const o = c().slice(0, 4), t = [
|
|
299
331
|
{
|
|
300
332
|
data: [
|
|
301
333
|
{ x: "需求分析", y: [(/* @__PURE__ */ new Date("2025-03-01")).getTime(), (/* @__PURE__ */ new Date("2025-03-05")).getTime()], fillColor: o[0] },
|
|
@@ -305,7 +337,7 @@ function L() {
|
|
|
305
337
|
]
|
|
306
338
|
}
|
|
307
339
|
];
|
|
308
|
-
return /* @__PURE__ */
|
|
340
|
+
return /* @__PURE__ */ a("div", { children: [
|
|
309
341
|
/* @__PURE__ */ e(d, { options: {
|
|
310
342
|
chart: { type: "rangeBar", toolbar: { show: !1 } },
|
|
311
343
|
plotOptions: { bar: { horizontal: !0, barHeight: "55%", rangeBarGroupRows: !0, borderRadius: 4 } },
|
|
@@ -317,74 +349,74 @@ function L() {
|
|
|
317
349
|
grid: { borderColor: "var(--color-border)", strokeDashArray: 3 },
|
|
318
350
|
legend: { show: !1 },
|
|
319
351
|
tooltip: { x: { format: "yyyy-MM-dd" } }
|
|
320
|
-
}, series:
|
|
321
|
-
/* @__PURE__ */ e(
|
|
352
|
+
}, series: t, type: "rangeBar", height: 260 }),
|
|
353
|
+
/* @__PURE__ */ e(u, { items: ["需求分析", "原型设计", "开发实现", "测试验收"].map((l, s) => ({ name: l, color: o[s] })) })
|
|
322
354
|
] });
|
|
323
355
|
}
|
|
324
|
-
function
|
|
325
|
-
return /* @__PURE__ */
|
|
326
|
-
/* @__PURE__ */
|
|
356
|
+
function E() {
|
|
357
|
+
return /* @__PURE__ */ a("div", { className: "flex flex-col gap-10", children: [
|
|
358
|
+
/* @__PURE__ */ a("section", { children: [
|
|
327
359
|
/* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Donut（占比环）" }),
|
|
328
|
-
/* @__PURE__ */ e(
|
|
360
|
+
/* @__PURE__ */ e(w, {})
|
|
329
361
|
] }),
|
|
330
|
-
/* @__PURE__ */
|
|
362
|
+
/* @__PURE__ */ a("section", { children: [
|
|
331
363
|
/* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Sparkline（KPI 迷你图）" }),
|
|
332
|
-
/* @__PURE__ */ e(
|
|
364
|
+
/* @__PURE__ */ e(k, {})
|
|
333
365
|
] }),
|
|
334
|
-
/* @__PURE__ */
|
|
366
|
+
/* @__PURE__ */ a("section", { children: [
|
|
335
367
|
/* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Column（纵向柱状 · 分组对比）" }),
|
|
336
|
-
/* @__PURE__ */ e(
|
|
368
|
+
/* @__PURE__ */ e(N, {})
|
|
337
369
|
] }),
|
|
338
|
-
/* @__PURE__ */
|
|
370
|
+
/* @__PURE__ */ a("section", { children: [
|
|
339
371
|
/* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Bar（横向条形 · 排行）" }),
|
|
340
372
|
/* @__PURE__ */ e(C, {})
|
|
341
373
|
] }),
|
|
342
|
-
/* @__PURE__ */
|
|
374
|
+
/* @__PURE__ */ a("section", { children: [
|
|
343
375
|
/* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Line（多序列折线 · 时间趋势）" }),
|
|
344
|
-
/* @__PURE__ */ e(
|
|
376
|
+
/* @__PURE__ */ e(z, {})
|
|
345
377
|
] }),
|
|
346
|
-
/* @__PURE__ */
|
|
378
|
+
/* @__PURE__ */ a("section", { children: [
|
|
347
379
|
/* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Area（堆叠面积）" }),
|
|
348
|
-
/* @__PURE__ */ e(
|
|
380
|
+
/* @__PURE__ */ e(T, {})
|
|
349
381
|
] }),
|
|
350
|
-
/* @__PURE__ */
|
|
382
|
+
/* @__PURE__ */ a("section", { children: [
|
|
351
383
|
/* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Mixed（柱线组合 · 双轴）" }),
|
|
352
|
-
/* @__PURE__ */ e(
|
|
384
|
+
/* @__PURE__ */ e(B, {})
|
|
353
385
|
] }),
|
|
354
|
-
/* @__PURE__ */
|
|
386
|
+
/* @__PURE__ */ a("section", { children: [
|
|
355
387
|
/* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "RadialBar（径向进度）" }),
|
|
356
|
-
/* @__PURE__ */ e(
|
|
388
|
+
/* @__PURE__ */ e(D, {})
|
|
357
389
|
] }),
|
|
358
|
-
/* @__PURE__ */
|
|
390
|
+
/* @__PURE__ */ a("section", { children: [
|
|
359
391
|
/* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Radar（雷达 · 多维能力）" }),
|
|
360
|
-
/* @__PURE__ */ e(
|
|
392
|
+
/* @__PURE__ */ e(A, {})
|
|
361
393
|
] }),
|
|
362
|
-
/* @__PURE__ */
|
|
394
|
+
/* @__PURE__ */ a("section", { children: [
|
|
363
395
|
/* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Heatmap（热力 · 时段密度）" }),
|
|
364
|
-
/* @__PURE__ */ e(
|
|
396
|
+
/* @__PURE__ */ e(L, {})
|
|
365
397
|
] }),
|
|
366
|
-
/* @__PURE__ */
|
|
398
|
+
/* @__PURE__ */ a("section", { children: [
|
|
367
399
|
/* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Funnel（转化漏斗）" }),
|
|
368
400
|
/* @__PURE__ */ e(R, {})
|
|
369
401
|
] }),
|
|
370
|
-
/* @__PURE__ */
|
|
402
|
+
/* @__PURE__ */ a("section", { children: [
|
|
371
403
|
/* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Timeline（甘特排期 · RangeBar）" }),
|
|
372
|
-
/* @__PURE__ */ e(
|
|
404
|
+
/* @__PURE__ */ e(F, {})
|
|
373
405
|
] })
|
|
374
406
|
] });
|
|
375
407
|
}
|
|
376
408
|
export {
|
|
377
|
-
|
|
409
|
+
T as ChartArea,
|
|
378
410
|
C as ChartBar,
|
|
379
|
-
|
|
380
|
-
|
|
411
|
+
N as ChartColumn,
|
|
412
|
+
w as ChartDonut,
|
|
381
413
|
R as ChartFunnel,
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
414
|
+
L as ChartHeatmap,
|
|
415
|
+
z as ChartLine,
|
|
416
|
+
B as ChartMixed,
|
|
417
|
+
A as ChartRadar,
|
|
418
|
+
D as ChartRadialBar,
|
|
419
|
+
E as ChartShowcase,
|
|
420
|
+
k as ChartSparkline,
|
|
421
|
+
F as ChartTimeline
|
|
390
422
|
};
|
package/package.json
CHANGED
|
@@ -1,12 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@demokit-ui/demokit",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Open-source React component library with provider, styles, and composable UI primitives",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
8
|
-
"url": "https://
|
|
8
|
+
"url": "git+https://github.com/fan18660557495/demokit.git",
|
|
9
|
+
"directory": "packages/demokit"
|
|
9
10
|
},
|
|
11
|
+
"bugs": {
|
|
12
|
+
"url": "https://github.com/fan18660557495/demokit/issues"
|
|
13
|
+
},
|
|
14
|
+
"homepage": "https://github.com/fan18660557495/demokit/tree/main/packages/demokit#readme",
|
|
10
15
|
"type": "module",
|
|
11
16
|
"files": [
|
|
12
17
|
"dist"
|