@mui/x-charts 9.3.0 → 9.4.0

package/internals/createCommonKeyboardFocusHandler.d.mts

@@ -2,7 +2,7 @@ import type { ChartSeriesType } from "../models/seriesType/config.mjs";
 /**
  * Create a keyboard focus handler for common use cases where focused item are defined by the series is and data index.
  */
-export declare function createCommonKeyboardFocusHandler<SeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, TInputSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = SeriesType>(outSeriesTypes: Set<SeriesType>, allowCycles?: boolean): (event: KeyboardEvent) => ((currentItem: import("../index.mjs").FocusedItemIdentifier<TInputSeriesType> | null, state: {
+export declare function createCommonKeyboardFocusHandler<SeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, TInputSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = SeriesType>(outSeriesTypes: Set<SeriesType>, allowCycles?: boolean, useCurrentSeriesMaxLength?: boolean): (event: KeyboardEvent) => ((currentItem: import("../index.mjs").FocusedItemIdentifier<TInputSeriesType> | null, state: {
   series: {
     defaultizedSeries: import("./plugins/corePlugins/useChartSeries/useChartSeries.types.mjs").DefaultizedSeriesGroups<TInputSeriesType>;
     idToType: import("./index.mjs").SeriesIdToType;

package/internals/createCommonKeyboardFocusHandler.d.ts

@@ -2,7 +2,7 @@ import type { ChartSeriesType } from "../models/seriesType/config.js";
 /**
  * Create a keyboard focus handler for common use cases where focused item are defined by the series is and data index.
  */
-export declare function createCommonKeyboardFocusHandler<SeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, TInputSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = SeriesType>(outSeriesTypes: Set<SeriesType>, allowCycles?: boolean): (event: KeyboardEvent) => ((currentItem: import("../index.js").FocusedItemIdentifier<TInputSeriesType> | null, state: {
+export declare function createCommonKeyboardFocusHandler<SeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, TInputSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = SeriesType>(outSeriesTypes: Set<SeriesType>, allowCycles?: boolean, useCurrentSeriesMaxLength?: boolean): (event: KeyboardEvent) => ((currentItem: import("../index.js").FocusedItemIdentifier<TInputSeriesType> | null, state: {
   series: {
     defaultizedSeries: import("./plugins/corePlugins/useChartSeries/useChartSeries.types.js").DefaultizedSeriesGroups<TInputSeriesType>;
     idToType: import("./index.js").SeriesIdToType;

package/internals/createCommonKeyboardFocusHandler.js

@@ -8,13 +8,13 @@ var _commonNextFocusItem = require("./commonNextFocusItem");
 /**
  * Create a keyboard focus handler for common use cases where focused item are defined by the series is and data index.
  */
-function createCommonKeyboardFocusHandler(outSeriesTypes, allowCycles) {
+function createCommonKeyboardFocusHandler(outSeriesTypes, allowCycles, useCurrentSeriesMaxLength) {
   const keyboardFocusHandler = event => {
     switch (event.key) {
       case 'ArrowRight':
-        return (0, _commonNextFocusItem.createGetNextIndexFocusedItem)(outSeriesTypes, allowCycles);
+        return (0, _commonNextFocusItem.createGetNextIndexFocusedItem)(outSeriesTypes, allowCycles, useCurrentSeriesMaxLength);
       case 'ArrowLeft':
-        return (0, _commonNextFocusItem.createGetPreviousIndexFocusedItem)(outSeriesTypes, allowCycles);
+        return (0, _commonNextFocusItem.createGetPreviousIndexFocusedItem)(outSeriesTypes, allowCycles, useCurrentSeriesMaxLength);
       case 'ArrowDown':
         return (0, _commonNextFocusItem.createGetPreviousSeriesFocusedItem)(outSeriesTypes);
       case 'ArrowUp':

package/internals/createCommonKeyboardFocusHandler.mjs

@@ -3,13 +3,13 @@ import { createGetNextIndexFocusedItem, createGetPreviousIndexFocusedItem, creat
 /**
  * Create a keyboard focus handler for common use cases where focused item are defined by the series is and data index.
  */
-export function createCommonKeyboardFocusHandler(outSeriesTypes, allowCycles) {
+export function createCommonKeyboardFocusHandler(outSeriesTypes, allowCycles, useCurrentSeriesMaxLength) {
   const keyboardFocusHandler = event => {
     switch (event.key) {
       case 'ArrowRight':
-        return createGetNextIndexFocusedItem(outSeriesTypes, allowCycles);
+        return createGetNextIndexFocusedItem(outSeriesTypes, allowCycles, useCurrentSeriesMaxLength);
       case 'ArrowLeft':
-        return createGetPreviousIndexFocusedItem(outSeriesTypes, allowCycles);
+        return createGetPreviousIndexFocusedItem(outSeriesTypes, allowCycles, useCurrentSeriesMaxLength);
       case 'ArrowDown':
         return createGetPreviousSeriesFocusedItem(outSeriesTypes);
       case 'ArrowUp':

package/internals/incompleteDatasetKeysError.d.mts

@@ -0,0 +1 @@
+export declare function incompleteDatasetKeysError(seriesType: string, seriesId: string, missingKeys: string[]): void;

package/internals/incompleteDatasetKeysError.d.ts

@@ -0,0 +1 @@
+export declare function incompleteDatasetKeysError(seriesType: string, seriesId: string, missingKeys: string[]): void;

package/internals/incompleteDatasetKeysError.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.incompleteDatasetKeysError = incompleteDatasetKeysError;
+var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
+function incompleteDatasetKeysError(seriesType, seriesId, missingKeys) {
+  throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: ${seriesType} series with id="${seriesId}" has incomplete datasetKeys.` + `Properties ${missingKeys.map(key => `"${key}"`).join(', ')} are missing.` : (0, _formatErrorMessage2.default)(279, seriesType, seriesId, missingKeys.map(key => `"${key}"`).join(', ')));
+}

package/internals/incompleteDatasetKeysError.mjs

@@ -0,0 +1,4 @@
+import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
+export function incompleteDatasetKeysError(seriesType, seriesId, missingKeys) {
+  throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: ${seriesType} series with id="${seriesId}" has incomplete datasetKeys.` + `Properties ${missingKeys.map(key => `"${key}"`).join(', ')} are missing.` : _formatErrorMessage(279, seriesType, seriesId, missingKeys.map(key => `"${key}"`).join(', ')));
+}

package/internals/index.d.mts

@@ -65,6 +65,8 @@ export * from "./consumeSlots.mjs";
 export * from "./consumeThemeProps.mjs";
 export * from "./defaultizeMargin.mjs";
 export * from "./colorScale.mjs";
+export * from "./sizeScale.mjs";
+export * from "./incompleteDatasetKeysError.mjs";
 export * from "./ticks.mjs";
 export * from "./dateHelpers.mjs";
 export * from "./invertScale.mjs";

package/internals/index.d.ts

@@ -65,6 +65,8 @@ export * from "./consumeSlots.js";
 export * from "./consumeThemeProps.js";
 export * from "./defaultizeMargin.js";
 export * from "./colorScale.js";
+export * from "./sizeScale.js";
+export * from "./incompleteDatasetKeysError.js";
 export * from "./ticks.js";
 export * from "./dateHelpers.js";
 export * from "./invertScale.js";

package/internals/index.js

@@ -832,6 +832,30 @@ Object.keys(_colorScale).forEach(function (key) {
     }
   });
 });
+var _sizeScale = require("./sizeScale");
+Object.keys(_sizeScale).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _sizeScale[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _sizeScale[key];
+    }
+  });
+});
+var _incompleteDatasetKeysError = require("./incompleteDatasetKeysError");
+Object.keys(_incompleteDatasetKeysError).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _incompleteDatasetKeysError[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _incompleteDatasetKeysError[key];
+    }
+  });
+});
 var _ticks = require("./ticks");
 Object.keys(_ticks).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/index.mjs

@@ -73,6 +73,8 @@ export * from "./consumeSlots.mjs";
 export * from "./consumeThemeProps.mjs";
 export * from "./defaultizeMargin.mjs";
 export * from "./colorScale.mjs";
+export * from "./sizeScale.mjs";
+export * from "./incompleteDatasetKeysError.mjs";
 export * from "./ticks.mjs";
 export * from "./dateHelpers.mjs";
 export * from "./invertScale.mjs";

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

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

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

@@ -1,12 +1,13 @@
-import { defaultizeZoom } from "./defaultizeZoom.mjs";
+import { defaultizeZoom, getEffectiveZoomReverse } from "./defaultizeZoom.mjs";
 export const createZoomLookup = axisDirection => (axes = []) => axes.reduce((acc, v) => {
   // @ts-ignore
   const {
     zoom,
     id: axisId,
-    reverse
+    reverse,
+    scaleType
   } = v;
-  const defaultizedZoom = defaultizeZoom(zoom, axisId, axisDirection, reverse);
+  const defaultizedZoom = defaultizeZoom(zoom, axisId, axisDirection, getEffectiveZoomReverse(axisDirection, scaleType, reverse));
   if (defaultizedZoom) {
     acc[axisId] = defaultizedZoom;
   }

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

@@ -35,7 +35,7 @@ function defaultizeXAxis(inAxes, dataset, axesGap) {
       id,
       position,
       height,
-      zoom: (0, _defaultizeZoom.defaultizeZoom)(axisConfig.zoom, id, 'x', axisConfig.reverse)
+      zoom: (0, _defaultizeZoom.defaultizeZoom)(axisConfig.zoom, id, 'x', (0, _defaultizeZoom.getEffectiveZoomReverse)('x', axisConfig.scaleType, axisConfig.reverse))
     });
 
     // Increment the offset for the next axis
@@ -87,7 +87,7 @@ function defaultizeYAxis(inAxes, dataset, axesGap) {
       id,
       position,
       width,
-      zoom: (0, _defaultizeZoom.defaultizeZoom)(axisConfig.zoom, id, 'y', axisConfig.reverse)
+      zoom: (0, _defaultizeZoom.defaultizeZoom)(axisConfig.zoom, id, 'y', (0, _defaultizeZoom.getEffectiveZoomReverse)('y', axisConfig.scaleType, axisConfig.reverse))
     });
 
     // Increment the offset for the next axis

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

@@ -1,6 +1,6 @@
 import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { defaultizeZoom } from "./defaultizeZoom.mjs";
+import { defaultizeZoom, getEffectiveZoomReverse } from "./defaultizeZoom.mjs";
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY, DEFAULT_AXIS_SIZE_HEIGHT, DEFAULT_AXIS_SIZE_WIDTH, AXIS_LABEL_DEFAULT_HEIGHT } from "../../../../constants/index.mjs";
 export function defaultizeXAxis(inAxes, dataset, axesGap) {
   const offsets = {
@@ -27,7 +27,7 @@ export function defaultizeXAxis(inAxes, dataset, axesGap) {
       id,
       position,
       height,
-      zoom: defaultizeZoom(axisConfig.zoom, id, 'x', axisConfig.reverse)
+      zoom: defaultizeZoom(axisConfig.zoom, id, 'x', getEffectiveZoomReverse('x', axisConfig.scaleType, axisConfig.reverse))
     });
 
     // Increment the offset for the next axis
@@ -79,7 +79,7 @@ export function defaultizeYAxis(inAxes, dataset, axesGap) {
       id,
       position,
       width,
-      zoom: defaultizeZoom(axisConfig.zoom, id, 'y', axisConfig.reverse)
+      zoom: defaultizeZoom(axisConfig.zoom, id, 'y', getEffectiveZoomReverse('y', axisConfig.scaleType, axisConfig.reverse))
     });
 
     // Increment the offset for the next axis

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

@@ -1,6 +1,15 @@
-import { type AxisId } from "../../../../models/axis.mjs";
+import { type AxisId, type ScaleName } from "../../../../models/axis.mjs";
 import { type DefaultizedZoomOptions } from "./useChartCartesianAxis.types.mjs";
 import { type ZoomOptions } from "./zoom.types.mjs";
+/**
+ * Ordinal Y axes (band/point) render with `domain[0]` at the top of the chart
+ * (see the `range.reverse()` applied in `selectorChartYScales`), which is the
+ * opposite of the cartesian convention assumed by the zoom/pan math.
+ *
+ * Returns the `reverse` flag the zoom handlers should use so that pan/wheel
+ * gestures follow the visual direction of the axis.
+ */
+export declare const getEffectiveZoomReverse: (axisDirection: "x" | "y", scaleType: ScaleName | undefined, reverse: boolean | undefined) => boolean;
 export declare const defaultZoomOptions: {
   minStart: number;
   maxEnd: number;

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

@@ -1,6 +1,15 @@
-import { type AxisId } from "../../../../models/axis.js";
+import { type AxisId, type ScaleName } from "../../../../models/axis.js";
 import { type DefaultizedZoomOptions } from "./useChartCartesianAxis.types.js";
 import { type ZoomOptions } from "./zoom.types.js";
+/**
+ * Ordinal Y axes (band/point) render with `domain[0]` at the top of the chart
+ * (see the `range.reverse()` applied in `selectorChartYScales`), which is the
+ * opposite of the cartesian convention assumed by the zoom/pan math.
+ *
+ * Returns the `reverse` flag the zoom handlers should use so that pan/wheel
+ * gestures follow the visual direction of the axis.
+ */
+export declare const getEffectiveZoomReverse: (axisDirection: "x" | "y", scaleType: ScaleName | undefined, reverse: boolean | undefined) => boolean;
 export declare const defaultZoomOptions: {
   minStart: number;
   maxEnd: number;

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

@@ -4,9 +4,26 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultizeZoom = exports.defaultZoomOptions = void 0;
+exports.getEffectiveZoomReverse = exports.defaultizeZoom = exports.defaultZoomOptions = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _constants = require("../../../constants");
+/**
+ * Ordinal Y axes (band/point) render with `domain[0]` at the top of the chart
+ * (see the `range.reverse()` applied in `selectorChartYScales`), which is the
+ * opposite of the cartesian convention assumed by the zoom/pan math.
+ *
+ * Returns the `reverse` flag the zoom handlers should use so that pan/wheel
+ * gestures follow the visual direction of the axis.
+ */
+const getEffectiveZoomReverse = (axisDirection, scaleType, reverse) => {
+  const resolvedReverse = reverse ?? false;
+  const isOrdinal = scaleType === 'band' || scaleType === 'point';
+  if (axisDirection === 'y' && isOrdinal) {
+    return !resolvedReverse;
+  }
+  return resolvedReverse;
+};
+exports.getEffectiveZoomReverse = getEffectiveZoomReverse;
 const defaultZoomOptions = exports.defaultZoomOptions = {
   minStart: 0,
   maxEnd: 100,

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

@@ -1,5 +1,21 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { DEFAULT_ZOOM_SLIDER_PREVIEW_SIZE, DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP, DEFAULT_ZOOM_SLIDER_SIZE } from "../../../constants.mjs";
+/**
+ * Ordinal Y axes (band/point) render with `domain[0]` at the top of the chart
+ * (see the `range.reverse()` applied in `selectorChartYScales`), which is the
+ * opposite of the cartesian convention assumed by the zoom/pan math.
+ *
+ * Returns the `reverse` flag the zoom handlers should use so that pan/wheel
+ * gestures follow the visual direction of the axis.
+ */
+export const getEffectiveZoomReverse = (axisDirection, scaleType, reverse) => {
+  const resolvedReverse = reverse ?? false;
+  const isOrdinal = scaleType === 'band' || scaleType === 'point';
+  if (axisDirection === 'y' && isOrdinal) {
+    return !resolvedReverse;
+  }
+  return resolvedReverse;
+};
 export const defaultZoomOptions = {
   minStart: 0,
   maxEnd: 100,

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

@@ -164,6 +164,7 @@ export declare const selectorChartRawAxis: (args_0: import("../../corePlugins/us
     min: NumberValue;
     max: NumberValue;
   });
+  domainSeries?: "all" | "visible";
   ignoreTooltip?: boolean;
 } & Omit<Partial<import("../../../index.mjs").ChartsYAxisProps>, "axisId"> & Partial<Omit<{
   scaleType: "linear";
@@ -223,7 +224,14 @@ export declare const selectorChartDefaultXAxisId: (args_0: import("../../corePlu
 export declare const selectorChartDefaultYAxisId: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.mjs").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
 }) => AxisId;
-export declare const selectorChartSeriesEmptyFlatbushMap: () => Map<string, Flatbush>;
-export declare const selectorChartSeriesFlatbushMap: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<{}> & {
+export type ScatterFlatbushEntry = {
+  flatbush: Flatbush;
+  /** Per-point marker radius, in pixels. */
+  getItemRadius: number | ((dataIndex: number) => number);
+  /** Largest radius across all points in this series, in pixels. */
+  maxItemRadius: number;
+};
+export declare const selectorChartSeriesEmptyFlatbushMap: () => Map<string, ScatterFlatbushEntry>;
+export declare const selectorChartSeriesFlatbushMap: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & import("../useChartZAxis/index.mjs").UseChartZAxisState & Partial<{}> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
-}) => Map<string, Flatbush>;
+}) => Map<string, ScatterFlatbushEntry>;

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

@@ -164,6 +164,7 @@ export declare const selectorChartRawAxis: (args_0: import("../../corePlugins/us
     min: NumberValue;
     max: NumberValue;
   });
+  domainSeries?: "all" | "visible";
   ignoreTooltip?: boolean;
 } & Omit<Partial<import("../../../index.js").ChartsYAxisProps>, "axisId"> & Partial<Omit<{
   scaleType: "linear";
@@ -223,7 +224,14 @@ export declare const selectorChartDefaultXAxisId: (args_0: import("../../corePlu
 export declare const selectorChartDefaultYAxisId: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & 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;
 }) => AxisId;
-export declare const selectorChartSeriesEmptyFlatbushMap: () => Map<string, Flatbush>;
-export declare const selectorChartSeriesFlatbushMap: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & 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<{}> & {
+export type ScatterFlatbushEntry = {
+  flatbush: Flatbush;
+  /** Per-point marker radius, in pixels. */
+  getItemRadius: number | ((dataIndex: number) => number);
+  /** Largest radius across all points in this series, in pixels. */
+  maxItemRadius: number;
+};
+export declare const selectorChartSeriesEmptyFlatbushMap: () => Map<string, ScatterFlatbushEntry>;
+export declare const selectorChartSeriesFlatbushMap: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & 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 & import("../useChartZAxis/index.js").UseChartZAxisState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => Map<string, Flatbush>;
+}) => Map<string, ScatterFlatbushEntry>;

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

@@ -24,6 +24,8 @@ var _domain = require("./domain");
 var _Flatbush = require("../../../Flatbush");
 var _useChartSeriesConfig = require("../../corePlugins/useChartSeriesConfig");
 var _useChartAxisExtrema = require("./useChartAxisExtrema.selectors");
+var _useChartZAxis = require("../useChartZAxis");
+var _getMarkerSize = _interopRequireDefault(require("../../../../ScatterChart/seriesConfig/getMarkerSize"));
 const createZoomMap = zoom => {
   const zoomItemMap = new Map();
   zoom.forEach(zoomItem => {
@@ -257,29 +259,46 @@ const selectorChartDefaultYAxisId = exports.selectorChartDefaultYAxisId = (0, _s
 const EMPTY_MAP = new Map();
 const selectorChartSeriesEmptyFlatbushMap = () => EMPTY_MAP;
 exports.selectorChartSeriesEmptyFlatbushMap = selectorChartSeriesEmptyFlatbushMap;
-const selectorChartSeriesFlatbushMap = exports.selectorChartSeriesFlatbushMap = (0, _store.createSelectorMemoized)(_useChartSeries.selectorChartSeriesProcessed, selectorChartNormalizedXScales, selectorChartNormalizedYScales, selectorChartDefaultXAxisId, selectorChartDefaultYAxisId, function selectChartSeriesFlatbushMap(allSeries, xAxesScaleMap, yAxesScaleMap, defaultXAxisId, defaultYAxisId) {
+const selectorChartSeriesFlatbushMap = exports.selectorChartSeriesFlatbushMap = (0, _store.createSelectorMemoized)(_useChartSeries.selectorChartSeriesProcessed, selectorChartNormalizedXScales, selectorChartNormalizedYScales, selectorChartDefaultXAxisId, selectorChartDefaultYAxisId, _useChartZAxis.selectorChartZAxis, _useChartDimensions.selectorChartDrawingArea, function selectChartSeriesFlatbushMap(allSeries, xAxesScaleMap, yAxesScaleMap, defaultXAxisId, defaultYAxisId, zAxisState) {
   // FIXME: Do we want to support non-scatter series here?
   const validSeries = allSeries.scatter;
   const flatbushMap = new Map();
   if (!validSeries) {
     return flatbushMap;
   }
+  const zAxes = zAxisState?.axis ?? {};
+  const zAxisIds = zAxisState?.axisIds ?? [];
   validSeries.seriesOrder.forEach(seriesId => {
+    const series = validSeries.series[seriesId];
     const {
       data,
       xAxisId = defaultXAxisId,
       yAxisId = defaultYAxisId
-    } = validSeries.series[seriesId];
+    } = series;
+    if (data.length === 0) {
+      return;
+    }
     const flatbush = new _Flatbush.Flatbush(data.length);
+    const sizeAxis = zAxes[series.sizeAxisId ?? zAxisIds[0]];
+    const isFixedSize = !sizeAxis || !sizeAxis.sizeScale;
+    const getItemRadius = isFixedSize ? series.markerSize ?? 0 : (0, _getMarkerSize.default)(series, sizeAxis);
+    let maxItemRadius = isFixedSize ? getItemRadius : 0;
     const originalXScale = xAxesScaleMap[xAxisId];
     const originalYScale = yAxesScaleMap[yAxisId];
-    for (const datum of data) {
+    for (let i = 0; i < data.length; i += 1) {
+      if (!isFixedSize) {
+        maxItemRadius = Math.max(maxItemRadius, getItemRadius(i));
+      }
       // 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.add(originalXScale(data[i].x), originalYScale(data[i].y));
     }
     flatbush.finish();
-    flatbushMap.set(seriesId, flatbush);
+    flatbushMap.set(seriesId, {
+      flatbush,
+      getItemRadius,
+      maxItemRadius
+    });
   });
   return flatbushMap;
 });

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

@@ -17,6 +17,8 @@ import { calculateFinalDomain, computeAxisDomainsMap } from "./domain.mjs";
 import { Flatbush } from "../../../Flatbush.mjs";
 import { selectorChartSeriesConfig } from "../../corePlugins/useChartSeriesConfig/index.mjs";
 import { selectorChartXAxisExtrema, selectorChartYAxisExtrema } from "./useChartAxisExtrema.selectors.mjs";
+import { selectorChartZAxis } from "../useChartZAxis/index.mjs";
+import getMarkerSize from "../../../../ScatterChart/seriesConfig/getMarkerSize.mjs";
 export const createZoomMap = zoom => {
   const zoomItemMap = new Map();
   zoom.forEach(zoomItem => {
@@ -248,29 +250,46 @@ export const selectorChartDefaultXAxisId = createSelector(selectorChartRawXAxis,
 export const selectorChartDefaultYAxisId = createSelector(selectorChartRawYAxis, yAxes => yAxes[0].id);
 const EMPTY_MAP = new Map();
 export const selectorChartSeriesEmptyFlatbushMap = () => EMPTY_MAP;
-export const selectorChartSeriesFlatbushMap = createSelectorMemoized(selectorChartSeriesProcessed, selectorChartNormalizedXScales, selectorChartNormalizedYScales, selectorChartDefaultXAxisId, selectorChartDefaultYAxisId, function selectChartSeriesFlatbushMap(allSeries, xAxesScaleMap, yAxesScaleMap, defaultXAxisId, defaultYAxisId) {
+export const selectorChartSeriesFlatbushMap = createSelectorMemoized(selectorChartSeriesProcessed, selectorChartNormalizedXScales, selectorChartNormalizedYScales, selectorChartDefaultXAxisId, selectorChartDefaultYAxisId, selectorChartZAxis, selectorChartDrawingArea, function selectChartSeriesFlatbushMap(allSeries, xAxesScaleMap, yAxesScaleMap, defaultXAxisId, defaultYAxisId, zAxisState) {
   // FIXME: Do we want to support non-scatter series here?
   const validSeries = allSeries.scatter;
   const flatbushMap = new Map();
   if (!validSeries) {
     return flatbushMap;
   }
+  const zAxes = zAxisState?.axis ?? {};
+  const zAxisIds = zAxisState?.axisIds ?? [];
   validSeries.seriesOrder.forEach(seriesId => {
+    const series = validSeries.series[seriesId];
     const {
       data,
       xAxisId = defaultXAxisId,
       yAxisId = defaultYAxisId
-    } = validSeries.series[seriesId];
+    } = series;
+    if (data.length === 0) {
+      return;
+    }
     const flatbush = new Flatbush(data.length);
+    const sizeAxis = zAxes[series.sizeAxisId ?? zAxisIds[0]];
+    const isFixedSize = !sizeAxis || !sizeAxis.sizeScale;
+    const getItemRadius = isFixedSize ? series.markerSize ?? 0 : getMarkerSize(series, sizeAxis);
+    let maxItemRadius = isFixedSize ? getItemRadius : 0;
     const originalXScale = xAxesScaleMap[xAxisId];
     const originalYScale = yAxesScaleMap[yAxisId];
-    for (const datum of data) {
+    for (let i = 0; i < data.length; i += 1) {
+      if (!isFixedSize) {
+        maxItemRadius = Math.max(maxItemRadius, getItemRadius(i));
+      }
       // 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.add(originalXScale(data[i].x), originalYScale(data[i].y));
     }
     flatbush.finish();
-    flatbushMap.set(seriesId, flatbush);
+    flatbushMap.set(seriesId, {
+      flatbush,
+      getItemRadius,
+      maxItemRadius
+    });
   });
   return flatbushMap;
 });

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

@@ -1,4 +1,4 @@
 import { type ScatterValueType } from "../../../../models/seriesType/scatter.mjs";
 import { type Flatbush } from "../../../Flatbush.mjs";
 import { type D3Scale } from "../../../../models/axis.mjs";
-export declare function findClosestPoints(flatbush: Flatbush, seriesData: readonly ScatterValueType[], xScale: D3Scale, yScale: D3Scale, xZoomStart: number, xZoomEnd: number, yZoomStart: number, yZoomEnd: number, svgPointX: number, svgPointY: number, maxRadius?: number, maxResults?: number): number[];
+export declare function findClosestPoints(flatbush: Flatbush, seriesData: readonly ScatterValueType[], xScale: D3Scale, yScale: D3Scale, xZoomStart: number, xZoomEnd: number, yZoomStart: number, yZoomEnd: number, svgPointX: number, svgPointY: number, maxRadius?: number, maxResults?: number, getItemRadius?: number | ((dataIndex: number) => number)): number[];

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

@@ -1,4 +1,4 @@
 import { type ScatterValueType } from "../../../../models/seriesType/scatter.js";
 import { type Flatbush } from "../../../Flatbush.js";
 import { type D3Scale } from "../../../../models/axis.js";
-export declare function findClosestPoints(flatbush: Flatbush, seriesData: readonly ScatterValueType[], xScale: D3Scale, yScale: D3Scale, xZoomStart: number, xZoomEnd: number, yZoomStart: number, yZoomEnd: number, svgPointX: number, svgPointY: number, maxRadius?: number, maxResults?: number): number[];
+export declare function findClosestPoints(flatbush: Flatbush, seriesData: readonly ScatterValueType[], xScale: D3Scale, yScale: D3Scale, xZoomStart: number, xZoomEnd: number, yZoomStart: number, yZoomEnd: number, svgPointX: number, svgPointY: number, maxRadius?: number, maxResults?: number, getItemRadius?: number | ((dataIndex: number) => number)): number[];

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

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.findClosestPoints = findClosestPoints;
 var _scaleGuards = require("../../../scaleGuards");
-function findClosestPoints(flatbush, seriesData, xScale, yScale, xZoomStart, xZoomEnd, yZoomStart, yZoomEnd, svgPointX, svgPointY, maxRadius = Infinity, maxResults = 1) {
+// Arbitrary large number to be sure we don't pull the entire dataset from flatbush when radius is not fixed.
+const LARGE_NUMBER = 50;
+function findClosestPoints(flatbush, seriesData, xScale, yScale, xZoomStart, xZoomEnd, yZoomStart, yZoomEnd, svgPointX, svgPointY, maxRadius = Infinity, maxResults = 1, getItemRadius = 0) {
   const originalXScale = xScale.copy();
   const originalYScale = yScale.copy();
   originalXScale.range([0, 1]);
@@ -28,7 +30,49 @@ function findClosestPoints(flatbush, seriesData, xScale, yScale, xZoomStart, xZo
   }
   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);
+  if (pointX === undefined || pointY === undefined) {
+    return [];
+  }
+  const withFixRadius = typeof getItemRadius === 'number';
+  const maxRadiusSq = Number.isFinite(maxRadius) ? maxRadius * maxRadius : Infinity;
+
+  // Pull every candidate whose lower-bound (box) distance is within the hit threshold.
+  // Any unpulled point j has box-dist > maxRadius, hence center-dist ≥ box-dist > maxRadius,
+  // so it cannot be a hit. We re-rank by true edge distance below.
+  const candidates = flatbush.neighbors(pointX, pointY, withFixRadius ? maxResults : LARGE_NUMBER, maxRadiusSq, excludeIfOutsideDrawingArea, sqDistFn);
+  if (withFixRadius) {
+    // If radius is constant, we can skip the expensive edge-distance calculation and return candidates in box-distance order.
+    return candidates;
+  }
+
+  // Re-rank by true (signed) edge distance. Negative values mean the cursor is inside
+  // the marker — those win over any outside marker, with deeper containment ranked first.
+  let ranked = [];
+  for (const i of candidates) {
+    const cx = originalXScale(seriesData[i].x);
+    const cy = originalYScale(seriesData[i].y);
+    const centerDistSq = sqDistFn(cx - pointX, cy - pointY);
+    // Preserve the existing hit-area semantics: hit means center distance ≤ maxRadius.
+    if (centerDistSq > maxRadiusSq) {
+      continue;
+    }
+    const edge = Math.sqrt(centerDistSq) - getItemRadius(i);
+    ranked.push({
+      index: i,
+      edge,
+      centerDistSq
+    });
+  }
+  ranked.sort((a, b) => a.edge - b.edge);
+
+  // The pointer is inside multiple marks, we sort them by distance to the center. Priority is
+  // 1. marks that are under the pointer (negative edge distance) sorted by distance to the center
+  // 2. marks that are outside the pointer (positive edge distance) by distance to the edge
+  const splitIndex = ranked.findLastIndex(d => d.edge < 0);
+  if (splitIndex !== -1) {
+    ranked = [...ranked.slice(0, splitIndex + 1).sort((a, b) => a.centerDistSq - b.centerDistSq), ...ranked.slice(splitIndex + 1)];
+  }
+  return ranked.slice(0, Math.min(ranked.length, maxResults)).map(d => d.index);
 }
 function invertScale(scale, value, getDataPoint) {
   if ((0, _scaleGuards.isOrdinalScale)(scale)) {