@oneuptime/common 11.5.9 → 11.5.10

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

@@ -2,6 +2,7 @@ import { AreaChart } from "../ChartLibrary/AreaChart/AreaChart";
 import React, { useEffect, useMemo, } from "react";
 import ChartCurve from "../Types/ChartCurve";
 import DataPointUtil from "../Utils/DataPoint";
+import TimeAnnotationUtil from "../Utils/TimeAnnotation";
 import XAxisUtil from "../Utils/XAxis";
 import NoDataMessage from "../ChartGroup/NoDataMessage";
 export const AreaChartPalette = [
@@ -57,6 +58,25 @@ const AreaChartElement = (props) => {
             };
         });
     }, [props.exemplarPoints, props.xAxis]);
+    // Snap time annotations onto the categorical x-axis bucket labels
+    const formattedTimeReferenceLines = useMemo(() => {
+        if (!props.timeReferenceLines || props.timeReferenceLines.length === 0) {
+            return [];
+        }
+        return TimeAnnotationUtil.formatTimeReferenceLines({
+            timeReferenceLines: props.timeReferenceLines,
+            xAxis: props.xAxis,
+        });
+    }, [props.timeReferenceLines, props.xAxis]);
+    const formattedReferenceRegions = useMemo(() => {
+        if (!props.referenceRegions || props.referenceRegions.length === 0) {
+            return [];
+        }
+        return TimeAnnotationUtil.formatReferenceRegions({
+            referenceRegions: props.referenceRegions,
+            xAxis: props.xAxis,
+        });
+    }, [props.referenceRegions, props.xAxis]);
     const hasNoData = !props.data ||
         props.data.length === 0 ||
         props.data.every((series) => {
@@ -75,7 +95,11 @@ const AreaChartElement = (props) => {
     return (React.createElement("div", { className: "relative flex flex-1", style: props.heightInPx ? { height: `${props.heightInPx}px` } : undefined },
         React.createElement(AreaChart, Object.assign({ data: records, tickGap: 30, index: "Time", categories: categories, colors: props.colors && props.colors.length > 0
                 ? props.colors
-                : AreaChartPalette, valueFormatter: props.yAxis.options.formatter || undefined, showTooltip: true, showLegend: props.showLegend !== false, connectNulls: true, curve: props.curve || ChartCurve.MONOTONE, syncid: props.sync ? props.syncid : undefined, yAxisWidth: 64, autoMinValue: autoMinValue }, minValueProp, maxValueProp, { onValueChange: () => { }, referenceLines: props.referenceLines, formattedExemplarPoints: formattedExemplars.length > 0 ? formattedExemplars : undefined, onExemplarClick: props.onExemplarClick, anomalyBandLowerKey: bandLower, anomalyBandUpperKey: bandUpper })),
+                : AreaChartPalette, valueFormatter: props.yAxis.options.formatter || undefined, showTooltip: true, showLegend: props.showLegend !== false, connectNulls: true, curve: props.curve || ChartCurve.MONOTONE, syncid: props.sync ? props.syncid : undefined, yAxisWidth: 64, autoMinValue: autoMinValue }, minValueProp, maxValueProp, { onValueChange: () => { }, referenceLines: props.referenceLines, formattedTimeReferenceLines: formattedTimeReferenceLines.length > 0
+                ? formattedTimeReferenceLines
+                : undefined, formattedReferenceRegions: formattedReferenceRegions.length > 0
+                ? formattedReferenceRegions
+                : undefined, formattedExemplarPoints: formattedExemplars.length > 0 ? formattedExemplars : undefined, onExemplarClick: props.onExemplarClick, onTimeRangeSelect: props.onTimeRangeSelect, anomalyBandLowerKey: bandLower, anomalyBandUpperKey: bandUpper })),
         hasNoData && React.createElement(NoDataMessage, null)));
 };
 export default AreaChartElement;

