@oneuptime/common 12.0.30 → 12.0.32

package/Tests/UI/Components/Charts/ChartBucketIdentity.test.ts

@@ -0,0 +1,254 @@
+/** @timezone UTC */
+
+import { describe, expect, test } from "@jest/globals";
+import ChartDataPoint, {
+  CHART_DATA_POINT_X_AXIS_KEY,
+} from "../../../../UI/Components/Charts/ChartLibrary/Types/ChartDataPoint";
+import DataPoint from "../../../../UI/Components/Charts/Types/DataPoint";
+import DataPointUtil from "../../../../UI/Components/Charts/Utils/DataPoint";
+import FormattedTimeReferenceLine from "../../../../UI/Components/Charts/ChartLibrary/Types/FormattedTimeReferenceLine";
+import TimeAnnotationUtil from "../../../../UI/Components/Charts/Utils/TimeAnnotation";
+import XAxisUtil from "../../../../UI/Components/Charts/Utils/XAxis";
+import {
+  XAxis,
+  XAxisAggregateType,
+} from "../../../../UI/Components/Charts/Types/XAxis/XAxis";
+import XAxisType from "../../../../UI/Components/Charts/Types/XAxis/XAxisType";
+import YAxis, {
+  YAxisPrecision,
+} from "../../../../UI/Components/Charts/Types/YAxis/YAxis";
+import YAxisType from "../../../../UI/Components/Charts/Types/YAxis/YAxisType";
+
+/*
+ * The x-axis label is the identity of a bucket on both sides of the chart:
+ * DataPointUtil puts a series row on the first row whose label matches, and
+ * TimeAnnotationUtil resolves an event marker to a bucket the same way.
+ *
+ * While sub-hour labels were bare wall-clock readings, a window of a day or
+ * more repeated them — so day two's data landed in day one's buckets
+ * (inflating Sum and Count, and drawing the series across only the first
+ * half of the chart) and day two's markers landed on day one's ticks.
+ *
+ * These are the end-to-end regressions for that. XAxis.test.ts holds the
+ * label-uniqueness property they depend on.
+ */
+
+const HOUR_IN_MS: number = 60 * 60 * 1000;
+const SERIES_NAME: string = "requests";
+const WINDOW_START: Date = new Date("2026-03-02T00:00:00.000Z");
+
+const Y_AXIS: YAxis = {
+  legend: "count",
+  options: {
+    type: YAxisType.Number,
+    min: "auto",
+    max: "auto",
+    precision: YAxisPrecision.NoDecimals,
+    formatter: (value: number): string => {
+      return String(value);
+    },
+  },
+};
+
+function buildXAxis(
+  hours: number,
+  aggregateType: XAxisAggregateType = XAxisAggregateType.Sum,
+): XAxis {
+  return {
+    legend: "Time",
+    options: {
+      type: XAxisType.Time,
+      min: WINDOW_START,
+      max: new Date(WINDOW_START.getTime() + hours * HOUR_IN_MS),
+      aggregateType,
+    },
+  };
+}
+
+/** One datapoint on the hour, every hour, each worth 1. */
+function hourlyPoints(hours: number): Array<DataPoint> {
+  const points: Array<DataPoint> = [];
+  for (let hour: number = 0; hour < hours; hour++) {
+    points.push({
+      x: new Date(WINDOW_START.getTime() + hour * HOUR_IN_MS),
+      y: 1,
+    });
+  }
+  return points;
+}
+
+function chartRows(
+  xAxis: XAxis,
+  points: Array<DataPoint>,
+): Array<ChartDataPoint> {
+  return DataPointUtil.getChartDataPoints({
+    seriesPoints: [{ seriesName: SERIES_NAME, data: points }],
+    xAxis,
+    yAxis: Y_AXIS,
+  });
+}
+
+function rowsCarryingData(rows: Array<ChartDataPoint>): Array<ChartDataPoint> {
+  return rows.filter((row: ChartDataPoint): boolean => {
+    return row[SERIES_NAME] !== undefined;
+  });
+}
+
+describe("series data does not merge across days", () => {
+  test("48 hourly points land in 48 separate buckets, one each", () => {
+    /*
+     * Measured before the fix: 24 of the 48 points were folded onto the
+     * other 24, so the largest bucket summed to 2 and the last row
+     * carrying any data was index 46 of 96 — the series stopped halfway
+     * across the chart.
+     */
+    const xAxis: XAxis = buildXAxis(48);
+    const rows: Array<ChartDataPoint> = chartRows(xAxis, hourlyPoints(48));
+    const withData: Array<ChartDataPoint> = rowsCarryingData(rows);
+
+    expect(rows).toHaveLength(97);
+    expect(withData).toHaveLength(48);
+
+    for (const row of withData) {
+      expect(row[SERIES_NAME]).toBe(1);
+    }
+  });
+
+  test("the series is drawn across the whole window, not just day one", () => {
+    const xAxis: XAxis = buildXAxis(48);
+    const rows: Array<ChartDataPoint> = chartRows(xAxis, hourlyPoints(48));
+
+    const lastRowWithData: number = rows.reduce(
+      (last: number, row: ChartDataPoint, index: number): number => {
+        return row[SERIES_NAME] === undefined ? last : index;
+      },
+      -1,
+    );
+
+    // Hourly points on a half-hourly axis reach the second-to-last tick.
+    expect(lastRowWithData).toBe(rows.length - 3);
+  });
+
+  test("a Sum aggregate is not inflated by a merged day", () => {
+    const xAxis: XAxis = buildXAxis(48, XAxisAggregateType.Sum);
+    const rows: Array<ChartDataPoint> = chartRows(xAxis, hourlyPoints(48));
+
+    const largestBucket: number = rowsCarryingData(rows).reduce(
+      (largest: number, row: ChartDataPoint): number => {
+        return Math.max(largest, Number(row[SERIES_NAME]));
+      },
+      0,
+    );
+
+    // One point per bucket, so no bucket may sum to more than one point.
+    expect(largestBucket).toBe(1);
+  });
+
+  test("day two's points keep their own buckets, on their own labels", () => {
+    const xAxis: XAxis = buildXAxis(48);
+    const rows: Array<ChartDataPoint> = chartRows(xAxis, hourlyPoints(48));
+
+    const labelsWithData: Array<string> = rowsCarryingData(rows).map(
+      (row: ChartDataPoint): string => {
+        return String(row[CHART_DATA_POINT_X_AXIS_KEY]);
+      },
+    );
+
+    expect(labelsWithData).toContain("02 Mar, 06:00");
+    expect(labelsWithData).toContain("03 Mar, 06:00");
+    expect(new Set(labelsWithData).size).toBe(labelsWithData.length);
+  });
+
+  test("a 24 hour window keeps its last point out of its first bucket", () => {
+    /*
+     * The narrower version of the same bug: only the first and last tick
+     * collided, so a datapoint at the very end of the window was added to
+     * the very first bucket.
+     */
+    const xAxis: XAxis = buildXAxis(24);
+    const rows: Array<ChartDataPoint> = chartRows(xAxis, [
+      { x: WINDOW_START, y: 1 },
+      { x: new Date(WINDOW_START.getTime() + 24 * HOUR_IN_MS), y: 1 },
+    ]);
+
+    const withData: Array<ChartDataPoint> = rowsCarryingData(rows);
+
+    expect(withData).toHaveLength(2);
+    expect(withData[0]![SERIES_NAME]).toBe(1);
+    expect(withData[1]![SERIES_NAME]).toBe(1);
+  });
+
+  test("a window short enough to be unambiguous still buckets correctly", () => {
+    // The unchanged path, so the fix cannot have moved it.
+    const xAxis: XAxis = buildXAxis(6);
+    const rows: Array<ChartDataPoint> = chartRows(xAxis, hourlyPoints(6));
+
+    expect(rowsCarryingData(rows)).toHaveLength(6);
+    expect(String(rows[0]![CHART_DATA_POINT_X_AXIS_KEY])).toBe("00:00");
+  });
+});
+
+describe("event markers do not merge across days", () => {
+  function bucketOfMarker(xAxis: XAxis, date: Date): number {
+    const formatted: Array<FormattedTimeReferenceLine> =
+      TimeAnnotationUtil.formatTimeReferenceLines({
+        timeReferenceLines: [{ date, label: "event" }],
+        xAxis,
+      });
+    expect(formatted).toHaveLength(1);
+    return formatted[0]!.bucketIndex;
+  }
+
+  test("a day-two marker resolves to a day-two bucket", () => {
+    const xAxis: XAxis = buildXAxis(48);
+
+    const dayOne: number = bucketOfMarker(
+      xAxis,
+      new Date(WINDOW_START.getTime() + 6 * HOUR_IN_MS),
+    );
+    const dayTwo: number = bucketOfMarker(
+      xAxis,
+      new Date(WINDOW_START.getTime() + 30 * HOUR_IN_MS),
+    );
+
+    expect(dayTwo).toBeGreaterThan(dayOne);
+    // 30h in, on a half-hourly axis, is the 60th interval.
+    expect(dayTwo).toBe(60);
+  });
+
+  test("a marker still lands on the bucket its own data lands in", () => {
+    /*
+     * The invariant both sides have to keep. It held before the fix too —
+     * they were consistently wrong together — and it has to keep holding
+     * now that they are consistently right.
+     */
+    const xAxis: XAxis = buildXAxis(48);
+    const labels: Array<string> = XAxisUtil.getPrecisionIntervals({
+      xAxisMin: xAxis.options.min,
+      xAxisMax: xAxis.options.max,
+    }).map(
+      XAxisUtil.getFormatter({
+        xAxisMin: xAxis.options.min,
+        xAxisMax: xAxis.options.max,
+      }),
+    );
+
+    for (const hoursIn of [0, 6, 23, 24, 30, 47]) {
+      const at: Date = new Date(WINDOW_START.getTime() + hoursIn * HOUR_IN_MS);
+
+      const rows: Array<ChartDataPoint> = chartRows(xAxis, [{ x: at, y: 1 }]);
+      const dataBucket: number = rows.findIndex(
+        (row: ChartDataPoint): boolean => {
+          return row[SERIES_NAME] !== undefined;
+        },
+      );
+
+      expect(dataBucket).toBeGreaterThanOrEqual(0);
+      expect(bucketOfMarker(xAxis, at)).toBe(dataBucket);
+      // And the label the renderer shows agrees with both.
+      expect(labels[dataBucket]).toBe(
+        String(rows[dataBucket]![CHART_DATA_POINT_X_AXIS_KEY]),
+      );
+    }
+  });
+});

