@mui/x-charts 8.14.0 → 8.15.0

package/internals/plugins/featurePlugins/useChartBrush/useChartBrush.selectors.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorIsBrushSelectionActive = exports.selectorIsBrushEnabled = exports.selectorBrushState = exports.selectorBrushStartY = exports.selectorBrushStartX = exports.selectorBrushStart = exports.selectorBrushShouldPreventTooltip = exports.selectorBrushShouldPreventAxisHighlight = exports.selectorBrushCurrentY = exports.selectorBrushCurrentX = exports.selectorBrushCurrent = exports.selectorBrushConfigZoom = exports.selectorBrushConfigNoZoom = exports.selectorBrushConfig = exports.selectorBrush = void 0;
+var _selectors = require("../../utils/selectors");
+var _useChartCartesianAxis = require("../useChartCartesianAxis");
+var _useChartSeries = require("../../corePlugins/useChartSeries");
+const selectorBrush = state => state.brush;
+exports.selectorBrush = selectorBrush;
+const selectorBrushStart = exports.selectorBrushStart = (0, _selectors.createSelector)([selectorBrush], brush => brush?.start);
+const selectorBrushCurrent = exports.selectorBrushCurrent = (0, _selectors.createSelector)([selectorBrush], brush => brush?.current);
+const selectorBrushStartX = exports.selectorBrushStartX = (0, _selectors.createSelector)([selectorBrush], brush => brush?.start?.x ?? null);
+const selectorBrushStartY = exports.selectorBrushStartY = (0, _selectors.createSelector)([selectorBrush], brush => brush?.start?.y ?? null);
+const selectorBrushCurrentX = exports.selectorBrushCurrentX = (0, _selectors.createSelector)([selectorBrush], brush => brush?.current?.x ?? null);
+const selectorBrushCurrentY = exports.selectorBrushCurrentY = (0, _selectors.createSelector)([selectorBrush], brush => brush?.current?.y ?? null);
+const selectorBrushState = exports.selectorBrushState = (0, _selectors.createSelector)([selectorBrushStartX, selectorBrushStartY, selectorBrushCurrentX, selectorBrushCurrentY], (startX, startY, currentX, currentY) => {
+  if (startX === null || startY === null || currentX === null || currentY === null) {
+    return null;
+  }
+  return {
+    start: {
+      x: startX,
+      y: startY
+    },
+    current: {
+      x: currentX,
+      y: currentY
+    }
+  };
+});
+const selectorBrushConfigNoZoom = exports.selectorBrushConfigNoZoom = (0, _selectors.createSelector)([_useChartSeries.selectorChartSeriesProcessed], series => {
+  let hasHorizontal = false;
+  let isBothDirections = false;
+  if (series) {
+    Object.entries(series).forEach(([seriesType, seriesData]) => {
+      if (Object.values(seriesData.series).some(s => s.layout === 'horizontal')) {
+        hasHorizontal = true;
+      }
+      if (seriesType === 'scatter' && seriesData.seriesOrder.length > 0) {
+        isBothDirections = true;
+      }
+    });
+  }
+  if (isBothDirections) {
+    return 'xy';
+  }
+  if (hasHorizontal) {
+    return 'y';
+  }
+  return 'x';
+});
+const selectorBrushConfigZoom = exports.selectorBrushConfigZoom = (0, _selectors.createSelector)([_useChartCartesianAxis.selectorChartZoomOptionsLookup], optionsLookup => {
+  let hasX = false;
+  let hasY = false;
+  Object.values(optionsLookup).forEach(options => {
+    if (options.axisDirection === 'y') {
+      hasY = true;
+    }
+    if (options.axisDirection === 'x') {
+      hasX = true;
+    }
+  });
+  if (hasX && hasY) {
+    return 'xy';
+  }
+  if (hasY) {
+    return 'y';
+  }
+  if (hasX) {
+    return 'x';
+  }
+  return null;
+});
+const selectorBrushConfig = exports.selectorBrushConfig = (0, _selectors.createSelector)([selectorBrushConfigNoZoom, selectorBrushConfigZoom], (configNoZoom, configZoom) => configZoom ?? configNoZoom);
+const selectorIsBrushEnabled = exports.selectorIsBrushEnabled = (0, _selectors.createSelector)([selectorBrush], brush => brush?.enabled);
+const selectorIsBrushSelectionActive = exports.selectorIsBrushSelectionActive = (0, _selectors.createSelector)([selectorBrush], brush => {
+  return brush?.enabled && brush?.start !== null && brush?.current !== null;
+});
+const selectorBrushShouldPreventAxisHighlight = exports.selectorBrushShouldPreventAxisHighlight = (0, _selectors.createSelector)([selectorBrush, selectorIsBrushSelectionActive], (brush, isBrushSelectionActive) => isBrushSelectionActive && brush?.preventHighlight);
+const selectorBrushShouldPreventTooltip = exports.selectorBrushShouldPreventTooltip = (0, _selectors.createSelector)([selectorBrush, selectorIsBrushSelectionActive], (brush, isBrushSelectionActive) => isBrushSelectionActive && brush?.preventTooltip);

