-
{label}
+
{tickAt(label)}
{payload.map((p) => (
@@ -156,9 +208,19 @@ export function TrendChart({ chart, samples, window: { from, to }, period, class
) : null
}
/>
+ {drag && drag.a !== drag.b && (
+
+ )}
{peak && (
{t('cc.avg', 'avg')}}
))}
+ {canZoom && (
+
+ {t('cc.dragToZoom', 'Drag to zoom')}
+
+ )}
{chart.description && {chart.description}}
-
+
{width > 0 && (
{chrome}
diff --git a/src/features/dashboard/helpers.ts b/src/features/dashboard/helpers.ts
index 6efaf2e..0e63143 100644
--- a/src/features/dashboard/helpers.ts
+++ b/src/features/dashboard/helpers.ts
@@ -9,7 +9,14 @@
import type { Metric, MetricId, Period } from './types/metrics';
import type { Card, Series, MetricFormat, Aggregate } from './types/schema';
-import { PRESET_MS, BUCKET_CONFIG, CUSTOM_BUCKET_COUNT, SPARKLINE_BUCKET_COUNT } from './types/metrics';
+import {
+ PRESET_MS,
+ BUCKET_CONFIG,
+ CUSTOM_BUCKET_COUNT,
+ HOUR_MS,
+ MIN_ZOOM_MS,
+ SPARKLINE_BUCKET_COUNT,
+} from './types/metrics';
export function metricToScalar(m: Metric): number {
if (m['@type'] === 'Histogram') {
@@ -82,7 +89,11 @@ export function periodKey(p: Period): string {
}
export function getBucketCount(p: Period): number {
- if (p.kind === 'custom') return CUSTOM_BUCKET_COUNT;
+ if (p.kind === 'custom') {
+ // inbuxa: a slice per hour of the window, as history is sampled hourly.
+ const hours = Math.round((p.to.getTime() - p.from.getTime()) / HOUR_MS);
+ return Math.min(CUSTOM_BUCKET_COUNT, Math.max(MIN_ZOOM_MS / HOUR_MS, hours));
+ }
return BUCKET_CONFIG[p.preset];
}
@@ -291,3 +302,44 @@ export function collectLiveMetricIds(cards: Card[] | undefined): Set {
}
return ids;
}
+
+/**
+ * inbuxa: the window a drag across slices `a` to `b` of a chart zooms to: from
+ * the start of the first slice to the end of the last. A window under three
+ * hours widens around its middle, staying inside the chart's own. Null when
+ * the chart's window is already that narrow, so there's nothing to zoom into.
+ */
+export function zoomWindow(
+ from: Date,
+ to: Date,
+ buckets: number,
+ a: number,
+ b: number,
+): { from: Date; to: Date } | null {
+ const start = from.getTime();
+ const end = to.getTime();
+ if (end - start <= MIN_ZOOM_MS || buckets <= 0) return null;
+ const width = (end - start) / buckets;
+ const lo = Math.max(0, Math.min(a, b));
+ const hi = Math.min(buckets - 1, Math.max(a, b));
+ let zFrom = start + lo * width;
+ let zTo = start + (hi + 1) * width;
+ if (zTo - zFrom < MIN_ZOOM_MS) {
+ const mid = (zFrom + zTo) / 2;
+ zFrom = Math.max(start, Math.min(end - MIN_ZOOM_MS, mid - MIN_ZOOM_MS / 2));
+ zTo = zFrom + MIN_ZOOM_MS;
+ }
+ return { from: new Date(Math.round(zFrom)), to: new Date(Math.round(zTo)) };
+}
+
+/**
+ * inbuxa: which of `buckets` slices a pointer at `x` is over, on a plot from
+ * `left` to `right`. Lines and areas put the slices on points, first at the
+ * left edge and last at the right; bars put each in a band of its own.
+ */
+export function sliceAt(x: number, left: number, right: number, buckets: number, band: boolean): number | null {
+ if (buckets <= 0 || right <= left) return null;
+ const f = Math.min(1, Math.max(0, (x - left) / (right - left)));
+ const i = band ? Math.floor(f * buckets) : Math.round(f * (buckets - 1));
+ return Math.min(buckets - 1, i);
+}
diff --git a/src/features/dashboard/stores/dashboardStore.ts b/src/features/dashboard/stores/dashboardStore.ts
index 93adf11..5ff1bba 100644
--- a/src/features/dashboard/stores/dashboardStore.ts
+++ b/src/features/dashboard/stores/dashboardStore.ts
@@ -18,6 +18,14 @@ interface DashboardState {
period: Period;
setPeriod: (period: Period) => void;
setPreset: (preset: PresetKey) => void;
+ /**
+ * inbuxa: the period a chart was zoomed from, while zoomed. Zooming makes the
+ * period a custom window; only this one is remembered, so a reload is back
+ * at the preset rather than in an old window.
+ */
+ zoomedFrom: Period | null;
+ zoomTo: (from: Date, to: Date) => void;
+ resetZoom: () => void;
/** INBUXA: minutes between automatic refreshes of the dashboards; 0 is off. */
autoRefresh: AutoRefresh;
setAutoRefresh: (minutes: AutoRefresh) => void;
@@ -31,8 +39,12 @@ export const useDashboardStore = create()(
(set) => ({
period: { kind: 'preset', preset: '24h' } as Period,
- setPeriod: (period) => set({ period }),
- setPreset: (preset) => set({ period: { kind: 'preset', preset } }),
+ setPeriod: (period) => set({ period, zoomedFrom: null }),
+ setPreset: (preset) => set({ period: { kind: 'preset', preset }, zoomedFrom: null }),
+ zoomedFrom: null,
+ zoomTo: (from, to) =>
+ set((s) => ({ period: { kind: 'custom', from, to }, zoomedFrom: s.zoomedFrom ?? s.period })),
+ resetZoom: () => set((s) => (s.zoomedFrom ? { period: s.zoomedFrom, zoomedFrom: null } : {})),
autoRefresh: 5,
setAutoRefresh: (autoRefresh) => set({ autoRefresh }),
tick: 0,
@@ -40,7 +52,7 @@ export const useDashboardStore = create()(
}),
{
name: 'dashboard.period',
- partialize: (state) => ({ period: state.period, autoRefresh: state.autoRefresh }),
+ partialize: (state) => ({ period: state.zoomedFrom ?? state.period, autoRefresh: state.autoRefresh }),
},
),
);
diff --git a/src/features/dashboard/types/metrics.ts b/src/features/dashboard/types/metrics.ts
index 0495a80..4caee11 100644
--- a/src/features/dashboard/types/metrics.ts
+++ b/src/features/dashboard/types/metrics.ts
@@ -49,4 +49,8 @@ export const BUCKET_CONFIG: Record = {
};
export const CUSTOM_BUCKET_COUNT = 60;
+// inbuxa: history is sampled hourly unless set otherwise (`metricsCollectionInterval`),
+// so a zoomed window gets a slice per hour, 3 to 60 of them, and is never under 3 hours.
+export const HOUR_MS = 3_600_000;
+export const MIN_ZOOM_MS = 3 * HOUR_MS;
export const SPARKLINE_BUCKET_COUNT = 20;
diff --git a/src/features/dashboard/zoom.test.ts b/src/features/dashboard/zoom.test.ts
new file mode 100644
index 0000000..d04caa2
--- /dev/null
+++ b/src/features/dashboard/zoom.test.ts
@@ -0,0 +1,119 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Coffey Labs
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { beforeAll, beforeEach, describe, expect, it } from 'vitest';
+import { createJSONStorage } from 'zustand/middleware';
+import { getBucketCount, sliceAt, zoomWindow } from './helpers';
+import { useDashboardStore } from './stores/dashboardStore';
+
+const HOUR = 3_600_000;
+const FROM = new Date('2026-10-05T00:00:00Z');
+const at = (h: number) => new Date(FROM.getTime() + h * HOUR);
+
+describe('zoomWindow', () => {
+ it('runs from the start of the first slice to the end of the last, either way round', () => {
+ // 24 h in 48 slices of 30 min: slices 20 to 31 are 10:00 to 16:00.
+ expect(zoomWindow(FROM, at(24), 48, 20, 31)).toEqual({ from: at(10), to: at(16) });
+ expect(zoomWindow(FROM, at(24), 48, 31, 20)).toEqual({ from: at(10), to: at(16) });
+ });
+
+ it('widens a window under three hours around its middle', () => {
+ // Slices 20 and 21: 10:00 to 11:00, widened to 09:00 to 12:00.
+ expect(zoomWindow(FROM, at(24), 48, 20, 21)).toEqual({ from: at(9), to: at(12) });
+ });
+
+ it('keeps a widened window inside the chart', () => {
+ expect(zoomWindow(FROM, at(24), 48, 0, 1)).toEqual({ from: at(0), to: at(3) });
+ expect(zoomWindow(FROM, at(24), 48, 46, 47)).toEqual({ from: at(21), to: at(24) });
+ });
+
+ it('has nothing to zoom into once the chart is three hours or less', () => {
+ expect(zoomWindow(FROM, at(3), 3, 0, 2)).toBeNull();
+ });
+});
+
+describe('sliceAt', () => {
+ // A plot from x=100 to x=500, 5 slices.
+ it('puts line and area slices on points, edge to edge', () => {
+ expect(sliceAt(100, 100, 500, 5, false)).toBe(0);
+ expect(sliceAt(300, 100, 500, 5, false)).toBe(2);
+ expect(sliceAt(500, 100, 500, 5, false)).toBe(4);
+ expect(sliceAt(160, 100, 500, 5, false)).toBe(1);
+ });
+
+ it('puts bar slices in bands', () => {
+ expect(sliceAt(100, 100, 500, 5, true)).toBe(0);
+ expect(sliceAt(179, 100, 500, 5, true)).toBe(0);
+ expect(sliceAt(181, 100, 500, 5, true)).toBe(1);
+ expect(sliceAt(500, 100, 500, 5, true)).toBe(4);
+ });
+
+ it('holds a pointer past either edge to the end slice', () => {
+ expect(sliceAt(20, 100, 500, 5, false)).toBe(0);
+ expect(sliceAt(900, 100, 500, 5, true)).toBe(4);
+ });
+
+ it('has no slice on an empty plot', () => {
+ expect(sliceAt(300, 100, 100, 5, false)).toBeNull();
+ expect(sliceAt(300, 100, 500, 0, false)).toBeNull();
+ });
+});
+
+describe('getBucketCount for a zoomed window', () => {
+ const custom = (h: number) => ({ kind: 'custom' as const, from: FROM, to: at(h) });
+
+ it('gives a slice per hour', () => {
+ expect(getBucketCount(custom(6))).toBe(6);
+ expect(getBucketCount(custom(40))).toBe(40);
+ });
+
+ it('keeps between 3 and 60 slices', () => {
+ expect(getBucketCount(custom(2))).toBe(3);
+ expect(getBucketCount(custom(24 * 20))).toBe(60);
+ });
+});
+
+describe('zooming the dashboard period', () => {
+ // In memory: Node's own `localStorage` global, empty without a storage file, hides happy-dom's.
+ const saved = new Map();
+ beforeAll(() =>
+ useDashboardStore.persist.setOptions({
+ storage: createJSONStorage(() => ({
+ getItem: (k) => saved.get(k) ?? null,
+ setItem: (k, v) => void saved.set(k, v),
+ removeItem: (k) => void saved.delete(k),
+ })),
+ }),
+ );
+ beforeEach(() => useDashboardStore.getState().setPreset('7d'));
+
+ it('remembers the preset it zoomed from, and goes back to it', () => {
+ useDashboardStore.getState().zoomTo(at(10), at(16));
+ expect(useDashboardStore.getState().period).toEqual({ kind: 'custom', from: at(10), to: at(16) });
+ expect(useDashboardStore.getState().zoomedFrom).toEqual({ kind: 'preset', preset: '7d' });
+
+ // Zooming again from inside a zoom still goes back to the preset.
+ useDashboardStore.getState().zoomTo(at(11), at(14));
+ expect(useDashboardStore.getState().zoomedFrom).toEqual({ kind: 'preset', preset: '7d' });
+
+ useDashboardStore.getState().resetZoom();
+ expect(useDashboardStore.getState().period).toEqual({ kind: 'preset', preset: '7d' });
+ expect(useDashboardStore.getState().zoomedFrom).toBeNull();
+ });
+
+ it('ends the zoom when a preset is picked', () => {
+ useDashboardStore.getState().zoomTo(at(10), at(16));
+ useDashboardStore.getState().setPreset('30d');
+ expect(useDashboardStore.getState().period).toEqual({ kind: 'preset', preset: '30d' });
+ expect(useDashboardStore.getState().zoomedFrom).toBeNull();
+ });
+
+ it('saves the preset, not the zoomed window', () => {
+ useDashboardStore.getState().zoomTo(at(10), at(16));
+ const stored = JSON.parse(saved.get('dashboard.period') ?? '{}');
+ expect(stored.state.period).toEqual({ kind: 'preset', preset: '7d' });
+ });
+});
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 5459f9e..8ac449f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1951,7 +1951,10 @@
},
"now": "now",
"avgZone": "average ยท {{zone}}",
- "average": "average"
+ "average": "average",
+ "zoomReset": "Back to {{period}}",
+ "zoomed": "Zoom",
+ "dragToZoom": "Drag to zoom"
},
"commands": {
"actionHint": "Server action",