@youwen/ai-design-system
Version:
Enterprise AI-driven design system with comprehensive design tokens
1,230 lines (1,229 loc) • 36.4 kB
JavaScript
import { jsxs as n, jsx as t, Fragment as P } from "react/jsx-runtime";
import * as W from "react";
import H from "react";
import { cva as N } from "class-variance-authority";
import { clsx as T } from "clsx";
import { twMerge as Z } from "tailwind-merge";
function D(...o) {
return Z(T(o));
}
const _ = N(
"relative inline-flex items-center justify-center",
{
variants: {
size: {
sm: "w-24 h-24",
md: "w-48 h-48",
lg: "w-64 h-64",
xl: "w-80 h-80"
}
},
defaultVariants: {
size: "md"
}
}
), U = W.forwardRef(({
value: o,
maxValue: r = 100,
size: e = 195,
strokeWidth: d = 12,
showLabel: v = !0,
labelFormat: i = "value/max",
customLabel: F,
color: c,
trackColor: s = "rgba(255, 255, 255, 0.1)",
showOuterBorder: g = !0,
animated: h = !0,
className: a,
...k
}, w) => {
const u = (e - d) / 2, f = Math.min(Math.max(0, o), r) / r * 100, b = () => {
switch (i) {
case "percent":
return `${Math.round(f)}%`;
case "value":
return `${o}`;
case "value/max":
return `${o}/${r}`;
case "custom":
return F || "";
default:
return `${o}/${r}`;
}
};
return /* @__PURE__ */ n(
"div",
{
ref: w,
className: D(_({ className: a })),
style: {
position: "relative",
width: `${e}px`,
height: `${e}px`
},
...k,
children: [
/* @__PURE__ */ n(
"svg",
{
width: e,
height: e,
viewBox: `0 0 ${e} ${e}`,
style: { transform: "rotate(-90deg)" },
children: [
/* @__PURE__ */ t("defs", { children: /* @__PURE__ */ n("linearGradient", { id: "donutGradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
/* @__PURE__ */ t("stop", { offset: "0%", stopColor: "#7898FF", stopOpacity: "0.3" }),
/* @__PURE__ */ t("stop", { offset: "82%", stopColor: "#7AE4FF" }),
/* @__PURE__ */ t("stop", { offset: "82.02%", stopColor: "transparent" }),
/* @__PURE__ */ t("stop", { offset: "100%", stopColor: "#7898FF", stopOpacity: "0.01" })
] }) }),
g && /* @__PURE__ */ t(
"circle",
{
cx: e / 2,
cy: e / 2,
r: e / 2 - 0.5,
fill: "none",
stroke: "rgba(255, 255, 255, 1)",
strokeWidth: "1"
}
),
/* @__PURE__ */ t(
"circle",
{
cx: e / 2,
cy: e / 2,
r: u,
fill: "none",
stroke: s,
strokeWidth: d,
style: {
transition: h ? "stroke-dashoffset 0.5s ease" : "none"
}
}
),
/* @__PURE__ */ n("mask", { id: "progressMask", children: [
/* @__PURE__ */ t("rect", { x: "0", y: "0", width: e, height: e, fill: "black" }),
/* @__PURE__ */ t(
"path",
{
d: `
M ${e / 2} ${e / 2}
L ${e / 2} ${d / 2}
A ${u} ${u} 0 ${f > 50 ? 1 : 0} 1
${e / 2 + u * Math.sin(f / 100 * 2 * Math.PI)}
${e / 2 - u * Math.cos(f / 100 * 2 * Math.PI)}
Z
`,
fill: "white"
}
)
] }),
/* @__PURE__ */ t("foreignObject", { x: "0", y: "0", width: e, height: e, mask: "url(#progressMask)", children: /* @__PURE__ */ t("div", { style: {
width: "100%",
height: "100%",
background: `conic-gradient(from 0deg at 50% 50%,
rgba(120, 152, 255, 0.3) 0deg,
#7AE4FF 295deg,
transparent 295.2deg,
rgba(120, 152, 255, 0.01) 360deg)`,
borderRadius: "50%",
position: "relative"
}, children: /* @__PURE__ */ t("div", { style: {
position: "absolute",
top: d,
left: d,
right: d,
bottom: d,
backgroundColor: "hsl(var(--background))",
// 使用CSS变量
borderRadius: "50%"
} }) }) })
]
}
),
v && /* @__PURE__ */ n(
"div",
{
style: {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
textAlign: "center"
},
className: "select-none",
children: [
/* @__PURE__ */ t(
"div",
{
style: {
color: "hsl(var(--foreground))",
fontSize: "24px",
fontWeight: 500
},
children: b()
}
),
i === "percent" && /* @__PURE__ */ t(
"div",
{
style: {
color: "hsl(var(--muted-foreground))",
fontSize: "14px",
marginTop: "4px"
},
children: "完成率"
}
)
]
}
)
]
}
);
});
U.displayName = "FigmaDonutChart";
const q = N(
"relative inline-flex items-center justify-center",
{
variants: {
size: {
sm: "w-32 h-32",
md: "w-40 h-40",
lg: "w-48 h-48",
xl: "w-56 h-56"
}
},
defaultVariants: {
size: "md"
}
}
);
function j(o) {
const r = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(o);
return r ? {
r: parseInt(r[1], 16),
g: parseInt(r[2], 16),
b: parseInt(r[3], 16)
} : { r: 0, g: 0, b: 0 };
}
const J = W.forwardRef(({
layers: o = [
{
value: 295,
strokeWidth: 12,
gradient: {
startColor: "#7898FF",
startOpacity: 0.3,
endColor: "#7AE4FF",
endOpacity: 1
}
},
{
value: 235,
strokeWidth: 10,
gradient: {
startColor: "#67D75E",
startOpacity: 0.4,
endColor: "#059669",
endOpacity: 1
}
}
],
size: r = 195,
centerText: e,
showOuterBorder: d = !0,
className: v,
...i
}, F) => {
const c = (s) => {
let g = 0;
for (let h = 0; h < s; h++)
g += o[h].strokeWidth + 1;
return g;
};
return /* @__PURE__ */ n(
"div",
{
ref: F,
className: D(q({ className: v })),
style: {
position: "relative",
width: `${r}px`,
height: `${r}px`
},
...i,
children: [
o.map((s, g) => {
const h = c(g), { r: a, g: k, b: w } = j(s.gradient.startColor), { r: u, g: x, b: f } = j(s.gradient.endColor);
return /* @__PURE__ */ t(
"div",
{
style: {
position: "absolute",
top: `${h}px`,
left: `${h}px`,
width: `${r - h * 2}px`,
height: `${r - h * 2}px`,
borderRadius: "50%",
// 使用conic-gradient实现精确的角度控制 - 学习v2技术
background: `conic-gradient(
from -90deg,
rgba(${a}, ${k}, ${w}, ${s.gradient.startOpacity || 0.3}) 0deg,
rgba(${u}, ${x}, ${f}, ${s.gradient.endOpacity || 1}) ${s.value}deg,
transparent ${s.value + 0.5}deg,
transparent 360deg
)`
},
children: /* @__PURE__ */ t(
"div",
{
style: {
position: "absolute",
top: `${s.strokeWidth}px`,
left: `${s.strokeWidth}px`,
right: `${s.strokeWidth}px`,
bottom: `${s.strokeWidth}px`,
backgroundColor: "hsl(var(--background))",
// 使用CSS变量
borderRadius: "50%"
}
}
)
},
g
);
}),
d && /* @__PURE__ */ t(
"div",
{
style: {
position: "absolute",
top: 0,
left: 0,
width: `${r}px`,
height: `${r}px`,
border: "1px solid rgba(255, 255, 255, 1)",
borderRadius: "50%",
pointerEvents: "none"
}
}
),
e && /* @__PURE__ */ t(
"div",
{
style: {
position: "absolute",
top: "10px",
right: "30px",
color: "rgba(255, 255, 255, 0.3)",
fontSize: "10px",
fontWeight: 400,
lineHeight: 1
},
className: "select-none",
children: e
}
)
]
}
);
});
J.displayName = "FigmaMultiLayerDonut";
const K = N(
"relative inline-block",
{
variants: {
size: {
sm: "w-64 h-32",
md: "w-96 h-40",
lg: "w-[430px] h-48",
xl: "w-[500px] h-56"
}
},
defaultVariants: {
size: "lg"
}
}
), Q = W.forwardRef(({
data: o,
lines: r = [],
indicators: e,
yAxisLabels: d = ["35", "30", "25", "20", "15"],
xAxisLabels: v = ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00"],
size: i = { width: 430, height: 166 },
showGrid: F = !0,
indicatorSize: c = { width: 335, height: 7 },
className: s,
...g
}, h) => {
const x = i.width - 30 - 40, f = i.height - 20 - 20, b = (l) => l.map(
(y, M) => `${M === 0 ? "M" : "L"} ${y.x} ${y.y}`
).join(" ");
return /* @__PURE__ */ n(
"div",
{
ref: h,
className: D(K({ className: s })),
style: {
display: "flex",
flexDirection: "column",
gap: "10px"
},
...g,
children: [
e && e.length > 0 && /* @__PURE__ */ t(
"div",
{
style: {
width: `${c.width}px`,
height: `${c.height}px`,
background: "rgba(255, 255, 255, 0.1)",
borderRadius: "4px",
overflow: "hidden",
display: "flex",
alignItems: "center"
},
children: e.map((l, y) => /* @__PURE__ */ t(
"div",
{
style: {
height: "100%",
width: `${l.width}%`,
background: l.color
}
},
y
))
}
),
/* @__PURE__ */ t(
"div",
{
style: {
position: "relative",
width: `${i.width}px`,
height: `${i.height}px`
},
children: /* @__PURE__ */ n(
"svg",
{
width: i.width,
height: i.height,
viewBox: `0 0 ${i.width} ${i.height}`,
style: { width: "100%", height: "100%" },
children: [
/* @__PURE__ */ n("defs", { children: [
r.map((l) => l.gradient && /* @__PURE__ */ t(
"linearGradient",
{
id: l.gradient.id,
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%",
gradientUnits: "userSpaceOnUse",
children: l.gradient.stops.map((y, M) => /* @__PURE__ */ t(
"stop",
{
offset: y.offset,
stopColor: y.color,
stopOpacity: y.opacity ?? 1
},
M
))
},
l.gradient.id
)),
F && /* @__PURE__ */ n("linearGradient", { id: "gridGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
/* @__PURE__ */ t("stop", { offset: "0%", stopColor: "white", stopOpacity: "0" }),
/* @__PURE__ */ t("stop", { offset: "4.7369%", stopColor: "#FAFAFA", stopOpacity: "1" }),
/* @__PURE__ */ t("stop", { offset: "100%", stopColor: "#999999", stopOpacity: "1" })
] })
] }),
F && d.map((l, y) => {
const M = 20 + y * f / (d.length - 1);
return /* @__PURE__ */ n("g", { children: [
/* @__PURE__ */ t(
"line",
{
x1: 30,
y1: M,
x2: i.width - 40,
y2: M,
stroke: "url(#gridGradient)",
strokeWidth: "1",
strokeDasharray: "0.1 4",
strokeLinecap: "round",
opacity: "0.2"
}
),
/* @__PURE__ */ t(
"text",
{
x: 30 - 10,
y: M,
fill: "rgba(255, 255, 255, 0.4)",
fontSize: "12",
textAnchor: "end",
dominantBaseline: "middle",
children: l
}
)
] }, y);
}),
v.map((l, y) => {
const M = 30 + y * x / (v.length - 1);
return /* @__PURE__ */ t(
"text",
{
x: M,
y: i.height - 5,
fill: "rgba(255, 255, 255, 0.4)",
fontSize: "12",
textAnchor: "middle",
dominantBaseline: "hanging",
children: l
},
y
);
}),
r.map((l, y) => /* @__PURE__ */ t(
"path",
{
d: b(l.points),
fill: "none",
stroke: l.gradient ? `url(#${l.gradient.id})` : "#6BB5FF",
strokeWidth: l.strokeWidth || 2,
strokeDasharray: l.dashArray,
strokeLinecap: "round",
strokeLinejoin: "round"
},
y
)),
o && o.map((l, y) => /* @__PURE__ */ n("g", { children: [
/* @__PURE__ */ t(
"circle",
{
cx: l.position.x,
cy: l.position.y,
r: "4",
fill: "#6BB5FF",
stroke: "hsl(var(--background))",
strokeWidth: "2"
}
),
/* @__PURE__ */ t(
"text",
{
x: l.position.x,
y: l.position.y - 12,
fill: "hsl(var(--foreground))",
fontSize: "11",
textAnchor: "middle",
dominantBaseline: "middle",
children: l.label
}
),
/* @__PURE__ */ t(
"text",
{
x: l.position.x,
y: l.position.y - 22,
fill: "hsl(var(--muted-foreground))",
fontSize: "10",
textAnchor: "middle",
dominantBaseline: "middle",
children: l.value
}
)
] }, y))
]
}
)
}
)
]
}
);
});
Q.displayName = "FigmaPredictiveChart";
const Y = N(
"relative inline-flex items-center justify-center",
{
variants: {
size: {
sm: "w-24 h-24",
md: "w-30 h-30",
lg: "w-36 h-36",
xl: "w-40 h-40"
}
},
defaultVariants: {
size: "md"
}
}
), X = W.forwardRef(({
value: o = 65,
size: r = 120,
showPercentage: e = !0,
showIndicator: d = !0,
className: v,
...i
}, F) => {
const c = r / 2, s = 45, g = 8, h = 2 * Math.PI * s, a = Math.min(Math.max(0, o), 100), k = h, w = h - a / 100 * h, u = a / 100 * 360 - 90, x = c + s * Math.cos(u * Math.PI / 180), f = c + s * Math.sin(u * Math.PI / 180);
return /* @__PURE__ */ t(
"div",
{
ref: F,
className: D(Y({ className: v })),
style: { width: `${r}px`, height: `${r}px` },
...i,
children: /* @__PURE__ */ n("svg", { width: r, height: r, viewBox: `0 0 ${r} ${r}`, children: [
/* @__PURE__ */ n("defs", { children: [
/* @__PURE__ */ n("linearGradient", { id: "progressGradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
/* @__PURE__ */ t("stop", { offset: "0%", stopColor: "#FFB800" }),
/* @__PURE__ */ t("stop", { offset: "100%", stopColor: "#D97706" })
] }),
/* @__PURE__ */ n("linearGradient", { id: "backgroundTrack", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
/* @__PURE__ */ t("stop", { offset: "0%", stopColor: "rgba(255, 255, 255, 0.1)" }),
/* @__PURE__ */ t("stop", { offset: "100%", stopColor: "rgba(255, 255, 255, 0.05)" })
] }),
/* @__PURE__ */ n("radialGradient", { id: "indicatorGradient", cx: "50%", cy: "50%", r: "50%", children: [
/* @__PURE__ */ t("stop", { offset: "0%", stopColor: "#FFFFFF" }),
/* @__PURE__ */ t("stop", { offset: "70%", stopColor: "#FFB800" }),
/* @__PURE__ */ t("stop", { offset: "100%", stopColor: "#D97706" })
] })
] }),
/* @__PURE__ */ t(
"circle",
{
cx: c,
cy: c,
r: s,
fill: "none",
stroke: "url(#backgroundTrack)",
strokeWidth: g
}
),
/* @__PURE__ */ t(
"circle",
{
cx: c,
cy: c,
r: s,
fill: "none",
stroke: "url(#progressGradient)",
strokeWidth: g,
strokeLinecap: "round",
strokeDasharray: k,
strokeDashoffset: w,
transform: `rotate(-90 ${c} ${c})`,
className: "transition-all duration-700 ease-out"
}
),
d && a > 0 && /* @__PURE__ */ n("g", { children: [
/* @__PURE__ */ t(
"circle",
{
cx: x,
cy: f,
r: "6",
fill: "url(#indicatorGradient)",
stroke: "rgba(255, 255, 255, 0.3)",
strokeWidth: "1",
className: "transition-all duration-700 ease-out"
}
),
/* @__PURE__ */ t(
"circle",
{
cx: x,
cy: f,
r: "3",
fill: "#FFFFFF",
className: "transition-all duration-700 ease-out"
}
)
] }),
e && /* @__PURE__ */ n("g", { children: [
/* @__PURE__ */ n(
"text",
{
x: c,
y: c - 2,
textAnchor: "middle",
dominantBaseline: "middle",
fontSize: "18",
fontWeight: "700",
fill: "currentColor",
className: "select-none",
children: [
Math.round(a),
"%"
]
}
),
/* @__PURE__ */ t(
"text",
{
x: c,
y: c + 12,
textAnchor: "middle",
dominantBaseline: "middle",
fontSize: "10",
fill: "rgba(128, 128, 128, 0.7)",
className: "select-none",
children: "进度"
}
)
] })
] })
}
);
});
X.displayName = "FigmaPercentageDonut";
const z = (...o) => o.filter(Boolean).join(" ");
N(
"relative",
{
variants: {
size: {
sm: "w-32 h-32",
md: "w-48 h-48",
lg: "w-64 h-64"
}
},
defaultVariants: {
size: "md"
}
}
);
function lt({
value: o,
maxValue: r = 100,
size: e = 195,
strokeWidth: d = 12,
showLabel: v = !0,
labelFormat: i = "value/max",
customLabel: F,
color: c,
trackColor: s = "rgba(255, 255, 255, 0.1)",
showOuterBorder: g = !0,
animated: h = !0,
multiLayers: a,
className: k,
style: w
}) {
const u = (e - d) / 2, x = 2 * Math.PI * u, b = Math.min(Math.max(0, o), r) / r * 100, l = x - b / 100 * x, y = () => {
switch (i) {
case "percent":
return `${Math.round(b)}%`;
case "value":
return `${o}`;
case "value/max":
return `${o}/${r}`;
case "custom":
return F || "";
default:
return `${o}/${r}`;
}
};
return /* @__PURE__ */ n(
"div",
{
className: z("relative", k),
style: { width: `${e}px`, height: `${e}px`, ...w },
children: [
/* @__PURE__ */ n(
"svg",
{
width: e,
height: e,
viewBox: `0 0 ${e} ${e}`,
className: "transform -rotate-90",
children: [
/* @__PURE__ */ t("defs", { children: /* @__PURE__ */ n("linearGradient", { id: "donutGradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
/* @__PURE__ */ t("stop", { offset: "0%", stopColor: "#6BB5FF", stopOpacity: "0.3" }),
/* @__PURE__ */ t("stop", { offset: "82%", stopColor: "#4F46E5" }),
/* @__PURE__ */ t("stop", { offset: "82.02%", stopColor: "transparent" }),
/* @__PURE__ */ t("stop", { offset: "100%", stopColor: "#6BB5FF", stopOpacity: "0.01" })
] }) }),
g && /* @__PURE__ */ t(
"circle",
{
cx: e / 2,
cy: e / 2,
r: e / 2 - 0.5,
fill: "none",
stroke: "rgba(255, 255, 255, 1)",
strokeWidth: "1"
}
),
/* @__PURE__ */ t(
"circle",
{
cx: e / 2,
cy: e / 2,
r: u,
fill: "none",
stroke: s,
strokeWidth: d
}
),
/* @__PURE__ */ t(
"circle",
{
cx: e / 2,
cy: e / 2,
r: u,
fill: "none",
stroke: "url(#donutGradient)",
strokeWidth: d,
strokeLinecap: "round",
strokeDasharray: x,
strokeDashoffset: l,
className: h ? "transition-all duration-500 ease-out" : ""
}
)
]
}
),
v && /* @__PURE__ */ n("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-center", children: [
/* @__PURE__ */ t("div", { className: "text-2xl font-medium text-foreground", children: y() }),
i === "percent" && /* @__PURE__ */ t("div", { className: "text-sm text-muted-foreground mt-1", children: "完成率" })
] })
]
}
);
}
const tt = (...o) => o.filter(Boolean).join(" ");
N(
"relative",
{
variants: {
size: {
sm: "w-32 h-32",
md: "w-44 h-44",
lg: "w-64 h-64"
}
},
defaultVariants: {
size: "md"
}
}
);
function I(o) {
const r = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(o);
return r ? {
r: parseInt(r[1], 16),
g: parseInt(r[2], 16),
b: parseInt(r[3], 16)
} : { r: 0, g: 0, b: 0 };
}
function rt(o, r, e, d, v, i = 0) {
const F = O(o, r, e, v), c = O(o, r, e, d), s = v - d <= 180 ? "0" : "1";
if (i > 0) {
const g = O(o, r, i, v), h = O(o, r, i, d);
return [
"M",
F.x,
F.y,
"A",
e,
e,
0,
s,
0,
c.x,
c.y,
"L",
h.x,
h.y,
"A",
i,
i,
0,
s,
1,
g.x,
g.y,
"Z"
].join(" ");
} else
return [
"M",
o,
r,
"L",
F.x,
F.y,
"A",
e,
e,
0,
s,
0,
c.x,
c.y,
"Z"
].join(" ");
}
function O(o, r, e, d) {
const v = (d - 90) * Math.PI / 180;
return {
x: o + e * Math.cos(v),
y: r + e * Math.sin(v)
};
}
function ct({
data: o,
size: r = 170,
innerRadius: e = 0,
showOuterBorder: d = !0,
className: v,
style: i
}) {
const F = o.reduce((a, k) => a + k.value, 0);
let c = 0;
const s = o.map((a, k) => {
const w = c, u = a.value / F * 360, x = c + u;
return c = x, {
...a,
startAngle: w,
endAngle: x,
angle: u,
index: k
};
}), g = r / 2, h = r / 2 - 2;
return /* @__PURE__ */ t(
"div",
{
className: tt("relative", v),
style: { width: `${r}px`, height: `${r}px`, ...i },
children: /* @__PURE__ */ n("svg", { width: r, height: r, viewBox: `0 0 ${r} ${r}`, children: [
/* @__PURE__ */ t("defs", { children: s.map((a) => {
let k, w, u, x;
a.gradient ? (k = a.gradient.startColor, w = a.gradient.endColor, u = a.gradient.startOpacity || 1, x = a.gradient.endOpacity || 1) : a.color ? (k = a.color, w = a.color, u = 1, x = 1) : (k = "#6BB5FF", w = "#4F46E5", u = 1, x = 1);
const f = I(k), b = I(w);
return /* @__PURE__ */ t(H.Fragment, { children: /* @__PURE__ */ n(
"linearGradient",
{
id: `pieAngularGradient-${a.index}`,
x1: "0%",
y1: "0%",
x2: "100%",
y2: "100%",
gradientTransform: `rotate(${a.startAngle + a.angle / 2} 0.5 0.5)`,
children: [
/* @__PURE__ */ t(
"stop",
{
offset: "0%",
stopColor: `rgba(${f.r}, ${f.g}, ${f.b}, ${u * 0.8})`
}
),
/* @__PURE__ */ t(
"stop",
{
offset: "50%",
stopColor: `rgba(${f.r}, ${f.g}, ${f.b}, ${u})`
}
),
/* @__PURE__ */ t(
"stop",
{
offset: "100%",
stopColor: `rgba(${b.r}, ${b.g}, ${b.b}, ${x})`
}
)
]
}
) }, a.index);
}) }),
s.map((a) => /* @__PURE__ */ t(
"path",
{
d: rt(g, g, h, a.startAngle, a.endAngle, e),
fill: `url(#pieAngularGradient-${a.index})`,
stroke: "rgba(255, 255, 255, 0.1)",
strokeWidth: "1"
},
a.index
)),
d && /* @__PURE__ */ t(
"circle",
{
cx: g,
cy: g,
r: h,
fill: "none",
stroke: "rgba(255, 255, 255, 0.2)",
strokeWidth: "1"
}
)
] })
}
);
}
const et = (...o) => o.filter(Boolean).join(" ");
N(
"relative",
{
variants: {
size: {
sm: "w-32 h-32",
md: "w-48 h-48",
lg: "w-64 h-64"
}
},
defaultVariants: {
size: "md"
}
}
);
function dt({
type: o = "line",
data: r,
width: e = 195,
height: d = 195,
showGrid: v = !0,
gridLines: i = 4,
yAxisLabels: F,
xAxisLabels: c,
showDots: s = !0,
showValues: g = !1,
lineColor: h = "#6BB5FF",
lineThickness: a = 2,
barColor: k = "#6BB5FF",
className: w,
style: u
}) {
const x = { top: 20, right: 20, bottom: 20, left: 40 }, f = e - x.left - x.right, b = d - x.top - x.bottom, l = Math.max(...r), y = Math.min(...r, 0), M = l - y, G = r.map(($, p) => {
const m = p / (r.length - 1) * f, C = b - ($ - y) / M * b;
return { x: m, y: C, value: $ };
}), L = () => o === "area" ? `${G.reduce((p, m, C) => C === 0 ? `M ${m.x} ${m.y}` : `${p} L ${m.x} ${m.y}`, "")} L ${G[G.length - 1].x} ${b} L 0 ${b} Z` : G.reduce(($, p, m) => {
if (m === 0)
return `M ${p.x} ${p.y}`;
const C = G[m - 1], B = C.x + (p.x - C.x) / 2, A = B;
return `${$} C ${B} ${C.y}, ${A} ${p.y}, ${p.x} ${p.y}`;
}, ""), S = () => /* @__PURE__ */ n(P, { children: [
/* @__PURE__ */ n("defs", { children: [
/* @__PURE__ */ n("linearGradient", { id: "lineGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
/* @__PURE__ */ t("stop", { offset: "0%", stopColor: "#6BB5FF" }),
/* @__PURE__ */ t("stop", { offset: "100%", stopColor: "#4F46E5" })
] }),
o === "area" && /* @__PURE__ */ n("linearGradient", { id: "areaGradient", x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
/* @__PURE__ */ t("stop", { offset: "0%", stopColor: h, stopOpacity: "0.3" }),
/* @__PURE__ */ t("stop", { offset: "100%", stopColor: h, stopOpacity: "0" })
] })
] }),
/* @__PURE__ */ t(
"path",
{
d: L(),
fill: o === "area" ? "url(#areaGradient)" : "none",
stroke: o === "area" ? "none" : h,
strokeWidth: o === "area" ? 0 : a,
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
s && o !== "area" && G.map(($, p) => /* @__PURE__ */ t(
"circle",
{
cx: $.x,
cy: $.y,
r: "4",
fill: "#ffffff",
stroke: h,
strokeWidth: "2"
},
p
)),
g && G.map(($, p) => /* @__PURE__ */ t(
"text",
{
x: $.x,
y: $.y - 10,
textAnchor: "middle",
fontSize: "11",
fill: "currentColor",
fontWeight: "500",
children: $.value
},
p
))
] }), E = () => {
const $ = f / r.length * 0.7, p = f / r.length * 0.3;
return /* @__PURE__ */ n(P, { children: [
/* @__PURE__ */ t("defs", { children: /* @__PURE__ */ n("linearGradient", { id: "barVerticalGradient", x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
/* @__PURE__ */ t("stop", { offset: "0%", stopColor: "#6BB5FF" }),
/* @__PURE__ */ t("stop", { offset: "100%", stopColor: "#ffffff", stopOpacity: "0" })
] }) }),
G.map((m, C) => {
const B = (m.value - y) / M * b, A = C * ($ + p), R = b - B;
return /* @__PURE__ */ n("g", { children: [
/* @__PURE__ */ t(
"rect",
{
x: A,
y: R,
width: $,
height: B,
fill: "url(#barVerticalGradient)",
opacity: "0.8",
rx: "2"
}
),
g && /* @__PURE__ */ t(
"text",
{
x: A + $ / 2,
y: R - 5,
textAnchor: "middle",
fontSize: "12",
fontWeight: "500",
fill: "currentColor",
children: m.value
}
)
] }, C);
})
] });
}, V = () => {
const $ = b / r.length * 0.7, p = b / r.length * 0.3;
return /* @__PURE__ */ n(P, { children: [
/* @__PURE__ */ t("defs", { children: /* @__PURE__ */ n("linearGradient", { id: "barGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
/* @__PURE__ */ t("stop", { offset: "0%", stopColor: "#6BB5FF" }),
/* @__PURE__ */ t("stop", { offset: "100%", stopColor: "#4F46E5" })
] }) }),
G.map((m, C) => {
const B = m.value / l * f, A = C * ($ + p);
return /* @__PURE__ */ n("g", { children: [
/* @__PURE__ */ t(
"rect",
{
x: 0,
y: A,
width: B,
height: $,
fill: "url(#barGradient)",
rx: "2",
className: "transition-all duration-300 hover:opacity-100 hover:brightness-110",
style: { opacity: C % 2 === 0 ? 1 : 0.7 }
}
),
g && /* @__PURE__ */ t(
"text",
{
x: B + 5,
y: A + $ / 2,
textAnchor: "start",
dominantBaseline: "middle",
fontSize: "11",
fill: "currentColor",
fontWeight: "500",
children: m.value
}
)
] }, C);
}),
c && c.map((m, C) => {
const B = C / (c.length - 1) * f;
return /* @__PURE__ */ t(
"text",
{
x: B,
y: b + 15,
textAnchor: "middle",
fontSize: "12",
fill: "currentColor",
children: m
},
C
);
})
] });
};
return /* @__PURE__ */ t(
"div",
{
className: et("relative", w),
style: { width: `${e}px`, height: `${d}px`, ...u },
children: /* @__PURE__ */ n("svg", { width: e, height: d, viewBox: `0 0 ${e} ${d}`, children: [
/* @__PURE__ */ t("defs", { children: /* @__PURE__ */ n("linearGradient", { id: "gridLineGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
/* @__PURE__ */ t("stop", { offset: "0%", stopColor: "#FAFAFA" }),
/* @__PURE__ */ t("stop", { offset: "100%", stopColor: "#ffffff" })
] }) }),
/* @__PURE__ */ n("g", { transform: `translate(${x.left}, ${x.top})`, children: [
v && o !== "horizontal-bar" && Array.from({ length: i + 1 }).map(($, p) => {
const m = p / i * b;
return /* @__PURE__ */ t(
"line",
{
x1: "0",
y1: m,
x2: f,
y2: m,
stroke: "url(#gridLineGradient)",
strokeWidth: "1",
strokeDasharray: "0.1 4",
strokeLinecap: "round",
opacity: "0.3"
},
p
);
}),
v && o === "horizontal-bar" && Array.from({ length: i + 1 }).map(($, p) => {
const m = p / i * f;
return /* @__PURE__ */ t(
"line",
{
x1: m,
y1: "0",
x2: m,
y2: b,
stroke: "rgba(0,0,0,0.1)",
strokeWidth: "1"
},
p
);
}),
F && o !== "horizontal-bar" && F.map(($, p) => {
const m = p / (F.length - 1) * b;
return /* @__PURE__ */ t(
"text",
{
x: "-10",
y: m,
textAnchor: "end",
dominantBaseline: "middle",
fontSize: "12",
fill: "currentColor",
children: $
},
p
);
}),
o === "bar" ? E() : o === "horizontal-bar" ? V() : S()
] })
] })
}
);
}
export {
lt as D,
U as F,
dt as M,
ct as P,
J as a,
q as b,
D as c,
X as d,
Y as e,
_ as f,
Q as g,
K as h
};