@oneuptime/common 14.0.8 → 14.0.9

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

@@ -24,7 +24,13 @@ import ExemplarPoint from "../../Types/ExemplarPoint";
 import FormattedExemplarPoint from "../Types/FormattedExemplarPoint";
 import FormattedReferenceRegion from "../Types/FormattedReferenceRegion";
 import FormattedTimeReferenceLine from "../Types/FormattedTimeReferenceLine";
-import { CHART_DATA_POINT_DATE_KEY } from "../Types/ChartDataPoint";
+import useChartRangeSelection, {
+  ChartBucketWindow,
+  ChartRangeSelection,
+  RangeSelectionChartState,
+  getChartBucketWindow,
+  getChartRowIndex,
+} from "../Utils/UseChartRangeSelection";
 import { AxisDomain } from "recharts/types/util/types";
 
 import { useOnWindowResize } from "../Utils/UseWindowOnResize";
@@ -40,7 +46,11 @@ import useChartAnnotations, {
   UseChartAnnotationsResult,
 } from "../Annotations/UseChartAnnotations";
 import { cx } from "../Utils/Cx";
-import { DOUBLE_CLICK_DISAMBIGUATION_MS } from "../Utils/DoubleClick";
+import {
+  DeferredChartClick,
+  useDeferredChartClick,
+} from "../Utils/DoubleClick";
+import useChartBucketsChange from "../Utils/UseChartBucketsChange";
 import { getYAxisDomain } from "../Utils/GetYAxisDomain";
 import { hasOnlyOneValueForKey } from "../Utils/HasOnlyOneValueForKey";
 import {
@@ -581,15 +591,6 @@ type BaseEventProps = {
 
 type AreaChartEventProps = BaseEventProps | null | undefined;
 
-/*
- * Subset of the recharts MouseHandlerDataParam passed to chart-level
- * mouse handlers — just the fields range selection needs.
- */
-type RangeSelectionChartState = {
-  activeTooltipIndex?: number | string | null | undefined;
-  activeLabel?: string | number | undefined;
-};
-
 interface AreaChartProps extends React.HTMLAttributes<HTMLDivElement> {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   data: Record<string, any>[];
@@ -719,41 +720,31 @@ const AreaChart: React.ForwardRefExoticComponent<
     const [activeLegend, setActiveLegend] = React.useState<string | undefined>(
       undefined,
     );
-    const hasOnTimeRangeSelect: boolean = Boolean(onTimeRangeSelect);
-    const [rangeSelectionStart, setRangeSelectionStart] = React.useState<
-      string | null
-    >(null);
-    const [rangeSelectionEnd, setRangeSelectionEnd] = React.useState<
-      string | null
-    >(null);
-    const isRangeSelecting: React.MutableRefObject<boolean> =
-      React.useRef<boolean>(false);
-    const rangeSelectionStartIndexRef: React.MutableRefObject<number | null> =
-      React.useRef<number | null>(null);
-    const rangeSelectionEndIndexRef: React.MutableRefObject<number | null> =
-      React.useRef<number | null>(null);
-    const suppressNextClickRef: React.MutableRefObject<boolean> =
-      React.useRef<boolean>(false);
-    const 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.
+     * Every click on the plot waits out the double-click window while a
+     * reset is on offer; see useDeferredChartClick.
+     */
+    const deferredClick: DeferredChartClick = useDeferredChartClick(
+      Boolean(onTimeRangeReset),
+    );
+    /*
+     * Drag-to-select a time window, and the double-click that undoes a
+     * zoom, dropping the clicks it was made of; see useChartRangeSelection.
      */
-    const pendingClickTimeoutRef: React.MutableRefObject<ReturnType<
-      typeof setTimeout
-    > | null> = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+    const rangeSelection: ChartRangeSelection = useChartRangeSelection({
+      data: data,
+      index: index,
+      onTimeRangeSelect: onTimeRangeSelect,
+      onTimeRangeReset: onTimeRangeReset
+        ? (): void => {
+            deferredClick.cancel();
+            onTimeRangeReset();
+          }
+        : undefined,
+    });
     const categoryColors: Map<string, ChartColorValue> =
       constructCategoryColors(categories, colors);
 
-    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.
@@ -768,6 +759,20 @@ const AreaChart: React.ForwardRefExoticComponent<
       );
     }, [data, index]);
 