package/internals/plugins/featurePlugins/useChartBrush/useChartBrush.types.d.ts

@@ -0,0 +1,72 @@
+import { ChartPluginSignature } from "../../models/index.js";
+export type Point = {
+  x: number;
+  y: number;
+};
+export interface UseChartBrushState {
+  brush: {
+    /**
+     * Whether the brush interaction is enabled.
+     */
+    enabled: boolean;
+    /**
+     * Whether to prevent tooltip from showing during brush interaction.
+     */
+    preventTooltip: boolean;
+    /**
+     * Whether to prevent highlighting during brush interaction.
+     */
+    preventHighlight: boolean;
+    /**
+     * The starting coordinate of the brush interaction.
+     */
+    start: Point | null;
+    /**
+     * The current coordinate of the brush interaction.
+     */
+    current: Point | null;
+  };
+}
+export interface UseChartBrushInstance {
+  /**
+   * Set the brush coordinates.
+   * @param {Point | null} point The point coordinate, if start value is null, it will set both start and current to this value.
+   */
+  setBrushCoordinates: (point: Point | null) => void;
+  /**
+   * Clear the brush coordinates.
+   */
+  clearBrush: () => void;
+}
+export interface BrushConfig {
+  /**
+   * Whether the brush interaction is enabled.
+   * @default false
+   */
+  enabled?: boolean;
+  /**
+   * Whether to prevent tooltip from showing during brush interaction.
+   * @default false
+   */
+  preventTooltip?: boolean;
+  /**
+   * Whether to prevent highlighting during brush interaction.
+   * @default false
+   */
+  preventHighlight?: boolean;
+}
+export interface UseChartBrushParameters {
+  /**
+   * Configuration for the brush interaction.
+   */
+  brushConfig?: BrushConfig;
+}
+export type UseChartBrushDefaultizedParameters = {
+  brushConfig: Required<BrushConfig>;
+};
+export type UseChartBrushSignature = ChartPluginSignature<{
+  params: UseChartBrushParameters;
+  defaultizedParams: UseChartBrushDefaultizedParameters;
+  state: UseChartBrushState;
+  instance: UseChartBrushInstance;
+}>;

package/internals/plugins/featurePlugins/useChartBrush/useChartBrush.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/internals/plugins/featurePlugins/useChartCartesianAxis/createZoomLookup.js

@@ -9,9 +9,10 @@ const createZoomLookup = axisDirection => (axes = []) => axes.reduce((acc, v) =>
   // @ts-ignore
   const {
     zoom,
-    id: axisId
+    id: axisId,
+    reverse
   } = v;
-  const defaultizedZoom = (0, _defaultizeZoom.defaultizeZoom)(zoom, axisId, axisDirection);
+  const defaultizedZoom = (0, _defaultizeZoom.defaultizeZoom)(zoom, axisId, axisDirection, reverse);
   if (defaultizedZoom) {
     acc[axisId] = defaultizedZoom;
   }

package/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeAxis.js

@@ -33,7 +33,7 @@ function defaultizeXAxis(inAxes, dataset) {
       id,
       position,
       height: axisConfig.height ?? defaultHeight,
-      zoom: (0, _defaultizeZoom.defaultizeZoom)(axisConfig.zoom, id, 'x')
+      zoom: (0, _defaultizeZoom.defaultizeZoom)(axisConfig.zoom, id, 'x', axisConfig.reverse)
     });
 
     // Increment the offset for the next axis
@@ -83,7 +83,7 @@ function defaultizeYAxis(inAxes, dataset) {
       id,
       position,
       width: axisConfig.width ?? defaultWidth,
-      zoom: (0, _defaultizeZoom.defaultizeZoom)(axisConfig.zoom, id, 'y')
+      zoom: (0, _defaultizeZoom.defaultizeZoom)(axisConfig.zoom, id, 'y', axisConfig.reverse)
     });
 
     // Increment the offset for the next axis