package/build/dist/UI/Components/Charts/Area/AreaChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"AreaChart.js","sourceRoot":"","sources":["../../../../../../UI/Components/Charts/Area/AreaChart.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AreaChart.js","sourceRoot":"","sources":["../../../../../../UI/Components/Charts/Area/AreaChart.tsx"],"names":[],"mappings":"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"}

package/build/dist/UI/Components/Charts/Bar/BarChart.js

@@ -1,6 +1,7 @@
 import { BarChart } from "../ChartLibrary/BarChart/BarChart";
-import React, { useEffect } from "react";
+import React, { useEffect, useMemo, } from "react";
 import DataPointUtil from "../Utils/DataPoint";
+import TimeAnnotationUtil from "../Utils/TimeAnnotation";
 import NoDataMessage from "../ChartGroup/NoDataMessage";
 export const BarChartPalette = [
     "indigo",
@@ -26,6 +27,25 @@ const BarChartElement = (props) => {
         });
         setRecords(records);
     }, [props.data]);
+    // Snap time annotations onto the categorical x-axis bucket labels
+    const formattedTimeReferenceLines = useMemo(() => {
+        if (!props.timeReferenceLines || props.timeReferenceLines.length === 0) {
+            return [];
+        }
+        return TimeAnnotationUtil.formatTimeReferenceLines({
+            timeReferenceLines: props.timeReferenceLines,
+            xAxis: props.xAxis,
+        });
+    }, [props.timeReferenceLines, props.xAxis]);
+    const formattedReferenceRegions = useMemo(() => {
+        if (!props.referenceRegions || props.referenceRegions.length === 0) {
+            return [];
+        }
+        return TimeAnnotationUtil.formatReferenceRegions({
+            referenceRegions: props.referenceRegions,
+            xAxis: props.xAxis,
+        });
+    }, [props.referenceRegions, props.xAxis]);
     const hasNoData = !props.data ||
         props.data.length === 0 ||
         props.data.every((series) => {
@@ -34,7 +54,11 @@ const BarChartElement = (props) => {
     return (React.createElement("div", { className: "relative flex flex-1", style: props.heightInPx ? { height: `${props.heightInPx}px` } : undefined },
         React.createElement(BarChart, { data: records, tickGap: 30, index: "Time", categories: categories, colors: props.colors && props.colors.length > 0
                 ? props.colors
-                : BarChartPalette, valueFormatter: props.yAxis.options.formatter || undefined, showTooltip: true, showLegend: props.showLegend !== false, yAxisWidth: 64, syncid: props.sync ? props.syncid : undefined, onValueChange: () => { }, referenceLines: props.referenceLines }),
+                : BarChartPalette, valueFormatter: props.yAxis.options.formatter || undefined, showTooltip: true, showLegend: props.showLegend !== false, yAxisWidth: 64, syncid: props.sync ? props.syncid : undefined, onValueChange: () => { }, referenceLines: props.referenceLines, formattedTimeReferenceLines: formattedTimeReferenceLines.length > 0
+                ? formattedTimeReferenceLines
+                : undefined, formattedReferenceRegions: formattedReferenceRegions.length > 0
+                ? formattedReferenceRegions
+                : undefined }),
         hasNoData && React.createElement(NoDataMessage, null)));
 };
 export default BarChartElement;

