@oneuptime/common 12.0.30 → 12.0.32

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

@@ -36,7 +36,11 @@ import {
   getColorHex,
   isHexColorValue,
 } from "../Utils/ChartColors";
+import useChartAnnotations, {
+  UseChartAnnotationsResult,
+} from "../Annotations/UseChartAnnotations";
 import { cx } from "../Utils/Cx";
+import { DOUBLE_CLICK_DISAMBIGUATION_MS } from "../Utils/DoubleClick";
 import { getYAxisDomain } from "../Utils/GetYAxisDomain";
 import { hasOnlyOneValueForKey } from "../Utils/HasOnlyOneValueForKey";
 import {
@@ -45,15 +49,6 @@ import {
 } from "../Utils/TooltipEntries";
 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;
-
 /*
  * recharts invokes child event handlers with varying shapes ((event) for
  * plain SVG passthrough, (data, event) for adapted children) — find the
@@ -631,6 +626,15 @@ interface AreaChartProps extends React.HTMLAttributes<HTMLDivElement> {
   formattedExemplarPoints?: Array<FormattedExemplarPoint> | undefined;
   onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
   onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
+  /**
+   * Double-click on the plot surface: the counterpart to drag-to-select,
+   * for undoing the zoom it produced. Supplying it makes single clicks
+   * wait DOUBLE_CLICK_DISAMBIGUATION_MS before they act, so a double-click
+   * cannot also fire the bucket-click path twice on its way past — hosts
+   * that have nothing to reset should leave it undefined and keep clicks
+   * instant.
+   */
+  onTimeRangeReset?: (() => void) | undefined;
   /**
    * Plain click on a time bucket (the plot background — dot/legend clicks
    * and drag-selections never reach this). [bucketStart, bucketEnd) uses
@@ -699,6 +703,7 @@ const AreaChart: React.ForwardRefExoticComponent<
       formattedTimeReferenceLines,
       formattedReferenceRegions,
       onTimeRangeSelect,
+      onTimeRangeReset,
       onBucketClick,
       ghostCategories,
       ...other
@@ -729,12 +734,51 @@ const AreaChart: React.ForwardRefExoticComponent<
       React.useRef<number | null>(null);
     const suppressNextClickRef: React.MutableRefObject<boolean> =
       React.useRef<boolean>(false);
+    const hasOnTimeRangeReset: boolean = Boolean(onTimeRangeReset);
+    /*
+     * A pending single-click, held open long enough for a second click to
+     * cancel it. Only armed when onTimeRangeReset is supplied.
+     */
+    const pendingClickTimeoutRef: React.MutableRefObject<ReturnType<
+      typeof setTimeout
+    > | null> = React.useRef<ReturnType<typeof setTimeout> | null>(null);
     const categoryColors: Map<string, ChartColorValue> =
       constructCategoryColors(categories, colors);
-    const timeReferenceLineCount: number =
-      formattedTimeReferenceLines?.length || 0;
-    const showTimeReferenceLineLabels: boolean =
-      timeReferenceLineCount <= MAX_LABELED_TIME_REFERENCE_LINES;
+
+    React.useEffect(() => {
+      return () => {
+        if (pendingClickTimeoutRef.current !== null) {
+          clearTimeout(pendingClickTimeoutRef.current);
+          pendingClickTimeoutRef.current = null;
+        }
+      };
+    }, []);
+
+    /*
+     * Annotations are drawn onto the categorical axis, so the layer needs
+     * the same x values recharts is drawing — not the source dates.
+     */
+    const categoryLabels: Array<string> = React.useMemo(():
+      | Array<string>
+      | never => {
+      return (data as Array<Record<string, unknown>>).map(
+        (row: Record<string, unknown>): string => {
+          return String(row[index] ?? "");
+        },
+      );
+    }, [data, index]);
+
+    const annotations: UseChartAnnotationsResult = useChartAnnotations({
+      formattedTimeReferenceLines,
+      formattedReferenceRegions,
+      categoryLabels,
+      axisPaddingPx: paddingValue,
+      scaleKind: "point",
+      hasTopLegend: showLegend,
+      isClickSuppressed: (): boolean => {
+        return suppressNextClickRef.current;
+      },
+    });
 
     const yAxisDomain: (number | "auto")[] = getYAxisDomain(
       autoMinValue,
@@ -955,6 +999,51 @@ const AreaChart: React.ForwardRefExoticComponent<
       onTimeRangeSelect(startDate, endDate);
     }
 
+    /*
+     * The plain-click path, split out so it can either run inline (no
+     * reset handler) or be deferred behind the double-click window.
+     */
+    function handleChartClick(chartState: RangeSelectionChartState): void {
+      /*
+       * A click while a legend/dot selection is active keeps its
+       * long-standing meaning — clear the selection — and never
+       * also pins a bucket.
+       */
+      if (hasOnValueChange && (activeLegend || activeDot)) {
+        setActiveDot(undefined);
+        setActiveLegend(undefined);
+        onValueChange?.(null);
+        return;
+      }
+      if (!onBucketClick) {
+        return;
+      }
+      const rowIndex: number | null = getRowIndexFromChartState(chartState);
+      if (rowIndex === null) {
+        return;
+      }
+      const bucketStart: Date | null = getBucketDateAtIndex(rowIndex);
+      if (!bucketStart) {
+        return;
+      }
+      /*
+       * Cover the full bucket: width from adjacent row dates, the
+       * same derivation drag-to-select uses.
+       */
+      const adjacentBucketDate: Date | null =
+        rowIndex > 0
+          ? getBucketDateAtIndex(rowIndex - 1)
+          : getBucketDateAtIndex(rowIndex + 1);
+      const clickedBucketWidthInMs: number = adjacentBucketDate
+        ? Math.abs(bucketStart.getTime() - adjacentBucketDate.getTime())
+        : 0;
+      onBucketClick(
+        bucketStart,
+        new Date(bucketStart.getTime() + clickedBucketWidthInMs),
+        (data[rowIndex] || {}) as Record<string, number | string>,
+      );
+    }
+
     return (
       <div
         ref={ref}
@@ -965,571 +1054,491 @@ const AreaChart: React.ForwardRefExoticComponent<
         )}
         {...other}
       >
