@oneuptime/common 11.5.8 → 11.5.10

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

@@ -11,6 +11,7 @@ import {
   Dot,
   Label,
   Legend as RechartsLegend,
+  ReferenceArea,
   ReferenceDot,
   ReferenceLine,
   ResponsiveContainer,
@@ -21,6 +22,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";
@@ -37,6 +41,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 {
@@ -540,6 +553,15 @@ type BaseEventProps = {
 
 type AreaChartEventProps = 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 AreaChartProps extends React.HTMLAttributes<HTMLDivElement> {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   data: Record<string, any>[];
@@ -571,8 +593,11 @@ interface AreaChartProps 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;
   /**
    * Render a shaded "expected range" band underneath the data lines.
    * Both keys must already be present on every entry of `data` (the
@@ -618,6 +643,9 @@ const AreaChart: React.ForwardRefExoticComponent<
       legendPosition = "right",
       tooltipCallback,
       customTooltip,
+      formattedTimeReferenceLines,
+      formattedReferenceRegions,
+      onTimeRangeSelect,
       ...other
     } = props;
     const CustomTooltip: React.ComponentType<TooltipProps> | undefined =
@@ -631,8 +659,27 @@ const AreaChart: 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,
@@ -650,6 +697,11 @@ const AreaChart: 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;
       }
@@ -678,6 +730,10 @@ const AreaChart: React.ForwardRefExoticComponent<
     }
 
     function onCategoryClick(dataKey: string): void {
+      // Ignore the click that immediately follows a drag-to-select.
+      if (suppressNextClickRef.current) {
+        return;
+      }
       if (!hasOnValueChange) {
         return;
       }
@@ -699,15 +755,179 @@ const AreaChart: 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>
           <RechartsAreaChart
             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);
@@ -762,6 +982,7 @@ const AreaChart: React.ForwardRefExoticComponent<
                 transform: "translate(0, 6)",
                 fontSize: 10,
                 fontWeight: 500,
+                fill: "var(--ou-chart-tick)",
               }}
               ticks={
                 startEndOnly
@@ -802,6 +1023,7 @@ const AreaChart: React.ForwardRefExoticComponent<
                 transform: "translate(-4, 0)",
                 fontSize: 10,
                 fontWeight: 500,
+                fill: "var(--ou-chart-tick)",
               }}
               fill=""
               stroke=""
@@ -822,7 +1044,7 @@ const AreaChart: React.ForwardRefExoticComponent<
               )}
             </YAxis>
             <Tooltip
-              wrapperStyle={{ outline: "none" }}
+              wrapperStyle={{ outline: "none", zIndex: 10 }}
               isAnimationActive={true}
               animationDuration={100}
               cursor={{
@@ -1056,6 +1278,98 @@ const AreaChart: 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) => {
@@ -1070,13 +1384,21 @@ const AreaChart: 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);
                     }}
                   >
                     <Label
                       value="E"
                       position="center"
-                      fill="var(--ou-chart-marker-ring, #ffffff)"
+                      /*
+                       * Sits on the dot's purple, not on the surface, so it must
+                       * not follow the ring token that flips dark with the theme.
+                       */
+                      fill="#ffffff"
                       fontSize={8}
                       fontWeight={700}
                     />
@@ -1084,6 +1406,17 @@ const AreaChart: 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}
           </RechartsAreaChart>
         </ResponsiveContainer>
       </div>

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

@@ -11,6 +11,7 @@ import {
   Label,
   BarChart as RechartsBarChart,
   Legend as RechartsLegend,
+  ReferenceArea,
   ReferenceLine,
   ResponsiveContainer,
   Tooltip,
@@ -18,6 +19,8 @@ import {
   YAxis,
 } from "recharts";
 import ChartReferenceLineProps from "../../Types/ReferenceLineProps";
+import FormattedReferenceRegion from "../Types/FormattedReferenceRegion";
+import FormattedTimeReferenceLine from "../Types/FormattedTimeReferenceLine";
 import type { AxisDomain } from "recharts/types/util/types";
 
 import {
@@ -32,6 +35,15 @@ import { cx } from "../Utils/Cx";
 import { getYAxisDomain } from "../Utils/GetYAxisDomain";
 import { useOnWindowResize } from "../Utils/UseWindowOnResize";
 
+/*
+ * 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 Shape
 
 function deepEqual<T>(obj1: T, obj2: T): boolean {
@@ -667,6 +679,8 @@ interface BarChartProps extends React.HTMLAttributes<HTMLDivElement> {
   customTooltip?: React.ComponentType<TooltipProps>;
   syncid?: string | undefined;
   referenceLines?: Array<ChartReferenceLineProps> | undefined;
+  formattedTimeReferenceLines?: Array<FormattedTimeReferenceLine> | undefined;
+  formattedReferenceRegions?: Array<FormattedReferenceRegion> | undefined;
 }
 
 const BarChart: React.ForwardRefExoticComponent<
@@ -708,6 +722,8 @@ const BarChart: React.ForwardRefExoticComponent<
       legendPosition = "right",
       tooltipCallback,
       customTooltip,
+      formattedTimeReferenceLines,
+      formattedReferenceRegions,
       ...other
     } = props;
     const CustomTooltip: React.ComponentType<any> | undefined = customTooltip;
@@ -719,6 +735,10 @@ const BarChart: React.ForwardRefExoticComponent<
     );
     const categoryColors: Map<string, ChartColorValue> =
       constructCategoryColors(categories, colors);
+    const timeReferenceLineCount: number =
+      formattedTimeReferenceLines?.length || 0;
+    const showTimeReferenceLineLabels: boolean =
+      timeReferenceLineCount <= MAX_LABELED_TIME_REFERENCE_LINES;
     const [activeBar, setActiveBar] = React.useState<any | undefined>(
       undefined,
     );
@@ -836,6 +856,7 @@ const BarChart: React.ForwardRefExoticComponent<
                   layout !== "vertical" ? "translate(0, 6)" : undefined,
                 fontSize: 10,
                 fontWeight: 500,
+                fill: "var(--ou-chart-tick)",
               }}
               fill=""
               stroke=""
@@ -904,6 +925,7 @@ const BarChart: React.ForwardRefExoticComponent<
                     : "translate(0, 0)",
                 fontSize: 10,
                 fontWeight: 500,
+                fill: "var(--ou-chart-tick)",
               }}
               {...(layout !== "vertical"
                 ? {
@@ -940,7 +962,7 @@ const BarChart: React.ForwardRefExoticComponent<
               )}
             </YAxis>
             <Tooltip
-              wrapperStyle={{ outline: "none" }}
+              wrapperStyle={{ outline: "none", zIndex: 10 }}
               isAnimationActive={true}
               animationDuration={100}
               cursor={{
@@ -1068,6 +1090,101 @@ const BarChart: React.ForwardRefExoticComponent<
                 );
               },
             )}
+            {/*
+             * Time annotations need the x-axis to be the category axis,
+             * which is only true in horizontal layout.
+             */}
+            {/* Time-anchored shaded regions (e.g. incident/maintenance windows) */}
+            {layout !== "vertical"
+              ? 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 => {
+                                region.original.onClick?.();
+                              },
+                            }
+                          : {})}
+                      >
+                        {region.original.label && (
+                          <Label
+                            value={region.original.label}
+                            position="insideTop"
+                            fill={regionColor}
+                            fontSize={10}
+                            fontWeight={500}
+                          />
+                        )}
+                      </ReferenceArea>
+                    );
+                  },
+                )
+              : null}
+            {/* Time-anchored vertical event markers (e.g. deploys, incidents) */}
+            {layout !== "vertical"
+              ? 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 => {
+                                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>
+                    );
+                  },
+                )
+              : null}
           </RechartsBarChart>
         </ResponsiveContainer>
       </div>