package/Tests/UI/Components/Charts/ChartClickDoubleClickDisambiguation.test.tsx

@@ -0,0 +1,221 @@
+import "@testing-library/jest-dom";
+import { afterEach, beforeEach, describe, expect, test } from "@jest/globals";
+import { act, cleanup, render } from "@testing-library/react";
+import React from "react";
+import getJestMockFunction, { MockFunction } from "../../../MockType";
+
+/*
+ * A double-click is delivered as TWO plain clicks and only then a
+ * `dblclick`. On a dashboard panel a plain click already means something —
+ * it pins the bucket and opens the investigation inspector — so wiring
+ * double-click-to-reset naively would pop that inspector twice on the way
+ * to resetting the board, and leave it open on top of the result.
+ *
+ * The chart library solves it by holding the click open for
+ * DOUBLE_CLICK_DISAMBIGUATION_MS and cancelling it when the double-click
+ * lands. That delay is a real cost, so it is armed ONLY when a reset
+ * handler is supplied — every other chart in the product keeps instant
+ * clicks. These tests pin both halves of that bargain.
+ *
+ * recharts' own chart root is mocked here so the chart-level handlers can
+ * be invoked with a known active index: jsdom reports every element as
+ * 0x0, so a real click would never resolve to a bucket and the assertions
+ * would pass for the wrong reason. The wiring from recharts' DOM into
+ * these handlers is covered separately by ChartDoubleClickReset.test.tsx.
+ */
+
+/*
+ * Deliberately NOT a React props interface: the mock chart below takes an
+ * untyped bag and this is just how the captured handlers are read back.
+ * Typing the mock's parameter would trip react/no-unused-prop-types, since
+ * the mock renders none of them.
+ */
+type CapturedChartHandlers = {
+  onClick?: ((chartState: Record<string, unknown>) => void) | undefined;
+  onDoubleClick?: ((...args: Array<unknown>) => void) | undefined;
+};
+
+const mockChartPropsRef: { current: CapturedChartHandlers } = { current: {} };
+
+jest.mock("recharts", () => {
+  const actual: Record<string, any> = jest.requireActual("recharts");
+  return {
+    ...actual,
+    ResponsiveContainer: ({ children }: { children: React.ReactElement }) => {
+      return children;
+    },
+    LineChart: (props: Record<string, unknown>): React.ReactElement => {
+      mockChartPropsRef.current = props as CapturedChartHandlers;
+      return React.createElement("div", { "data-testid": "chart-root" });
+    },
+  };
+});
+
+import { LineChart } from "../../../../UI/Components/Charts/ChartLibrary/LineChart/LineChart";
+import { DOUBLE_CLICK_DISAMBIGUATION_MS } from "../../../../UI/Components/Charts/ChartLibrary/Utils/DoubleClick";
+import {
+  CHART_DATA_POINT_DATE_KEY,
+  CHART_DATA_POINT_X_AXIS_KEY,
+} from "../../../../UI/Components/Charts/ChartLibrary/Types/ChartDataPoint";
+
+const BUCKET_MS: number = 60 * 1000;
+const FIRST_BUCKET: Date = new Date("2026-08-10T00:00:00.000Z");
+const CLICKED_ROW_INDEX: number = 2;
+
+function buildRows(): Array<Record<string, number | string>> {
+  const rows: Array<Record<string, number | string>> = [];
+  for (let index: number = 0; index < 6; index++) {
+    const bucketDate: Date = new Date(
+      FIRST_BUCKET.getTime() + index * BUCKET_MS,
+    );
+    rows.push({
+      [CHART_DATA_POINT_X_AXIS_KEY]: bucketDate.toISOString(),
+      [CHART_DATA_POINT_DATE_KEY]: bucketDate.getTime(),
+      CPU: 10 + index,
+    });
+  }
+  return rows;
+}
+
+function renderChart(options: {
+  onBucketClick: MockFunction;
+  onTimeRangeReset?: MockFunction | undefined;
+}): void {
+  render(
+    <LineChart
+      data={buildRows()}
+      index={CHART_DATA_POINT_X_AXIS_KEY}
+      categories={["CPU"]}
+      showLegend={false}
+      onBucketClick={
+        options.onBucketClick as unknown as (
+          bucketStart: Date,
+          bucketEnd: Date,
+          valuesAtBucket: Record<string, number | string>,
+        ) => void
+      }
+      onTimeRangeReset={
+        options.onTimeRangeReset as unknown as (() => void) | undefined
+      }
+    />,
+  );
+}
+
+function clickBucket(): void {
+  act(() => {
+    mockChartPropsRef.current.onClick?.({
+      activeTooltipIndex: CLICKED_ROW_INDEX,
+    });
+  });
+}
+
+function doubleClick(): void {
+  act(() => {
+    mockChartPropsRef.current.onDoubleClick?.({}, {});
+  });
+}
+
+function advancePastTheDoubleClickWindow(): void {
+  act(() => {
+    jest.advanceTimersByTime(DOUBLE_CLICK_DISAMBIGUATION_MS + 10);
+  });
+}
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  mockChartPropsRef.current = {};
+});
+
+afterEach(() => {
+  cleanup();
+  jest.useRealTimers();
+});
+
+describe("chart click vs. double-click disambiguation", () => {
+  test("with no reset handler, a bucket click is delivered immediately", () => {
+    const onBucketClick: MockFunction = getJestMockFunction();
+    renderChart({ onBucketClick });
+
+    // No onDoubleClick is even handed to recharts when reset is off.
+    expect(mockChartPropsRef.current.onDoubleClick).toBeUndefined();
+
+    clickBucket();
+
+    expect(onBucketClick.mock.calls.length).toBe(1);
+    expect(onBucketClick.mock.calls[0]?.[0]).toEqual(
+      new Date(FIRST_BUCKET.getTime() + CLICKED_ROW_INDEX * BUCKET_MS),
+    );
+    // The bucket covers its full width, derived from the adjacent rows.
+    expect(onBucketClick.mock.calls[0]?.[1]).toEqual(
+      new Date(FIRST_BUCKET.getTime() + (CLICKED_ROW_INDEX + 1) * BUCKET_MS),
+    );
+  });
+
+  test("with a reset handler, a single click still reaches the bucket — just later", () => {
+    const onBucketClick: MockFunction = getJestMockFunction();
+    const onTimeRangeReset: MockFunction = getJestMockFunction();
+    renderChart({ onBucketClick, onTimeRangeReset });
+
+    clickBucket();
+
+    // Held open, in case a second click is coming.
+    expect(onBucketClick.mock.calls.length).toBe(0);
+
+    advancePastTheDoubleClickWindow();
+
+    expect(onBucketClick.mock.calls.length).toBe(1);
+    expect(onTimeRangeReset.mock.calls.length).toBe(0);
+  });
+
+  test("a double-click resets and never pins a bucket", () => {
+    const onBucketClick: MockFunction = getJestMockFunction();
+    const onTimeRangeReset: MockFunction = getJestMockFunction();
+    renderChart({ onBucketClick, onTimeRangeReset });
+
+    // Exactly what the browser delivers: click, click, then dblclick.
+    clickBucket();
+    clickBucket();
+    doubleClick();
+
+    expect(onTimeRangeReset.mock.calls.length).toBe(1);
+
+    advancePastTheDoubleClickWindow();
+
+    // Neither click may survive the reset.
+    expect(onBucketClick.mock.calls.length).toBe(0);
+  });
+
+  test("a click after a double-click still works", () => {
+    const onBucketClick: MockFunction = getJestMockFunction();
+    const onTimeRangeReset: MockFunction = getJestMockFunction();
+    renderChart({ onBucketClick, onTimeRangeReset });
+
+    clickBucket();
+    clickBucket();
+    doubleClick();
+    advancePastTheDoubleClickWindow();
+
+    clickBucket();
+    advancePastTheDoubleClickWindow();
+
+    expect(onBucketClick.mock.calls.length).toBe(1);
+    expect(onTimeRangeReset.mock.calls.length).toBe(1);
+  });
+
+  test("unmounting mid-gesture drops the pending click instead of firing it", () => {
+    const onBucketClick: MockFunction = getJestMockFunction();
+    const onTimeRangeReset: MockFunction = getJestMockFunction();
+    renderChart({ onBucketClick, onTimeRangeReset });
+
+    clickBucket();
+    cleanup();
+    advancePastTheDoubleClickWindow();
+
+    /*
+     * A widget can be unmounted by the very reset the user is performing
+     * (the board re-queries and re-renders); a timer that outlives it would
+     * call back into a dead component.
+     */
+    expect(onBucketClick.mock.calls.length).toBe(0);
+  });
+});

