fix(charting): remove duplicate range selector
This commit is contained in:
@@ -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`).
|
||||
|
||||
@@ -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={
|
||||
|
||||
@@ -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(
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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", () => {
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user