@oneuptime/common 12.0.29 → 12.0.31

package/UI/Components/Charts/ChartLibrary/Types/FormattedReferenceRegion.ts

@@ -1,15 +1,19 @@
 import ChartReferenceRegionProps from "../../Types/ReferenceRegionProps";
 
 /**
- * A time-anchored shaded region whose endpoints have been formatted to
- * (and clamped onto) the chart's categorical x-axis labels. Used
- * internally by chart library components.
+ * A time-anchored shaded region whose endpoints have been resolved onto
+ * (and clamped into) the chart's categorical x-axis. Used internally by
+ * chart library components.
  */
 export default interface FormattedReferenceRegion {
   /** The formatted x-axis label of the region start bucket */
   formattedX1: string;
   /** The formatted x-axis label of the region end bucket */
   formattedX2: string;
+  /** Index of the start label in the chart's category list. */
+  startBucketIndex: number;
+  /** Index of the end label in the chart's category list. */
+  endBucketIndex: number;
   /** The original annotation for label/color/click handling */
   original: ChartReferenceRegionProps;
 }

package/UI/Components/Charts/ChartLibrary/Types/FormattedTimeReferenceLine.ts

@@ -1,13 +1,24 @@
 import ChartTimeReferenceLineProps from "../../Types/TimeReferenceLineProps";
 
 /**
- * A time-anchored vertical reference line whose x value has been formatted
- * to match the chart's categorical x-axis labels. Used internally by chart
- * library components.
+ * A time-anchored event marker resolved onto the chart's categorical
+ * x-axis. Used internally by chart library components.
  */
 export default interface FormattedTimeReferenceLine {
   /** The formatted x-axis label (e.g. "12:30", "22 Feb") */
   formattedX: string;
+  /**
+   * Index of that label in the chart's category list.
+   *
+   * The renderer positions markers from this, not from the label.
+   * recharts' categorical scale refuses to resolve *any* label once its
+   * domain holds a duplicate, so a label-keyed marker does not land in
+   * the wrong place — it disappears from the chart entirely. Sub-hour
+   * axes used to produce exactly that domain over a multi-day window;
+   * XAxisUtil keeps the labels distinct now, and this index means a
+   * regression there could never take the overlay down with it.
+   */
+  bucketIndex: number;
   /** The original annotation for label/color/click handling */
   original: ChartTimeReferenceLineProps;
 }

package/UI/Components/Charts/Types/ChartEventKind.ts

@@ -0,0 +1,13 @@
+/**
+ * What a chart event marker represents. Drives the marker's ordering when
+ * several markers collapse into one cluster (an incident outranks an alert,
+ * which outranks a deploy) and the fallback colour when a caller gives none.
+ */
+enum ChartEventKind {
+  Incident = "incident",
+  Alert = "alert",
+  Change = "change",
+  Generic = "generic",
+}
+
+export default ChartEventKind;

package/UI/Components/Charts/Types/ReferenceRegionProps.ts

@@ -1,3 +1,5 @@
+import ChartEventKind from "./ChartEventKind";
+
 /**
  * A time-anchored shaded region (e.g. an incident or maintenance window).
  * Endpoints are clamped to the nearest in-window x-axis buckets, so a
@@ -9,4 +11,8 @@ export default interface ChartReferenceRegionProps {
   label?: string | undefined;
   color?: string | undefined; // CSS color, e.g. "#6366f1" or "red"
   onClick?: (() => void) | undefined;
+  /** What the region represents. Defaults to Generic. */
+  kind?: ChartEventKind | undefined;
+  /** Second line in the region's hover card. */
+  subtitle?: string | undefined;
 }

package/UI/Components/Charts/Types/TimeReferenceLineProps.ts

