@mui/x-charts 8.3.1 → 8.5.0

package/internals/dateHelpers.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createDateFormatter = createDateFormatter;
+exports.isDateData = void 0;
+var _d3Scale = require("@mui/x-charts-vendor/d3-scale");
+/**
+ * Checks if the provided data array contains Date objects.
+ * @param data The data array to check.
+ * @returns A type predicate indicating if the data is an array of Date objects.
+ */
+const isDateData = data => data?.[0] instanceof Date;
+
+/**
+ * Creates a formatter function for date values.
+ * @param axis The axis configuration.
+ * @param range The range for the time scale.
+ * @returns A formatter function for date values.
+ */
+exports.isDateData = isDateData;
+function createDateFormatter(axis, range) {
+  const timeScale = (0, _d3Scale.scaleTime)(axis.data, range);
+  return (v, {
+    location
+  }) => location === 'tick' ? timeScale.tickFormat(axis.tickNumber)(v) : `${v.toLocaleString()}`;
+}

package/internals/domUtils.d.ts

@@ -14,5 +14,4 @@ export declare const getStyleString: (style: React.CSSProperties) => string;
 export declare const getStringSize: (text: string | number, style?: React.CSSProperties) => {
   width: number;
   height: number;
-};
-export declare function unstable_cleanupDOM(): void;
+};

package/internals/domUtils.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getStyleString = exports.getStringSize = exports.MEASUREMENT_SPAN_ID = void 0;
-exports.unstable_cleanupDOM = unstable_cleanupDOM;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 // DOM utils taken from
 // https://github.com/recharts/recharts/blob/master/src/util/DOMUtils.ts
@@ -13,10 +12,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 function isSsr() {
   return typeof window === 'undefined';
 }
