Buriburizaemon/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/Buriburizaem0n/nezha-dash-v1.git synced 2026-05-06 13:58:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance tooltips and loading states in NetworkChart and ServerDetailChart; add translations for TSDB and login requirements

Browse Source
This commit is contained in:
hamster1963
2026-02-14 15:04:37 +08:00
parent 7d59371ee3
commit 0c7c6a1378
6 changed files with 300 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/loading/ChartSkeleton.tsx
+19 -55
View File
@@ -1,59 +1,23 @@
export default function ChartSkeleton() {
export default function ChartSkeleton({
width,
height,
}: {
width?: number | string;
height?: number | string;
}) {
const resolvedWidth = typeof width === "number" ? `${width}px` : width;
const resolvedHeight = typeof height === "number" ? `${height}px` : height;
return (
<div className="h-[130px] w-full px-6 py-3">
<div className="relative h-full w-full animate-pulse">
<div className="absolute bottom-0 left-0 right-0 h-px bg-muted-foreground/20" />
<div className="absolute bottom-1 left-0 right-0 flex items-end justify-between gap-1 px-2">
<div
className="w-2 bg-muted-foreground/20 rounded-t"
style={{ height: "40%" }}
/>
<div
className="w-2 bg-muted-foreground/30 rounded-t"
style={{ height: "65%" }}
/>
<div
className="w-2 bg-muted-foreground/25 rounded-t"
style={{ height: "45%" }}
/>
<div
className="w-2 bg-muted-foreground/35 rounded-t"
style={{ height: "80%" }}
/>
<div
className="w-2 bg-muted-foreground/20 rounded-t"
style={{ height: "55%" }}
/>
<div
className="w-2 bg-muted-foreground/30 rounded-t"
style={{ height: "70%" }}
/>
<div
className="w-2 bg-muted-foreground/25 rounded-t"
style={{ height: "50%" }}
/>
<div
className="w-2 bg-muted-foreground/20 rounded-t"
style={{ height: "35%" }}
/>
<div
className="w-2 bg-muted-foreground/30 rounded-t"
style={{ height: "60%" }}
/>
<div
className="w-2 bg-muted-foreground/25 rounded-t"
style={{ height: "45%" }}
/>
<div
className="w-2 bg-muted-foreground/35 rounded-t"
style={{ height: "75%" }}
/>
<div
className="w-2 bg-muted-foreground/20 rounded-t"
style={{ height: "55%" }}
/>
</div>
<div className="absolute inset-0 bg-gradient-to-t from-background/20 via-transparent to-background/10 rounded-md" />
<div
className="relative h-full w-full overflow-hidden"
style={{
width: resolvedWidth || "100%",
height: resolvedHeight || "100%",
}}
>
<div className="absolute inset-0 flex items-center justify-center">
<div className="size-4 rounded-full border-2 border-muted-foreground/20 border-t-muted-foreground/70 animate-spin" />
</div>
</div>
);