From 1bf8a34a97cd03fa29cffa6c9bec16d971368605 Mon Sep 17 00:00:00 2001
From: Developer <dev@headquarter.local>
Date: Wed, 15 Jul 2026 19:15:06 +0000
Subject: [PATCH] fix(charting): remove duplicate range selector

---
 docs/REQUIREMENTS.md                                 |  2 +-
 frontend/src/components/LineSeriesChart.tsx          | 10 +++++++---
 .../components/__tests__/LineSeriesChart.test.tsx    |  7 +++++++
 frontend/src/widgets/MetricChartWidget.tsx           |  8 +-------
 frontend/src/widgets/QbittorrentSpeedWidget.tsx      | 12 +-----------
 .../src/widgets/__tests__/MetricChartWidget.test.tsx |  3 +++
 .../__tests__/QbittorrentSpeedWidget.test.tsx        |  3 +++
 7 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/docs/REQUIREMENTS.md b/docs/REQUIREMENTS.md
index e6e5f60..126780b 100644
--- a/docs/REQUIREMENTS.md
+++ b/docs/REQUIREMENTS.md
@@ -46,7 +46,7 @@ fully removed (web-ui-rework; see decision log 2026-06-17).
 
 ### Tables
 
-- All in-app time-series widgets should use the shared range-aware `LineSeriesChart` component so range controls, filtering, and display formatting remain consistent across Prometheus and qBittorrent charts. The selector offers 5 minutes, 15 minutes, 30 minutes, 1 hour, 3 hours, 6 hours, 12 hours, 24 hours, 2 days, 7 days, 14 days, 30 days, and **All values**; sources with bounded local retention expose the finite windows they can retain plus all retained values.
+- All in-app time-series widgets should use the shared range-aware `LineSeriesChart` component so filtering and display formatting remain consistent across Prometheus and qBittorrent charts. A dashboard widget's configured window is its single source of range selection and the card renders the complete configured response; the standalone qBittorrent service-history page retains an interactive selector with **All values** for all retained samples.
 
 - Tabular surfaces use **TanStack Table** (`@tanstack/react-table`) behind a `DataTable`
   wrapper (`components/ui/data-table.tsx`).