-const stringCache = {
-  widthCache: {},
-  cacheCount: 0
-};
+const stringCache = new Map();
 const MAX_CACHE_NUM = 2000;
 const SPAN_STYLE = {
   position: 'absolute',
@@ -84,8 +80,9 @@ const getStringSize = (text, style = {}) => {
   const str = `${text}`;
   const styleString = getStyleString(style);
   const cacheKey = `${str}-${styleString}`;
-  if (stringCache.widthCache[cacheKey]) {
-    return stringCache.widthCache[cacheKey];
+  const size = stringCache.get(cacheKey);
+  if (size) {
+    return size;
   }
   try {
     let measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
@@ -108,12 +105,9 @@ const getStringSize = (text, style = {}) => {
       width: rect.width,
       height: rect.height
     };
-    stringCache.widthCache[cacheKey] = result;
-    if (stringCache.cacheCount + 1 > MAX_CACHE_NUM) {
-      stringCache.cacheCount = 0;
-      stringCache.widthCache = {};
-    } else {
-      stringCache.cacheCount += 1;
+    stringCache.set(cacheKey, result);
+    if (stringCache.size + 1 > MAX_CACHE_NUM) {
+      stringCache.clear();
     }
     if (process.env.NODE_ENV === 'test') {
       // In test environment, we clean the measurement span immediately
@@ -135,10 +129,4 @@ const getStringSize = (text, style = {}) => {
     };
   }
 };
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-exports.getStringSize = getStringSize;
-function unstable_cleanupDOM() {
-  // const measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
-  // measurementSpan?.remove();
-}
+exports.getStringSize = getStringSize;

package/internals/index.d.ts

@@ -7,6 +7,7 @@ export { useDrawingArea } from "../hooks/useDrawingArea.js";
 export { useScatterChartProps } from "../ScatterChart/useScatterChartProps.js";
 export { useLineChartProps } from "../LineChart/useLineChartProps.js";
 export { useBarChartProps } from "../BarChart/useBarChartProps.js";
+export { useRadarChartProps } from "../RadarChart/useRadarChartProps.js";
 export * from "../ChartContainer/useChartContainerProps.js";
 export * from "../ChartDataProvider/useChartDataProviderProps.js";
 export * from "./createSeriesSelectorOfType.js";
@@ -26,20 +27,22 @@ export * from "./store/useSelector.js";
 export * from "../BarChart/BarChart.plugins.js";
 export * from "../LineChart/LineChart.plugins.js";
 export * from "../ScatterChart/ScatterChart.plugins.js";
+export * from "../RadarChart/RadarChart.plugins.js";
 export * from "./defaultizeValueFormatter.js";
 export * from "./configInit.js";
 export * from "./getLabel.js";
 export * from "./getSVGPoint.js";
 export * from "./isDefined.js";
-export { unstable_cleanupDOM } from "./domUtils.js";
 export * from "./getScale.js";
 export * from "./stackSeries.js";
 export * from "./getCurve.js";
 export * from "./consumeSlots.js";
 export * from "./consumeThemeProps.js";
 export * from "./defaultizeMargin.js";
+export * from "./dateHelpers.js";
 export { getAxisExtremum } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js";
 export * from "../context/ChartProvider/index.js";
+export * from "../context/ChartsSlotsContext.js";
 export * from "../models/seriesType/config.js";
 export * from "../models/seriesType/common.js";
 export * from "../models/z-axis.js";

package/internals/index.js

@@ -10,7 +10,7 @@ var _exportNames = {
   useScatterChartProps: true,
   useLineChartProps: true,
   useBarChartProps: true,
-  unstable_cleanupDOM: true,
+  useRadarChartProps: true,
   getAxisExtremum: true
 };
 Object.defineProperty(exports, "getAxisExtremum", {
@@ -19,12 +19,6 @@ Object.defineProperty(exports, "getAxisExtremum", {
     return _getAxisExtremum.getAxisExtremum;
   }
 });
-Object.defineProperty(exports, "unstable_cleanupDOM", {
-  enumerable: true,
-  get: function () {
-    return _domUtils.unstable_cleanupDOM;
-  }
-});
 Object.defineProperty(exports, "useBarChartProps", {
   enumerable: true,
   get: function () {
@@ -49,6 +43,12 @@ Object.defineProperty(exports, "useLineChartProps", {
     return _useLineChartProps.useLineChartProps;
   }
 });
+Object.defineProperty(exports, "useRadarChartProps", {
+  enumerable: true,
+  get: function () {
+    return _useRadarChartProps.useRadarChartProps;
+  }
+});
 Object.defineProperty(exports, "useScatterChartProps", {
   enumerable: true,
   get: function () {
@@ -103,6 +103,7 @@ var _useDrawingArea = require("../hooks/useDrawingArea");
 var _useScatterChartProps = require("../ScatterChart/useScatterChartProps");
 var _useLineChartProps = require("../LineChart/useLineChartProps");
 var _useBarChartProps = require("../BarChart/useBarChartProps");
+var _useRadarChartProps = require("../RadarChart/useRadarChartProps");
 var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
 Object.keys(_useChartContainerProps).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -331,6 +332,18 @@ Object.keys(_ScatterChart).forEach(function (key) {
     }
   });
 });
+var _RadarChart = require("../RadarChart/RadarChart.plugins");
+Object.keys(_RadarChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _RadarChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _RadarChart[key];
+    }
+  });
+});
 var _defaultizeValueFormatter = require("./defaultizeValueFormatter");
 Object.keys(_defaultizeValueFormatter).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -391,7 +404,6 @@ Object.keys(_isDefined).forEach(function (key) {
     }
   });
 });
-var _domUtils = require("./domUtils");
 var _getScale = require("./getScale");
 Object.keys(_getScale).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -464,6 +476,18 @@ Object.keys(_defaultizeMargin).forEach(function (key) {
     }
   });
 });
+var _dateHelpers = require("./dateHelpers");
+Object.keys(_dateHelpers).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _dateHelpers[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _dateHelpers[key];
+    }
+  });
+});
 var _getAxisExtremum = require("./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum");
 var _ChartProvider = require("../context/ChartProvider");
 Object.keys(_ChartProvider).forEach(function (key) {
@@ -477,6 +501,18 @@ Object.keys(_ChartProvider).forEach(function (key) {
     }
   });
 });
