@oneuptime/common 14.0.8 → 14.0.9

package/UI/Components/Charts/TimeRangeZoom/UseTimeRangeZoom.ts

@@ -0,0 +1,215 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import RangeStartAndEndDateTime from "../../../../Types/Time/RangeStartAndEndDateTime";
+import TimeRangeZoomUtil from "./TimeRangeZoomUtil";
+
+export interface UseTimeRangeZoomOptions {
+  /** The range the page is showing right now. */
+  timeRange: RangeStartAndEndDateTime;
+  /** How the page changes its range: a zoom and a reset both go through it. */
+  onTimeRangeChange: (timeRange: RangeStartAndEndDateTime) => void;
+}
+
+export interface TimeRangeZoom {
+  /** True while the page is on a window a chart drag zoomed it to. */
+  isZoomed: boolean;
+  /*
+   * The range this zoom works over right now: the page's current range.
+   * Lets a picker or a card tell the zoom of ITS range apart from one an
+   * enclosing page or chart offers over a different range. Optional so a
+   * zoom that cannot say (a hand-built one) is still usable; it is then
+   * taken to be the range's.
+   */
+  timeRange?: RangeStartAndEndDateTime | undefined;
+  /** The range a reset returns to; null while the page is not zoomed. */
+  rangeBeforeZoom: RangeStartAndEndDateTime | null;
+  /** A drag-selection on any chart: zooms the whole page to that window. */
+  zoomToTimeRange: (startTime: Date, endTime: Date) => void;
+  /** A double-click on any chart, or a reset button: undoes the zoom. */
+  resetZoom: () => void;
+}
+
+export type UseTimeRangeZoomFunction = (
+  options: UseTimeRangeZoomOptions,
+) => TimeRangeZoom;
+
+interface ZoomRecord {
+  /** The range the page was on before its first zoom. */
+  rangeBeforeZoom: RangeStartAndEndDateTime;
+  /** The window the latest zoom asked the page for. */
+  zoomedTo: RangeStartAndEndDateTime;
+  /** The range the page was on when the latest zoom was made. */
+  zoomedFrom: RangeStartAndEndDateTime;
+  /*
+   * True until the page first shows `zoomedTo`. Until then the page may
+   * simply not have applied the zoom yet (one that sets its range a render
+   * later), so still being on `zoomedFrom` does not end the zoom.
+   */
+  isAwaitingHost: boolean;
+}
+
+interface LatestZoomInputs {
+  timeRange: RangeStartAndEndDateTime;
+  onTimeRangeChange: (timeRange: RangeStartAndEndDateTime) => void;
+  activeZoom: ZoomRecord | null;
+}
+
+/**
+ * Page-wide drag-to-zoom over a range the page already owns.
+ *
+ * A page keeps its time range wherever it always has (component state, the
+ * URL, a saved view) and hands it here together with its setter. A drag on
+ * any chart then retimes the whole page, and a reset puts the page back on
+ * the range it had before the zoom.
+ *
+ * - Only the FIRST zoom is remembered. After drilling from "past hour" into
+ *   ten minutes and then into one, a single reset returns the whole hour
+ *   rather than making the reader climb back out a level at a time. This
+ *   matches the dashboards, the log and trace histograms and the metric
+ *   explorer.
+ * - Any other change of range (the time picker, a saved view, the URL) is
+ *   the reader choosing a new starting point. The zoom is over, and the
+ *   reset affordance goes away with it. No wrapper around the picker is
+ *   needed for that: the page is "zoomed" only while its range is still the
+ *   window the last zoom asked for, compared by value.
+ * - Once the page has moved off that window the zoom is forgotten, not set
+ *   aside. A page that later comes back to the very same window (a saved
+ *   view of it, the same custom range picked by hand) is on a new starting
+ *   point too: it offers no "Reset zoom", and a zoom made there resets to
+ *   that window, not to a range from before an abandoned zoom. A page that
+ *   applies the zoom a render late still counts as zoomed once it does.
+ * - zoomToTimeRange and resetZoom keep their identity for the life of the
+ *   page. Charts downstream are often memoized on comparators that ignore
+ *   function props, so a callback that changed identity could leave a chart
+ *   holding a closure over a stale range.
+ */
+const useTimeRangeZoom: UseTimeRangeZoomFunction = (
+  options: UseTimeRangeZoomOptions,
+): TimeRangeZoom => {
+  const [zoomRecord, setZoomRecord] = useState<ZoomRecord | null>(null);
+
+  const activeZoom: ZoomRecord | null =
+    zoomRecord &&
+    TimeRangeZoomUtil.isSameRange(options.timeRange, zoomRecord.zoomedTo)
+      ? zoomRecord
+      : null;
+
+  /*
+   * The callbacks read the latest inputs through this ref so they can stay
+   * identity-stable. It is also written straight after a zoom or a reset,
+   * so a second gesture that lands before the page re-renders still sees
+   * the first one.
+   */
+  const latest: React.MutableRefObject<LatestZoomInputs> =
+    useRef<LatestZoomInputs>({
+      timeRange: options.timeRange,
+      onTimeRangeChange: options.onTimeRangeChange,
+      activeZoom: activeZoom,
+    });
+
+  latest.current = {
+    timeRange: options.timeRange,
+    onTimeRangeChange: options.onTimeRangeChange,
+    activeZoom: activeZoom,
+  };
+
+  /*
+   * Drops the record once the page's range is anywhere but the zoomed
+   * window, so the zoom cannot come back if the page returns there later.
+   * Keyed on the range's value: a page that re-states its range in a new
+   * object on every render has not moved. The page is still allowed to be
+   * where the zoom was made from until it first shows the zoomed window.
+   */
+  const timeRangeKey: string = TimeRangeZoomUtil.getRangeKey(options.timeRange);
+
+  useEffect(() => {
+    setZoomRecord((current: ZoomRecord | null): ZoomRecord | null => {
+      if (!current) {
+        return current;
+      }
+
+      const timeRange: RangeStartAndEndDateTime = latest.current.timeRange;
+
+      if (TimeRangeZoomUtil.isSameRange(timeRange, current.zoomedTo)) {
+        return current.isAwaitingHost
+          ? { ...current, isAwaitingHost: false }
+          : current;
+      }
+
+      if (
+        current.isAwaitingHost &&
+        TimeRangeZoomUtil.isSameRange(timeRange, current.zoomedFrom)
+      ) {
+        return current;
+      }
+
+      return null;
+    });
+  }, [timeRangeKey]);
+
+  const zoomToTimeRange: (startTime: Date, endTime: Date) => void = useCallback(
+    (startTime: Date, endTime: Date): void => {
+      const current: LatestZoomInputs = latest.current;
+
+      const zoomedTo: RangeStartAndEndDateTime | null =
+        TimeRangeZoomUtil.getZoomedRange({
+          startTime: startTime,
+          endTime: endTime,
+          currentRange: current.timeRange,
+        });
+
+      if (!zoomedTo) {
+        return;
+      }
+
+      const nextRecord: ZoomRecord = {
+        rangeBeforeZoom: current.activeZoom
+          ? current.activeZoom.rangeBeforeZoom
+          : current.timeRange,
+        zoomedTo: zoomedTo,
+        zoomedFrom: current.timeRange,
+        isAwaitingHost: true,
+      };
+
+      latest.current = {
+        ...current,
+        timeRange: zoomedTo,
+        activeZoom: nextRecord,
+      };
+
+      setZoomRecord(nextRecord);
+      current.onTimeRangeChange(zoomedTo);
+    },
+    [],
+  );
+
+  const resetZoom: () => void = useCallback((): void => {
+    const current: LatestZoomInputs = latest.current;
+
+    // Nothing to undo: a stray double-click must not retime the page.
+    if (!current.activeZoom) {
+      return;
+    }
+
+    const rangeBeforeZoom: RangeStartAndEndDateTime =
+      current.activeZoom.rangeBeforeZoom;
+
+    latest.current = {
+      ...current,
+      timeRange: rangeBeforeZoom,
+      activeZoom: null,
+    };
+
+    setZoomRecord(null);
+    current.onTimeRangeChange(rangeBeforeZoom);
+  }, []);
+
+  return {
+    isZoomed: activeZoom !== null,
+    timeRange: options.timeRange,
+    rangeBeforeZoom: activeZoom ? activeZoom.rangeBeforeZoom : null,
+    zoomToTimeRange: zoomToTimeRange,
+    resetZoom: resetZoom,
+  };
+};
+
+export default useTimeRangeZoom;