@@ -1,7 +1,14 @@
+import ChartEventKind from "./ChartEventKind";
+
 /**
- * A time-anchored vertical event marker (e.g. a deploy or an incident
- * start). The date is snapped to the chart's categorical x-axis buckets
- * before rendering.
+ * A time-anchored event marker (e.g. a deploy or an incident start). The
+ * date is snapped to the chart's categorical x-axis buckets before
+ * rendering.
+ *
+ * Markers draw as a hairline through the plot topped by a chip on the
+ * annotation rail above it; the label is never painted over the series —
+ * it lives in the chip's hover card, so it can be as long as the record's
+ * real title.
  */
 export default interface ChartTimeReferenceLineProps {
   date: Date;
@@ -9,4 +16,14 @@ export default interface ChartTimeReferenceLineProps {
   color?: string | undefined; // CSS color, e.g. "#f59e0b" or "red"
   strokeDasharray?: string | undefined; // e.g. "4 4" for dashed
   onClick?: (() => void) | undefined;
+  /**
+   * What the marker represents. Sorts markers inside a cluster and picks
+   * the cluster's chip colour. Defaults to Generic.
+   */
+  kind?: ChartEventKind | undefined;
+  /**
+   * Second line in the hover card — severity, service, monitor name. Kept
+   * out of `label` so the primary line stays scannable.
+   */
+  subtitle?: string | undefined;
 }

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

@@ -8,7 +8,13 @@ import XAxisUtil from "./XAxis";
 interface AxisBuckets {
   intervals: Array<Date>;
   labels: Array<string>;
-  labelSet: Set<string>;
+  /*
+   * First index each label appears at. DataPointUtil places a series row
+   * by finding the first row with a matching label, so an annotation that
+   * resolves through the formatter has to land on that same first index to
+   * sit with its data.
+   */
+  labelToIndex: Map<string, number>;
   formatter: (value: Date) => string;
 }
 
@@ -25,7 +31,14 @@ export default class TimeAnnotationUtil {
     const labels: Array<string> = intervals.map((interval: Date) => {
       return formatter(interval);
     });
-    return { intervals, labels, labelSet: new Set(labels), formatter };
+    const labelToIndex: Map<string, number> = new Map<string, number>();
+    for (let index: number = 0; index < labels.length; index++) {
+      const label: string = labels[index]!;
+      if (!labelToIndex.has(label)) {
+        labelToIndex.set(label, index);
+      }
+    }
+    return { intervals, labels, labelToIndex, formatter };
   }
 
   /*
@@ -65,19 +78,36 @@ export default class TimeAnnotationUtil {
   }
 
   /*
-   * Resolve a date to a bucket label that is guaranteed to exist on the
-   * categorical x-axis. Prefer formatter output — series datapoints are
-   * bucketed by the exact same formatter, so annotations land where data
-   * with the same timestamp lands. The formatter floors to wall-clock
-   * boundaries while buckets start at the raw window start, so its output
-   * can match no bucket; fall back to the bucket containing the date.
-   * Returns null when the date is outside the charted window.
+   * Resolve a date to a bucket that is guaranteed to exist on the
+   * categorical x-axis, as an INDEX into that axis rather than a label.
+   *
+   * The index is what the renderer needs: a sub-hour axis over a
+   * multi-day window repeats its labels, and recharts' categorical scale
+   * cannot resolve any label once its domain holds a duplicate, so a
+   * label is not a usable position there.
+   *
+   * Prefer formatter output — series datapoints are bucketed by the exact
+   * same formatter, so annotations land where data with the same timestamp
+   * lands. The formatter floors to wall-clock boundaries while buckets
+   * start at the raw window start, so its output can match no bucket; fall
+   * back to the bucket containing the date. Returns null when the date is
+   * outside the charted window.
+   *
+   * The first-occurrence lookup is deliberate, and it has to stay tied to
+   * DataPointUtil, which places series rows by the very same
+   * first-match-on-label rule. Whatever bucket a timestamp's DATA lands
+   * in, its marker has to land in too — resolving a marker to some
+   * "truer" bucket than its data would park it over empty space. Sub-hour
+   * axes used to repeat their labels, which sent day-two markers and
+   * day-two data onto day one together; XAxisUtil now keeps them
+   * distinct, so both sides land where they belong. They still move
+   * together, which is the point.
    */
-  private static resolveBucketLabel(data: {
+  private static resolveBucketIndex(data: {
     date: Date;
     buckets: AxisBuckets;
-  }): string | null {
-    const { intervals, labels, labelSet, formatter } = data.buckets;
+  }): number | null {
+    const { intervals, labelToIndex, formatter } = data.buckets;
 
     const firstInterval: Date | undefined = intervals[0];
     if (!firstInterval || data.date.getTime() < firstInterval.getTime()) {
@@ -87,19 +117,14 @@ export default class TimeAnnotationUtil {
       return null;
     }
 
-    const formatted: string = formatter(data.date);
-    if (labelSet.has(formatted)) {
-      return formatted;
-    }
-
-    const bucketIndex: number | null = this.getBucketIndexForDate(
-      intervals,
-      data.date,
+    const formattedIndex: number | undefined = labelToIndex.get(
+      formatter(data.date),
     );
-    if (bucketIndex === null) {
-      return null;
+    if (formattedIndex !== undefined) {
+      return formattedIndex;
     }
-    return labels[bucketIndex] ?? null;
+
+    return this.getBucketIndexForDate(intervals, data.date);
   }
 
   public static formatTimeReferenceLines(data: {
@@ -110,14 +135,18 @@ export default class TimeAnnotationUtil {
 
     const formatted: Array<FormattedTimeReferenceLine> = [];
     for (const timeReferenceLine of data.timeReferenceLines) {
-      const formattedX: string | null = this.resolveBucketLabel({
+      const bucketIndex: number | null = this.resolveBucketIndex({
         date: timeReferenceLine.date,
         buckets,
       });
-      if (formattedX === null) {
+      if (bucketIndex === null) {
         continue; // outside the charted window
       }
-      formatted.push({ formattedX, original: timeReferenceLine });
+      const formattedX: string | undefined = buckets.labels[bucketIndex];
+      if (formattedX === undefined) {
+        continue;
+      }
+      formatted.push({ formattedX, bucketIndex, original: timeReferenceLine });
     }
     return formatted;
   }
@@ -128,8 +157,8 @@ export default class TimeAnnotationUtil {
   }): Array<FormattedReferenceRegion> {
     const buckets: AxisBuckets = this.getAxisBuckets(data.xAxis);
     const firstInterval: Date | undefined = buckets.intervals[0];
-    const lastLabel: string | undefined =
-      buckets.labels[buckets.labels.length - 1];
+    const lastIndex: number = buckets.labels.length - 1;
+    const lastLabel: string | undefined = buckets.labels[lastIndex];
     if (!firstInterval || lastLabel === undefined) {
       return [];
     }
@@ -155,14 +184,19 @@ export default class TimeAnnotationUtil {
        * A region overlapping the window edge clamps to the nearest
        * in-window bucket rather than vanishing.
        */
-      const formattedX1: string =
-        this.resolveBucketLabel({ date: new Date(startInMs), buckets }) ||
-        buckets.labels[0]!;
-      const formattedX2: string =
-        this.resolveBucketLabel({ date: new Date(endInMs), buckets }) ||
-        lastLabel;
+      const startBucketIndex: number =
+        this.resolveBucketIndex({ date: new Date(startInMs), buckets }) ?? 0;
+      const endBucketIndex: number =
+        this.resolveBucketIndex({ date: new Date(endInMs), buckets }) ??
+        lastIndex;
 
-      formatted.push({ formattedX1, formattedX2, original: referenceRegion });
+      formatted.push({
+        formattedX1: buckets.labels[startBucketIndex]!,
+        formattedX2: buckets.labels[endBucketIndex]!,
+        startBucketIndex,
+        endBucketIndex,
+        original: referenceRegion,
+      });
     }
     return formatted;
   }

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

@@ -8,6 +8,105 @@ export default class XAxisUtil {
     return new Date(value.getTime());
   }
 
+  /*
+   * A chart's x-axis label is not decoration — it IS the identity of its
+   * bucket. DataPointUtil places a series row by finding the first row
+   * whose label matches, TimeAnnotationUtil resolves an event marker the
+   * same way, and recharts' categorical scale resolves no category at all
+   * once its domain holds a duplicate. So a repeated label does not just
+   * read ambiguously: it merges other days' data into the first day's
+   * buckets and silently drops the annotations that land on them.
+   *
+   * Everything from EVERY_HOUR up already carries the date for exactly
+   * this reason. These two helpers decide when the finer tiers must too.
+   */
+
+  private static readonly MILLISECONDS_IN_A_DAY: number = 24 * 60 * 60 * 1000;
+
+  /**
+   * How much a wall-clock label has to say before it names exactly one
+   * instant inside this window.
+   *
+   * Two ways that happens:
+   *
+   * 1. The window is at least a day long, so the clock wraps. Measured:
+   *    a 23h window at the fifteen-minute tier yields 93 intervals and 93
+   *    distinct labels, while 24h yields 97 and 96 — the first and last
+   *    tick both read "00:00". A 48h window at the thirty-minute tier
+   *    yields 97 intervals and only 48 distinct labels.
+   *
+   * 2. The clocks go back inside the window, which replays a wall-clock
+   *    hour, and no duration is short enough to be safe from it.
+   *
+   *    It only bites when the configured timezone is not the one the
+   *    browser reports: intervals are stepped in browser wall-clock time
+   *    while labels are read in the configured zone, so a transition the
+   *    browser cannot see gets walked straight through. Measured on a 4h
+   *    window across London's fall-back — browser UTC, configured London:
+   *    49 intervals, 37 distinct. With both zones London the walker steps
+   *    over the repeated hour itself and the same window measures 37 and
+   *    37, so the zone suffix is redundant there but never wrong.
+   */
+  private static getWallClockLabelDetail(data: {
+    xAxisMin: XAxisMaxMin;
+    xAxisMax: XAxisMaxMin;
+  }): { withDate: boolean; withZone: boolean } {
+    if (
+      typeof data.xAxisMin === "number" ||
+      typeof data.xAxisMax === "number"
+    ) {
+      return { withDate: false, withZone: false };
+    }
+
+    const startDate: Date = data.xAxisMin;
+    const endDate: Date = data.xAxisMax;
+
+    const wrapsTheClock: boolean =
+      endDate.getTime() - startDate.getTime() >=
+      XAxisUtil.MILLISECONDS_IN_A_DAY;
+
+    /*
+     * A drop in the offset is a fall-back; a rise is a spring-forward,
+     * which skips an hour rather than repeating one and is harmless.
+     *
+     * The date does not settle a fall-back — both 01:00s are on the same
+     * day — so the zone abbreviation goes on too, which is the only thing
+     * that tells "01:00 BST" from "01:00 GMT".
+     */
+    const clocksGoBack: boolean =
+      OneUptimeDate.getTimezoneOffsetInMinutes(endDate) <
+      OneUptimeDate.getTimezoneOffsetInMinutes(startDate);
+
+    return {
+      withDate: wrapsTheClock || clocksGoBack,
+      withZone: clocksGoBack,
+    };
+  }
+
+  /**
+   * The label for a bucket finer than an hour: a bare wall clock where
+   * that is unambiguous, and a day-qualified one where it is not.
+   */
+  private static getWallClockLabel(
+    value: Date,
+    detail: { withDate: boolean; withZone: boolean },
+    options?: { includeSeconds?: boolean | undefined },
+  ): string {
+    const includeSeconds: boolean = options?.includeSeconds ?? false;
+
+    const base: string = detail.withDate
+      ? OneUptimeDate.getDateAsLocalDayMonthTimeString(value, {
+          includeSeconds,
+        })
+      : OneUptimeDate.getLocalTimeString(value, { includeSeconds });
+
+    if (!detail.withZone) {
+      return base;
+    }
+
+    return `${base} ${OneUptimeDate.getLocalZoneAbbr(value)}`;
+  }
+
   public static getPrecision(data: {
     xAxisMin: XAxisMaxMin;
     xAxisMax: XAxisMaxMin;
@@ -187,10 +286,17 @@ export default class XAxisUtil {
   }): (value: Date) => string {
     const precision: XAxisPrecision = XAxisUtil.getPrecision(data);
 
+    /*
+     * Computed once here rather than per tick: every sub-hour tier below
+     * needs the same answer, and it does not vary within a window.
+     */
+    const labelDetail: { withDate: boolean; withZone: boolean } =
+      XAxisUtil.getWallClockLabelDetail(data);
+
     switch (precision) {
       case XAxisPrecision.EVERY_SECOND:
         return (value: Date) => {
-          return OneUptimeDate.getLocalTimeString(value, {
+          return XAxisUtil.getWallClockLabel(value, labelDetail, {
             includeSeconds: true,
           });
         };
@@ -202,7 +308,7 @@ export default class XAxisUtil {
           const roundedSeconds: number = Math.floor(seconds / 5) * 5;
           roundedValue.setSeconds(roundedSeconds, 0);
 
-          return OneUptimeDate.getLocalTimeString(roundedValue, {
+          return XAxisUtil.getWallClockLabel(roundedValue, labelDetail, {
             includeSeconds: true,
           });
         };
@@ -214,7 +320,7 @@ export default class XAxisUtil {
           const roundedSeconds: number = Math.floor(seconds / 10) * 10;
           roundedValue.setSeconds(roundedSeconds, 0);
 
-          return OneUptimeDate.getLocalTimeString(roundedValue, {
+          return XAxisUtil.getWallClockLabel(roundedValue, labelDetail, {
             includeSeconds: true,
           });
         };
@@ -226,14 +332,14 @@ export default class XAxisUtil {
           const roundedSeconds: number = Math.floor(seconds / 30) * 30;
           roundedValue.setSeconds(roundedSeconds, 0);
 
-          return OneUptimeDate.getLocalTimeString(roundedValue, {
+          return XAxisUtil.getWallClockLabel(roundedValue, labelDetail, {
             includeSeconds: true,
           });
         };
       case XAxisPrecision.EVERY_MINUTE:
         // round down to nearest minute
         return (value: Date) => {
-          return OneUptimeDate.getLocalTimeString(value);
+          return XAxisUtil.getWallClockLabel(value, labelDetail);
         };
       case XAxisPrecision.EVERY_FIVE_MINUTES:
         // round down to nearest 5 minutes
@@ -243,7 +349,7 @@ export default class XAxisUtil {
           const roundedMinutes: number = Math.floor(minutes / 5) * 5;
           roundedValue.setMinutes(roundedMinutes, 0, 0);
 
-          return OneUptimeDate.getLocalTimeString(roundedValue);
+          return XAxisUtil.getWallClockLabel(roundedValue, labelDetail);
         };
       case XAxisPrecision.EVERY_TEN_MINUTES:
         // round down to nearest 10 minutes
@@ -253,7 +359,7 @@ export default class XAxisUtil {
           const roundedMinutes: number = Math.floor(minutes / 10) * 10;
           roundedValue.setMinutes(roundedMinutes, 0, 0);
 
-          return OneUptimeDate.getLocalTimeString(roundedValue);
+          return XAxisUtil.getWallClockLabel(roundedValue, labelDetail);
         };
       case XAxisPrecision.EVERY_FIFTEEN_MINUTES:
         // round down to nearest 15 minutes
@@ -263,7 +369,7 @@ export default class XAxisUtil {
           const roundedMinutes: number = Math.floor(minutes / 15) * 15;
           roundedValue.setMinutes(roundedMinutes, 0, 0);
 
-          return OneUptimeDate.getLocalTimeString(roundedValue);
+          return XAxisUtil.getWallClockLabel(roundedValue, labelDetail);
         };
       case XAxisPrecision.EVERY_THIRTY_MINUTES:
         // round down to nearest 30 minutes
@@ -273,7 +379,7 @@ export default class XAxisUtil {
           const roundedMinutes: number = Math.floor(minutes / 30) * 30;
           roundedValue.setMinutes(roundedMinutes, 0, 0);
 
-          return OneUptimeDate.getLocalTimeString(roundedValue);
+          return XAxisUtil.getWallClockLabel(roundedValue, labelDetail);
         };
       case XAxisPrecision.EVERY_HOUR:
         /*
@@ -340,12 +446,14 @@ export default class XAxisUtil {
           return OneUptimeDate.getDateAsLocalDayMonthString(roundedValue);
         };
       case XAxisPrecision.EVERY_WEEK:
-        // round down to nearest week
+        /*
+         * Day and month both read in the configured timezone. These used
+         * to be mixed inside one label — value.getDate() is the BROWSER's
+         * day — so a user whose zone put the tick on the other side of
+         * midnight got a day from one date and a month from another.
+         */
         return (value: Date) => {
-          const day: string = value.getDate().toString();
-          const month: string =
-            OneUptimeDate.getLocalShortMonthNameFromDate(value);
-          return `${day} ${month}`;
+          return OneUptimeDate.getDateAsLocalDayMonthString(value);
         };
       case XAxisPrecision.EVERY_TWO_WEEKS:
         // round down to nearest 2 weeks. // DD MMM
@@ -354,10 +462,9 @@ export default class XAxisUtil {
           const days: number = roundedValue.getDate();
           const roundedDays: number = Math.floor(days / 2) * 2;
           roundedValue.setDate(roundedDays);
-          const day: string = roundedValue.getDate().toString();
-          const month: string =
-            OneUptimeDate.getLocalShortMonthNameFromDate(roundedValue);
-          return `${day} ${month}`;
+
+          // Day and month both in the configured zone; see EVERY_WEEK.
+          return OneUptimeDate.getDateAsLocalDayMonthString(roundedValue);
         };
       case XAxisPrecision.EVERY_MONTH:
         // round down to nearest month // MM YYYY