+var _ChartsSlotsContext = require("../context/ChartsSlotsContext");
+Object.keys(_ChartsSlotsContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ChartsSlotsContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsSlotsContext[key];
+    }
+  });
+});
 var _config = require("../models/seriesType/config");
 Object.keys(_config).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/material/index.d.ts

@@ -1,4 +1,6 @@
+import type * as React from 'react';
 import { ChartsBaseSlots } from "../../models/slots/chartsBaseSlots.js";
 import { ChartsIconSlots } from "../../models/slots/chartsIconSlots.js";
 export type ChartsSlots = ChartsBaseSlots & ChartsIconSlots;
+export type ChartsSlotProps = { [key in keyof ChartsSlots]: React.ComponentProps<ChartsSlots[key]> };
 export declare const defaultSlotsMaterial: ChartsSlots;

package/internals/plugins/allPlugins.d.ts

@@ -6,4 +6,5 @@ import { UseChartPolarAxisSignature } from "./featurePlugins/useChartPolarAxis/i
 import { UseChartVoronoiSignature } from "./featurePlugins/useChartVoronoi/index.js";
 import { UseChartZAxisSignature } from "./featurePlugins/useChartZAxis/index.js";
 export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature];
+export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature];
 export declare const DEFAULT_PLUGINS: readonly [import("./models/index.js").ChartPlugin<UseChartZAxisSignature>, import("./models/index.js").ChartPlugin<UseChartCartesianAxisSignature<any>>, import("./models/index.js").ChartPlugin<UseChartInteractionSignature>, import("./models/index.js").ChartPlugin<UseChartHighlightSignature>, import("./models/index.js").ChartPlugin<UseChartVoronoiSignature>];

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.js

@@ -11,6 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _ownerWindow = _interopRequireDefault(require("@mui/utils/ownerWindow"));
+var _useSelector = require("../../../store/useSelector");
 var _constants = require("../../../../constants");
 var _useChartDimensions = require("./useChartDimensions.selectors");
 var _defaultizeMargin = require("../../../defaultizeMargin");
@@ -150,28 +151,21 @@ const useChartDimensions = ({
       stateRef.current.displayError = false;
     }
   }
-  const isPointInside = React.useCallback(({
-    x,
-    y
-  }, options) => {
+  const drawingArea = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartDrawingArea);
+  const isXInside = React.useCallback(x => x >= drawingArea.left - 1 && x <= drawingArea.left + drawingArea.width, [drawingArea.left, drawingArea.width]);
+  const isYInside = React.useCallback(y => y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height, [drawingArea.height, drawingArea.top]);
+  const isPointInside = React.useCallback((x, y, targetElement) => {
     // For element allowed to overflow, wrapping them in <g data-drawing-container /> make them fully part of the drawing area.
-    if (options?.targetElement && options?.targetElement.closest('[data-drawing-container]')) {
+    if (targetElement && targetElement.closest('[data-drawing-container]')) {
       return true;
     }
-    const drawingArea = (0, _useChartDimensions.selectorChartDrawingArea)(store.value);
-    const isInsideX = x >= drawingArea.left - 1 && x <= drawingArea.left + drawingArea.width;
-    const isInsideY = y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height;
-    if (options?.direction === 'x') {
-      return isInsideX;
-    }
-    if (options?.direction === 'y') {
-      return isInsideY;
-    }
-    return isInsideX && isInsideY;
-  }, [store.value]);
+    return isXInside(x) && isYInside(y);
+  }, [isXInside, isYInside]);
   return {
     instance: {
-      isPointInside
+      isPointInside,
+      isXInside,
+      isYInside
     }
   };
 };

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.d.ts