+    /*
+     * A clicked dot names its row by index, and after a zoom, a reset or a
+     * new range that index holds another bucket: drop it, with the series
+     * highlight it brought. A series picked from the legend still exists,
+     * so it stays picked.
+     */
+    useChartBucketsChange(categoryLabels, (): void => {
+      if (activeDot) {
+        setActiveDot(undefined);
+        setActiveLegend(undefined);
+        onValueChange?.(null);
+      }
+    });
+
     const annotations: UseChartAnnotationsResult = useChartAnnotations({
       formattedTimeReferenceLines,
       formattedReferenceRegions,
@@ -775,9 +780,7 @@ const AreaChart: React.ForwardRefExoticComponent<
       axisPaddingPx: paddingValue,
       scaleKind: "point",
       hasTopLegend: showLegend,
-      isClickSuppressed: (): boolean => {
-        return suppressNextClickRef.current;
-      },
+      isClickSuppressed: rangeSelection.isClickSuppressed,
     });
 
     const yAxisDomain: (number | "auto")[] = getYAxisDomain(
@@ -797,13 +800,20 @@ const AreaChart: React.ForwardRefExoticComponent<
       event.stopPropagation();
 
       // Ignore the click that immediately follows a drag-to-select.
-      if (suppressNextClickRef.current) {
+      if (rangeSelection.isClickSuppressed()) {
         return;
       }
 
       if (!hasOnValueChange) {
         return;
       }
+      deferredClick.run((): void => {
+        toggleDot(itemData);
+      });
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function toggleDot(itemData: any): void {
       if (
         (itemData.index === activeDot?.index &&
           itemData.dataKey === activeDot?.dataKey) ||
@@ -830,7 +840,7 @@ const AreaChart: React.ForwardRefExoticComponent<
 
     function onCategoryClick(dataKey: string): void {
       // Ignore the click that immediately follows a drag-to-select.
-      if (suppressNextClickRef.current) {
+      if (rangeSelection.isClickSuppressed()) {
         return;
       }
       if (!hasOnValueChange) {
@@ -854,151 +864,6 @@ const AreaChart: React.ForwardRefExoticComponent<
       setActiveDot(undefined);
     }
 
-    function getRowIndexFromChartState(
-      chartState: RangeSelectionChartState,
-    ): number | null {
-      const activeTooltipIndex: number | string | null | undefined =
-        chartState.activeTooltipIndex;
-      const numericIndex: number =
-        typeof activeTooltipIndex === "number"
-          ? activeTooltipIndex
-          : Number(activeTooltipIndex);
-      if (
-        activeTooltipIndex !== undefined &&
-        activeTooltipIndex !== null &&
-        Number.isInteger(numericIndex) &&
-        numericIndex >= 0 &&
-        numericIndex < data.length
-      ) {
-        return numericIndex;
-      }
-      // Fall back to matching activeLabel against the row labels.
-      if (chartState.activeLabel !== undefined) {
-        const rowIndex: number = data.findIndex(
-          (row: Record<string, unknown>) => {
-            return row[index] === chartState.activeLabel;
-          },
-        );
-        return rowIndex >= 0 ? rowIndex : null;
-      }
-      return null;
-    }
-
-    function getBucketDateAtIndex(rowIndex: number): Date | null {
-      const rawDate: unknown = data[rowIndex]?.[CHART_DATA_POINT_DATE_KEY];
-      return typeof rawDate === "number" ? new Date(rawDate) : null;
-    }
-
-    function handleRangeSelectMouseDown(
-      chartState: RangeSelectionChartState,
-    ): void {
-      if (!hasOnTimeRangeSelect) {
-        return;
-      }
-      const rowIndex: number | null = getRowIndexFromChartState(chartState);
-      if (rowIndex === null) {
-        return;
-      }
-      const rowLabel: unknown = data[rowIndex]?.[index];
-      if (typeof rowLabel !== "string") {
-        return;
-      }
-      isRangeSelecting.current = true;
-      rangeSelectionStartIndexRef.current = rowIndex;
-      rangeSelectionEndIndexRef.current = rowIndex;
-      setRangeSelectionStart(rowLabel);
-      setRangeSelectionEnd(null);
-    }
-
-    function handleRangeSelectMouseMove(
-      chartState: RangeSelectionChartState,
-      mouseEvent: React.MouseEvent<SVGGraphicsElement>,
-    ): void {
-      if (!isRangeSelecting.current) {
-        return;
-      }
-      // Button was released outside the chart — abandon the selection.
-      if (mouseEvent.buttons === 0) {
-        isRangeSelecting.current = false;
-        rangeSelectionStartIndexRef.current = null;
-        rangeSelectionEndIndexRef.current = null;
-        setRangeSelectionStart(null);
-        setRangeSelectionEnd(null);
-        return;
-      }
-      const rowIndex: number | null = getRowIndexFromChartState(chartState);
-      if (rowIndex === null) {
-        return;
-      }
-      const rowLabel: unknown = data[rowIndex]?.[index];
-      if (typeof rowLabel !== "string") {
-        return;
-      }
-      rangeSelectionEndIndexRef.current = rowIndex;
-      setRangeSelectionEnd(rowLabel);
-    }
-
-    function handleRangeSelectMouseUp(): void {
-      if (!isRangeSelecting.current) {
-        return;
-      }
-      isRangeSelecting.current = false;
-
-      const startIndex: number | null = rangeSelectionStartIndexRef.current;
-      const endIndex: number | null = rangeSelectionEndIndexRef.current;
-      rangeSelectionStartIndexRef.current = null;
-      rangeSelectionEndIndexRef.current = null;
-      setRangeSelectionStart(null);
-      setRangeSelectionEnd(null);
-
-      /*
-       * A plain click (pointer never left the starting bucket) must keep
-       * behaving exactly as before — only a real drag selects a range.
-       */
-      if (startIndex === null || endIndex === null || startIndex === endIndex) {
-        return;
-      }
-
-      /*
-       * The browser fires a click right after mouseup; swallow it so a
-       * drag doesn't also toggle legend/dot selection. Cleared on a
-       * timeout so a never-delivered click can't suppress a later one.
-       */
-      suppressNextClickRef.current = true;
-      setTimeout(() => {
-        suppressNextClickRef.current = false;
-      }, 0);
-
-      if (!onTimeRangeSelect) {
-        return;
-      }
-
-      const lowerIndex: number = Math.min(startIndex, endIndex);
-      const upperIndex: number = Math.max(startIndex, endIndex);
-      const startDate: Date | null = getBucketDateAtIndex(lowerIndex);
-      const lastBucketDate: Date | null = getBucketDateAtIndex(upperIndex);
-      if (!startDate || !lastBucketDate) {
-        return;
-      }
-
-      /*
-       * Cover the full final bucket: its end is its start plus one
-       * bucket width, derived from adjacent row dates.
-       */
-      const adjacentDate: Date | null =
-        upperIndex > 0
-          ? getBucketDateAtIndex(upperIndex - 1)
-          : getBucketDateAtIndex(upperIndex + 1);
-      const bucketWidthInMs: number = adjacentDate
-        ? Math.abs(lastBucketDate.getTime() - adjacentDate.getTime())
-        : 0;
-      const endDate: Date = new Date(
-        lastBucketDate.getTime() + bucketWidthInMs,
-      );
-
-      onTimeRangeSelect(startDate, endDate);
-    }
-
     /*
      * The plain-click path, split out so it can either run inline (no
      * reset handler) or be deferred behind the double-click window.
@@ -1018,28 +883,25 @@ const AreaChart: React.ForwardRefExoticComponent<
       if (!onBucketClick) {
         return;
       }
-      const rowIndex: number | null = getRowIndexFromChartState(chartState);
+      const rowIndex: number | null = getChartRowIndex(data, index, 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;
+      const bucket: ChartBucketWindow | null = getChartBucketWindow(
+        data,
+        rowIndex,
+        rowIndex,
+      );
+      if (!bucket) {
+        return;
+      }
       onBucketClick(
-        bucketStart,
-        new Date(bucketStart.getTime() + clickedBucketWidthInMs),
+        bucket.start,
+        bucket.end,
         (data[rowIndex] || {}) as Record<string, number | string>,
       );
     }
@@ -1049,7 +911,7 @@ const AreaChart: React.ForwardRefExoticComponent<
         ref={ref}
         className={cx(
           "flex-1 w-full",
-          hasOnTimeRangeSelect && "cursor-crosshair",
+          rangeSelection.canSelect && "cursor-crosshair select-none",
           className,
         )}
         {...other}
@@ -1070,47 +932,21 @@ const AreaChart: React.ForwardRefExoticComponent<
                * accidentally sync with every other one.
                */
               {...(props.syncid ? { syncId: props.syncid.toString() } : {})}
-              {...(hasOnTimeRangeSelect
-                ? {
-                    onMouseDown: handleRangeSelectMouseDown,
-                    onMouseMove: handleRangeSelectMouseMove,
-                    onMouseUp: handleRangeSelectMouseUp,
-                  }
-                : {})}
+              {...rangeSelection.chartEventProps}
               onClick={(chartState: RangeSelectionChartState) => {
                 // Ignore the click that follows a drag-to-select.
-                if (suppressNextClickRef.current) {
-                  return;
-                }
-                if (!hasOnTimeRangeReset) {
-                  handleChartClick(chartState);
+                if (rangeSelection.isClickSuppressed()) {
                   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.
+                 * With reset on, both clicks of a double-click arrive
+                 * before dblclick does, and neither may pin a bucket: the
+                 * second click re-arms the wait, dblclick drops it.
                  */
-                if (pendingClickTimeoutRef.current !== null) {
-                  clearTimeout(pendingClickTimeoutRef.current);
-                }
-                pendingClickTimeoutRef.current = setTimeout(() => {
-                  pendingClickTimeoutRef.current = null;
+                deferredClick.run((): void => {
                   handleChartClick(chartState);
-                }, DOUBLE_CLICK_DISAMBIGUATION_MS);
+                });
               }}
-              {...(hasOnTimeRangeReset
-                ? {
-                    onDoubleClick: () => {
-                      if (pendingClickTimeoutRef.current !== null) {
-                        clearTimeout(pendingClickTimeoutRef.current);
-                        pendingClickTimeoutRef.current = null;
-                      }
-                      onTimeRangeReset?.();
-                    },
-                  }
-                : {})}
               margin={{
                 bottom: (xAxisLabel
                   ? 40
@@ -1503,7 +1339,7 @@ const AreaChart: React.ForwardRefExoticComponent<
                         // Never let an exemplar click also pin a bucket.
                         stopChartEventPropagation(...args);
                         // Ignore the click that follows a drag-to-select.
-                        if (suppressNextClickRef.current) {
+                        if (rangeSelection.isClickSuppressed()) {
                           return;
                         }
                         props.onExemplarClick?.(exemplar.original);
@@ -1525,10 +1361,11 @@ const AreaChart: React.ForwardRefExoticComponent<
                 },
               )}
               {/* Live drag-to-select highlight */}
-              {rangeSelectionStart && rangeSelectionEnd ? (
+              {rangeSelection.selectionStartLabel &&
+              rangeSelection.selectionEndLabel ? (
                 <ReferenceArea
-                  x1={rangeSelectionStart}
-                  x2={rangeSelectionEnd}
+                  x1={rangeSelection.selectionStartLabel}
+                  x2={rangeSelection.selectionEndLabel}
                   fill="rgba(99,102,241,0.12)"
                   stroke="rgba(99,102,241,0.5)"
                   strokeWidth={1}

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

@@ -11,6 +11,7 @@ import {
   Label,
   BarChart as RechartsBarChart,
   Legend as RechartsLegend,
+  ReferenceArea,
   ReferenceLine,
   ResponsiveContainer,
   Tooltip,
@@ -18,6 +19,14 @@ import {
   YAxis,
 } from "recharts";
 import ChartReferenceLineProps from "../../Types/ReferenceLineProps";
+import useChartRangeSelection, {
+  ChartRangeSelection,
+} from "../Utils/UseChartRangeSelection";
+import {
+  DeferredChartClick,
+  useDeferredChartClick,
+} from "../Utils/DoubleClick";
+import useChartBucketsChange from "../Utils/UseChartBucketsChange";
 import FormattedReferenceRegion from "../Types/FormattedReferenceRegion";
 import FormattedTimeReferenceLine from "../Types/FormattedTimeReferenceLine";
 import type { AxisDomain } from "recharts/types/util/types";
@@ -693,9 +702,17 @@ interface BarChartProps extends React.HTMLAttributes<HTMLDivElement> {
   formattedTimeReferenceLines?: Array<FormattedTimeReferenceLine> | undefined;
   formattedReferenceRegions?: Array<FormattedReferenceRegion> | undefined;
   /**
-   * Double-click on the plot surface. Bar charts have no drag-to-select of
-   * their own, but they sit on the same dashboards as line/area panels and
-   * must offer the same way out of a board-wide zoom.
+   * Drag across bars to select the time window they cover: calls back with
+   * [start of the first bar, end of the last bar), the same window the
+   * line and area charts hand out. A press and release on one bar is a
+   * plain click and keeps its old meaning. Only a horizontal chart whose
+   * rows carry their bucket start (CHART_DATA_POINT_DATE_KEY, as the
+   * time-series wrapper's rows do) can select; a vertical chart ignores it.
+   */
+  onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
+  /**
+   * Double-click on the plot surface: the way out of whatever
+   * drag-to-select produced, on this chart or a neighbouring one.
    */
   onTimeRangeReset?: (() => void) | undefined;
 }
@@ -741,6 +758,7 @@ const BarChart: React.ForwardRefExoticComponent<
       customTooltip,
       formattedTimeReferenceLines,
       formattedReferenceRegions,
+      onTimeRangeSelect,
       onTimeRangeReset,
       ...other
     } = props;
@@ -754,6 +772,33 @@ const BarChart: React.ForwardRefExoticComponent<
     const categoryColors: Map<string, ChartColorValue> =
       constructCategoryColors(categories, colors);
 
+    /*
+     * Every click on the plot waits out the double-click window while a
+     * reset is on offer; see useDeferredChartClick.
+     */
+    const deferredClick: DeferredChartClick = useDeferredChartClick(
+      Boolean(onTimeRangeReset),
+    );
+
+    /*
+     * Drag-to-select a time window, and the double-click that undoes a
+     * zoom, dropping the clicks it was made of; see useChartRangeSelection.
+     * A drag needs the category axis to be the time axis, which is only
+     * true in horizontal layout; the double-click works in either.
+     */
+    const rangeSelection: ChartRangeSelection = useChartRangeSelection({
+      data: data,
+      index: index,
+      onTimeRangeSelect: onTimeRangeSelect,
+      enabled: layout !== "vertical",
+      onTimeRangeReset: onTimeRangeReset
+        ? (): void => {
+            deferredClick.cancel();
+            onTimeRangeReset();
+          }
+        : undefined,
+    });
+
     /*
      * Annotations are drawn onto the categorical axis, so the layer needs
      * the same x values recharts is drawing — not the source dates. A
@@ -779,10 +824,23 @@ const BarChart: React.ForwardRefExoticComponent<
       axisPaddingPx: paddingValue,
       scaleKind: "band",
       hasTopLegend: showLegend,
+      isClickSuppressed: rangeSelection.isClickSuppressed,
     });
     const [activeBar, setActiveBar] = React.useState<any | undefined>(
       undefined,
     );
+    /*
+     * A clicked bar is kept as a copy of its row. After a zoom, a reset or
+     * a new range no bar matches it any more, and every bar drew dimmed
+     * until the reader clicked the empty plot.
+     */
+    useChartBucketsChange(categoryLabels, (): void => {
+      if (activeBar) {
+        setActiveBar(undefined);
+        setActiveLegend(undefined);
+        onValueChange?.(null);
+      }
+    });
     const yAxisDomain: AxisDomain = getYAxisDomain(
       autoMinValue,
       minValue,
@@ -804,30 +862,47 @@ const BarChart: React.ForwardRefExoticComponent<
       React.useCallback(
         (data: any, _: any, event: React.MouseEvent): void => {
           event.stopPropagation();
-          if (!onValueChange) {
+          // Ignore the click that immediately follows a drag-to-select.
+          if (rangeSelection.isClickSuppressed()) {
             return;
           }
-          if (deepEqual(activeBar, { ...data.payload, value: data.value })) {
-            setActiveLegend(undefined);
-            setActiveBar(undefined);
-            onValueChange?.(null);
-          } else {
-            setActiveLegend(data.tooltipPayload?.[0]?.dataKey);
-            setActiveBar({
-              ...data.payload,
-              value: data.value,
-            });
-            onValueChange?.({
-              eventType: "bar",
-              categoryClicked: data.tooltipPayload?.[0]?.dataKey,
-              ...data.payload,
-            });
+          if (!onValueChange) {
+            return;
           }
+          deferredClick.run((): void => {
+            if (deepEqual(activeBar, { ...data.payload, value: data.value })) {
+              setActiveLegend(undefined);
+              setActiveBar(undefined);
+              onValueChange?.(null);
+            } else {
+              setActiveLegend(data.tooltipPayload?.[0]?.dataKey);
+              setActiveBar({
+                ...data.payload,
+                value: data.value,
+              });
+              onValueChange?.({
+                eventType: "bar",
+                categoryClicked: data.tooltipPayload?.[0]?.dataKey,
+                ...data.payload,
+              });
+            }
+          });
         },
-        [activeBar, onValueChange, setActiveLegend, setActiveBar],
+        [
+          activeBar,
+          onValueChange,
+          setActiveLegend,
+          setActiveBar,
+          deferredClick,
+          rangeSelection.isClickSuppressed,
+        ],
       );
 
     function onCategoryClick(dataKey: string): void {
+      // Ignore the click that immediately follows a drag-to-select.
+      if (rangeSelection.isClickSuppressed()) {
+        return;
+      }
       if (!hasOnValueChange) {
         return;
       }
@@ -851,15 +926,25 @@ const BarChart: React.ForwardRefExoticComponent<
     };
 
     const handleChartClick: () => void = (): void => {
-      setActiveBar(undefined);
-      setActiveLegend(undefined);
-      onValueChange?.(null);
+      // Ignore the click that immediately follows a drag-to-select.
+      if (rangeSelection.isClickSuppressed()) {
+        return;
+      }
+      deferredClick.run((): void => {
+        setActiveBar(undefined);
+        setActiveLegend(undefined);
+        onValueChange?.(null);
+      });
     };
 
     return (
       <div
         ref={forwardedRef}
-        className={cx("flex-1 w-full", className)}
+        className={cx(
+          "flex-1 w-full",
+          rangeSelection.canSelect && "cursor-crosshair select-none",
+          className,
+        )}
         data-tremor-id="tremor-raw"
         {...other}
       >
@@ -879,18 +964,12 @@ const BarChart: React.ForwardRefExoticComponent<
                * accidentally sync with every other one.
                */
               {...(props.syncid ? { syncId: props.syncid.toString() } : {})}
+              {...rangeSelection.chartEventProps}
               {...(hasOnValueChange && (activeLegend || activeBar)
                 ? {
                     onClick: handleChartClick,
                   }
                 : {})}
-              {...(onTimeRangeReset
-                ? {
-                    onDoubleClick: () => {
-                      onTimeRangeReset();
-                    },
-                  }
-                : {})}
               margin={{
                 bottom: xAxisLabel ? 40 : showXAxis ? 24 : 8,
                 left: yAxisLabel ? 20 : 0,
@@ -1172,6 +1251,18 @@ const BarChart: React.ForwardRefExoticComponent<
                * lives in the chip's hover card.
                */}
               {annotations.layer}
+              {/* Live drag-to-select highlight */}
+              {rangeSelection.selectionStartLabel &&
+              rangeSelection.selectionEndLabel ? (
+                <ReferenceArea
+                  x1={rangeSelection.selectionStartLabel}
+                  x2={rangeSelection.selectionEndLabel}
+                  fill="rgba(99,102,241,0.12)"
+                  stroke="rgba(99,102,241,0.5)"
+                  strokeWidth={1}
+                  radius={2}
+                />
+              ) : null}
             </RechartsBarChart>
           </ResponsiveContainer>
           {annotations.overlay}