@oneuptime/common 12.0.30 → 12.0.32

package/build/dist/UI/Components/Charts/ChartLibrary/AreaChart/AreaChart.js

@@ -17,19 +17,13 @@ import { Area, AreaChart as RechartsAreaChart, CartesianGrid, Dot, Label, Legend
 import { CHART_DATA_POINT_DATE_KEY } from "../Types/ChartDataPoint";
 import { useOnWindowResize } from "../Utils/UseWindowOnResize";
 import { AvailableChartColors, constructCategoryColors, getColorClassName, getColorHex, isHexColorValue, } from "../Utils/ChartColors";
+import useChartAnnotations 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 { prepareTooltipEntries, } 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 = 6;
 /*
  * recharts invokes child event handlers with varying shapes ((event) for
  * plain SVG passthrough, (data, event) for adapted children) — find the
@@ -254,7 +248,7 @@ const AreaChart = React.forwardRef((props, ref) => {
     var _a, _b;
     const { data = [], categories = [], index, colors = AvailableChartColors, valueFormatter = (value) => {
         return value.toString();
-    }, startEndOnly = false, showXAxis = true, showYAxis = true, showGridLines = true, yAxisWidth = 56, intervalType = "equidistantPreserveStart", showTooltip = true, showLegend = true, autoMinValue = false, minValue, maxValue, allowDecimals = true, connectNulls = false, className, onValueChange, enableLegendSlider = false, tickGap = 5, xAxisLabel, yAxisLabel, legendPosition = "right", tooltipCallback, customTooltip, formattedTimeReferenceLines, formattedReferenceRegions, onTimeRangeSelect, onBucketClick, ghostCategories } = props, other = __rest(props, ["data", "categories", "index", "colors", "valueFormatter", "startEndOnly", "showXAxis", "showYAxis", "showGridLines", "yAxisWidth", "intervalType", "showTooltip", "showLegend", "autoMinValue", "minValue", "maxValue", "allowDecimals", "connectNulls", "className", "onValueChange", "enableLegendSlider", "tickGap", "xAxisLabel", "yAxisLabel", "legendPosition", "tooltipCallback", "customTooltip", "formattedTimeReferenceLines", "formattedReferenceRegions", "onTimeRangeSelect", "onBucketClick", "ghostCategories"]);
+    }, startEndOnly = false, showXAxis = true, showYAxis = true, showGridLines = true, yAxisWidth = 56, intervalType = "equidistantPreserveStart", showTooltip = true, showLegend = true, autoMinValue = false, minValue, maxValue, allowDecimals = true, connectNulls = false, className, onValueChange, enableLegendSlider = false, tickGap = 5, xAxisLabel, yAxisLabel, legendPosition = "right", tooltipCallback, customTooltip, formattedTimeReferenceLines, formattedReferenceRegions, onTimeRangeSelect, onTimeRangeReset, onBucketClick, ghostCategories } = props, other = __rest(props, ["data", "categories", "index", "colors", "valueFormatter", "startEndOnly", "showXAxis", "showYAxis", "showGridLines", "yAxisWidth", "intervalType", "showTooltip", "showLegend", "autoMinValue", "minValue", "maxValue", "allowDecimals", "connectNulls", "className", "onValueChange", "enableLegendSlider", "tickGap", "xAxisLabel", "yAxisLabel", "legendPosition", "tooltipCallback", "customTooltip", "formattedTimeReferenceLines", "formattedReferenceRegions", "onTimeRangeSelect", "onTimeRangeReset", "onBucketClick", "ghostCategories"]);
     const CustomTooltip = customTooltip;
     const paddingValue = (!showXAxis && !showYAxis) || (startEndOnly && !showYAxis) ? 0 : 20;
     const [legendHeight, setLegendHeight] = React.useState(60);
@@ -267,9 +261,42 @@ const AreaChart = React.forwardRef((props, ref) => {
     const rangeSelectionStartIndexRef = React.useRef(null);
     const rangeSelectionEndIndexRef = React.useRef(null);
     const suppressNextClickRef = React.useRef(false);
+    const hasOnTimeRangeReset = 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.useRef(null);
     const categoryColors = constructCategoryColors(categories, colors);
-    const timeReferenceLineCount = (formattedTimeReferenceLines === null || formattedTimeReferenceLines === void 0 ? void 0 : formattedTimeReferenceLines.length) || 0;
-    const showTimeReferenceLineLabels = 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 = React.useMemo(() => {
+        return data.map((row) => {
+            var _a;
+            return String((_a = row[index]) !== null && _a !== void 0 ? _a : "");
+        });
+    }, [data, index]);
+    const annotations = useChartAnnotations({
+        formattedTimeReferenceLines,
+        formattedReferenceRegions,
+        categoryLabels,
+        axisPaddingPx: paddingValue,
+        scaleKind: "point",
+        hasTopLegend: showLegend,
+        isClickSuppressed: () => {
+            return suppressNextClickRef.current;
+        },
+    });
     const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
     const hasOnValueChange = Boolean(onValueChange);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -447,240 +474,241 @@ const AreaChart = React.forwardRef((props, ref) => {
         const endDate = new Date(lastBucketDate.getTime() + bucketWidthInMs);
         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) {
+        /*
+         * 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 || onValueChange === void 0 ? void 0 : onValueChange(null);
+            return;
+        }
+        if (!onBucketClick) {
+            return;
+        }
+        const rowIndex = getRowIndexFromChartState(chartState);
+        if (rowIndex === null) {
+            return;
+        }
+        const bucketStart = getBucketDateAtIndex(rowIndex);
+        if (!bucketStart) {
+            return;
+        }
+        /*
+         * Cover the full bucket: width from adjacent row dates, the
+         * same derivation drag-to-select uses.
+         */
+        const adjacentBucketDate = rowIndex > 0
+            ? getBucketDateAtIndex(rowIndex - 1)
+            : getBucketDateAtIndex(rowIndex + 1);
+        const clickedBucketWidthInMs = adjacentBucketDate
+            ? Math.abs(bucketStart.getTime() - adjacentBucketDate.getTime())
+            : 0;
+        onBucketClick(bucketStart, new Date(bucketStart.getTime() + clickedBucketWidthInMs), (data[rowIndex] || {}));
+    }
     return (React.createElement("div", Object.assign({ ref: ref, className: cx("flex-1 w-full", hasOnTimeRangeSelect && "cursor-crosshair", className) }, other),
-        React.createElement(ResponsiveContainer, null,
-            React.createElement(RechartsAreaChart, Object.assign({ data: data }, (props.syncid ? { syncId: props.syncid.toString() } : {}), (hasOnTimeRangeSelect
-                ? {
-                    onMouseDown: handleRangeSelectMouseDown,
-                    onMouseMove: handleRangeSelectMouseMove,
-                    onMouseUp: handleRangeSelectMouseUp,
-                }
-                : {}), { onClick: (chartState) => {
-                    // 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 || onValueChange === void 0 ? void 0 : onValueChange(null);
-                        return;
-                    }
-                    if (!onBucketClick) {
-                        return;
+        React.createElement("div", { className: cx("relative isolate h-full w-full") },
+            React.createElement(ResponsiveContainer, null,
+                React.createElement(RechartsAreaChart, Object.assign({ data: data }, (props.syncid ? { syncId: props.syncid.toString() } : {}), (hasOnTimeRangeSelect
+                    ? {
+                        onMouseDown: handleRangeSelectMouseDown,
+                        onMouseMove: handleRangeSelectMouseMove,
+                        onMouseUp: handleRangeSelectMouseUp,
                     }
-                    const rowIndex = getRowIndexFromChartState(chartState);
-                    if (rowIndex === null) {
-                        return;
-                    }
-                    const bucketStart = getBucketDateAtIndex(rowIndex);
-                    if (!bucketStart) {
-                        return;
-                    }
-                    /*
-                     * Cover the full bucket: width from adjacent row dates, the
-                     * same derivation drag-to-select uses.
-                     */
-                    const adjacentDate = rowIndex > 0
-                        ? getBucketDateAtIndex(rowIndex - 1)
-                        : getBucketDateAtIndex(rowIndex + 1);
-                    const bucketWidthInMs = adjacentDate
-                        ? Math.abs(bucketStart.getTime() - adjacentDate.getTime())
-                        : 0;
-                    onBucketClick(bucketStart, new Date(bucketStart.getTime() + bucketWidthInMs), (data[rowIndex] || {}));
-                }, margin: {
-                    bottom: (xAxisLabel
-                        ? 40
-                        : showXAxis
-                            ? 24
-                            : 8),
-                    left: (yAxisLabel ? 20 : 0),
-                    right: (yAxisLabel ? 5 : 8),
-                    top: 5,
-                } }),
-                React.createElement("defs", null, categories.map((category, i) => {
-                    const colorKey = colors[i % colors.length] || "blue";
-                    const hex = getColorHex(colorKey);
-                    return (React.createElement("linearGradient", { key: category, id: `gradient-${category.replace(/[^a-zA-Z0-9]/g, "_")}`, x1: "0", y1: "0", x2: "0", y2: "1" },
-                        React.createElement("stop", { offset: "0%", stopColor: hex, stopOpacity: 0.2 }),
-                        React.createElement("stop", { offset: "100%", stopColor: hex, stopOpacity: 0.01 })));
-                })),
-                showGridLines ? (React.createElement(CartesianGrid, { className: cx("stroke-gray-100"), strokeDasharray: "3 3", horizontal: true, vertical: false })) : null,
-                React.createElement(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)",
-                    }, ticks: startEndOnly
-                        ? [
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            data[0][index],
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            data[data.length - 1][index],
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        ]
-                        : undefined, fill: "", stroke: "", className: cx("tabular-nums", "fill-gray-500"), tickLine: false, axisLine: false, minTickGap: tickGap }, xAxisLabel && (React.createElement(Label, { position: "insideBottom", offset: -20, className: "fill-gray-800 text-sm font-medium" }, xAxisLabel))),
-                React.createElement(YAxis, { width: yAxisWidth, hide: !showYAxis, axisLine: false, tickLine: false, type: "number", domain: yAxisDomain, 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 && (React.createElement(Label, { position: "insideLeft", style: { textAnchor: "middle" }, angle: -90, offset: -15, className: "fill-gray-800 text-sm font-medium" }, yAxisLabel))),
-                React.createElement(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 }) => {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        const cleanPayload = payload
-                            ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                payload.map((item) => {
-                                    return {
-                                        category: item.dataKey,
-                                        value: item.value,
-                                        index: item.payload[index],
-                                        color: categoryColors.get(item.dataKey),
-                                        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;
+                    : {}), { onClick: (chartState) => {
+                        // Ignore the click that follows a drag-to-select.
+                        if (suppressNextClickRef.current) {
+                            return;
                         }
-                        return showTooltip && active ? (CustomTooltip ? (React.createElement(CustomTooltip, { active: active, payload: cleanPayload, label: label })) : (React.createElement(ChartTooltip, { active: active, payload: cleanPayload, label: label, valueFormatter: valueFormatter }))) : null;
-                    } }),
-                showLegend ? (React.createElement(RechartsLegend, { verticalAlign: "top", height: legendHeight, 
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    content: ({ payload }) => {
-                        return ChartLegend({ payload }, categoryColors, setLegendHeight, activeLegend, hasOnValueChange
-                            ? (clickedLegendItem) => {
-                                return onCategoryClick(clickedLegendItem);
-                            }
-                            : undefined, enableLegendSlider, legendPosition, yAxisWidth);
-                    } })) : null,
-                props.anomalyBandLowerKey && props.anomalyBandUpperKey ? (React.createElement(Area, { key: "__anomaly_band__", name: "Expected range", type: props.curve || ChartCurve.MONOTONE, 
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    dataKey: (d) => {
-                        const low = Number(d[props.anomalyBandLowerKey]);
-                        const high = Number(d[props.anomalyBandUpperKey]);
-                        if (!Number.isFinite(low) || !Number.isFinite(high)) {
-                            return null;
+                        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);
                         }
-                        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) => {
-                    const gradientId = `gradient-${category.replace(/[^a-zA-Z0-9]/g, "_")}`;
-                    const colorKey = categoryColors.get(category);
-                    const hex = getColorHex(colorKey);
-                    const isCustomColor = isHexColorValue(colorKey);
-                    const isGhost = (ghostCategories === null || ghostCategories === void 0 ? void 0 : ghostCategories.includes(category)) || false;
-                    return (React.createElement(Area, Object.assign({ 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, 
+                        pendingClickTimeoutRef.current = setTimeout(() => {
+                            pendingClickTimeoutRef.current = null;
+                            handleChartClick(chartState);
+                        }, DOUBLE_CLICK_DISAMBIGUATION_MS);
+                    } }, (hasOnTimeRangeReset
+                    ? {
+                        onDoubleClick: () => {
+                            if (pendingClickTimeoutRef.current !== null) {
+                                clearTimeout(pendingClickTimeoutRef.current);
+                                pendingClickTimeoutRef.current = null;
+                            }
+                            onTimeRangeReset === null || onTimeRangeReset === void 0 ? void 0 : onTimeRangeReset();
+                        },
+                    }
+                    : {}), { margin: {
+                        bottom: (xAxisLabel
+                            ? 40
+                            : showXAxis
+                                ? 24
+                                : 8),
+                        left: (yAxisLabel ? 20 : 0),
+                        right: (yAxisLabel ? 5 : 8),
+                        /*
+                         * 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,
+                    } }),
+                    React.createElement("defs", null, categories.map((category, i) => {
+                        const colorKey = colors[i % colors.length] || "blue";
+                        const hex = getColorHex(colorKey);
+                        return (React.createElement("linearGradient", { key: category, id: `gradient-${category.replace(/[^a-zA-Z0-9]/g, "_")}`, x1: "0", y1: "0", x2: "0", y2: "1" },
+                            React.createElement("stop", { offset: "0%", stopColor: hex, stopOpacity: 0.2 }),
+                            React.createElement("stop", { offset: "100%", stopColor: hex, stopOpacity: 0.01 })));
+                    })),
+                    showGridLines ? (React.createElement(CartesianGrid, { className: cx("stroke-gray-100"), strokeDasharray: "3 3", horizontal: true, vertical: false })) : null,
+                    React.createElement(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)",
+                        }, ticks: startEndOnly
+                            ? [
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                data[0][index],
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                data[data.length - 1][index],
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            ]
+                            : undefined, fill: "", stroke: "", className: cx("tabular-nums", "fill-gray-500"), tickLine: false, axisLine: false, minTickGap: tickGap }, xAxisLabel && (React.createElement(Label, { position: "insideBottom", offset: -20, className: "fill-gray-800 text-sm font-medium" }, xAxisLabel))),
+                    React.createElement(YAxis, { width: yAxisWidth, hide: !showYAxis, axisLine: false, tickLine: false, type: "number", domain: yAxisDomain, 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 && (React.createElement(Label, { position: "insideLeft", style: { textAnchor: "middle" }, angle: -90, offset: -15, className: "fill-gray-800 text-sm font-medium" }, yAxisLabel))),
+                    React.createElement(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
-                        activeDot: isGhost
-                            ? false
-                            : (dotProps) => {
-                                const { cx: cxCoord, cy: cyCoord, stroke, strokeLinecap: slc, strokeLinejoin: slj, strokeWidth, } = dotProps;
-                                return (React.createElement(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: (_, event) => {
-                                        return onDotClick(dotProps, event);
-                                    } }));
-                            }, 
+                        content: ({ active, payload, label }) => {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            const cleanPayload = payload
+                                ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                    payload.map((item) => {
+                                        return {
+                                            category: item.dataKey,
+                                            value: item.value,
+                                            index: item.payload[index],
+                                            color: categoryColors.get(item.dataKey),
+                                            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 ? (React.createElement(CustomTooltip, { active: active, payload: cleanPayload, label: label })) : (React.createElement(ChartTooltip, { active: active, payload: cleanPayload, label: label, valueFormatter: valueFormatter }))) : null;
+                        } }),
+                    showLegend ? (React.createElement(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
-                        dot: isGhost
-                            ? false
-                            : (dotProps) => {
-                                const { stroke, strokeLinecap: slc, strokeLinejoin: slj, strokeWidth, cx: cxCoord, cy: cyCoord, index: dotIndex, } = dotProps;
-                                if ((hasOnlyOneValueForKey(data, category) &&
-                                    !(activeDot ||
-                                        (activeLegend && activeLegend !== category))) ||
-                                    ((activeDot === null || activeDot === void 0 ? void 0 : activeDot.index) === dotIndex &&
-                                        (activeDot === null || activeDot === void 0 ? void 0 : activeDot.dataKey) === category)) {
-                                    return (React.createElement(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")) }));
+                        content: ({ payload }) => {
+                            return ChartLegend({ payload }, categoryColors, setLegendHeight, activeLegend, hasOnValueChange
+                                ? (clickedLegendItem) => {
+                                    return onCategoryClick(clickedLegendItem);
                                 }
-                                return (React.createElement(React.Fragment, { key: dotIndex }));
-                            } }, (isGhost ? { strokeDasharray: "6 4" } : {}))));
-                }), (_a = props.referenceLines) === null || _a === void 0 ? void 0 :
-                _a.map((refLine, refIndex) => {
-                    return (React.createElement(ReferenceLine, { key: `ref-${refIndex}`, y: refLine.value, stroke: refLine.color, strokeDasharray: refLine.strokeDasharray || "4 4", strokeWidth: 1.5 }, refLine.label && (React.createElement(Label, { value: refLine.label, position: "insideTopRight", fill: refLine.color, fontSize: 11, fontWeight: 500 }))));
-                }), formattedReferenceRegions === null || formattedReferenceRegions === void 0 ? void 0 :
-                formattedReferenceRegions.map((region, regionIndex) => {
-                    const regionColor = region.original.color || "#6366f1";
-                    return (React.createElement(ReferenceArea, Object.assign({ 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" },
-                            onClick: (...args) => {
-                                var _a, _b;
-                                // Never let an annotation click also pin a bucket.
-                                stopChartEventPropagation(...args);
-                                if (suppressNextClickRef.current) {
-                                    return;
-                                }
-                                (_b = (_a = region.original).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
-                            },
-                        }
-                        : {})), region.original.label && (React.createElement(Label, { value: region.original.label, position: "insideTop", fill: regionColor, fontSize: 10, fontWeight: 500 }))));
-                }), formattedTimeReferenceLines === null || formattedTimeReferenceLines === void 0 ? void 0 :
-                formattedTimeReferenceLines.map((timeRefLine, timeRefIndex) => {
-                    const lineColor = timeRefLine.original.color || "#f59e0b";
-                    return (React.createElement(ReferenceLine, Object.assign({ key: `time-ref-${timeRefIndex}`, x: timeRefLine.formattedX, stroke: lineColor, strokeDasharray: timeRefLine.original.strokeDasharray || "4 4", strokeWidth: 1.5 }, (timeRefLine.original.onClick
-                        ? {
-                            style: { cursor: "pointer" },
-                            onClick: (...args) => {
-                                var _a, _b;
-                                // Never let an annotation click also pin a bucket.
+                                : undefined, enableLegendSlider, legendPosition, yAxisWidth);
+                        } })) : null,
+                    props.anomalyBandLowerKey && props.anomalyBandUpperKey ? (React.createElement(Area, { key: "__anomaly_band__", name: "Expected range", type: props.curve || ChartCurve.MONOTONE, 
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        dataKey: (d) => {
+                            const low = Number(d[props.anomalyBandLowerKey]);
+                            const high = 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) => {
+                        const gradientId = `gradient-${category.replace(/[^a-zA-Z0-9]/g, "_")}`;
+                        const colorKey = categoryColors.get(category);
+                        const hex = getColorHex(colorKey);
+                        const isCustomColor = isHexColorValue(colorKey);
+                        const isGhost = (ghostCategories === null || ghostCategories === void 0 ? void 0 : ghostCategories.includes(category)) || false;
+                        return (React.createElement(Area, Object.assign({ 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) => {
+                                    const { cx: cxCoord, cy: cyCoord, stroke, strokeLinecap: slc, strokeLinejoin: slj, strokeWidth, } = dotProps;
+                                    return (React.createElement(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: (_, event) => {
+                                            return onDotClick(dotProps, event);
+                                        } }));
+                                }, 
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            dot: isGhost
+                                ? false
+                                : (dotProps) => {
+                                    const { stroke, strokeLinecap: slc, strokeLinejoin: slj, strokeWidth, cx: cxCoord, cy: cyCoord, index: dotIndex, } = dotProps;
+                                    if ((hasOnlyOneValueForKey(data, category) &&
+                                        !(activeDot ||
+                                            (activeLegend && activeLegend !== category))) ||
+                                        ((activeDot === null || activeDot === void 0 ? void 0 : activeDot.index) === dotIndex &&
+                                            (activeDot === null || activeDot === void 0 ? void 0 : activeDot.dataKey) === category)) {
+                                        return (React.createElement(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")) }));
+                                    }
+                                    return (React.createElement(React.Fragment, { key: dotIndex }));
+                                } }, (isGhost ? { strokeDasharray: "6 4" } : {}))));
+                    }), (_a = props.referenceLines) === null || _a === void 0 ? void 0 :
+                    _a.map((refLine, refIndex) => {
+                        return (React.createElement(ReferenceLine, { key: `ref-${refIndex}`, y: refLine.value, stroke: refLine.color, strokeDasharray: refLine.strokeDasharray || "4 4", strokeWidth: 1.5 }, refLine.label && (React.createElement(Label, { value: refLine.label, position: "insideTopRight", fill: refLine.color, fontSize: 11, fontWeight: 500 }))));
+                    }),
+                    annotations.layer, (_b = props.formattedExemplarPoints) === null || _b === void 0 ? void 0 :
+                    _b.map((exemplar, exemplarIndex) => {
+                        return (React.createElement(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) => {
+                                var _a;
+                                // Never let an exemplar click also pin a bucket.
                                 stopChartEventPropagation(...args);
+                                // Ignore the click that follows a drag-to-select.
                                 if (suppressNextClickRef.current) {
                                     return;
                                 }
-                                (_b = (_a = timeRefLine.original).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
-                            },
-                        }
-                        : {})), timeRefLine.original.label &&
-                        showTimeReferenceLineLabels && (React.createElement(Label, Object.assign({ 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",
-                            angle: 90,
-                        }
-                        : { position: "insideTop" }), { fill: lineColor, fontSize: 10, fontWeight: 500 })))));
-                }), (_b = props.formattedExemplarPoints) === null || _b === void 0 ? void 0 :
-                _b.map((exemplar, exemplarIndex) => {
-                    return (React.createElement(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) => {
-                            var _a;
-                            // Never let an exemplar click also pin a bucket.
-                            stopChartEventPropagation(...args);
-                            // Ignore the click that follows a drag-to-select.
-                            if (suppressNextClickRef.current) {
-                                return;
-                            }
-                            (_a = props.onExemplarClick) === null || _a === void 0 ? void 0 : _a.call(props, exemplar.original);
-                        } },
-                        React.createElement(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 })));
-                }),
-                rangeSelectionStart && rangeSelectionEnd ? (React.createElement(ReferenceArea, { x1: rangeSelectionStart, x2: rangeSelectionEnd, fill: "rgba(99,102,241,0.12)", stroke: "rgba(99,102,241,0.5)", strokeWidth: 1, radius: 2 })) : null))));
+                                (_a = props.onExemplarClick) === null || _a === void 0 ? void 0 : _a.call(props, exemplar.original);
+                            } },
+                            React.createElement(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 })));
+                    }),
+                    rangeSelectionStart && rangeSelectionEnd ? (React.createElement(ReferenceArea, { x1: rangeSelectionStart, x2: rangeSelectionEnd, fill: "rgba(99,102,241,0.12)", stroke: "rgba(99,102,241,0.5)", strokeWidth: 1, radius: 2 })) : null)),
+            annotations.overlay)));
 });
 AreaChart.displayName = "AreaChart";
 export { AreaChart, ChartTooltip };