@@ -65,21 +65,24 @@ export interface UseChartDimensionsState {
 export interface UseChartDimensionsInstance {
   /**
    * Checks if a point is inside the drawing area.
-   * @param {Object} point The point to check.
-   * @param {number} point.x The x coordinate of the point.
-   * @param {number} point.y The y coordinate of the point.
-   * @param {Object} options The options of the check.
-   * @param {Element} [options.targetElement] The element to check if it is allowed to overflow the drawing area.
-   * @param {'x' | 'y'} [options.direction] The direction to check.
+   * @param {number} x The x coordinate of the point.
+   * @param {number} y The y coordinate of the point.
+   * @param {Element} targetElement The element to check if it is allowed to overflow the drawing area.
    * @returns {boolean} `true` if the point is inside the drawing area, `false` otherwise.
    */
-  isPointInside: (point: {
-    x: number;
-    y: number;
-  }, options?: {
-    targetElement?: Element;
-    direction?: 'x' | 'y';
-  }) => boolean;
+  isPointInside: (x: number, y: number, targetElement?: Element) => boolean;
+  /**
+   * Checks if the x coordinate is inside the drawing area.
+   * @param {number} x The x coordinate of the point.
+   * @returns {boolean} `true` if the point is inside the drawing area, `false` otherwise.
+   */
+  isXInside: (x: number) => boolean;
+  /**
+   * Checks if the y coordinate is inside the drawing area.
+   * @param {number} y The y coordinate of the point.
+   * @returns {boolean} `true` if the point is inside the drawing area, `false` otherwise.
+   */
+  isYInside: (y: number) => boolean;
 }
 export type UseChartDimensionsSignature = ChartPluginSignature<{
   params: UseChartDimensionsParameters;

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

@@ -11,6 +11,7 @@ var _axis = require("../../../../models/axis");
 var _colorScale = require("../../../colorScale");
 var _ticks = require("../../../ticks");
 var _getScale = require("../../../getScale");
+var _dateHelpers = require("../../../dateHelpers");
 var _zoom = require("./zoom");
 var _getAxisExtremum = require("./getAxisExtremum");
 var _getAxisTriggerTooltip = require("./getAxisTriggerTooltip");
@@ -20,13 +21,6 @@ axis) {
   const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
   return axis.reverse ? [range[1], range[0]] : range;
 }
-const isDateData = data => data?.[0] instanceof Date;
-function createDateFormatter(axis, range) {
-  const timeScale = (0, _d3Scale.scaleTime)(axis.data, range);
-  return (v, {
-    location
-  }) => location === 'tick' ? timeScale.tickFormat(axis.tickNumber)(v) : `${v.toLocaleString()}`;
-}
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 const DEFAULT_BAR_GAP_RATIO = 0.1;
 function computeAxisValue({
@@ -77,8 +71,8 @@ function computeAxisValue({
           values: axis.data
         }, axis.colorMap)) : (0, _colorScale.getColorScale)(axis.colorMap))
       });
-      if (isDateData(axis.data)) {
-        const dateFormatter = createDateFormatter(axis, scaleRange);
+      if ((0, _dateHelpers.isDateData)(axis.data)) {
+        const dateFormatter = (0, _dateHelpers.createDateFormatter)(axis, scaleRange);
         completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
       }
     }
@@ -97,8 +91,8 @@ function computeAxisValue({
           values: axis.data
         }, axis.colorMap)) : (0, _colorScale.getColorScale)(axis.colorMap))
       });
-      if (isDateData(axis.data)) {
-        const dateFormatter = createDateFormatter(axis, scaleRange);
+      if ((0, _dateHelpers.isDateData)(axis.data)) {
+        const dateFormatter = (0, _dateHelpers.createDateFormatter)(axis, scaleRange);
         completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
       }
     }

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

@@ -7,9 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.defaultizeXAxis = defaultizeXAxis;
 exports.defaultizeYAxis = defaultizeYAxis;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _constants = require("../../../constants");
 var _defaultizeZoom = require("./defaultizeZoom");