diff --git a/frontend/src/components/LineSeriesChart.tsx b/frontend/src/components/LineSeriesChart.tsx
index 6cc02ce..533f87e 100644
--- a/frontend/src/components/LineSeriesChart.tsx
+++ b/frontend/src/components/LineSeriesChart.tsx
@@ -76,6 +76,8 @@ interface LineSeriesChartProps {
 	scale?: MetricScale;
 	/** Available displayed time ranges. Defaults to the shared range choices. */
 	rangeOptions?: readonly ChartRangeOption[];
+	/** Whether to render the interactive range selector. */
+	showRangeSelector?: boolean;
 	/** Initial uncontrolled range. Defaults to the largest numeric option. */
 	defaultRangeSeconds?: ChartRangeValue;
 	/** Controlled range for consumers that refetch when the selection changes. */
@@ -90,6 +92,7 @@ export function LineSeriesChart({
 	unit = "none",
 	scale = "auto",
 	rangeOptions = DEFAULT_CHART_RANGES,
+	showRangeSelector = true,
 	defaultRangeSeconds,
 	rangeSeconds,
 	onRangeChange,
@@ -98,8 +101,9 @@ export function LineSeriesChart({
 		defaultRangeSeconds ??
 		[...rangeOptions].reverse().find((range) => typeof range.value === "number")
 			?.value;
-	const [localRangeSeconds, setLocalRangeSeconds] =
-		useState<ChartRangeValue | undefined>(initialRange);
+	const [localRangeSeconds, setLocalRangeSeconds] = useState<
+		ChartRangeValue | undefined
+	>(initialRange);
 	const selectedRangeSeconds = rangeSeconds ?? localRangeSeconds;
 	const latestTimestamp = series.reduce(
 		(max, seriesItem) =>
@@ -140,7 +144,7 @@ export function LineSeriesChart({
 
 	return (
 		<div className="space-y-2">
-			{rangeOptions.length > 0 && (
+			{showRangeSelector && rangeOptions.length > 0 && (
 				<div className="flex justify-end">
 					<Select
 						value={
diff --git a/frontend/src/components/__tests__/LineSeriesChart.test.tsx b/frontend/src/components/__tests__/LineSeriesChart.test.tsx
index 6f3a803..662f381 100644
--- a/frontend/src/components/__tests__/LineSeriesChart.test.tsx
+++ b/frontend/src/components/__tests__/LineSeriesChart.test.tsx
@@ -38,6 +38,13 @@ describe("LineSeriesChart", () => {
 		).toHaveTextContent("2 hours");
 	});
 
+	it("can hide the interactive selector for configured widgets", () => {
+		render(<LineSeriesChart series={[]} showRangeSelector={false} />);
+		expect(
+			screen.queryByRole("combobox", { name: "Chart range" }),
+		).not.toBeInTheDocument();
+	});
+
 	it("offers all loaded values and reports that selection", () => {
 		const onRangeChange = vi.fn();
 		render(
diff --git a/frontend/src/widgets/MetricChartWidget.tsx b/frontend/src/widgets/MetricChartWidget.tsx
index 6f41673..f4f87a2 100644
--- a/frontend/src/widgets/MetricChartWidget.tsx
+++ b/frontend/src/widgets/MetricChartWidget.tsx
@@ -1,10 +1,6 @@
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Skeleton } from "@/components/ui/skeleton";
 import { LineSeriesChart } from "../components/LineSeriesChart";
-import {
-	chartRangesThrough,
-	rangeSecondsFromWindow,
-} from "../components/chartRanges";
 import type { ChartSeries } from "../components/LineSeriesChart";
 import type { MetricScale, MetricUnit } from "../lib/metricFormat";
 import { SectionCard } from "../components/SectionCard";
@@ -24,7 +20,6 @@ export function MetricChartWidget({
 }: Props) {
 	const { data, isLoading } = useWidgetData(widget.id, refreshIntervalMs);
 	const series = data?.data?.series as ChartSeries[] | undefined;
-	const maxRangeSeconds = rangeSecondsFromWindow(widget.config.window);
 
 	return (
 		<SectionCard title={widget.title} description={description}>
@@ -39,8 +34,7 @@ export function MetricChartWidget({
 					series={series}
 					unit={widget.config.unit as MetricUnit}
 					scale={widget.config.scale as MetricScale}
-					rangeOptions={chartRangesThrough(maxRangeSeconds)}
-					defaultRangeSeconds={maxRangeSeconds}
+					showRangeSelector={false}
 				/>
 			) : (
 				<Alert>
diff --git a/frontend/src/widgets/QbittorrentSpeedWidget.tsx b/frontend/src/widgets/QbittorrentSpeedWidget.tsx
index ffc7220..ff788dc 100644
--- a/frontend/src/widgets/QbittorrentSpeedWidget.tsx
+++ b/frontend/src/widgets/QbittorrentSpeedWidget.tsx
@@ -1,10 +1,6 @@
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Skeleton } from "@/components/ui/skeleton";
 import { LineSeriesChart } from "../components/LineSeriesChart";
-import {
-	chartRangesThrough,
-	type ChartRangeValue,
-} from "../components/chartRanges";
 import type { ChartSeries } from "../components/LineSeriesChart";
 import type { MetricScale, MetricUnit } from "../lib/metricFormat";
 import { SectionCard } from "../components/SectionCard";
@@ -27,11 +23,6 @@ export function QbittorrentSpeedWidget({
 	// Source returns raw bytes/sec; default to bytes/sec + auto scale (MB/s, …).
 	const unit = (widget.config.unit as MetricUnit) || "bytes_per_sec";
 	const scale = (widget.config.scale as MetricScale) || "auto";
-	const configuredRange = widget.config.window_seconds;
-	const maxRangeSeconds =
-		configuredRange === "all" ? 86_400 : Number(configuredRange) || 1800;
-	const defaultRangeSeconds: ChartRangeValue =
-		configuredRange === "all" ? "all" : maxRangeSeconds;
 
 	return (
 		<SectionCard title={widget.title} description={description}>
@@ -47,8 +38,7 @@ export function QbittorrentSpeedWidget({
 					unit={unit}
 					scale={scale}
 					height={220}
-					rangeOptions={chartRangesThrough(maxRangeSeconds)}
-					defaultRangeSeconds={defaultRangeSeconds}
+					showRangeSelector={false}
 				/>
 			) : (
 				<Alert>
diff --git a/frontend/src/widgets/__tests__/MetricChartWidget.test.tsx b/frontend/src/widgets/__tests__/MetricChartWidget.test.tsx
index 71769ae..ffd9bd1 100644
--- a/frontend/src/widgets/__tests__/MetricChartWidget.test.tsx
+++ b/frontend/src/widgets/__tests__/MetricChartWidget.test.tsx
@@ -56,6 +56,9 @@ describe("MetricChartWidget", () => {
 		render(<MetricChartWidget widget={widget} refreshIntervalMs={60000} />);
 		// recharts renders an SVG; the title from SectionCard should be present.
 		expect(screen.getByText("CPU Usage")).toBeInTheDocument();
+		expect(
+			screen.queryByRole("combobox", { name: "Chart range" }),
+		).not.toBeInTheDocument();
 	});
 
 	it("shows error Alert on error", () => {
diff --git a/frontend/src/widgets/__tests__/QbittorrentSpeedWidget.test.tsx b/frontend/src/widgets/__tests__/QbittorrentSpeedWidget.test.tsx
index 11d7a99..e3aba2b 100644
--- a/frontend/src/widgets/__tests__/QbittorrentSpeedWidget.test.tsx
+++ b/frontend/src/widgets/__tests__/QbittorrentSpeedWidget.test.tsx
@@ -52,6 +52,9 @@ describe("QbittorrentSpeedWidget", () => {
 			<QbittorrentSpeedWidget widget={widget} refreshIntervalMs={5000} />,
 		);
 		expect(screen.getByText("Speed Chart")).toBeInTheDocument();
+		expect(
+			screen.queryByRole("combobox", { name: "Chart range" }),
+		).not.toBeInTheDocument();
 		expect(container.firstChild).not.toBeNull();
 	});