package/build/dist/UI/Components/Charts/Bar/BarChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.js","sourceRoot":"","sources":["../../../../../../UI/Components/Charts/Bar/BarChart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAK7D,OAAO,KAAK,EAAE,EAAmC,SAAS,EAAE,MAAM,OAAO,CAAC;AAK1E,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAE/C,OAAO,aAAa,MAAM,6BAA6B,CAAC;AAExD,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC9D,QAAQ;IACR,MAAM;IACN,SAAS;IACT,OAAO;IACP,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,SAAS;CACV,CAAC;AAuBF,MAAM,eAAe,GAAwC,CAC3D,KAAuB,EACT,EAAE;IAChB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAwB,EAAE,CAAC,CAAC;IAExE,MAAM,UAAU,GAAkB,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAiB,EAAE,EAAE;QACrE,OAAO,IAAI,CAAC,UAAU,CAAC;IACzB,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAA0B,aAAa,CAAC,kBAAkB,CAAC;YACtE,YAAY,EAAE,KAAK,CAAC,IAAI,IAAI,EAAE;YAC9B,KAAK,EAAE,KAAK,CAAC,KAAK;YAClB,KAAK,EAAE,KAAK,CAAC,KAAK;SACnB,CAAC,CAAC;QAEH,UAAU,CAAC,OAAO,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IAEjB,MAAM,SAAS,GACb,CAAC,KAAK,CAAC,IAAI;QACX,KAAK,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC;QACvB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAmB,EAAE,EAAE;YACvC,OAAO,MAAM,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC;QAClC,CAAC,CAAC,CAAC;IAEL,OAAO,CACL,6BACE,SAAS,EAAC,sBAAsB,EAChC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,UAAU,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS;QAEzE,oBAAC,QAAQ,IACP,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,EAAE,EACX,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,UAAU,EACtB,MAAM,EACJ,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;gBACrC,CAAC,CAAC,KAAK,CAAC,MAAM;gBACd,CAAC,CAAC,eAAe,EAErB,cAAc,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,IAAI,SAAS,EAC1D,WAAW,EAAE,IAAI,EACjB,UAAU,EAAE,KAAK,CAAC,UAAU,KAAK,KAAK,EACtC,UAAU,EAAE,EAAE,EACd,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC7C,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC,EACvB,cAAc,EAAE,KAAK,CAAC,cAAc,GACpC;QACD,SAAS,IAAI,oBAAC,aAAa,OAAG,CAC3B,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"BarChart.js","sourceRoot":"","sources":["../../../../../../UI/Components/Charts/Bar/BarChart.tsx"],"names":[],"mappings":"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"}

package/build/dist/UI/Components/Charts/ChartGroup/ChartGroup.js

@@ -34,15 +34,34 @@ const ChartGroup = (props) => {
                 return React.createElement(React.Fragment, null);
         }
     };