package/UI/Components/Charts/Utils/DataPoint.ts

@@ -32,13 +32,12 @@ export default class DataPointUtil {
     xAxis: XAxis;
     yAxis: YAxis;
   }): Array<ChartDataPoint> {
-    const { intervals, formatter } = this.initializeXAxisData(
-      data.xAxis,
-      data.seriesPoints,
-    );
+    const { intervals, formatter, resolvedPrecision } =
+      this.initializeXAxisData(data.xAxis, data.seriesPoints);
     const arrayOfData: ChartDataPoint[] = this.initializeArrayOfData(
       intervals,
       formatter,
+      resolvedPrecision,
     );
     this.processSeriesData(
       data.seriesPoints,
@@ -57,6 +56,7 @@ export default class DataPointUtil {
     xAxisMin: XAxisMaxMin;
     intervals: Array<Date>;
     formatter: (value: Date) => string;
+    resolvedPrecision: XAxisPrecision;
   } {
     const xAxisMax: XAxisMaxMin = xAxis.options.max;
     const xAxisMin: XAxisMaxMin = xAxis.options.min;
@@ -80,12 +80,18 @@ export default class DataPointUtil {
       xAxisMin,
       precision,
     });
-    return { xAxisMax, xAxisMin, intervals, formatter };
+    const resolvedPrecision: XAxisPrecision = XAxisUtil.getPrecision({
+      xAxisMax,
+      xAxisMin,
+      precision,
+    });
+    return { xAxisMax, xAxisMin, intervals, formatter, resolvedPrecision };
   }
 
   private static initializeArrayOfData(
     intervals: Array<Date>,
     formatter: (value: Date) => string,
+    precision: XAxisPrecision,
   ): Array<ChartDataPoint> {
     const arrayOfData: Array<ChartDataPoint> = [];
     for (const interval of intervals) {
@@ -101,10 +107,16 @@ export default class DataPointUtil {
       dataPoint[CHART_DATA_POINT_X_AXIS_KEY] = formatter(interval);
       /*
        * The formatted label is not round-trippable back to a Date, so
-       * keep the raw bucket start on the row — charts use it to recover
-       * real dates (e.g. drag-to-select a time range).
+       * keep the bucket start on the row — charts use it to recover real
+       * dates (drag-to-select a time range, a bucket click). The start of
+       * the bucket the row DRAWS, not of its slot: points join rows by
+       * label, which is on the grid, while the slots are walked from a
+       * window start that usually is not (see XAxisUtil.getBucketStart).
        */
-      dataPoint[CHART_DATA_POINT_DATE_KEY] = interval.getTime();
+      dataPoint[CHART_DATA_POINT_DATE_KEY] = XAxisUtil.getBucketStart(
+        interval,
+        precision,
+      ).getTime();
       arrayOfData.push(dataPoint);
     }
     return arrayOfData;

package/UI/Components/Charts/Utils/XAxis.ts

@@ -496,6 +496,81 @@ export default class XAxisUtil {
     return intervals.slice(0, intervals.length - 1);
   }
 
+  /**
+   * The start of the bucket a point at `value` is grouped into on an axis
+   * of this precision: exactly the instant getFormatter rounds `value` to
+   * before labelling it.
+   *
+   * The axis walks its slots from the window start, which is rarely on the
+   * grid - a rolling "past week" starts at now minus seven days, 10:23 say -
+   * while points join rows by their formatted label, which IS on the grid.
+   * So the row labelled "10:00" on an hourly axis draws the 10:00 bucket but
+   * its slot starts at 10:23. Anything that turns a row back into time (a
+   * drag-to-zoom, a bucket click) needs the bucket's start, not the slot's;
+   * otherwise a zoom lands up to one bucket late and can cut out the very
+   * spike it was aimed at.
+   *
+   * Sub-day tiers round with the same browser-local Date setters as the
+   * formatter, and EVERY_DAY groups by the calendar day in the configured
+   * timezone, as its label does. The coarser tiers mix the two in ways that
+   * do not reduce to one floor; they keep the slot start.
+   */
+  public static getBucketStart(value: Date, precision: XAxisPrecision): Date {
+    const rounded: Date = this.cloneDate(value);
+
+    switch (precision) {
+      case XAxisPrecision.EVERY_SECOND:
+        rounded.setMilliseconds(0);
+        return rounded;
+      case XAxisPrecision.EVERY_FIVE_SECONDS:
+        rounded.setSeconds(Math.floor(rounded.getSeconds() / 5) * 5, 0);
+        return rounded;
+      case XAxisPrecision.EVERY_TEN_SECONDS:
+        rounded.setSeconds(Math.floor(rounded.getSeconds() / 10) * 10, 0);
+        return rounded;
+      case XAxisPrecision.EVERY_THIRTY_SECONDS:
+        rounded.setSeconds(Math.floor(rounded.getSeconds() / 30) * 30, 0);
+        return rounded;
+      case XAxisPrecision.EVERY_MINUTE:
+        rounded.setSeconds(0, 0);
+        return rounded;
+      case XAxisPrecision.EVERY_FIVE_MINUTES:
+        rounded.setMinutes(Math.floor(rounded.getMinutes() / 5) * 5, 0, 0);
+        return rounded;
+      case XAxisPrecision.EVERY_TEN_MINUTES:
+        rounded.setMinutes(Math.floor(rounded.getMinutes() / 10) * 10, 0, 0);
+        return rounded;
+      case XAxisPrecision.EVERY_FIFTEEN_MINUTES:
+        rounded.setMinutes(Math.floor(rounded.getMinutes() / 15) * 15, 0, 0);
+        return rounded;
+      case XAxisPrecision.EVERY_THIRTY_MINUTES:
+        rounded.setMinutes(Math.floor(rounded.getMinutes() / 30) * 30, 0, 0);
+        return rounded;
+      case XAxisPrecision.EVERY_HOUR:
+        rounded.setMinutes(0, 0, 0);
+        return rounded;
+      case XAxisPrecision.EVERY_TWO_HOURS:
+        rounded.setHours(Math.floor(rounded.getHours() / 2) * 2, 0, 0, 0);
+        return rounded;
+      case XAxisPrecision.EVERY_THREE_HOURS:
+        rounded.setHours(Math.floor(rounded.getHours() / 3) * 3, 0, 0, 0);
+        return rounded;
+      case XAxisPrecision.EVERY_SIX_HOURS:
+        rounded.setHours(Math.floor(rounded.getHours() / 6) * 6, 0, 0, 0);
+        return rounded;
+      case XAxisPrecision.EVERY_TWELVE_HOURS:
+        rounded.setHours(Math.floor(rounded.getHours() / 12) * 12, 0, 0, 0);
+        return rounded;
+      case XAxisPrecision.EVERY_DAY:
+        return OneUptimeDate.getStartOfDay(
+          value,
+          OneUptimeDate.getCurrentTimezone(),
+        );
+      default:
+        return rounded;
+    }
+  }
+
   public static getFormatter(data: {
     xAxisMin: XAxisMaxMin;
     xAxisMax: XAxisMaxMin;