-        <ResponsiveContainer>
-          <RechartsAreaChart
-            data={data}
-            /*
-             * Omitted, not "": recharts treats "" as a real sync
-             * channel, so every unsynced chart page-wide would
-             * accidentally sync with every other one.
-             */
-            {...(props.syncid ? { syncId: props.syncid.toString() } : {})}
-            {...(hasOnTimeRangeSelect
-              ? {
-                  onMouseDown: handleRangeSelectMouseDown,
-                  onMouseMove: handleRangeSelectMouseMove,
-                  onMouseUp: handleRangeSelectMouseUp,
-                }
-              : {})}
-            onClick={(chartState: RangeSelectionChartState) => {
-              // Ignore the click that follows a drag-to-select.
-              if (suppressNextClickRef.current) {
-                return;
-              }
-              /*
-               * A click while a legend/dot selection is active keeps its
-               * long-standing meaning — clear the selection — and never
-               * also pins a bucket.
-               */
-              if (hasOnValueChange && (activeLegend || activeDot)) {
-                setActiveDot(undefined);
-                setActiveLegend(undefined);
-                onValueChange?.(null);
-                return;
-              }
-              if (!onBucketClick) {
-                return;
-              }
-              const rowIndex: number | null =
-                getRowIndexFromChartState(chartState);
-              if (rowIndex === null) {
-                return;
-              }
-              const bucketStart: Date | null = getBucketDateAtIndex(rowIndex);
-              if (!bucketStart) {
-                return;
-              }
+        {/*
+         * The hover card is HTML over the SVG, so it needs a positioned
+         * ancestor that is exactly the chart's box. recharts sizes its
+         * <svg> in CSS pixels with no viewBox, so the card can reuse the
+         * coordinates the rail was drawn with.
+         */}
+        <div className={cx("relative isolate h-full w-full")}>
+          <ResponsiveContainer>
+            <RechartsAreaChart
+              data={data}
               /*
-               * Cover the full bucket: width from adjacent row dates, the
-               * same derivation drag-to-select uses.
+               * Omitted, not "": recharts treats "" as a real sync
+               * channel, so every unsynced chart page-wide would
+               * accidentally sync with every other one.
                */
-              const adjacentDate: Date | null =
-                rowIndex > 0
-                  ? getBucketDateAtIndex(rowIndex - 1)
-                  : getBucketDateAtIndex(rowIndex + 1);
-              const bucketWidthInMs: number = adjacentDate
-                ? Math.abs(bucketStart.getTime() - adjacentDate.getTime())
-                : 0;
-              onBucketClick(
-                bucketStart,
-                new Date(bucketStart.getTime() + bucketWidthInMs),
-                (data[rowIndex] || {}) as Record<string, number | string>,
-              );
-            }}
-            margin={{
-              bottom: (xAxisLabel
-                ? 40
-                : showXAxis
-                  ? 24
-                  : 8) as unknown as number,
-              left: (yAxisLabel ? 20 : 0) as unknown as number,
-              right: (yAxisLabel ? 5 : 8) as unknown as number,
-              top: 5,
-            }}
-          >
-            <defs>
-              {categories.map((category: string, i: number) => {
-                const colorKey: ChartColorValue =
-                  (colors[i % colors.length] as ChartColorValue) || "blue";
-                const hex: string = getColorHex(colorKey);
-                return (
-                  <linearGradient
-                    key={category}
-                    id={`gradient-${category.replace(/[^a-zA-Z0-9]/g, "_")}`}
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="1"
-                  >
-                    <stop offset="0%" stopColor={hex} stopOpacity={0.2} />
-                    <stop offset="100%" stopColor={hex} stopOpacity={0.01} />
-                  </linearGradient>
-                );
-              })}
-            </defs>
-            {showGridLines ? (
-              <CartesianGrid
-                className={cx("stroke-gray-100")}
-                strokeDasharray="3 3"
-                horizontal={true}
-                vertical={false}
-              />
-            ) : null}
-            <XAxis
-              padding={{ left: paddingValue, right: paddingValue }}
-              hide={!showXAxis}
-              dataKey={index}
-              interval={startEndOnly ? "preserveStartEnd" : intervalType}
-              tick={{
-                transform: "translate(0, 6)",
-                fontSize: 10,
-                fontWeight: 500,
-                fill: "var(--ou-chart-tick)",
+              {...(props.syncid ? { syncId: props.syncid.toString() } : {})}
+              {...(hasOnTimeRangeSelect
+                ? {
+                    onMouseDown: handleRangeSelectMouseDown,
+                    onMouseMove: handleRangeSelectMouseMove,
+                    onMouseUp: handleRangeSelectMouseUp,
+                  }
+                : {})}
+              onClick={(chartState: RangeSelectionChartState) => {
+                // Ignore the click that follows a drag-to-select.
+                if (suppressNextClickRef.current) {
+                  return;
+                }
+                if (!hasOnTimeRangeReset) {
+                  handleChartClick(chartState);
+                  return;
+                }
+                /*
+                 * Reset is on, so hold the click open: both clicks of a
+                 * double-click arrive before dblclick does, and neither
+                 * may pin a bucket. The second click re-arms the timer,
+                 * dblclick clears it.
+                 */
+                if (pendingClickTimeoutRef.current !== null) {
+                  clearTimeout(pendingClickTimeoutRef.current);
+                }
+                pendingClickTimeoutRef.current = setTimeout(() => {
+                  pendingClickTimeoutRef.current = null;
+                  handleChartClick(chartState);
+                }, DOUBLE_CLICK_DISAMBIGUATION_MS);
               }}
-              ticks={
-                startEndOnly
-                  ? ([
-                      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                      (data[0] as any)[index],
-                      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                      (data[data.length - 1] as any)[index],
-                      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    ] as any)
-                  : undefined
-              }
-              fill=""
-              stroke=""
-              className={cx("tabular-nums", "fill-gray-500")}
-              tickLine={false}
-              axisLine={false}
-              minTickGap={tickGap}
-            >
-              {xAxisLabel && (
-                <Label
-                  position="insideBottom"
-                  offset={-20}
-                  className="fill-gray-800 text-sm font-medium"
-                >
-                  {xAxisLabel}
-                </Label>
-              )}
-            </XAxis>
-            <YAxis
-              width={yAxisWidth}
-              hide={!showYAxis}
-              axisLine={false}
-              tickLine={false}
-              type="number"
-              domain={yAxisDomain as AxisDomain}
-              tick={{
-                transform: "translate(-4, 0)",
-                fontSize: 10,
-                fontWeight: 500,
-                fill: "var(--ou-chart-tick)",
+              {...(hasOnTimeRangeReset
+                ? {
+                    onDoubleClick: () => {
+                      if (pendingClickTimeoutRef.current !== null) {
+                        clearTimeout(pendingClickTimeoutRef.current);
+                        pendingClickTimeoutRef.current = null;
+                      }
+                      onTimeRangeReset?.();
+                    },
+                  }
+                : {})}
+              margin={{
+                bottom: (xAxisLabel
+                  ? 40
+                  : showXAxis
+                    ? 24
+                    : 8) as unknown as number,
+                left: (yAxisLabel ? 20 : 0) as unknown as number,
+                right: (yAxisLabel ? 5 : 8) as unknown as number,
+                /*
+                 * The annotation rail is drawn in the top margin, so the
+                 * margin has to grow to hold it — otherwise chips render
+                 * above the SVG's own edge and get clipped.
+                 */
+                top: annotations.marginTop,
               }}
-              fill=""
-              stroke=""
-              className={cx("tabular-nums", "fill-gray-500")}
-              tickFormatter={valueFormatter}
-              allowDecimals={allowDecimals}
             >
-              {yAxisLabel && (
-                <Label
-                  position="insideLeft"
-                  style={{ textAnchor: "middle" }}
-                  angle={-90}
-                  offset={-15}
-                  className="fill-gray-800 text-sm font-medium"
-                >
-                  {yAxisLabel}
-                </Label>
-              )}
-            </YAxis>
-            <Tooltip
-              wrapperStyle={{ outline: "none", zIndex: 10 }}
-              isAnimationActive={true}
-              animationDuration={100}
-              cursor={{
-                stroke: "var(--ou-chart-cursor, #d1d5db)",
-                strokeWidth: 1,
-              }}
-              offset={20}
-              position={{ y: 0 }}
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              content={({ active, payload, label }: any) => {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const cleanPayload: TooltipProps["payload"] = payload
-                  ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    payload.map((item: any) => {
-                      return {
-                        category: item.dataKey,
-                        value: item.value,
-                        index: item.payload[index],
-                        color: categoryColors.get(
-                          item.dataKey,
-                        ) as ChartColorValue,
-                        type: item.type,
-                        payload: item.payload,
-                      };
-                    })
-                  : [];
-
-                if (
-                  tooltipCallback &&
-                  (active !== prevActiveRef.current ||
-                    label !== prevLabelRef.current)
-                ) {
-                  tooltipCallback({ active, payload: cleanPayload, label });
-                  prevActiveRef.current = active;
-                  prevLabelRef.current = label;
-                }
-
-                return showTooltip && active ? (
-                  CustomTooltip ? (
-                    <CustomTooltip
-                      active={active}
-                      payload={cleanPayload}
-                      label={label}
-                    />
-                  ) : (
-                    <ChartTooltip
-                      active={active}
-                      payload={cleanPayload}
-                      label={label}
-                      valueFormatter={valueFormatter}
-                    />
-                  )
-                ) : null;
-              }}
-            />
-
-            {showLegend ? (
-              <RechartsLegend
-                verticalAlign="top"
-                height={legendHeight}
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                content={({ payload }: any) => {
-                  return ChartLegend(
-                    { payload },
-                    categoryColors,
-                    setLegendHeight,
-                    activeLegend,
-                    hasOnValueChange
-                      ? (clickedLegendItem: string) => {
-                          return onCategoryClick(clickedLegendItem);
-                        }
-                      : undefined,
-                    enableLegendSlider,
-                    legendPosition,
-                    yAxisWidth,
+              <defs>
+                {categories.map((category: string, i: number) => {
+                  const colorKey: ChartColorValue =
+                    (colors[i % colors.length] as ChartColorValue) || "blue";
+                  const hex: string = getColorHex(colorKey);
+                  return (
+                    <linearGradient
+                      key={category}
+                      id={`gradient-${category.replace(/[^a-zA-Z0-9]/g, "_")}`}
+                      x1="0"
+                      y1="0"
+                      x2="0"
+                      y2="1"
+                    >
+                      <stop offset="0%" stopColor={hex} stopOpacity={0.2} />
+                      <stop offset="100%" stopColor={hex} stopOpacity={0.01} />
+                    </linearGradient>
                   );
+                })}
+              </defs>
+              {showGridLines ? (
+                <CartesianGrid
+                  className={cx("stroke-gray-100")}
+                  strokeDasharray="3 3"
+                  horizontal={true}
+                  vertical={false}
+                />
+              ) : null}
+              <XAxis
+                padding={{ left: paddingValue, right: paddingValue }}
+                hide={!showXAxis}
+                dataKey={index}
+                interval={startEndOnly ? "preserveStartEnd" : intervalType}
+                tick={{
+                  transform: "translate(0, 6)",
+                  fontSize: 10,
+                  fontWeight: 500,
+                  fill: "var(--ou-chart-tick)",
                 }}
-              />
-            ) : null}
-            {props.anomalyBandLowerKey && props.anomalyBandUpperKey ? (
-              <Area
-                key="__anomaly_band__"
-                name="Expected range"
-                type={props.curve || ChartCurve.MONOTONE}
+                ticks={
+                  startEndOnly
+                    ? ([
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        (data[0] as any)[index],
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        (data[data.length - 1] as any)[index],
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                      ] as any)
+                    : undefined
+                }
+                fill=""
+                stroke=""
+                className={cx("tabular-nums", "fill-gray-500")}
+                tickLine={false}
+                axisLine={false}
+                minTickGap={tickGap}
+              >
+                {xAxisLabel && (
+                  <Label
+                    position="insideBottom"
+                    offset={-20}
+                    className="fill-gray-800 text-sm font-medium"
+                  >
+                    {xAxisLabel}
+                  </Label>
+                )}
+              </XAxis>
+              <YAxis
+                width={yAxisWidth}
+                hide={!showYAxis}
+                axisLine={false}
+                tickLine={false}
+                type="number"
+                domain={yAxisDomain as AxisDomain}
+                tick={{
+                  transform: "translate(-4, 0)",
+                  fontSize: 10,
+                  fontWeight: 500,
+                  fill: "var(--ou-chart-tick)",
+                }}
+                fill=""
+                stroke=""
+                className={cx("tabular-nums", "fill-gray-500")}
+                tickFormatter={valueFormatter}
+                allowDecimals={allowDecimals}
+              >
+                {yAxisLabel && (
+                  <Label
+                    position="insideLeft"
+                    style={{ textAnchor: "middle" }}
+                    angle={-90}
+                    offset={-15}
+                    className="fill-gray-800 text-sm font-medium"
+                  >
+                    {yAxisLabel}
+                  </Label>
+                )}
+              </YAxis>
+              <Tooltip
+                wrapperStyle={{ outline: "none", zIndex: 10 }}
+                isAnimationActive={true}
+                animationDuration={100}
+                cursor={{
+                  stroke: "var(--ou-chart-cursor, #d1d5db)",
+                  strokeWidth: 1,
+                }}
+                offset={20}
+                position={{ y: 0 }}
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                dataKey={(d: Record<string, any>): [number, number] | null => {
-                  const low: number = Number(d[props.anomalyBandLowerKey!]);
-                  const high: number = Number(d[props.anomalyBandUpperKey!]);
-                  if (!Number.isFinite(low) || !Number.isFinite(high)) {
-                    return null;
+                content={({ active, payload, label }: any) => {
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  const cleanPayload: TooltipProps["payload"] = payload
+                    ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                      payload.map((item: any) => {
+                        return {
+                          category: item.dataKey,
+                          value: item.value,
+                          index: item.payload[index],
+                          color: categoryColors.get(
+                            item.dataKey,
+                          ) as ChartColorValue,
+                          type: item.type,
+                          payload: item.payload,
+                        };
+                      })
+                    : [];
+
+                  if (
+                    tooltipCallback &&
+                    (active !== prevActiveRef.current ||
+                      label !== prevLabelRef.current)
+                  ) {
+                    tooltipCallback({ active, payload: cleanPayload, label });
+                    prevActiveRef.current = active;
+                    prevLabelRef.current = label;
                   }
-                  return [low, high];
+
+                  return showTooltip && active ? (
+                    CustomTooltip ? (
+                      <CustomTooltip
+                        active={active}
+                        payload={cleanPayload}
+                        label={label}
+                      />
+                    ) : (
+                      <ChartTooltip
+                        active={active}
+                        payload={cleanPayload}
+                        label={label}
+                        valueFormatter={valueFormatter}
+                      />
+                    )
+                  ) : null;
                 }}
-                stroke="var(--ou-chart-tick, #94a3b8)"
-                strokeOpacity={0.3}
-                strokeWidth={1}
-                strokeDasharray="3 3"
-                fill="var(--ou-chart-tick, #94a3b8)"
-                fillOpacity={0.12}
-                isAnimationActive={false}
-                connectNulls={false}
-                activeDot={false}
-                dot={false}
-                legendType="none"
               />
-            ) : null}
-            {categories.map((category: string) => {
-              const gradientId: string = `gradient-${category.replace(/[^a-zA-Z0-9]/g, "_")}`;
-              const colorKey: ChartColorValue = categoryColors.get(
-                category,
-              ) as ChartColorValue;
-              const hex: string = getColorHex(colorKey);
-              const isCustomColor: boolean = isHexColorValue(colorKey);
-              const isGhost: boolean =
-                ghostCategories?.includes(category) || false;
 
-              return (
+              {showLegend ? (
+                <RechartsLegend
+                  verticalAlign="top"
+                  /*
+                   * Padded so the annotation rail gets a clear strip between
+                   * the legend and the plot; see UseChartAnnotations.
+                   */
+                  height={legendHeight + annotations.railHeight}
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  content={({ payload }: any) => {
+                    return ChartLegend(
+                      { payload },
+                      categoryColors,
+                      setLegendHeight,
+                      activeLegend,
+                      hasOnValueChange
+                        ? (clickedLegendItem: string) => {
+                            return onCategoryClick(clickedLegendItem);
+                          }
+                        : undefined,
+                      enableLegendSlider,
+                      legendPosition,
+                      yAxisWidth,
+                    );
+                  }}
+                />
+              ) : null}
+              {props.anomalyBandLowerKey && props.anomalyBandUpperKey ? (
                 <Area
-                  key={category}
-                  name={category}
+                  key="__anomaly_band__"
+                  name="Expected range"
                   type={props.curve || ChartCurve.MONOTONE}
-                  dataKey={category}
-                  stroke={hex}
-                  strokeWidth={isGhost ? 1.5 : 2}
-                  strokeLinejoin="round"
-                  strokeLinecap="round"
-                  fill={`url(#${gradientId})`}
-                  fillOpacity={isGhost ? 0 : 1}
-                  strokeOpacity={
-                    (activeDot || (activeLegend && activeLegend !== category)
-                      ? 0.3
-                      : 1) * (isGhost ? 0.45 : 1)
-                  }
-                  isAnimationActive={false}
-                  connectNulls={connectNulls}
-                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  activeDot={
-                    isGhost
-                      ? false
-                      : (dotProps: any) => {
-                          const {
-                            cx: cxCoord,
-                            cy: cyCoord,
-                            stroke,
-                            strokeLinecap: slc,
-                            strokeLinejoin: slj,
-                            strokeWidth,
-                          } = dotProps;
-                          return (
-                            <Dot
-                              className={cx(
-                                "stroke-white",
-                                onValueChange ? "cursor-pointer" : "",
-                                getColorClassName(colorKey, "fill"),
-                              )}
-                              cx={cxCoord}
-                              cy={cyCoord}
-                              r={5}
-                              fill={isCustomColor ? hex : ""}
-                              stroke={stroke}
-                              strokeLinecap={slc}
-                              strokeLinejoin={slj}
-                              strokeWidth={strokeWidth}
-                              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                              onClick={(_: any, event: any) => {
-                                return onDotClick(dotProps, event);
-                              }}
-                            />
-                          );
-                        }
-                  }
                   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  dot={
-                    isGhost
-                      ? false
-                      : (dotProps: any) => {
-                          const {
-                            stroke,
-                            strokeLinecap: slc,
-                            strokeLinejoin: slj,
-                            strokeWidth,
-                            cx: cxCoord,
-                            cy: cyCoord,
-                            index: dotIndex,
-                          } = dotProps;
-
-                          if (
-                            (hasOnlyOneValueForKey(data, category) &&
-                              !(
-                                activeDot ||
-                                (activeLegend && activeLegend !== category)
-                              )) ||
-                            (activeDot?.index === dotIndex &&
-                              activeDot?.dataKey === category)
-                          ) {
+                  dataKey={(
+                    d: Record<string, any>,
+                  ): [number, number] | null => {
+                    const low: number = Number(d[props.anomalyBandLowerKey!]);
+                    const high: number = Number(d[props.anomalyBandUpperKey!]);
+                    if (!Number.isFinite(low) || !Number.isFinite(high)) {
+                      return null;
+                    }
+                    return [low, high];
+                  }}
+                  stroke="var(--ou-chart-tick, #94a3b8)"
+                  strokeOpacity={0.3}
+                  strokeWidth={1}
+                  strokeDasharray="3 3"
+                  fill="var(--ou-chart-tick, #94a3b8)"
+                  fillOpacity={0.12}
+                  isAnimationActive={false}
+                  connectNulls={false}
+                  activeDot={false}
+                  dot={false}
+                  legendType="none"
+                />
+              ) : null}
+              {categories.map((category: string) => {
+                const gradientId: string = `gradient-${category.replace(/[^a-zA-Z0-9]/g, "_")}`;
+                const colorKey: ChartColorValue = categoryColors.get(
+                  category,
+                ) as ChartColorValue;
+                const hex: string = getColorHex(colorKey);
+                const isCustomColor: boolean = isHexColorValue(colorKey);
+                const isGhost: boolean =
+                  ghostCategories?.includes(category) || false;
+
+                return (
+                  <Area
+                    key={category}
+                    name={category}
+                    type={props.curve || ChartCurve.MONOTONE}
+                    dataKey={category}
+                    stroke={hex}
+                    strokeWidth={isGhost ? 1.5 : 2}
+                    strokeLinejoin="round"
+                    strokeLinecap="round"
+                    fill={`url(#${gradientId})`}
+                    fillOpacity={isGhost ? 0 : 1}
+                    strokeOpacity={
+                      (activeDot || (activeLegend && activeLegend !== category)
+                        ? 0.3
+                        : 1) * (isGhost ? 0.45 : 1)
+                    }
+                    isAnimationActive={false}
+                    connectNulls={connectNulls}
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    activeDot={
+                      isGhost
+                        ? false
+                        : (dotProps: any) => {
+                            const {
+                              cx: cxCoord,
+                              cy: cyCoord,
+                              stroke,
+                              strokeLinecap: slc,
+                              strokeLinejoin: slj,
+                              strokeWidth,
+                            } = dotProps;
                             return (
                               <Dot
-                                key={dotIndex}
+                                className={cx(
+                                  "stroke-white",
+                                  onValueChange ? "cursor-pointer" : "",
+                                  getColorClassName(colorKey, "fill"),
+                                )}
                                 cx={cxCoord}
                                 cy={cyCoord}
                                 r={5}
-                                stroke={stroke}
                                 fill={isCustomColor ? hex : ""}
+                                stroke={stroke}
                                 strokeLinecap={slc}
                                 strokeLinejoin={slj}
                                 strokeWidth={strokeWidth}
-                                className={cx(
-                                  "stroke-white",
-                                  onValueChange ? "cursor-pointer" : "",
-                                  getColorClassName(colorKey, "fill"),
-                                )}
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                onClick={(_: any, event: any) => {
+                                  return onDotClick(dotProps, event);
+                                }}
                               />
                             );
                           }
-                          return (
-                            <React.Fragment key={dotIndex}></React.Fragment>
-                          );
-                        }
-                  }
-                  {...(isGhost ? { strokeDasharray: "6 4" } : {})}
-                />
-              );
-            })}
-            {props.referenceLines?.map(
-              (refLine: ChartReferenceLineProps, refIndex: number) => {
-                return (
-                  <ReferenceLine
-                    key={`ref-${refIndex}`}
-                    y={refLine.value}
-                    stroke={refLine.color}
-                    strokeDasharray={refLine.strokeDasharray || "4 4"}
-                    strokeWidth={1.5}
-                  >
-                    {refLine.label && (
-                      <Label
-                        value={refLine.label}
-                        position="insideTopRight"
-                        fill={refLine.color}
-                        fontSize={11}
-                        fontWeight={500}
-                      />
-                    )}
-                  </ReferenceLine>
-                );
-              },
-            )}
-            {/* 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: (...args: Array<unknown>): void => {
-                            // Never let an annotation click also pin a bucket.
-                            stopChartEventPropagation(...args);
-                            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: (...args: Array<unknown>): void => {
-                            // Never let an annotation click also pin a bucket.
-                            stopChartEventPropagation(...args);
-                            if (suppressNextClickRef.current) {
-                              return;
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    dot={
+                      isGhost
+                        ? false
+                        : (dotProps: any) => {
+                            const {
+                              stroke,
+                              strokeLinecap: slc,
+                              strokeLinejoin: slj,
+                              strokeWidth,
+                              cx: cxCoord,
+                              cy: cyCoord,
+                              index: dotIndex,
+                            } = dotProps;
+
+                            if (
+                              (hasOnlyOneValueForKey(data, category) &&
+                                !(
+                                  activeDot ||
+                                  (activeLegend && activeLegend !== category)
+                                )) ||
+                              (activeDot?.index === dotIndex &&
+                                activeDot?.dataKey === category)
+                            ) {
+                              return (
+                                <Dot
+                                  key={dotIndex}
+                                  cx={cxCoord}
+                                  cy={cyCoord}
+                                  r={5}
+                                  stroke={stroke}
+                                  fill={isCustomColor ? hex : ""}
+                                  strokeLinecap={slc}
+                                  strokeLinejoin={slj}
+                                  strokeWidth={strokeWidth}
+                                  className={cx(
+                                    "stroke-white",
+                                    onValueChange ? "cursor-pointer" : "",
+                                    getColorClassName(colorKey, "fill"),
+                                  )}
+                                />
+                              );
                             }
-                            timeRefLine.original.onClick?.();
-                          },
-                        }
-                      : {})}
-                  >
-                    {timeRefLine.original.label &&
-                      showTimeReferenceLineLabels && (
+                            return (
+                              <React.Fragment key={dotIndex}></React.Fragment>
+                            );
+                          }
+                    }
+                    {...(isGhost ? { strokeDasharray: "6 4" } : {})}
+                  />
+                );
+              })}
+              {props.referenceLines?.map(
+                (refLine: ChartReferenceLineProps, refIndex: number) => {
+                  return (
+                    <ReferenceLine
+                      key={`ref-${refIndex}`}
+                      y={refLine.value}
+                      stroke={refLine.color}
+                      strokeDasharray={refLine.strokeDasharray || "4 4"}
+                      strokeWidth={1.5}
+                    >
+                      {refLine.label && (
                         <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}
+                          value={refLine.label}
+                          position="insideTopRight"
+                          fill={refLine.color}
+                          fontSize={11}
                           fontWeight={500}
                         />
                       )}
-                  </ReferenceLine>
-                );
-              },
-            )}
-            {/* Exemplar dots - clickable markers linking to traces */}
-            {props.formattedExemplarPoints?.map(
-              (exemplar: FormattedExemplarPoint, exemplarIndex: number) => {
-                return (
-                  <ReferenceDot
-                    key={`exemplar-${exemplarIndex}`}
-                    x={exemplar.formattedX}
-                    y={exemplar.y}
-                    r={5}
-                    fill="#7c3aed"
-                    stroke="var(--ou-chart-marker-ring, #ffffff)"
-                    strokeWidth={2}
-                    style={{ cursor: "pointer" }}
-                    onClick={(...args: Array<unknown>) => {
-                      // Never let an exemplar click also pin a bucket.
-                      stopChartEventPropagation(...args);
-                      // Ignore the click that follows a drag-to-select.
-                      if (suppressNextClickRef.current) {
-                        return;
-                      }
-                      props.onExemplarClick?.(exemplar.original);
-                    }}
-                  >
-                    <Label
-                      value="E"
-                      position="center"
-                      /*
-                       * 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}
-                    />
-                  </ReferenceDot>
-                );
-              },
-            )}
-            {/* 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>
+                    </ReferenceLine>
+                  );
+                },
+              )}
+              {/*
+               * Event markers and shaded windows: hairlines through the plot
+               * topped by a chip rail in the chart's top margin. Everything
+               * that used to be painted over the series as rotated text now
+               * lives in the chip's hover card.
+               */}
+              {annotations.layer}
+              {/* Exemplar dots - clickable markers linking to traces */}
+              {props.formattedExemplarPoints?.map(
+                (exemplar: FormattedExemplarPoint, exemplarIndex: number) => {
+                  return (
+                    <ReferenceDot
+                      key={`exemplar-${exemplarIndex}`}
+                      x={exemplar.formattedX}
+                      y={exemplar.y}
+                      r={5}
+                      fill="#7c3aed"
+                      stroke="var(--ou-chart-marker-ring, #ffffff)"
+                      strokeWidth={2}
+                      style={{ cursor: "pointer" }}
+                      onClick={(...args: Array<unknown>) => {
+                        // Never let an exemplar click also pin a bucket.
+                        stopChartEventPropagation(...args);
+                        // Ignore the click that follows a drag-to-select.
+                        if (suppressNextClickRef.current) {
+                          return;
+                        }
+                        props.onExemplarClick?.(exemplar.original);
+                      }}
+                    >
+                      <Label
+                        value="E"
+                        position="center"
+                        /*
+                         * 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}
+                      />
+                    </ReferenceDot>
+                  );
+                },
+              )}
+              {/* 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>
+          {annotations.overlay}
+        </div>
       </div>
     );
   },