package/Tests/UI/Components/Charts/ChartDoubleClickReset.test.tsx

@@ -0,0 +1,220 @@
+import "@testing-library/jest-dom";
+import { afterEach, describe, expect, test } from "@jest/globals";
+import {
+  RenderResult,
+  cleanup,
+  fireEvent,
+  render,
+} from "@testing-library/react";
+import React from "react";
+import getJestMockFunction, { MockFunction } from "../../../MockType";
+
+/*
+ * ResponsiveContainer measures its parent, which is always 0x0 in jsdom, so
+ * the chart renders nothing — including no `.recharts-wrapper` for the
+ * events below to land on — without a fixed size. Same shim the other chart
+ * suites use.
+ */
+jest.mock("recharts", () => {
+  const actual: Record<string, any> = jest.requireActual("recharts");
+  return {
+    ...actual,
+    ResponsiveContainer: ({ children }: { children: React.ReactElement }) => {
+      return React.cloneElement(children, { width: 600, height: 300 });
+    },
+  };
+});
+
+import AreaChartElement from "../../../../UI/Components/Charts/Area/AreaChart";
+import BarChartElement from "../../../../UI/Components/Charts/Bar/BarChart";
+import LineChartElement from "../../../../UI/Components/Charts/Line/LineChart";
+import ChartCurve from "../../../../UI/Components/Charts/Types/ChartCurve";
+import DataPoint from "../../../../UI/Components/Charts/Types/DataPoint";
+import SeriesPoint from "../../../../UI/Components/Charts/Types/SeriesPoints";
+import {
+  XAxis as ChartXAxis,
+  XAxisAggregateType,
+} from "../../../../UI/Components/Charts/Types/XAxis/XAxis";
+import XAxisType from "../../../../UI/Components/Charts/Types/XAxis/XAxisType";
+import YAxis, {
+  YAxisPrecision,
+} from "../../../../UI/Components/Charts/Types/YAxis/YAxis";
+import YAxisType from "../../../../UI/Components/Charts/Types/YAxis/YAxisType";
+
+/*
+ * Drag-to-select on a dashboard panel now retimes the WHOLE dashboard, so
+ * every panel needs a way back out of the zoom that does not depend on
+ * finding a particular widget: double-clicking any of them.
+ *
+ * That gesture is wired at the chart library, not at the widget card, for
+ * two reasons pinned here: it must reach recharts' own plot surface (the
+ * card sits under the edit overlay and the resize handles), and it must be
+ * OPT-IN — a chart handed no reset handler has to behave exactly as it did
+ * before, because a double-click is also two plain clicks and those still
+ * mean "pin this bucket" everywhere else in the product.
+ */
+
+const START: Date = new Date("2026-08-10T00:00:00.000Z");
+const END: Date = new Date("2026-08-10T01:00:00.000Z");
+
+function buildPoints(): Array<DataPoint> {
+  const points: Array<DataPoint> = [];
+  for (let index: number = 0; index < 10; index++) {
+    points.push({
+      x: new Date(START.getTime() + index * 60 * 1000),
+      y: 90 + index,
+    });
+  }
+  return points;
+}
+
+function buildSeries(): Array<SeriesPoint> {
+  return [{ seriesName: "CPU", data: buildPoints() }];
+}
+
+const X_AXIS: ChartXAxis = {
+  legend: "Time",
+  options: {
+    type: XAxisType.Time,
+    min: START,
+    max: END,
+    aggregateType: XAxisAggregateType.Average,
+  },
+};
+
+const Y_AXIS: YAxis = {
+  legend: "%",
+  options: {
+    type: YAxisType.Number,
+    min: "auto",
+    max: 100,
+    precision: YAxisPrecision.TwoDecimals,
+    formatter: (value: number): string => {
+      return `${value}%`;
+    },
+  },
+};
+
+interface ChartUnderTest {
+  name: string;
+  render: (onTimeRangeReset: (() => void) | undefined) => React.ReactElement;
+}
+
+const CHARTS: Array<ChartUnderTest> = [
+  {
+    name: "LineChart",
+    render: (
+      onTimeRangeReset: (() => void) | undefined,
+    ): React.ReactElement => {
+      return (
+        <LineChartElement
+          data={buildSeries()}
+          xAxis={X_AXIS}
+          yAxis={Y_AXIS}
+          curve={ChartCurve.MONOTONE}
+          heightInPx={300}
+          showLegend={false}
+          sync={false}
+          syncid="double-click-reset-test"
+          onTimeRangeReset={onTimeRangeReset}
+        />
+      );
+    },
+  },
+  {
+    name: "AreaChart",
+    render: (
+      onTimeRangeReset: (() => void) | undefined,
+    ): React.ReactElement => {
+      return (
+        <AreaChartElement
+          data={buildSeries()}
+          xAxis={X_AXIS}
+          yAxis={Y_AXIS}
+          curve={ChartCurve.MONOTONE}
+          heightInPx={300}
+          showLegend={false}
+          sync={false}
+          syncid="double-click-reset-test"
+          onTimeRangeReset={onTimeRangeReset}
+        />
+      );
+    },
+  },
+  {
+    /*
+     * A bar panel cannot ORIGINATE a zoom — it has no drag-to-select — but
+     * it must still be able to end one, or a board whose only panel under
+     * the pointer is a bar chart would be a dead end.
+     */
+    name: "BarChart",
+    render: (
+      onTimeRangeReset: (() => void) | undefined,
+    ): React.ReactElement => {
+      return (
+        <BarChartElement
+          data={buildSeries()}
+          xAxis={X_AXIS}
+          yAxis={Y_AXIS}
+          heightInPx={300}
+          showLegend={false}
+          sync={false}
+          syncid="double-click-reset-test"
+          onTimeRangeReset={onTimeRangeReset}
+        />
+      );
+    },
+  },
+];
+
+function plotSurface(rendered: RenderResult): Element {
+  const surface: Element | null =
+    rendered.container.querySelector(".recharts-wrapper");
+  if (!surface) {
+    throw new Error("chart did not render a plot surface");
+  }
+  return surface;
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("chart double-click to reset the time range", () => {
+  for (const chart of CHARTS) {
+    describe(chart.name, () => {
+      test("double-clicking the plot calls back exactly once", () => {
+        const onTimeRangeReset: MockFunction = getJestMockFunction();
+        const rendered: RenderResult = render(
+          chart.render(onTimeRangeReset as unknown as () => void),
+        );
+
+        fireEvent.doubleClick(plotSurface(rendered));
+
+        expect(onTimeRangeReset.mock.calls.length).toBe(1);
+      });
+
+      test("a plain click is not a reset", () => {
+        const onTimeRangeReset: MockFunction = getJestMockFunction();
+        const rendered: RenderResult = render(
+          chart.render(onTimeRangeReset as unknown as () => void),
+        );
+
+        fireEvent.click(plotSurface(rendered));
+
+        expect(onTimeRangeReset.mock.calls.length).toBe(0);
+      });
+
+      test("a chart with no reset handler still renders and swallows the gesture", () => {
+        const rendered: RenderResult = render(chart.render(undefined));
+
+        // No handler wired, so this must be inert rather than throwing.
+        fireEvent.doubleClick(plotSurface(rendered));
+
+        expect(
+          rendered.container.querySelector(".recharts-wrapper"),
+        ).not.toBeNull();
+      });
+    });
+  }
+});