-var _constants2 = require("../../../../constants");
+var _constants = require("../../../../constants");
 function defaultizeXAxis(inAxes, dataset) {
   const offsets = {
     top: 0,
@@ -17,7 +16,7 @@ function defaultizeXAxis(inAxes, dataset) {
     none: 0
   };
   const inputAxes = inAxes && inAxes.length > 0 ? inAxes : [{
-    id: _constants2.DEFAULT_X_AXIS_KEY,
+    id: _constants.DEFAULT_X_AXIS_KEY,
     scaleType: 'linear'
   }];
   const parsedAxes = inputAxes.map((axisConfig, index) => {
@@ -26,7 +25,7 @@ function defaultizeXAxis(inAxes, dataset) {
     // The first x-axis is defaultized to the bottom
     const defaultPosition = index === 0 ? 'bottom' : 'none';
     const position = axisConfig.position ?? defaultPosition;
-    const defaultHeight = _constants2.DEFAULT_AXIS_SIZE_HEIGHT + (axisConfig.label ? _constants2.AXIS_LABEL_DEFAULT_HEIGHT : 0);
+    const defaultHeight = _constants.DEFAULT_AXIS_SIZE_HEIGHT + (axisConfig.label ? _constants.AXIS_LABEL_DEFAULT_HEIGHT : 0);
     const id = axisConfig.id ?? `defaultized-x-axis-${index}`;
     const sharedConfig = (0, _extends2.default)({
       offset: offsets[position]
@@ -41,7 +40,7 @@ function defaultizeXAxis(inAxes, dataset) {
     if (position !== 'none') {
       offsets[position] += sharedConfig.height;
       if (sharedConfig.zoom?.slider.enabled) {
-        offsets[position] += _constants.ZOOM_SLIDER_SIZE;
+        offsets[position] += sharedConfig.zoom.slider.size;
       }
     }
 
@@ -67,7 +66,7 @@ function defaultizeYAxis(inAxes, dataset) {
     none: 0
   };
   const inputAxes = inAxes && inAxes.length > 0 ? inAxes : [{
-    id: _constants2.DEFAULT_Y_AXIS_KEY,
+    id: _constants.DEFAULT_Y_AXIS_KEY,
     scaleType: 'linear'
   }];
   const parsedAxes = inputAxes.map((axisConfig, index) => {
@@ -76,7 +75,7 @@ function defaultizeYAxis(inAxes, dataset) {
     // The first y-axis is defaultized to the left
     const defaultPosition = index === 0 ? 'left' : 'none';
     const position = axisConfig.position ?? defaultPosition;
-    const defaultWidth = _constants2.DEFAULT_AXIS_SIZE_WIDTH + (axisConfig.label ? _constants2.AXIS_LABEL_DEFAULT_HEIGHT : 0);
+    const defaultWidth = _constants.DEFAULT_AXIS_SIZE_WIDTH + (axisConfig.label ? _constants.AXIS_LABEL_DEFAULT_HEIGHT : 0);
     const id = axisConfig.id ?? `defaultized-y-axis-${index}`;
     const sharedConfig = (0, _extends2.default)({
       offset: offsets[position]
@@ -91,7 +90,7 @@ function defaultizeYAxis(inAxes, dataset) {
     if (position !== 'none') {
       offsets[position] += sharedConfig.width;
       if (sharedConfig.zoom?.slider.enabled) {
-        offsets[position] += _constants.ZOOM_SLIDER_SIZE;
+        offsets[position] += sharedConfig.zoom.slider.size;
       }
     }
 

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

@@ -1,4 +1,18 @@
 import { AxisId } from "../../../../models/axis.js";
 import { DefaultizedZoomOptions } from "./useChartCartesianAxis.types.js";
 import { ZoomOptions } from "./zoom.types.js";
+export declare const defaultZoomOptions: {
+  minStart: number;
+  maxEnd: number;
+  step: number;
+  minSpan: number;
+  maxSpan: number;
+  panning: true;
+  filterMode: "keep";
+  slider: {
+    enabled: false;
+    size: number;
+    showTooltip: import("./zoom.types.js").ZoomSliderShowTooltip;
+  };
+};
 export declare const defaultizeZoom: (zoom: boolean | ZoomOptions | undefined, axisId: AxisId, axisDirection: "x" | "y") => DefaultizedZoomOptions | undefined;

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

@@ -4,9 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultizeZoom = void 0;
+exports.defaultizeZoom = exports.defaultZoomOptions = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-const defaultZoomOptions = {
+var _constants = require("../../../constants");
+const defaultZoomOptions = exports.defaultZoomOptions = {
   minStart: 0,
   maxEnd: 100,
   step: 5,
@@ -15,7 +16,9 @@ const defaultZoomOptions = {
   panning: true,
   filterMode: 'keep',
   slider: {
-    enabled: false
+    enabled: false,
+    size: _constants.DEFAULT_ZOOM_SLIDER_SIZE,
+    showTooltip: _constants.DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP
   }
 };
 const defaultizeZoom = (zoom, axisId, axisDirection) => {

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

@@ -4,10 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectorChartTopAxisSize = exports.selectorChartRightAxisSize = exports.selectorChartLeftAxisSize = exports.selectorChartBottomAxisSize = void 0;
-var _constants = require("../../../constants");
 var _useChartCartesianAxisLayout = require("./useChartCartesianAxisLayout.selectors");
 var _selectors = require("../../utils/selectors");
-const selectorChartLeftAxisSize = exports.selectorChartLeftAxisSize = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis], yAxis => (yAxis ?? []).reduce((acc, axis) => axis.position === 'left' ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? _constants.ZOOM_SLIDER_SIZE : 0) : acc, 0));
-const selectorChartRightAxisSize = exports.selectorChartRightAxisSize = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis], yAxis => (yAxis ?? []).reduce((acc, axis) => axis.position === 'right' ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? _constants.ZOOM_SLIDER_SIZE : 0) : acc, 0));
-const selectorChartTopAxisSize = exports.selectorChartTopAxisSize = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis], xAxis => (xAxis ?? []).reduce((acc, axis) => axis.position === 'top' ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? _constants.ZOOM_SLIDER_SIZE : 0) : acc, 0));
-const selectorChartBottomAxisSize = exports.selectorChartBottomAxisSize = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis], xAxis => (xAxis ?? []).reduce((acc, axis) => axis.position === 'bottom' ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? _constants.ZOOM_SLIDER_SIZE : 0) : acc, 0));
+const selectorChartLeftAxisSize = exports.selectorChartLeftAxisSize = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis], yAxis => (yAxis ?? []).reduce((acc, axis) => axis.position === 'left' ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0));
+const selectorChartRightAxisSize = exports.selectorChartRightAxisSize = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis], yAxis => (yAxis ?? []).reduce((acc, axis) => axis.position === 'right' ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0));
+const selectorChartTopAxisSize = exports.selectorChartTopAxisSize = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis], xAxis => (xAxis ?? []).reduce((acc, axis) => axis.position === 'top' ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0));
+const selectorChartBottomAxisSize = exports.selectorChartBottomAxisSize = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis], xAxis => (xAxis ?? []).reduce((acc, axis) => axis.position === 'bottom' ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0));

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