package/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.d.ts

@@ -9,6 +9,7 @@ export declare const defaultZoomOptions: {
   maxSpan: number;
   panning: true;
   filterMode: "keep";
+  reverse: false;
   slider: {
     enabled: false;
     preview: false;
@@ -16,4 +17,4 @@ export declare const defaultZoomOptions: {
     showTooltip: import("./zoom.types.js").ZoomSliderShowTooltip;
   };
 };
-export declare const defaultizeZoom: (zoom: boolean | ZoomOptions | undefined, axisId: AxisId, axisDirection: "x" | "y") => DefaultizedZoomOptions | undefined;
+export declare const defaultizeZoom: (zoom: boolean | ZoomOptions | undefined, axisId: AxisId, axisDirection: "x" | "y", reverse?: boolean) => DefaultizedZoomOptions | undefined;

package/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.js

@@ -15,6 +15,7 @@ const defaultZoomOptions = exports.defaultZoomOptions = {
   maxSpan: 100,
   panning: true,
   filterMode: 'keep',
+  reverse: false,
   slider: {
     enabled: false,
     preview: false,
@@ -22,7 +23,7 @@ const defaultZoomOptions = exports.defaultZoomOptions = {
     showTooltip: _constants.DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP
   }
 };
-const defaultizeZoom = (zoom, axisId, axisDirection) => {
+const defaultizeZoom = (zoom, axisId, axisDirection, reverse) => {
   if (!zoom) {
     return undefined;
   }
@@ -30,12 +31,16 @@ const defaultizeZoom = (zoom, axisId, axisDirection) => {
     return (0, _extends2.default)({
       axisId,
       axisDirection
-    }, defaultZoomOptions);
+    }, defaultZoomOptions, {
+      reverse: reverse ?? false
+    });
   }
   return (0, _extends2.default)({
     axisId,
     axisDirection
-  }, defaultZoomOptions, zoom, {
+  }, defaultZoomOptions, {
+    reverse: reverse ?? false
+  }, zoom, {
     slider: (0, _extends2.default)({}, defaultZoomOptions.slider, {
       size: zoom.slider?.preview ?? defaultZoomOptions.slider.preview ? _constants.DEFAULT_ZOOM_SLIDER_PREVIEW_SIZE : _constants.DEFAULT_ZOOM_SLIDER_SIZE
     }, zoom.slider)

package/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.d.ts

@@ -1,4 +1,4 @@
-import { ComputedAxis } from "../../../../models/axis.js";
+import { ComputedAxis, D3Scale } from "../../../../models/axis.js";
 /**
  * For a pointer coordinate, this function returns the dataIndex associated.
  * Returns `-1` if no dataIndex matches.
@@ -8,4 +8,8 @@ export declare function getAxisIndex(axisConfig: ComputedAxis, pointerValue: num
  * For a pointer coordinate, this function returns the value associated.
  * Returns `null` if the coordinate has no value associated.
  */
-export declare function getAxisValue(axisConfig: ComputedAxis, pointerValue: number, dataIndex: number | null): number | Date | null;
+export declare function getAxisValue<Domain extends {
+  toString(): string;
+} = {
+  toString(): string;
+}, Range = number, Output = number>(scale: D3Scale<Domain, Range, Output>, axisData: readonly any[] | undefined, pointerValue: number, dataIndex: number | null): number | Date | null;

package/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js

@@ -53,14 +53,11 @@ function getAxisIndex(axisConfig, pointerValue) {
  * For a pointer coordinate, this function returns the value associated.
  * Returns `null` if the coordinate has no value associated.
  */
-function getAxisValue(axisConfig, pointerValue, dataIndex) {
-  const {
-    scale,
-    data: axisData
-  } = axisConfig;
+function getAxisValue(scale, axisData, pointerValue, dataIndex) {
   if (!(0, _scaleGuards.isOrdinalScale)(scale)) {
     if (dataIndex === null) {
-      return scale.invert(pointerValue);
+      const invertedValue = scale.invert(pointerValue);
+      return Number.isNaN(invertedValue) ? null : invertedValue;
     }
     return axisData[dataIndex];
   }

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.d.ts

@@ -5,6 +5,7 @@ import type { UseChartSeriesSignature } from "../../corePlugins/useChartSeries/i
 import type { ZoomData, ZoomOptions, ZoomSliderShowTooltip } from "./zoom.types.js";
 import type { UseChartInteractionSignature } from "../useChartInteraction/index.js";
 import type { ChartsAxisProps } from "../../../../ChartsAxis/index.js";
+import type { UseChartBrushSignature } from "../useChartBrush/index.js";
 /**
  * The axes' configuration after computing.
  * An axis in this state already contains a scale function and all the necessary properties to be rendered.
@@ -67,6 +68,7 @@ export interface DefaultizedZoomOptions extends Required<Omit<ZoomOptions, 'slid
   axisId: AxisId;
   axisDirection: 'x' | 'y';
   slider: DefaultedZoomSliderOptions;
+  reverse: boolean;
 }
 export interface UseChartCartesianAxisState {
   /**
@@ -94,5 +96,5 @@ export type UseChartCartesianAxisSignature<SeriesType extends ChartSeriesType =
   defaultizedParams: UseChartCartesianAxisDefaultizedParameters;
   state: UseChartCartesianAxisState;
   dependencies: [UseChartSeriesSignature<SeriesType>];
-  optionalDependencies: [UseChartInteractionSignature];
+  optionalDependencies: [UseChartInteractionSignature, UseChartBrushSignature];
 }>;

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.d.ts

@@ -1,6 +1,8 @@
 import { NumberValue } from '@mui/x-charts-vendor/d3-scale';
 import { ZoomData } from "./zoom.types.js";
 import { AxisId, D3Scale } from "../../../../models/axis.js";
+import { SeriesId } from "../../../../models/seriesType/common.js";
+import { Flatbush } from "../../../Flatbush.js";
 export declare const createZoomMap: (zoom: readonly ZoomData[]) => Map<AxisId, ZoomData>;
 /**
  * Following selectors are not exported because they exist in the MIT chart only to ba able to reuse the Zoom state from the pro.
@@ -15,6 +17,7 @@ export declare const selectorChartZoomMap: import("reselect").Selector<import(".
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, Map<AxisId, ZoomData> | undefined, []>;
+export declare const selectorChartAxisZoomData: import("reselect").Selector<any, ZoomData | undefined, [axisId: AxisId]>;
 export declare const selectorChartZoomOptionsLookup: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
@@ -222,4 +225,20 @@ export declare const selectorChartRawAxis: import("reselect").Selector<any, ({
 } & import("../../../../hooks/useTicks.js").TickParams & import("../../../index.js").AxisConfigExtension & {
   zoom: import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions | undefined;
 }) | undefined, [axisId: AxisId]>;
+export declare const selectorChartDefaultXAxisId: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, AxisId, []>;
+export declare const selectorChartDefaultYAxisId: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, AxisId, []>;
+export declare const selectorChartSeriesEmptyFlatbushMap: () => Map<SeriesId, Flatbush>;
+export declare const selectorChartSeriesFlatbushMap: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState>, Map<SeriesId, Flatbush>, any[]>;
 export {};

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.js

@@ -4,8 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorDefaultYAxisTickNumber = exports.selectorDefaultXAxisTickNumber = exports.selectorChartZoomOptionsLookup = exports.selectorChartZoomMap = exports.selectorChartZoomIsInteracting = exports.selectorChartZoomAxisFilters = exports.selectorChartYScales = exports.selectorChartYDomains = exports.selectorChartYAxis = exports.selectorChartXScales = exports.selectorChartXDomains = exports.selectorChartXAxis = exports.selectorChartRawAxis = exports.selectorChartNormalizedYScales = exports.selectorChartNormalizedXScales = exports.selectorChartFilteredYDomains = exports.selectorChartFilteredXDomains = exports.selectorChartAxisZoomOptionsLookup = exports.selectorChartAxis = exports.createZoomMap = void 0;
+exports.selectorDefaultYAxisTickNumber = exports.selectorDefaultXAxisTickNumber = exports.selectorChartZoomOptionsLookup = exports.selectorChartZoomMap = exports.selectorChartZoomIsInteracting = exports.selectorChartZoomAxisFilters = exports.selectorChartYScales = exports.selectorChartYDomains = exports.selectorChartYAxis = exports.selectorChartXScales = exports.selectorChartXDomains = exports.selectorChartXAxis = exports.selectorChartSeriesFlatbushMap = exports.selectorChartSeriesEmptyFlatbushMap = exports.selectorChartRawAxis = exports.selectorChartNormalizedYScales = exports.selectorChartNormalizedXScales = exports.selectorChartFilteredYDomains = exports.selectorChartFilteredXDomains = exports.selectorChartDefaultYAxisId = exports.selectorChartDefaultXAxisId = exports.selectorChartAxisZoomOptionsLookup = exports.selectorChartAxisZoomData = exports.selectorChartAxis = exports.createZoomMap = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _useChartDimensions = require("../../corePlugins/useChartDimensions");
 var _useChartSeries = require("../../corePlugins/useChartSeries");
 var _selectors = require("../../utils/selectors");
@@ -21,6 +22,7 @@ var _scaleGuards = require("../../../scaleGuards");
 var _zoom = require("./zoom");
 var _getAxisExtrema = require("./getAxisExtrema");
 var _domain = require("./domain");
+var _Flatbush = require("../../../Flatbush");
 const createZoomMap = zoom => {
   const zoomItemMap = new Map();
   zoom.forEach(zoomItem => {
@@ -37,6 +39,7 @@ const selectorChartZoomState = state => state.zoom;
 
 const selectorChartZoomIsInteracting = exports.selectorChartZoomIsInteracting = (0, _selectors.createSelector)([selectorChartZoomState], zoom => zoom?.isInteracting);
 const selectorChartZoomMap = exports.selectorChartZoomMap = (0, _selectors.createSelector)([selectorChartZoomState], zoom => zoom?.zoomData && createZoomMap(zoom?.zoomData));
+const selectorChartAxisZoomData = exports.selectorChartAxisZoomData = (0, _selectors.createSelector)([selectorChartZoomMap, (_, axisId) => axisId], (zoomMap, axisId) => zoomMap?.get(axisId));
 const selectorChartZoomOptionsLookup = exports.selectorChartZoomOptionsLookup = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartCartesianAxisLayout.selectorChartRawYAxis], (xAxis, yAxis) => (0, _extends2.default)({}, (0, _createZoomLookup.createZoomLookup)('x')(xAxis), (0, _createZoomLookup.createZoomLookup)('y')(yAxis)));
 const selectorChartAxisZoomOptionsLookup = exports.selectorChartAxisZoomOptionsLookup = (0, _selectors.createSelector)([selectorChartZoomOptionsLookup, (_, axisId) => axisId], (axisLookup, axisId) => axisLookup[axisId]);
 const selectorDefaultXAxisTickNumber = exports.selectorDefaultXAxisTickNumber = (0, _selectors.createSelector)([_useChartDimensions.selectorChartDrawingArea], function selectorDefaultXAxisTickNumber(drawingArea) {
@@ -133,6 +136,10 @@ const selectorChartFilteredXDomains = exports.selectorChartFilteredXDomains = (0
     filteredDomains[axis.id] = (0, _domain.calculateFinalDomain)(axis, 'x', axisIndex, formattedSeries, axisExtrema, rawTickNumber, preferStrictDomainInLineCharts);
   });
   return filteredDomains;
+}, {
+  memoizeOptions: {
+    resultEqualityCheck: (a, b) => (0, _isDeepEqual.isDeepEqual)(a, b)
+  }
 });
 const selectorChartFilteredYDomains = exports.selectorChartFilteredYDomains = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, selectorChartYDomains], (axes, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters, preferStrictDomainInLineCharts, domains) => {
   const filteredDomains = {};
@@ -155,6 +162,10 @@ const selectorChartFilteredYDomains = exports.selectorChartFilteredYDomains = (0
     filteredDomains[axis.id] = (0, _domain.calculateFinalDomain)(axis, 'y', axisIndex, formattedSeries, axisExtrema, rawTickNumber, preferStrictDomainInLineCharts);
   });
   return filteredDomains;
+}, {
+  memoizeOptions: {
+    resultEqualityCheck: (a, b) => (0, _isDeepEqual.isDeepEqual)(a, b)
+  }
 });
 const selectorChartNormalizedXScales = exports.selectorChartNormalizedXScales = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, selectorChartFilteredXDomains], function selectorChartNormalizedXScales(axes, filteredDomains) {
   const scales = {};
@@ -235,4 +246,35 @@ const selectorChartRawAxis = exports.selectorChartRawAxis = (0, _selectors.creat
     return undefined;
   }
   return axis;
+});
+const selectorChartDefaultXAxisId = exports.selectorChartDefaultXAxisId = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis], xAxes => xAxes[0].id);
+const selectorChartDefaultYAxisId = exports.selectorChartDefaultYAxisId = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis], yAxes => yAxes[0].id);
+const EMPTY_MAP = new Map();
+const selectorChartSeriesEmptyFlatbushMap = () => EMPTY_MAP;
+exports.selectorChartSeriesEmptyFlatbushMap = selectorChartSeriesEmptyFlatbushMap;
+const selectorChartSeriesFlatbushMap = exports.selectorChartSeriesFlatbushMap = (0, _selectors.createSelector)([_useChartSeries.selectorChartSeriesProcessed, selectorChartNormalizedXScales, selectorChartNormalizedYScales, selectorChartDefaultXAxisId, selectorChartDefaultYAxisId], function selectChartSeriesFlatbushMap(allSeries, xAxesScaleMap, yAxesScaleMap, defaultXAxisId, defaultYAxisId) {
+  // FIXME: Do we want to support non-scatter series here?
+  const validSeries = allSeries.scatter;
+  const flatbushMap = new Map();
+  if (!validSeries) {
+    return flatbushMap;
+  }
+  validSeries.seriesOrder.forEach(seriesId => {
+    const {
+      data,
+      xAxisId = defaultXAxisId,
+      yAxisId = defaultYAxisId
+    } = validSeries.series[seriesId];
+    const flatbush = new _Flatbush.Flatbush(data.length);
+    const originalXScale = xAxesScaleMap[xAxisId];
+    const originalYScale = yAxesScaleMap[yAxisId];
+    for (const datum of data) {
+      // Add the points using a [0, 1] range so that we don't need to recreate the Flatbush structure when zooming.
+      // This doesn't happen in practice, though, because currently the scales depend on the drawing area.
+      flatbush.add(originalXScale(datum.x), originalYScale(datum.y));
+    }
+    flatbush.finish();
+    flatbushMap.set(seriesId, flatbush);
+  });
+  return flatbushMap;
 });

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianHighlight.selectors.d.ts

@@ -3,17 +3,17 @@ export declare const selectorChartsHighlightXAxisIndex: import("reselect").Selec
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}>, AxisItemIdentifier[], [id?: import("../../../index.js").AxisId | undefined]>;
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}> & Partial<import("../useChartBrush/index.js").UseChartBrushState>, AxisItemIdentifier[], [id?: import("../../../index.js").AxisId | undefined]>;
 export declare const selectorChartsHighlightYAxisIndex: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}>, AxisItemIdentifier[], [id?: import("../../../index.js").AxisId | undefined]>;
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}> & Partial<import("../useChartBrush/index.js").UseChartBrushState>, AxisItemIdentifier[], [id?: import("../../../index.js").AxisId | undefined]>;
 export declare const selectorChartsHighlightXAxisValue: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}> & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState>, {
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}> & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & Partial<import("../useChartBrush/index.js").UseChartBrushState>, {
   value: any;
   axisId: import("../../../index.js").AxisId;
   dataIndex: number;
@@ -26,7 +26,7 @@ export declare const selectorChartsHighlightYAxisValue: import("reselect").Selec
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}> & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState>, {
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}> & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & Partial<import("../useChartBrush/index.js").UseChartBrushState>, {
   value: any;
   axisId: import("../../../index.js").AxisId;
   dataIndex: number;

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianHighlight.selectors.js

@@ -11,8 +11,12 @@ var _useChartCartesianAxisRendering = require("./useChartCartesianAxisRendering.
 var _useChartCartesianInteraction = require("./useChartCartesianInteraction.selectors");
 var _useChartKeyboardNavigation = require("../useChartKeyboardNavigation/useChartKeyboardNavigation.selectors");
 var _useChartInteraction = require("../useChartInteraction/useChartInteraction.selectors");
+var _useChartBrush = require("../useChartBrush");
 const selectorChartControlledCartesianAxisHighlight = state => state.controlledCartesianAxisHighlight;
-const selectAxisHighlight = (computedIndex, axis, axisItems) => {
+const selectAxisHighlight = (computedIndex, axis, axisItems, isBrushSelectionActive) => {
+  if (isBrushSelectionActive) {
+    return [];
+  }
   if (axisItems !== undefined) {
     return axisItems.filter(item => axis.axis[item.axisId] !== undefined).map(item => item);
   }
@@ -21,9 +25,12 @@ const selectAxisHighlight = (computedIndex, axis, axisItems) => {
     dataIndex: computedIndex
   }];
 };
-const selectorChartsHighlightXAxisIndex = exports.selectorChartsHighlightXAxisIndex = (0, _selectors.createSelector)([_useChartCartesianInteraction.selectorChartsInteractionXAxisIndex, _useChartCartesianAxisRendering.selectorChartXAxis, selectorChartControlledCartesianAxisHighlight], selectAxisHighlight);
-const selectorChartsHighlightYAxisIndex = exports.selectorChartsHighlightYAxisIndex = (0, _selectors.createSelector)([_useChartCartesianInteraction.selectorChartsInteractionYAxisIndex, _useChartCartesianAxisRendering.selectorChartYAxis, selectorChartControlledCartesianAxisHighlight], selectAxisHighlight);
-const selectAxisHighlightWithValue = (computedIndex, computedValue, axis, controlledAxisItems, keyboardAxisItem, lastInteractionUpdate) => {
+const selectorChartsHighlightXAxisIndex = exports.selectorChartsHighlightXAxisIndex = (0, _selectors.createSelector)([_useChartCartesianInteraction.selectorChartsInteractionXAxisIndex, _useChartCartesianAxisRendering.selectorChartXAxis, selectorChartControlledCartesianAxisHighlight, _useChartBrush.selectorBrushShouldPreventAxisHighlight], selectAxisHighlight);
+const selectorChartsHighlightYAxisIndex = exports.selectorChartsHighlightYAxisIndex = (0, _selectors.createSelector)([_useChartCartesianInteraction.selectorChartsInteractionYAxisIndex, _useChartCartesianAxisRendering.selectorChartYAxis, selectorChartControlledCartesianAxisHighlight, _useChartBrush.selectorBrushShouldPreventAxisHighlight], selectAxisHighlight);
+const selectAxisHighlightWithValue = (computedIndex, computedValue, axis, controlledAxisItems, keyboardAxisItem, lastInteractionUpdate, isBrushSelectionActive) => {
+  if (isBrushSelectionActive) {
+    return [];
+  }
   if (controlledAxisItems !== undefined) {
     return controlledAxisItems.map(item => (0, _extends2.default)({}, item, {
       value: axis.axis[item.axisId]?.data?.[item.dataIndex]
@@ -58,8 +65,8 @@ const selectAxisHighlightWithValue = (computedIndex, computedValue, axis, contro
   }
   return [];
 };
-const selectorChartsHighlightXAxisValue = exports.selectorChartsHighlightXAxisValue = (0, _selectors.createSelector)([_useChartCartesianInteraction.selectorChartsInteractionXAxisIndex, _useChartCartesianInteraction.selectorChartsInteractionXAxisValue, _useChartCartesianAxisRendering.selectorChartXAxis, selectorChartControlledCartesianAxisHighlight, _useChartKeyboardNavigation.selectorChartsKeyboardXAxisIndex, _useChartInteraction.selectorChartsLastInteraction], selectAxisHighlightWithValue);
-const selectorChartsHighlightYAxisValue = exports.selectorChartsHighlightYAxisValue = (0, _selectors.createSelector)([_useChartCartesianInteraction.selectorChartsInteractionYAxisIndex, _useChartCartesianInteraction.selectorChartsInteractionYAxisValue, _useChartCartesianAxisRendering.selectorChartYAxis, selectorChartControlledCartesianAxisHighlight, _useChartKeyboardNavigation.selectorChartsKeyboardYAxisIndex, _useChartInteraction.selectorChartsLastInteraction], selectAxisHighlightWithValue);
+const selectorChartsHighlightXAxisValue = exports.selectorChartsHighlightXAxisValue = (0, _selectors.createSelector)([_useChartCartesianInteraction.selectorChartsInteractionXAxisIndex, _useChartCartesianInteraction.selectorChartsInteractionXAxisValue, _useChartCartesianAxisRendering.selectorChartXAxis, selectorChartControlledCartesianAxisHighlight, _useChartKeyboardNavigation.selectorChartsKeyboardXAxisIndex, _useChartInteraction.selectorChartsLastInteraction, _useChartBrush.selectorBrushShouldPreventAxisHighlight], selectAxisHighlightWithValue);
+const selectorChartsHighlightYAxisValue = exports.selectorChartsHighlightYAxisValue = (0, _selectors.createSelector)([_useChartCartesianInteraction.selectorChartsInteractionYAxisIndex, _useChartCartesianInteraction.selectorChartsInteractionYAxisValue, _useChartCartesianAxisRendering.selectorChartYAxis, selectorChartControlledCartesianAxisHighlight, _useChartKeyboardNavigation.selectorChartsKeyboardYAxisIndex, _useChartInteraction.selectorChartsLastInteraction, _useChartBrush.selectorBrushShouldPreventAxisHighlight], selectAxisHighlightWithValue);
 
 /**
  * Get the scale of the axis with highlight if controlled. The default axis otherwise.

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.js

@@ -41,7 +41,10 @@ const selectorChartAxisInteraction = exports.selectorChartAxisInteraction = (0,
  */
 
 function valueGetter(value, axes, indexes, ids = axes.axisIds[0]) {
-  return Array.isArray(ids) ? ids.map((id, axisIndex) => (0, _getAxisValue.getAxisValue)(axes.axis[id], value, indexes[axisIndex])) : (0, _getAxisValue.getAxisValue)(axes.axis[ids], value, indexes);
+  return Array.isArray(ids) ? ids.map((id, axisIndex) => {
+    const axis = axes.axis[id];
+    return (0, _getAxisValue.getAxisValue)(axis.scale, axis.data, value, indexes[axisIndex]);
+  }) : (0, _getAxisValue.getAxisValue)(axes.axis[ids].scale, axes.axis[ids].data, value, indexes);
 }
 const selectorChartsInteractionXAxisValue = exports.selectorChartsInteractionXAxisValue = (0, _selectors.createSelector)([_useChartInteraction.selectorChartsInteractionPointerX, _useChartCartesianAxisRendering.selectorChartXAxis, selectorChartsInteractionXAxisIndex, optionalGetAxisId], (x, xAxes, xIndex, id) => {
   if (x === null || xAxes.axisIds.length === 0) {

package/internals/plugins/featurePlugins/useChartClosestPoint/findClosestPoints.d.ts

@@ -0,0 +1,5 @@
+import { ChartDrawingArea } from "../../../../hooks/useDrawingArea.js";
+import { ScatterValueType } from "../../../../models/seriesType/scatter.js";
+import { Flatbush } from "../../../Flatbush.js";
+import { D3Scale } from "../../../../models/axis.js";
+export declare function findClosestPoints(flatbush: Flatbush, drawingArea: Pick<ChartDrawingArea, 'top' | 'left' | 'width' | 'height'>, seriesData: readonly ScatterValueType[], xScale: D3Scale, yScale: D3Scale, xZoomStart: number, xZoomEnd: number, yZoomStart: number, yZoomEnd: number, svgPointX: number, svgPointY: number, maxRadius?: number, maxResults?: number): number[];

package/internals/plugins/featurePlugins/useChartClosestPoint/findClosestPoints.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findClosestPoints = findClosestPoints;
+var _scaleGuards = require("../../../scaleGuards");
+function findClosestPoints(flatbush, drawingArea, seriesData, xScale, yScale, xZoomStart, xZoomEnd, yZoomStart, yZoomEnd, svgPointX, svgPointY, maxRadius = Infinity, maxResults = 1) {
+  const originalXScale = xScale.copy();
+  const originalYScale = yScale.copy();
+  originalXScale.range([0, 1]);
+  originalYScale.range([0, 1]);
+  const excludeIfOutsideDrawingArea = function excludeIfOutsideDrawingArea(index) {
+    const x = originalXScale(seriesData[index].x);
+    const y = originalYScale(seriesData[index].y);
+    return x >= xZoomStart && x <= xZoomEnd && y >= yZoomStart && y <= yZoomEnd;
+  };
+
+  // We need to convert the distance from the original range [0, 1] to the current drawing area
+  // so the comparison is done on pixels instead of normalized values.
+  // fx and fy are the factors to convert the distance from [0, 1] to the current drawing area.
+  const fx = xScale.range()[1] - xScale.range()[0];
+  const fy = yScale.range()[1] - yScale.range()[0];
+  const fxSq = fx * fx;
+  const fySq = fy * fy;
+  function sqDistFn(dx, dy) {
+    return fxSq * dx * dx + fySq * dy * dy;
+  }
+  const pointX = originalXScale(invertScale(xScale, svgPointX, dataIndex => seriesData[dataIndex].x));
+  const pointY = originalYScale(invertScale(yScale, svgPointY, dataIndex => seriesData[dataIndex].y));
+  return flatbush.neighbors(pointX, pointY, maxResults, maxRadius != null ? maxRadius * maxRadius : Infinity, excludeIfOutsideDrawingArea, sqDistFn);
+}
+function invertScale(scale, value, getDataPoint) {
+  if ((0, _scaleGuards.isOrdinalScale)(scale)) {
+    const dataIndex = scale.bandwidth() === 0 ? Math.floor((value - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((value - Math.min(...scale.range())) / scale.step());
+    return getDataPoint(dataIndex);
+  }
+  return scale.invert(value);
+}