feat(service-storage-harness): slice 2 — qbit widgets + LineSeriesChart extract

2026-07-09 08:46:20 +00:00
parent e7bd0afdd1
commit 1fb12b8a0a
14 changed files with 831 additions and 81 deletions
@@ -0,0 +1,40 @@
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Skeleton } from "@/components/ui/skeleton";
+import { LineSeriesChart } from "../components/LineSeriesChart";
+import type { ChartSeries } from "../components/LineSeriesChart";
+import { SectionCard } from "../components/SectionCard";
+import { useWidgetData } from "../hooks/useWidgets";
+import type { WidgetInstance } from "../types";
+
+interface Props {
+	widget: WidgetInstance;
+	refreshIntervalMs: number;
+	description?: string;
+}
+
+export function QbittorrentSpeedWidget({
+	widget,
+	refreshIntervalMs,
+	description,
+}: Props) {
+	const { data, isLoading } = useWidgetData(widget.id, refreshIntervalMs);
+	const series = data?.data?.series as ChartSeries[] | undefined;
+
+	return (
+		<SectionCard title={widget.title} description={description}>
+			{isLoading && !data ? (
+				<Skeleton className="h-[220px] w-full" />
+			) : data?.error ? (
+				<Alert variant="destructive">
+					<AlertDescription>{data.error}</AlertDescription>
+				</Alert>
+			) : series && series.length > 0 ? (
+				<LineSeriesChart series={series} height={220} />
+			) : (
+				<Alert>
+					<AlertDescription>No speed data yet</AlertDescription>
+				</Alert>
+			)}
+		</SectionCard>
+	);
+}