@@ -78,9 +78,7 @@ const useChartCartesianAxis = ({
     const handleMove = event => {
       const target = 'targetTouches' in event ? event.targetTouches[0] : event;
       const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, target);
-      if (!instance.isPointInside(svgPoint, {
-        targetElement: event.target
-      })) {
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y, event.target)) {
         instance.cleanInteraction?.();
         return;
       }

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

@@ -2,7 +2,7 @@ import type { ChartPluginSignature } from "../../models/index.js";
 import type { ChartSeriesType, DatasetType } from "../../../../models/seriesType/config.js";
 import type { ComputedAxis, ScaleName, AxisId, ChartsAxisData, YAxis, XAxis, DefaultedXAxis, DefaultedYAxis } from "../../../../models/axis.js";
 import type { UseChartSeriesSignature } from "../../corePlugins/useChartSeries/index.js";
-import type { ZoomData, ZoomOptions } from "./zoom.types.js";
+import type { ZoomData, ZoomOptions, ZoomSliderShowTooltip } from "./zoom.types.js";
 import type { UseChartInteractionSignature } from "../useChartInteraction/index.js";
 import type { ChartsAxisProps } from "../../../../ChartsAxis/index.js";
 /**
@@ -47,10 +47,13 @@ export type UseChartCartesianAxisDefaultizedParameters<S extends ScaleName = Sca
   defaultizedXAxis: DefaultedXAxis<S>[];
   defaultizedYAxis: DefaultedYAxis<S>[];
 };
+export interface DefaultedZoomSliderOptions extends Omit<NonNullable<Required<ZoomOptions['slider']>>, 'showTooltip'> {
+  showTooltip: ZoomSliderShowTooltip;
+}
 export interface DefaultizedZoomOptions extends Required<Omit<ZoomOptions, 'slider'>> {
   axisId: AxisId;
   axisDirection: 'x' | 'y';
-  slider: NonNullable<Required<ZoomOptions['slider']>>;
+  slider: DefaultedZoomSliderOptions;
 }
 export interface UseChartCartesianAxisState {
   /**

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

@@ -3238,4 +3238,87 @@ export declare const selectorChartYAxis: ((state: import("../../corePlugins/useC
 } & {
   memoize: typeof import("reselect").weakMapMemoize;
   argsMemoize: typeof import("reselect").weakMapMemoize;
+};
+export declare const selectorChartRawAxis: ((state: any, axisId: AxisId) => import("../../../index.js").DefaultedXAxis | import("../../../index.js").DefaultedYAxis | undefined) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: import("../../../index.js").DefaultedXAxis[] | undefined, resultFuncArgs_1: import("../../../index.js").DefaultedYAxis[] | undefined, resultFuncArgs_2: AxisId) => import("../../../index.js").DefaultedXAxis | import("../../../index.js").DefaultedYAxis | undefined;
+  memoizedResultFunc: ((resultFuncArgs_0: import("../../../index.js").DefaultedXAxis[] | undefined, resultFuncArgs_1: import("../../../index.js").DefaultedYAxis[] | undefined, resultFuncArgs_2: AxisId) => import("../../../index.js").DefaultedXAxis | import("../../../index.js").DefaultedYAxis | undefined) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => import("../../../index.js").DefaultedXAxis | import("../../../index.js").DefaultedYAxis | undefined;
+  dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+    cacheKey: import("../../models/index.js").ChartStateCacheKey;
+  }) => import("../../../index.js").DefaultedXAxis[] | undefined) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  } & {
+    resultFunc: (resultFuncArgs_0: {
+      x: import("../../../index.js").DefaultedXAxis[];
+      y: import("../../../index.js").DefaultedYAxis[];
+    } | undefined) => import("../../../index.js").DefaultedXAxis[] | undefined;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+      x: import("../../../index.js").DefaultedXAxis[];
+      y: import("../../../index.js").DefaultedYAxis[];
+    } | undefined) => import("../../../index.js").DefaultedXAxis[] | undefined) & {
+      clearCache: () => void;
+      resultsCount: () => number;
+      resetResultsCount: () => void;
+    };
+    lastResult: () => import("../../../index.js").DefaultedXAxis[] | undefined;
+    dependencies: [(state: ChartState<[], [UseChartCartesianAxisSignature]>) => {
+      x: import("../../../index.js").DefaultedXAxis[];
+      y: import("../../../index.js").DefaultedYAxis[];
+    } | undefined];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+  } & {
+    memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+  }, ((state: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+    cacheKey: import("../../models/index.js").ChartStateCacheKey;
+  }) => import("../../../index.js").DefaultedYAxis[] | undefined) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  } & {
+    resultFunc: (resultFuncArgs_0: {
+      x: import("../../../index.js").DefaultedXAxis[];
+      y: import("../../../index.js").DefaultedYAxis[];
+    } | undefined) => import("../../../index.js").DefaultedYAxis[] | undefined;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+      x: import("../../../index.js").DefaultedXAxis[];
+      y: import("../../../index.js").DefaultedYAxis[];
+    } | undefined) => import("../../../index.js").DefaultedYAxis[] | undefined) & {
+      clearCache: () => void;
+      resultsCount: () => number;
+      resetResultsCount: () => void;
+    };
+    lastResult: () => import("../../../index.js").DefaultedYAxis[] | undefined;
+    dependencies: [(state: ChartState<[], [UseChartCartesianAxisSignature]>) => {
+      x: import("../../../index.js").DefaultedXAxis[];
+      y: import("../../../index.js").DefaultedYAxis[];
+    } | undefined];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+  } & {
+    memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+  }, (state: any, axisId: AxisId) => AxisId];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  memoize: typeof import("reselect").weakMapMemoize;
+  argsMemoize: typeof import("reselect").weakMapMemoize;
 };