@oneuptime/common 11.5.9 → 11.5.10

package/UI/Components/Charts/ChartLibrary/LineChart/LineChart.tsx

@@ -12,6 +12,7 @@ import {
   Line,
   Legend as RechartsLegend,
   LineChart as RechartsLineChart,
+  ReferenceArea,
   ReferenceDot,
   ReferenceLine,
   ResponsiveContainer,
@@ -22,6 +23,9 @@ import {
 import ChartReferenceLineProps from "../../Types/ReferenceLineProps";
 import ExemplarPoint from "../../Types/ExemplarPoint";
 import FormattedExemplarPoint from "../Types/FormattedExemplarPoint";
+import FormattedReferenceRegion from "../Types/FormattedReferenceRegion";
+import FormattedTimeReferenceLine from "../Types/FormattedTimeReferenceLine";
+import { CHART_DATA_POINT_DATE_KEY } from "../Types/ChartDataPoint";
 import { AxisDomain } from "recharts/types/util/types";
 
 import { useOnWindowResize } from "../Utils/UseWindowOnResize";
@@ -38,6 +42,15 @@ import { getYAxisDomain } from "../Utils/GetYAxisDomain";
 import { hasOnlyOneValueForKey } from "../Utils/HasOnlyOneValueForKey";
 import ChartCurve from "../../Types/ChartCurve";
 
+/*
+ * Incident/alert time markers each label at the same "insideTop" band, so
+ * several events in one window pile their labels into an unreadable stack.
+ * A single marker keeps the classic horizontal top label; a handful get
+ * rotated to run along their lines; past this cap inline labels are hidden
+ * entirely (the dashed lines and their click-through remain).
+ */
+const MAX_LABELED_TIME_REFERENCE_LINES: number = 6;
+
 //#region Legend
 
 interface LegendItemProps {
@@ -559,6 +572,15 @@ type BaseEventProps = {
 
 type LineChartEventProps = BaseEventProps | null | undefined;
 
+/*
+ * Subset of the recharts MouseHandlerDataParam passed to chart-level
+ * mouse handlers — just the fields range selection needs.
+ */
+type RangeSelectionChartState = {
+  activeTooltipIndex?: number | string | null | undefined;
+  activeLabel?: string | number | undefined;
+};
+
 interface LineChartProps extends React.HTMLAttributes<HTMLDivElement> {
   data: Record<string, any>[];
   index: string;
@@ -589,8 +611,11 @@ interface LineChartProps extends React.HTMLAttributes<HTMLDivElement> {
   customTooltip?: React.ComponentType<TooltipProps>;
   syncid?: string | undefined;
   referenceLines?: Array<ChartReferenceLineProps> | undefined;
+  formattedTimeReferenceLines?: Array<FormattedTimeReferenceLine> | undefined;
+  formattedReferenceRegions?: Array<FormattedReferenceRegion> | undefined;
   formattedExemplarPoints?: Array<FormattedExemplarPoint> | undefined;
   onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
+  onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
 }
 
 const LineChart: React.ForwardRefExoticComponent<
@@ -627,6 +652,9 @@ const LineChart: React.ForwardRefExoticComponent<
       legendPosition = "right",
       tooltipCallback,
       customTooltip,
+      formattedTimeReferenceLines,
+      formattedReferenceRegions,
+      onTimeRangeSelect,
       ...other
     } = props;
     const CustomTooltip: React.ComponentType<TooltipProps> | undefined =
@@ -640,8 +668,27 @@ const LineChart: React.ForwardRefExoticComponent<
     const [activeLegend, setActiveLegend] = React.useState<string | undefined>(
       undefined,
     );
+    const hasOnTimeRangeSelect: boolean = Boolean(onTimeRangeSelect);
+    const [rangeSelectionStart, setRangeSelectionStart] = React.useState<
+      string | null
+    >(null);
+    const [rangeSelectionEnd, setRangeSelectionEnd] = React.useState<
+      string | null
+    >(null);
+    const isRangeSelecting: React.MutableRefObject<boolean> =
+      React.useRef<boolean>(false);
+    const rangeSelectionStartIndexRef: React.MutableRefObject<number | null> =
+      React.useRef<number | null>(null);
+    const rangeSelectionEndIndexRef: React.MutableRefObject<number | null> =
+      React.useRef<number | null>(null);
+    const suppressNextClickRef: React.MutableRefObject<boolean> =
+      React.useRef<boolean>(false);
     const categoryColors: Map<string, ChartColorValue> =
       constructCategoryColors(categories, colors);
+    const timeReferenceLineCount: number =
+      formattedTimeReferenceLines?.length || 0;
+    const showTimeReferenceLineLabels: boolean =
+      timeReferenceLineCount <= MAX_LABELED_TIME_REFERENCE_LINES;
 
     const yAxisDomain: (number | "auto")[] = getYAxisDomain(
       autoMinValue,
@@ -657,6 +704,11 @@ const LineChart: React.ForwardRefExoticComponent<
     function onDotClick(itemData: any, event: React.MouseEvent): void {
       event.stopPropagation();
 
+      // Ignore the click that immediately follows a drag-to-select.
+      if (suppressNextClickRef.current) {
+        return;
+      }
+
       if (!hasOnValueChange) {
         return;
       }
@@ -685,6 +737,10 @@ const LineChart: React.ForwardRefExoticComponent<
     }
 
     function onCategoryClick(dataKey: string): void {
+      // Ignore the click that immediately follows a drag-to-select.
+      if (suppressNextClickRef.current) {
+        return;
+      }
       if (!hasOnValueChange) {
         return;
       }
@@ -706,15 +762,179 @@ const LineChart: React.ForwardRefExoticComponent<
       setActiveDot(undefined);
     }
 
+    function getRowIndexFromChartState(
+      chartState: RangeSelectionChartState,
+    ): number | null {
+      const activeTooltipIndex: number | string | null | undefined =
+        chartState.activeTooltipIndex;
+      const numericIndex: number =
+        typeof activeTooltipIndex === "number"
+          ? activeTooltipIndex
+          : Number(activeTooltipIndex);
+      if (
+        activeTooltipIndex !== undefined &&
+        activeTooltipIndex !== null &&
+        Number.isInteger(numericIndex) &&
+        numericIndex >= 0 &&
+        numericIndex < data.length
+      ) {
+        return numericIndex;
+      }
+      // Fall back to matching activeLabel against the row labels.
+      if (chartState.activeLabel !== undefined) {
+        const rowIndex: number = data.findIndex(
+          (row: Record<string, unknown>) => {
+            return row[index] === chartState.activeLabel;
+          },
+        );
+        return rowIndex >= 0 ? rowIndex : null;
+      }
+      return null;
+    }
+
+    function getBucketDateAtIndex(rowIndex: number): Date | null {
+      const rawDate: unknown = data[rowIndex]?.[CHART_DATA_POINT_DATE_KEY];
+      return typeof rawDate === "number" ? new Date(rawDate) : null;
+    }
+
+    function handleRangeSelectMouseDown(
+      chartState: RangeSelectionChartState,
+    ): void {
+      if (!hasOnTimeRangeSelect) {
+        return;
+      }
+      const rowIndex: number | null = getRowIndexFromChartState(chartState);
+      if (rowIndex === null) {
+        return;
+      }
+      const rowLabel: unknown = data[rowIndex]?.[index];
+      if (typeof rowLabel !== "string") {
+        return;
+      }
+      isRangeSelecting.current = true;
+      rangeSelectionStartIndexRef.current = rowIndex;
+      rangeSelectionEndIndexRef.current = rowIndex;
+      setRangeSelectionStart(rowLabel);
+      setRangeSelectionEnd(null);
+    }
+
+    function handleRangeSelectMouseMove(
+      chartState: RangeSelectionChartState,
+      mouseEvent: React.MouseEvent<SVGGraphicsElement>,
+    ): void {
+      if (!isRangeSelecting.current) {
+        return;
+      }
+      // Button was released outside the chart — abandon the selection.
+      if (mouseEvent.buttons === 0) {
+        isRangeSelecting.current = false;
+        rangeSelectionStartIndexRef.current = null;
+        rangeSelectionEndIndexRef.current = null;
+        setRangeSelectionStart(null);
+        setRangeSelectionEnd(null);
+        return;
+      }
+      const rowIndex: number | null = getRowIndexFromChartState(chartState);
+      if (rowIndex === null) {
+        return;
+      }
+      const rowLabel: unknown = data[rowIndex]?.[index];
+      if (typeof rowLabel !== "string") {
+        return;
+      }
+      rangeSelectionEndIndexRef.current = rowIndex;
+      setRangeSelectionEnd(rowLabel);
+    }
+
+    function handleRangeSelectMouseUp(): void {
+      if (!isRangeSelecting.current) {
+        return;
+      }
+      isRangeSelecting.current = false;
+
+      const startIndex: number | null = rangeSelectionStartIndexRef.current;
+      const endIndex: number | null = rangeSelectionEndIndexRef.current;
+      rangeSelectionStartIndexRef.current = null;
+      rangeSelectionEndIndexRef.current = null;
+      setRangeSelectionStart(null);
+      setRangeSelectionEnd(null);
+
+      /*
+       * A plain click (pointer never left the starting bucket) must keep
+       * behaving exactly as before — only a real drag selects a range.
+       */
+      if (startIndex === null || endIndex === null || startIndex === endIndex) {
+        return;
+      }
+
+      /*
+       * The browser fires a click right after mouseup; swallow it so a
+       * drag doesn't also toggle legend/dot selection. Cleared on a
+       * timeout so a never-delivered click can't suppress a later one.
+       */
+      suppressNextClickRef.current = true;
+      setTimeout(() => {
+        suppressNextClickRef.current = false;
+      }, 0);
+
+      if (!onTimeRangeSelect) {
+        return;
+      }
+
+      const lowerIndex: number = Math.min(startIndex, endIndex);
+      const upperIndex: number = Math.max(startIndex, endIndex);
+      const startDate: Date | null = getBucketDateAtIndex(lowerIndex);
+      const lastBucketDate: Date | null = getBucketDateAtIndex(upperIndex);
+      if (!startDate || !lastBucketDate) {
+        return;
+      }
+
+      /*
+       * Cover the full final bucket: its end is its start plus one
+       * bucket width, derived from adjacent row dates.
+       */
+      const adjacentDate: Date | null =
+        upperIndex > 0
+          ? getBucketDateAtIndex(upperIndex - 1)
+          : getBucketDateAtIndex(upperIndex + 1);
+      const bucketWidthInMs: number = adjacentDate
+        ? Math.abs(lastBucketDate.getTime() - adjacentDate.getTime())
+        : 0;
+      const endDate: Date = new Date(
+        lastBucketDate.getTime() + bucketWidthInMs,
+      );
+
+      onTimeRangeSelect(startDate, endDate);
+    }
+
     return (
-      <div ref={ref} className={cx("flex-1 w-full", className)} {...other}>
+      <div
+        ref={ref}
+        className={cx(
+          "flex-1 w-full",
+          hasOnTimeRangeSelect && "cursor-crosshair",
+          className,
+        )}
+        {...other}
+      >
         <ResponsiveContainer>
           <RechartsLineChart
             data={data}
             syncId={props.syncid?.toString() || ""}
+            {...(hasOnTimeRangeSelect
+              ? {
+                  onMouseDown: handleRangeSelectMouseDown,
+                  onMouseMove: handleRangeSelectMouseMove,
+                  onMouseUp: handleRangeSelectMouseUp,
+                }
+              : {})}
             onClick={
               hasOnValueChange && (activeLegend || activeDot)
                 ? () => {
+                    // Ignore the click that follows a drag-to-select.
+                    if (suppressNextClickRef.current) {
+                      return;
+                    }
                     setActiveDot(undefined);
                     setActiveLegend(undefined);
                     onValueChange?.(null);
@@ -1051,6 +1271,98 @@ const LineChart: React.ForwardRefExoticComponent<
                 );
               },
             )}
+            {/* Time-anchored shaded regions (e.g. incident/maintenance windows) */}
+            {formattedReferenceRegions?.map(
+              (region: FormattedReferenceRegion, regionIndex: number) => {
+                const regionColor: string = region.original.color || "#6366f1";
+                return (
+                  <ReferenceArea
+                    key={`ref-region-${regionIndex}`}
+                    x1={region.formattedX1}
+                    x2={region.formattedX2}
+                    fill={regionColor}
+                    fillOpacity={0.12}
+                    stroke={regionColor}
+                    strokeOpacity={0.35}
+                    strokeWidth={1}
+                    {...(region.original.onClick
+                      ? {
+                          style: { cursor: "pointer" as const },
+                          onClick: (): void => {
+                            if (suppressNextClickRef.current) {
+                              return;
+                            }
+                            region.original.onClick?.();
+                          },
+                        }
+                      : {})}
+                  >
+                    {region.original.label && (
+                      <Label
+                        value={region.original.label}
+                        position="insideTop"
+                        fill={regionColor}
+                        fontSize={10}
+                        fontWeight={500}
+                      />
+                    )}
+                  </ReferenceArea>
+                );
+              },
+            )}
+            {/* Time-anchored vertical event markers (e.g. deploys, incidents) */}
+            {formattedTimeReferenceLines?.map(
+              (
+                timeRefLine: FormattedTimeReferenceLine,
+                timeRefIndex: number,
+              ) => {
+                const lineColor: string =
+                  timeRefLine.original.color || "#f59e0b";
+                return (
+                  <ReferenceLine
+                    key={`time-ref-${timeRefIndex}`}
+                    x={timeRefLine.formattedX}
+                    stroke={lineColor}
+                    strokeDasharray={
+                      timeRefLine.original.strokeDasharray || "4 4"
+                    }
+                    strokeWidth={1.5}
+                    {...(timeRefLine.original.onClick
+                      ? {
+                          style: { cursor: "pointer" as const },
+                          onClick: (): void => {
+                            if (suppressNextClickRef.current) {
+                              return;
+                            }
+                            timeRefLine.original.onClick?.();
+                          },
+                        }
+                      : {})}
+                  >
+                    {timeRefLine.original.label &&
+                      showTimeReferenceLineLabels && (
+                        <Label
+                          value={timeRefLine.original.label}
+                          {...(timeReferenceLineCount > 1
+                            ? {
+                                /*
+                                 * Several markers: run each label down its
+                                 * own line so labels at different x stop
+                                 * sharing one horizontal band.
+                                 */
+                                position: "insideTopLeft" as const,
+                                angle: 90,
+                              }
+                            : { position: "insideTop" as const })}
+                          fill={lineColor}
+                          fontSize={10}
+                          fontWeight={500}
+                        />
+                      )}
+                  </ReferenceLine>
+                );
+              },
+            )}
             {/* Exemplar dots - clickable markers linking to traces */}
             {props.formattedExemplarPoints?.map(
               (exemplar: FormattedExemplarPoint, exemplarIndex: number) => {
@@ -1065,6 +1377,10 @@ const LineChart: React.ForwardRefExoticComponent<
                     strokeWidth={2}
                     style={{ cursor: "pointer" }}
                     onClick={() => {
+                      // Ignore the click that follows a drag-to-select.
+                      if (suppressNextClickRef.current) {
+                        return;
+                      }
                       props.onExemplarClick?.(exemplar.original);
                     }}
                   >
@@ -1083,6 +1399,17 @@ const LineChart: React.ForwardRefExoticComponent<
                 );
               },
             )}
+            {/* Live drag-to-select highlight */}
+            {rangeSelectionStart && rangeSelectionEnd ? (
+              <ReferenceArea
+                x1={rangeSelectionStart}
+                x2={rangeSelectionEnd}
+                fill="rgba(99,102,241,0.12)"
+                stroke="rgba(99,102,241,0.5)"
+                strokeWidth={1}
+                radius={2}
+              />
+            ) : null}
           </RechartsLineChart>
         </ResponsiveContainer>
       </div>

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

@@ -1,3 +1,10 @@
+/**
+ * Hidden per-row field carrying the raw bucket start as ms since epoch.
+ * Underscore-prefixed so it cannot collide with real series names, and it
+ * is never rendered as a series (only `categories` keys are drawn).
+ */
+export const CHART_DATA_POINT_DATE_KEY: string = "__date";
+
 export default interface ChartDataPoint {
   [x: string]: number | string;
 }

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

@@ -0,0 +1,15 @@
+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.
+ */
+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;
+  /** The original annotation for label/color/click handling */
+  original: ChartReferenceRegionProps;
+}

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

@@ -0,0 +1,13 @@
+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.
+ */
+export default interface FormattedTimeReferenceLine {
+  /** The formatted x-axis label (e.g. "12:30", "22 Feb") */
+  formattedX: string;
+  /** The original annotation for label/color/click handling */
+  original: ChartTimeReferenceLineProps;
+}

package/UI/Components/Charts/Line/LineChart.tsx

@@ -15,8 +15,13 @@ import YAxis from "../Types/YAxis/YAxis";
 import ChartCurve from "../Types/ChartCurve";
 import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
 import FormattedExemplarPoint from "../ChartLibrary/Types/FormattedExemplarPoint";
+import FormattedReferenceRegion from "../ChartLibrary/Types/FormattedReferenceRegion";
+import FormattedTimeReferenceLine from "../ChartLibrary/Types/FormattedTimeReferenceLine";
 import DataPointUtil from "../Utils/DataPoint";
+import TimeAnnotationUtil from "../Utils/TimeAnnotation";
 import ChartReferenceLineProps from "../Types/ReferenceLineProps";
+import ChartReferenceRegionProps from "../Types/ReferenceRegionProps";
+import ChartTimeReferenceLineProps from "../Types/TimeReferenceLineProps";
 import ExemplarPoint from "../Types/ExemplarPoint";
 import XAxisUtil from "../Utils/XAxis";
 import NoDataMessage from "../ChartGroup/NoDataMessage";
@@ -41,8 +46,20 @@ export interface ComponentProps {
   sync: boolean;
   heightInPx?: number | undefined;
   referenceLines?: Array<ChartReferenceLineProps> | undefined;
+  /*
+   * Time-anchored annotations: vertical event markers and shaded regions.
+   * Dates are snapped onto the categorical x-axis buckets; annotations
+   * outside the charted window are dropped (regions clamp to the edge).
+   */
+  timeReferenceLines?: Array<ChartTimeReferenceLineProps> | undefined;
+  referenceRegions?: Array<ChartReferenceRegionProps> | undefined;
   exemplarPoints?: Array<ExemplarPoint> | undefined;
   onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
+  /*
+   * When provided, the chart supports drag-to-select: dragging across
+   * buckets calls back with the [start, end) of the selected time range.
+   */
+  onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
   showLegend?: boolean | undefined;
   /*
    * Optional per-series color override (named palette keys or hex strings).
@@ -95,6 +112,29 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
     });
   }, [props.exemplarPoints, props.xAxis]);
 
+  // Snap time annotations onto the categorical x-axis bucket labels
+  const formattedTimeReferenceLines: Array<FormattedTimeReferenceLine> =
+    useMemo(() => {
+      if (!props.timeReferenceLines || props.timeReferenceLines.length === 0) {
+        return [];
+      }
+      return TimeAnnotationUtil.formatTimeReferenceLines({
+        timeReferenceLines: props.timeReferenceLines,
+        xAxis: props.xAxis,
+      });
+    }, [props.timeReferenceLines, props.xAxis]);
+
+  const formattedReferenceRegions: Array<FormattedReferenceRegion> =
+    useMemo(() => {
+      if (!props.referenceRegions || props.referenceRegions.length === 0) {
+        return [];
+      }
+      return TimeAnnotationUtil.formatReferenceRegions({
+        referenceRegions: props.referenceRegions,
+        xAxis: props.xAxis,
+      });
+    }, [props.referenceRegions, props.xAxis]);
+
   const hasNoData: boolean =
     !props.data ||
     props.data.length === 0 ||
@@ -144,10 +184,21 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
         {...maxValueProp}
         onValueChange={() => {}}
         referenceLines={props.referenceLines}
+        formattedTimeReferenceLines={
+          formattedTimeReferenceLines.length > 0
+            ? formattedTimeReferenceLines
+            : undefined
+        }
+        formattedReferenceRegions={
+          formattedReferenceRegions.length > 0
+            ? formattedReferenceRegions
+            : undefined
+        }
         formattedExemplarPoints={
           formattedExemplars.length > 0 ? formattedExemplars : undefined
         }
         onExemplarClick={props.onExemplarClick}
+        onTimeRangeSelect={props.onTimeRangeSelect}
       />
       {hasNoData && <NoDataMessage />}
     </div>

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

@@ -0,0 +1,12 @@
+/**
+ * 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
+ * region overlapping the window edge is trimmed rather than dropped.
+ */
+export default interface ChartReferenceRegionProps {
+  startDate: Date;
+  endDate: Date;
+  label?: string | undefined;
+  color?: string | undefined; // CSS color, e.g. "#6366f1" or "red"
+  onClick?: (() => void) | undefined;
+}

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

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ */
+export default interface ChartTimeReferenceLineProps {
+  date: Date;
+  label?: string | undefined;
+  color?: string | undefined; // CSS color, e.g. "#f59e0b" or "red"
+  strokeDasharray?: string | undefined; // e.g. "4 4" for dashed
+  onClick?: (() => void) | undefined;
+}

package/UI/Components/Charts/Types/XAxis/XAxisPrecision.ts

@@ -6,6 +6,7 @@ enum XAxisPrecision {
   EVERY_MINUTE = "minute",
   EVERY_FIVE_MINUTES = "fiveMinutes",
   EVERY_TEN_MINUTES = "tenMinutes",
+  EVERY_FIFTEEN_MINUTES = "fifteenMinutes",
   EVERY_THIRTY_MINUTES = "thirtyMinutes",
   EVERY_HOUR = "hour",
   EVERY_TWO_HOURS = "twoHours",