+    // Same subtle hint the log/telemetry histograms show for drag-to-zoom.
+    const getDragToZoomHint = (chart) => {
+        const supportsTimeRangeSelect = (chart.type === ChartType.LINE || chart.type === ChartType.AREA) &&
+            Boolean(chart.props.onTimeRangeSelect);
+        if (!supportsTimeRangeSelect) {
+            return React.createElement(React.Fragment, null);
+        }
+        return (React.createElement("span", { className: "ml-auto shrink-0 whitespace-nowrap text-[10px] text-gray-400" }, "Drag to zoom"));
+    };
     const getInfoIcon = (chart) => {
         if (!chart.metricInfo) {
             return React.createElement(React.Fragment, null);
         }
-        return (React.createElement("button", { type: "button", className: "ml-1.5 inline-flex items-center justify-center rounded-full w-5 h-5 text-gray-300 hover:text-gray-500 hover:bg-gray-100 transition-all duration-150", title: "View metric details", onClick: () => {
+        return (React.createElement("button", { type: "button", className: "ml-1.5 inline-flex items-center justify-center rounded-full w-5 h-5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-all duration-150", title: "View metric details", onClick: () => {
                 setMetricInfoModalChart(chart.metricInfo || null);
             } },
             React.createElement(Icon, { icon: IconProp.InformationCircle, size: SizeProp.Smaller, className: "h-3.5 w-3.5" })));
     };
+    const getExplorerIcon = (chart) => {
+        if (!chart.onOpenInExplorer) {
+            return React.createElement(React.Fragment, null);
+        }
+        return (React.createElement("button", { type: "button", className: "ml-1.5 inline-flex items-center justify-center rounded-full w-5 h-5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-all duration-150", title: "Open in Metric Explorer", onClick: () => {
+                var _a;
+                (_a = chart.onOpenInExplorer) === null || _a === void 0 ? void 0 : _a.call(chart);
+            } },
+            React.createElement(Icon, { icon: IconProp.ExternalLink, size: SizeProp.Smaller, className: "h-3.5 w-3.5" })));
+    };
     const renderMetricInfoModal = () => {
         if (!metricInfoModalChart) {
             return React.createElement(React.Fragment, null);
@@ -98,25 +117,30 @@ const ChartGroup = (props) => {
                     React.createElement("div", { className: "px-5 pt-4 pb-4 flex flex-col flex-1" },
                         React.createElement("div", { className: "mb-3 pb-3 border-b border-gray-100" },
                             React.createElement("div", { className: "flex items-center" },
-                                React.createElement("h3", { className: "text-sm font-semibold text-gray-800 tracking-tight" }, chart.title),
-                                getInfoIcon(chart)),
+                                React.createElement("h3", { className: "min-w-0 truncate text-sm font-semibold text-gray-800 tracking-tight", title: chart.title }, chart.title),
+                                getInfoIcon(chart),
+                                getExplorerIcon(chart),
+                                getDragToZoomHint(chart)),
                             chart.description && (React.createElement("p", { className: "mt-1 text-xs text-gray-500 hidden md:block" }, chart.description))),
                         getChartContent(chart, index),
-                        chart.seriesControls ? (React.createElement("div", { className: "mb-3" }, chart.seriesControls)) : null)));
+                        chart.seriesControls ? (React.createElement("div", { className: "mt-3" }, chart.seriesControls)) : null)));
             }))));
     }
     // When showing cards, use the grid layout
     const gridCols = props.charts.length > 1 ? "lg:grid-cols-2" : "lg:grid-cols-1";
     return (React.createElement(React.Fragment, null,
         renderMetricInfoModal(),
-        React.createElement("div", { className: `grid grid-cols-1 ${gridCols} gap-4 space-y-4 lg:space-y-0` }, props.charts.map((chart, index) => {
-            return (React.createElement("div", { key: index, className: `p-5 rounded-lg border border-gray-200 bg-white shadow-sm flex flex-col gap-3 ${props.chartCssClass || ""}` },
-                React.createElement("div", { className: "flex items-center" },
-                    React.createElement("h2", { "data-testid": "card-details-heading", id: "card-details-heading", className: "text-base font-semibold leading-6 text-gray-900" }, chart.title),
-                    getInfoIcon(chart)),
-                chart.description && (React.createElement("p", { "data-testid": "card-description", className: "mt-0.5 text-sm text-gray-500 w-full hidden md:block" }, chart.description)),
-                React.createElement("div", { className: "flex-1 flex flex-col min-h-80" }, getChartContent(chart, index)),
-                chart.seriesControls ? chart.seriesControls : null));
+        React.createElement("div", { className: `grid grid-cols-1 ${gridCols} gap-4` }, props.charts.map((chart, index) => {
+            return (React.createElement("div", { key: index, className: `flex flex-col rounded-lg border border-gray-200 bg-white shadow-sm ${props.chartCssClass || ""}` },
+                React.createElement("div", { className: "border-b border-gray-100 px-4 py-2.5" },
+                    React.createElement("div", { className: "flex items-center" },
+                        React.createElement("h2", { "data-testid": "card-details-heading", id: "card-details-heading", className: "min-w-0 truncate text-sm font-semibold leading-6 text-gray-900", title: chart.title }, chart.title),
+                        getInfoIcon(chart),
+                        getExplorerIcon(chart),
+                        getDragToZoomHint(chart)),
+                    chart.description && (React.createElement("p", { "data-testid": "card-description", className: "mt-0.5 w-full truncate text-xs text-gray-500 hidden md:block", title: chart.description }, chart.description))),
+                React.createElement("div", { className: "flex-1 flex flex-col min-h-80 px-4 pt-3 pb-2" }, getChartContent(chart, index)),
+                chart.seriesControls ? (React.createElement("div", { className: "border-t border-gray-100 px-4 py-3" }, chart.seriesControls)) : null));
         }))));
 };
 export default ChartGroup;

package/build/dist/UI/Components/Charts/ChartGroup/ChartGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartGroup.js","sourceRoot":"","sources":["../../../../../../UI/Components/Charts/ChartGroup/ChartGroup.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ChartGroup.js","sourceRoot":"","sources":["../../../../../../UI/Components/Charts/ChartGroup/ChartGroup.tsx"],"names":[],"mappings":"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"}

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

@@ -13,13 +13,22 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from "react";
 import { RiArrowLeftSLine, RiArrowRightSLine } from "@remixicon/react";
-import { Area, AreaChart as RechartsAreaChart, CartesianGrid, Dot, Label, Legend as RechartsLegend, ReferenceDot, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
+import { Area, AreaChart as RechartsAreaChart, CartesianGrid, Dot, Label, Legend as RechartsLegend, ReferenceArea, ReferenceDot, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
+import { CHART_DATA_POINT_DATE_KEY } from "../Types/ChartDataPoint";
 import { useOnWindowResize } from "../Utils/UseWindowOnResize";
 import { AvailableChartColors, constructCategoryColors, getColorClassName, getColorHex, isHexColorValue, } from "../Utils/ChartColors";
 import { cx } from "../Utils/Cx";
 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 = 6;
 const LegendItem = ({ name, color, onClick, activeLegend, }) => {
     const hasOnValueChange = Boolean(onClick);
     return (React.createElement("li", { className: cx("group inline-flex flex-nowrap items-center gap-1.5 whitespace-nowrap rounded px-2 py-1 transition", hasOnValueChange
@@ -221,13 +230,22 @@ const AreaChart = React.forwardRef((props, ref) => {
     var _a, _b, _c;
     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 } = 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"]);
+    }, 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 } = 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"]);
     const CustomTooltip = customTooltip;
     const paddingValue = (!showXAxis && !showYAxis) || (startEndOnly && !showYAxis) ? 0 : 20;
     const [legendHeight, setLegendHeight] = React.useState(60);
     const [activeDot, setActiveDot] = React.useState(undefined);
     const [activeLegend, setActiveLegend] = React.useState(undefined);
+    const hasOnTimeRangeSelect = Boolean(onTimeRangeSelect);
+    const [rangeSelectionStart, setRangeSelectionStart] = React.useState(null);
+    const [rangeSelectionEnd, setRangeSelectionEnd] = React.useState(null);
+    const isRangeSelecting = React.useRef(false);
+    const rangeSelectionStartIndexRef = React.useRef(null);
+    const rangeSelectionEndIndexRef = React.useRef(null);
+    const suppressNextClickRef = React.useRef(false);
     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;
     const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
     const hasOnValueChange = Boolean(onValueChange);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -236,6 +254,10 @@ const AreaChart = React.forwardRef((props, ref) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     function onDotClick(itemData, event) {
         event.stopPropagation();
+        // Ignore the click that immediately follows a drag-to-select.
+        if (suppressNextClickRef.current) {
+            return;
+        }
         if (!hasOnValueChange) {
             return;
         }
@@ -258,6 +280,10 @@ const AreaChart = React.forwardRef((props, ref) => {
         }
     }
     function onCategoryClick(dataKey) {
+        // Ignore the click that immediately follows a drag-to-select.
+        if (suppressNextClickRef.current) {
+            return;
+        }
         if (!hasOnValueChange) {
             return;
         }
@@ -277,10 +303,140 @@ const AreaChart = React.forwardRef((props, ref) => {
         }
         setActiveDot(undefined);
     }
-    return (React.createElement("div", Object.assign({ ref: ref, className: cx("flex-1 w-full", className) }, other),
+    function getRowIndexFromChartState(chartState) {
+        const activeTooltipIndex = chartState.activeTooltipIndex;
+        const numericIndex = 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 = data.findIndex((row) => {
+                return row[index] === chartState.activeLabel;
+            });
+            return rowIndex >= 0 ? rowIndex : null;
+        }
+        return null;
+    }
+    function getBucketDateAtIndex(rowIndex) {
+        var _a;
+        const rawDate = (_a = data[rowIndex]) === null || _a === void 0 ? void 0 : _a[CHART_DATA_POINT_DATE_KEY];
+        return typeof rawDate === "number" ? new Date(rawDate) : null;
+    }
+    function handleRangeSelectMouseDown(chartState) {
+        var _a;
+        if (!hasOnTimeRangeSelect) {
+            return;
+        }
+        const rowIndex = getRowIndexFromChartState(chartState);
+        if (rowIndex === null) {
+            return;
+        }
+        const rowLabel = (_a = data[rowIndex]) === null || _a === void 0 ? void 0 : _a[index];
+        if (typeof rowLabel !== "string") {
+            return;
+        }
+        isRangeSelecting.current = true;
+        rangeSelectionStartIndexRef.current = rowIndex;
+        rangeSelectionEndIndexRef.current = rowIndex;
+        setRangeSelectionStart(rowLabel);
+        setRangeSelectionEnd(null);
+    }
+    function handleRangeSelectMouseMove(chartState, mouseEvent) {
+        var _a;
+        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 = getRowIndexFromChartState(chartState);
+        if (rowIndex === null) {
+            return;
+        }
+        const rowLabel = (_a = data[rowIndex]) === null || _a === void 0 ? void 0 : _a[index];
+        if (typeof rowLabel !== "string") {
+            return;
+        }
+        rangeSelectionEndIndexRef.current = rowIndex;
+        setRangeSelectionEnd(rowLabel);
+    }
+    function handleRangeSelectMouseUp() {
+        if (!isRangeSelecting.current) {
+            return;
+        }
+        isRangeSelecting.current = false;
+        const startIndex = rangeSelectionStartIndexRef.current;
+        const endIndex = 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 = Math.min(startIndex, endIndex);
+        const upperIndex = Math.max(startIndex, endIndex);
+        const startDate = getBucketDateAtIndex(lowerIndex);
+        const lastBucketDate = 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 = upperIndex > 0
+            ? getBucketDateAtIndex(upperIndex - 1)
+            : getBucketDateAtIndex(upperIndex + 1);
+        const bucketWidthInMs = adjacentDate
+            ? Math.abs(lastBucketDate.getTime() - adjacentDate.getTime())
+            : 0;
+        const endDate = new Date(lastBucketDate.getTime() + bucketWidthInMs);
+        onTimeRangeSelect(startDate, endDate);
+    }
+    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, { data: data, syncId: ((_a = props.syncid) === null || _a === void 0 ? void 0 : _a.toString()) || "", onClick: hasOnValueChange && (activeLegend || activeDot)
+            React.createElement(RechartsAreaChart, Object.assign({ data: data, syncId: ((_a = props.syncid) === null || _a === void 0 ? void 0 : _a.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 || onValueChange === void 0 ? void 0 : onValueChange(null);
@@ -294,7 +450,7 @@ const AreaChart = React.forwardRef((props, ref) => {
                     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);
@@ -403,10 +559,55 @@ const AreaChart = React.forwardRef((props, ref) => {
                 }), (_b = props.referenceLines) === null || _b === void 0 ? void 0 :
                 _b.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: () => {
+                                var _a, _b;
+                                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: () => {
+                                var _a, _b;
+                                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 })))));
                 }), (_c = props.formattedExemplarPoints) === null || _c === void 0 ? void 0 :
                 _c.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: () => {
                             var _a;
+                            // 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", 
@@ -415,7 +616,8 @@ const AreaChart = React.forwardRef((props, ref) => {
                              * 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))));
 });
 AreaChart.displayName = "AreaChart";
 export { AreaChart };