@mui/x-charts-pro 9.0.0-alpha.0 → 9.0.0-alpha.2

package/plugins/index.d.mts

@@ -0,0 +1,3 @@
+export * from '@mui/x-charts/plugins';
+export { useChartProExport, type UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.mjs";
+export { useChartProZoom, type UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.mjs";

package/plugins/index.mjs

@@ -0,0 +1,3 @@
+export * from '@mui/x-charts/plugins';
+export { useChartProExport } from "../internals/plugins/useChartProExport/index.mjs";
+export { useChartProZoom } from "../internals/plugins/useChartProZoom/index.mjs";

package/plugins/selectors/useChartHeatmapPosition.selectors.d.mts

@@ -0,0 +1,4 @@
+import { type HeatmapItemIdentifier } from "../../models/index.mjs";
+export declare const selectorHeatmapItemAtPosition: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+}, svgPoint: Pick<DOMPoint, "x" | "y">) => HeatmapItemIdentifier | undefined;

package/themeAugmentation/index.d.mts

@@ -0,0 +1,4 @@
+export type * from '@mui/x-charts/themeAugmentation';
+export type * from "./overrides.mjs";
+export type * from "./props.mjs";
+export type * from "./components.mjs";

package/themeAugmentation/overrides.d.mts

@@ -0,0 +1,8 @@
+import { type HeatmapClassKey } from "../Heatmap/index.mjs";
+export interface ChartsProComponentNameToClassKey {
+  MuiHeatmap: HeatmapClassKey;
+}
+declare module '@mui/material/styles' {
+  interface ComponentNameToClassKey extends ChartsProComponentNameToClassKey {}
+}
+export {};

package/themeAugmentation/props.d.mts

@@ -0,0 +1,14 @@
+import { type ScatterChartProProps } from "../ScatterChartPro/index.mjs";
+import { type BarChartProProps } from "../BarChartPro/index.mjs";
+import { type HeatmapProps } from "../Heatmap/Heatmap.mjs";
+import { type LineChartProProps } from "../LineChartPro/index.mjs";
+export interface ChartsProComponentsPropsList {
+  MuiBarChartPro: BarChartProProps;
+  MuiLineChartPro: LineChartProProps;
+  MuiHeatmap: HeatmapProps;
+  MuiScatterChartPro: ScatterChartProProps;
+}
+declare module '@mui/material/styles' {
+  interface ComponentsPropsList extends ChartsProComponentsPropsList {}
+}
+export {};

package/typeOverloads/index.d.mts

@@ -0,0 +1 @@
+export {} from "./modules.mjs";

package/typeOverloads/index.mjs

@@ -0,0 +1 @@
+export {} from "./modules.mjs";

package/typeOverloads/modules.d.mts

@@ -0,0 +1,65 @@
+import type { DefaultizedProps, MakeRequired } from '@mui/x-internals/types';
+import type { AxisId, CommonHighlightScope, SeriesId, ZoomOptions } from '@mui/x-charts/internals';
+import type { DefaultizedFunnelSeriesType, FunnelItemIdentifier, FunnelSeriesType, FunnelValueType } from "../FunnelChart/funnel.types.mjs";
+import type { HeatmapItemIdentifier, HeatmapSeriesType, DefaultizedHeatmapSeriesType, HeatmapValueType } from "../models/seriesType/heatmap.mjs";
+import type { SankeyLayout, SankeySeriesType, DefaultizedSankeySeriesType, SankeyItemIdentifier, SankeyItemIdentifierWithData } from "../SankeyChart/sankey.types.mjs";
+import type { SankeyHighlightScope } from "../SankeyChart/sankey.highlight.types.mjs";
+declare module '@mui/x-charts/internals' {
+  interface ChartsSeriesConfig {
+    heatmap: {
+      seriesInput: DefaultizedProps<HeatmapSeriesType, 'id'>;
+      series: DefaultizedHeatmapSeriesType;
+      seriesLayout: {};
+      seriesProp: HeatmapSeriesType;
+      itemIdentifier: HeatmapItemIdentifier;
+      itemIdentifierWithData: HeatmapItemIdentifier;
+      valueType: HeatmapValueType;
+      axisType: 'cartesian';
+      highlightScope: CommonHighlightScope;
+      highlightIdentifier: {
+        type: 'heatmap';
+        seriesId: SeriesId;
+        xIndex: number;
+        yIndex: number;
+      };
+    };
+    funnel: {
+      seriesInput: Omit<DefaultizedProps<FunnelSeriesType, 'id'>, 'data'> & {
+        data: MakeRequired<FunnelValueType, 'color'>[];
+      };
+      series: DefaultizedFunnelSeriesType;
+      seriesLayout: {};
+      seriesProp: FunnelSeriesType;
+      itemIdentifier: FunnelItemIdentifier;
+      itemIdentifierWithData: FunnelItemIdentifier;
+      valueType: MakeRequired<FunnelValueType, 'id' | 'color'>;
+      axisType: 'cartesian';
+      highlightScope: CommonHighlightScope;
+      highlightIdentifier: {
+        type: 'funnel';
+        seriesId: SeriesId;
+        dataIndex?: number;
+      };
+    };
+    sankey: {
+      seriesInput: DefaultizedSankeySeriesType;
+      series: DefaultizedSankeySeriesType;
+      seriesLayout: {
+        sankeyLayout: SankeyLayout<true>;
+      };
+      seriesProp: SankeySeriesType;
+      itemIdentifier: SankeyItemIdentifier;
+      itemIdentifierWithData: SankeyItemIdentifierWithData<true>;
+      valueType: number;
+      highlightScope: SankeyHighlightScope;
+      highlightIdentifier: SankeyItemIdentifier;
+    };
+  }
+  interface DefaultizedZoomOptions extends Required<ZoomOptions> {
+    axisId: AxisId;
+    axisDirection: 'x' | 'y';
+  }
+  interface AxisConfigExtension {
+    zoom?: boolean | ZoomOptions;
+  }
+}

package/typeOverloads/modules.d.ts

@@ -1,5 +1,5 @@
 import type { DefaultizedProps, MakeRequired } from '@mui/x-internals/types';
-import type { AxisId, CommonHighlightScope, ZoomOptions } from '@mui/x-charts/internals';
+import type { AxisId, CommonHighlightScope, SeriesId, ZoomOptions } from '@mui/x-charts/internals';
 import type { DefaultizedFunnelSeriesType, FunnelItemIdentifier, FunnelSeriesType, FunnelValueType } from "../FunnelChart/funnel.types.js";
 import type { HeatmapItemIdentifier, HeatmapSeriesType, DefaultizedHeatmapSeriesType, HeatmapValueType } from "../models/seriesType/heatmap.js";
 import type { SankeyLayout, SankeySeriesType, DefaultizedSankeySeriesType, SankeyItemIdentifier, SankeyItemIdentifierWithData } from "../SankeyChart/sankey.types.js";
@@ -16,6 +16,12 @@ declare module '@mui/x-charts/internals' {
       valueType: HeatmapValueType;
       axisType: 'cartesian';
       highlightScope: CommonHighlightScope;
+      highlightIdentifier: {
+        type: 'heatmap';
+        seriesId: SeriesId;
+        xIndex: number;
+        yIndex: number;
+      };
     };
     funnel: {
       seriesInput: Omit<DefaultizedProps<FunnelSeriesType, 'id'>, 'data'> & {
@@ -29,6 +35,11 @@ declare module '@mui/x-charts/internals' {
       valueType: MakeRequired<FunnelValueType, 'id' | 'color'>;
       axisType: 'cartesian';
       highlightScope: CommonHighlightScope;
+      highlightIdentifier: {
+        type: 'funnel';
+        seriesId: SeriesId;
+        dataIndex?: number;
+      };
     };
     sankey: {
       seriesInput: DefaultizedSankeySeriesType;
@@ -41,6 +52,7 @@ declare module '@mui/x-charts/internals' {
       itemIdentifierWithData: SankeyItemIdentifierWithData<true>;
       valueType: number;
       highlightScope: SankeyHighlightScope;
+      highlightIdentifier: SankeyItemIdentifier;
     };
   }
   interface DefaultizedZoomOptions extends Required<ZoomOptions> {

package/ChartZoomSlider/ChartZoomSlider.d.ts

@@ -1,4 +0,0 @@
-/**
- * Renders the zoom slider for all x and y axes that have it enabled.
- */
-export declare function ChartZoomSlider(): import("react/jsx-runtime").JSX.Element;

package/ChartZoomSlider/ChartZoomSlider.js

@@ -1,47 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ChartZoomSlider = ChartZoomSlider;
-var React = _interopRequireWildcard(require("react"));
-var _hooks = require("@mui/x-charts/hooks");
-var _ChartAxisZoomSlider = require("./internals/ChartAxisZoomSlider");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Renders the zoom slider for all x and y axes that have it enabled.
- */
-function ChartZoomSlider() {
-  const {
-    xAxisIds,
-    xAxis: xAxes
-  } = (0, _hooks.useXAxes)();
-  const {
-    yAxisIds,
-    yAxis: yAxes
-  } = (0, _hooks.useYAxes)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [xAxisIds.map(axisId => {
-      const xAxis = xAxes[axisId];
-      const slider = xAxis.zoom?.slider;
-      if (!slider?.enabled) {
-        return null;
-      }
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSlider.ChartAxisZoomSlider, {
-        axisId: axisId,
-        axisDirection: "x"
-      }, axisId);
-    }), yAxisIds.map(axisId => {
-      const yAxis = yAxes[axisId];
-      const slider = yAxis.zoom?.slider;
-      if (!slider?.enabled) {
-        return null;
-      }
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSlider.ChartAxisZoomSlider, {
-        axisId: axisId,
-        axisDirection: "y"
-      }, axisId);
-    })]
-  });
-}

package/ChartZoomSlider/internals/ChartAxisZoomSlider.d.ts

@@ -1,20 +0,0 @@
-import { type AxisId } from '@mui/x-charts/internals';
-interface ChartZoomSliderProps {
-  /**
-   * The ID of the axis this overview refers to.
-   */
-  axisId: AxisId;
-  /**
-   * The direction of the axis.
-   */
-  axisDirection: 'x' | 'y';
-}
-/**
- * Renders the zoom slider for a specific axis.
- * @internal
- */
-export declare function ChartAxisZoomSlider({
-  axisDirection,
-  axisId
-}: ChartZoomSliderProps): import("react/jsx-runtime").JSX.Element | null;
-export {};

package/ChartZoomSlider/internals/ChartAxisZoomSlider.js

@@ -1,111 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ChartAxisZoomSlider = ChartAxisZoomSlider;
-var React = _interopRequireWildcard(require("react"));
-var _internals = require("@mui/x-charts/internals");
-var _hooks = require("@mui/x-charts/hooks");
-var _ChartAxisZoomSliderPreview = require("./ChartAxisZoomSliderPreview");
-var _constants = require("./constants");
-var _useChartProZoom = require("../../internals/plugins/useChartProZoom");
-var _ChartAxisZoomSliderTrack = require("./ChartAxisZoomSliderTrack");
-var _ChartAxisZoomSliderActiveTrack = require("./ChartAxisZoomSliderActiveTrack");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Renders the zoom slider for a specific axis.
- * @internal
- */
-function ChartAxisZoomSlider({
-  axisDirection,
-  axisId
-}) {
-  const store = (0, _internals.useStore)();
-  const drawingArea = (0, _internals.useDrawingArea)();
-  const zoomData = store.use(_useChartProZoom.selectorChartAxisZoomData, axisId);
-  const zoomOptions = store.use(_internals.selectorChartAxisZoomOptionsLookup, axisId);
-  const [showTooltip, setShowTooltip] = React.useState(false);
-  const {
-    xAxis
-  } = (0, _hooks.useXAxes)();
-  const {
-    yAxis
-  } = (0, _hooks.useYAxes)();
-  const showPreview = zoomOptions.slider.preview;
-  if (!zoomData) {
-    return null;
-  }
-  let x;
-  let y;
-  let reverse;
-  let axisPosition;
-  let tooltipConditions;
-  const sliderSize = showPreview ? _internals.ZOOM_SLIDER_PREVIEW_SIZE : _constants.ZOOM_SLIDER_SIZE;
-  if (axisDirection === 'x') {
-    const axis = xAxis[axisId];
-    if (!axis || axis.position === 'none') {
-      return null;
-    }
-    const axisSize = axis.height;
-    x = drawingArea.left;
-    y = axis.position === 'bottom' ? drawingArea.top + drawingArea.height + axis.offset + axisSize + _internals.ZOOM_SLIDER_MARGIN : drawingArea.top - axis.offset - axisSize - sliderSize - _internals.ZOOM_SLIDER_MARGIN;
-    reverse = axis.reverse ?? false;
-    axisPosition = axis.position ?? 'bottom';
-    tooltipConditions = axis.zoom?.slider?.showTooltip ?? _internals.DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP;
-  } else {
-    const axis = yAxis[axisId];
-    if (!axis || axis.position === 'none') {
-      return null;
-    }
-    const axisSize = axis.width;
-    x = axis.position === 'right' ? drawingArea.left + drawingArea.width + axis.offset + axisSize + _internals.ZOOM_SLIDER_MARGIN : drawingArea.left - axis.offset - axisSize - sliderSize - _internals.ZOOM_SLIDER_MARGIN;
-    y = drawingArea.top;
-    reverse = axis.reverse ?? false;
-    axisPosition = axis.position ?? 'left';
-    tooltipConditions = axis.zoom?.slider?.showTooltip ?? _internals.DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP;
-  }
-  const backgroundRectOffset = (sliderSize - _constants.ZOOM_SLIDER_TRACK_SIZE) / 2;
-  const track = showPreview ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderPreview.ChartAxisZoomSliderPreview, {
-    axisId: axisId,
-    axisDirection: axisDirection,
-    reverse: reverse,
-    x: 0,
-    y: 0,
-    height: axisDirection === 'x' ? _internals.ZOOM_SLIDER_PREVIEW_SIZE : drawingArea.height,
-    width: axisDirection === 'x' ? drawingArea.width : _internals.ZOOM_SLIDER_PREVIEW_SIZE
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderTrack.ChartAxisZoomSliderTrack, {
-    x: axisDirection === 'x' ? 0 : backgroundRectOffset,
-    y: axisDirection === 'x' ? backgroundRectOffset : 0,
-    height: axisDirection === 'x' ? _constants.ZOOM_SLIDER_TRACK_SIZE : drawingArea.height,
-    width: axisDirection === 'x' ? drawingArea.width : _constants.ZOOM_SLIDER_TRACK_SIZE,
-    rx: _constants.ZOOM_SLIDER_TRACK_SIZE / 2,
-    ry: _constants.ZOOM_SLIDER_TRACK_SIZE / 2,
-    axisId: axisId,
-    axisDirection: axisDirection,
-    reverse: reverse,
-    onSelectStart: tooltipConditions === 'hover' ? () => setShowTooltip(true) : undefined,
-    onSelectEnd: tooltipConditions === 'hover' ? () => setShowTooltip(false) : undefined
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-    "data-charts-zoom-slider": true,
-    transform: `translate(${x} ${y})`,
-    style: {
-      touchAction: 'none'
-    },
-    children: [track, /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderActiveTrack.ChartAxisZoomSliderActiveTrack, {
-      zoomData: zoomData,
-      axisId: axisId,
-      axisPosition: axisPosition,
-      axisDirection: axisDirection,
-      reverse: reverse,
-      showTooltip: showTooltip && tooltipConditions !== 'never' || tooltipConditions === 'always',
-      size: showPreview ? _internals.ZOOM_SLIDER_PREVIEW_SIZE : _constants.ZOOM_SLIDER_ACTIVE_TRACK_SIZE,
-      preview: showPreview,
-      onPointerEnter: tooltipConditions === 'hover' ? () => setShowTooltip(true) : undefined,
-      onPointerLeave: tooltipConditions === 'hover' ? () => setShowTooltip(false) : undefined
-    })]
-  });
-}

package/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.d.ts

@@ -1,25 +0,0 @@
-import { type AxisId, type ZoomData } from '@mui/x-charts/internals';
-export interface ChartAxisZoomSliderActiveTrackProps {
-  axisId: AxisId;
-  axisDirection: 'x' | 'y';
-  axisPosition: 'top' | 'bottom' | 'left' | 'right';
-  size: number;
-  preview: boolean;
-  zoomData: ZoomData;
-  reverse?: boolean;
-  showTooltip: boolean;
-  onPointerEnter?: () => void;
-  onPointerLeave?: () => void;
-}
-export declare function ChartAxisZoomSliderActiveTrack({
-  axisId,
-  axisDirection,
-  axisPosition,
-  size,
-  preview,
-  zoomData,
-  reverse,
-  showTooltip,
-  onPointerEnter,
-  onPointerLeave
-}: ChartAxisZoomSliderActiveTrackProps): import("react/jsx-runtime").JSX.Element;

package/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js

@@ -1,303 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ChartAxisZoomSliderActiveTrack = ChartAxisZoomSliderActiveTrack;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _styles = require("@mui/material/styles");
-var _internals = require("@mui/x-charts/internals");
-var React = _interopRequireWildcard(require("react"));
-var _rafThrottle = require("@mui/x-internals/rafThrottle");
-var _system = require("@mui/system");
-var _useChartProZoom = require("../../internals/plugins/useChartProZoom");
-var _ChartAxisZoomSliderThumb = require("./ChartAxisZoomSliderThumb");
-var _ChartsTooltipZoomSliderValue = require("./ChartsTooltipZoomSliderValue");
-var _zoomUtils = require("./zoom-utils");
-var _constants = require("./constants");
-var _chartAxisZoomSliderTrackClasses = require("./chartAxisZoomSliderTrackClasses");
-var _jsxRuntime = require("react/jsx-runtime");
-const ZoomSliderActiveTrackRect = (0, _styles.styled)('rect', {
-  slot: 'internal',
-  shouldForwardProp: prop => (0, _system.shouldForwardProp)(prop) && prop !== 'preview'
-})(({
-  theme
-}) => (0, _extends2.default)({
-  fill: (theme.vars || theme).palette.grey[600]
-}, theme.applyStyles('dark', {
-  fill: (theme.vars || theme).palette.grey[500]
-}), {
-  cursor: 'grab',
-  variants: [{
-    props: {
-      preview: true
-    },
-    style: (0, _extends2.default)({
-      fill: 'transparent'
-    }, theme.applyStyles('dark', {
-      fill: 'transparent'
-    }), {
-      rx: 4,
-      ry: 4,
-      stroke: theme.palette.grey[500]
-    })
-  }]
-}));
-function ChartAxisZoomSliderActiveTrack({
-  axisId,
-  axisDirection,
-  axisPosition,
-  size,
-  preview,
-  zoomData,
-  reverse,
-  showTooltip,
-  onPointerEnter,
-  onPointerLeave
-}) {
-  const {
-    instance
-  } = (0, _internals.useChartContext)();
-  const {
-    svgRef
-  } = instance;
-  const store = (0, _internals.useStore)();
-  const axis = store.use(_internals.selectorChartAxis, axisId);
-  const drawingArea = (0, _internals.useDrawingArea)();
-  const activePreviewRectRef = React.useRef(null);
-  const [startThumbEl, setStartThumbEl] = React.useState(null);
-  const [endThumbEl, setEndThumbEl] = React.useState(null);
-  const {
-    tooltipStart,
-    tooltipEnd
-  } = getZoomSliderTooltipsText(axis, drawingArea);
-  const classes = (0, _chartAxisZoomSliderTrackClasses.useUtilityClasses)({
-    axisDirection
-  });
-  const previewThumbWidth = axisDirection === 'x' ? _constants.ZOOM_SLIDER_THUMB_WIDTH : _constants.ZOOM_SLIDER_THUMB_HEIGHT;
-  const previewThumbHeight = axisDirection === 'x' ? _constants.ZOOM_SLIDER_THUMB_HEIGHT : _constants.ZOOM_SLIDER_THUMB_WIDTH;
-  React.useEffect(() => {
-    const activePreviewRect = activePreviewRectRef.current;
-    if (!activePreviewRect) {
-      return;
-    }
-    let prevPointerZoom = 0;
-    const onPointerMove = (0, _rafThrottle.rafThrottle)(event => {
-      const element = svgRef.current;
-      if (!element) {
-        return;
-      }
-      const point = (0, _internals.getChartPoint)(element, event);
-      const pointerZoom = (0, _zoomUtils.calculateZoomFromPoint)(store.state, axisId, point);
-      if (pointerZoom === null) {
-        return;
-      }
-      const deltaZoom = pointerZoom - prevPointerZoom;
-      prevPointerZoom = pointerZoom;
-      instance.moveZoomRange(axisId, deltaZoom);
-    });
-    const onPointerUp = () => {
-      activePreviewRect.removeEventListener('pointermove', onPointerMove);
-      document.removeEventListener('pointerup', onPointerUp);
-    };
-    const onPointerDown = event => {
-      // Prevent text selection when dragging
-      event.preventDefault();
-      activePreviewRect.setPointerCapture(event.pointerId);
-      const axisZoomData = (0, _useChartProZoom.selectorChartAxisZoomData)(store.state, axisId);
-      const element = svgRef.current;
-      if (!axisZoomData || !element) {
-        return;
-      }
-      const point = (0, _internals.getChartPoint)(element, event);
-      const pointerDownZoom = (0, _zoomUtils.calculateZoomFromPoint)(store.state, axisId, point);
-      if (pointerDownZoom === null) {
-        return;
-      }
-      prevPointerZoom = pointerDownZoom;
-      document.addEventListener('pointerup', onPointerUp);
-      activePreviewRect.addEventListener('pointermove', onPointerMove);
-    };
-    activePreviewRect.addEventListener('pointerdown', onPointerDown);
-
-    // eslint-disable-next-line consistent-return
-    return () => {
-      activePreviewRect.removeEventListener('pointerdown', onPointerDown);
-      onPointerMove.clear();
-    };
-  }, [axisDirection, axisId, instance, reverse, store, svgRef]);
-  const onStartThumbMove = event => {
-    const element = svgRef.current;
-    if (!element) {
-      return;
-    }
-    const point = (0, _internals.getChartPoint)(element, event);
-    instance.setZoomData(prevZoomData => {
-      const zoomOptions = (0, _internals.selectorChartAxisZoomOptionsLookup)(store.state, axisId);
-      return prevZoomData.map(zoom => {
-        if (zoom.axisId === axisId) {
-          const newStart = (0, _zoomUtils.calculateZoomFromPoint)(store.state, axisId, point);
-          if (newStart === null) {
-            return zoom;
-          }
-          return (0, _extends2.default)({}, zoom, {
-            start: (0, _zoomUtils.calculateZoomStart)(newStart, zoom, zoomOptions)
-          });
-        }
-        return zoom;
-      });
-    });
-  };
-  const onEndThumbMove = event => {
-    const element = svgRef.current;
-    if (!element) {
-      return;
-    }
-    const point = (0, _internals.getChartPoint)(element, event);
-    instance.setZoomData(prevZoomData => {
-      const zoomOptions = (0, _internals.selectorChartAxisZoomOptionsLookup)(store.state, axisId);
-      return prevZoomData.map(zoom => {
-        if (zoom.axisId === axisId) {
-          const newEnd = (0, _zoomUtils.calculateZoomFromPoint)(store.state, axisId, point);
-          if (newEnd === null) {
-            return zoom;
-          }
-          return (0, _extends2.default)({}, zoom, {
-            end: (0, _zoomUtils.calculateZoomEnd)(newEnd, zoom, zoomOptions)
-          });
-        }
-        return zoom;
-      });
-    });
-  };
-  let previewX;
-  let previewY;
-  let previewWidth;
-  let previewHeight;
-  let startThumbX;
-  let startThumbY;
-  let endThumbX;
-  let endThumbY;
-  const {
-    minStart,
-    maxEnd
-  } = (0, _internals.selectorChartAxisZoomOptionsLookup)(store.state, axisId);
-  const range = maxEnd - minStart;
-  const zoomStart = Math.max(minStart, zoomData.start);
-  const zoomEnd = Math.min(zoomData.end, maxEnd);
-  if (axisDirection === 'x') {
-    previewX = (zoomStart - minStart) / range * drawingArea.width;
-    previewY = 0;
-    previewWidth = drawingArea.width * (zoomEnd - zoomStart) / range;
-    previewHeight = size;
-    startThumbX = (zoomStart - minStart) / range * drawingArea.width;
-    startThumbY = _constants.ZOOM_SLIDER_THUMB_HEIGHT < size ? (size - _constants.ZOOM_SLIDER_THUMB_HEIGHT) / 2 : 0;
-    endThumbX = (zoomEnd - minStart) / range * drawingArea.width;
-    endThumbY = _constants.ZOOM_SLIDER_THUMB_HEIGHT < size ? (size - _constants.ZOOM_SLIDER_THUMB_HEIGHT) / 2 : 0;
-    if (reverse) {
-      previewX = drawingArea.width - previewX - previewWidth;
-      startThumbX = drawingArea.width - startThumbX;
-      endThumbX = drawingArea.width - endThumbX;
-    }
-    startThumbX -= previewThumbWidth / 2;
-    endThumbX -= previewThumbWidth / 2;
-  } else {
-    previewX = 0;
-    previewY = drawingArea.height - (zoomEnd - minStart) / range * drawingArea.height;
-    previewWidth = size;
-    previewHeight = drawingArea.height * (zoomEnd - zoomStart) / range;
-    startThumbX = _constants.ZOOM_SLIDER_THUMB_HEIGHT < size ? (size - _constants.ZOOM_SLIDER_THUMB_HEIGHT) / 2 : 0;
-    startThumbY = drawingArea.height - (zoomStart - minStart) / range * drawingArea.height;
-    endThumbX = _constants.ZOOM_SLIDER_THUMB_HEIGHT < size ? (size - _constants.ZOOM_SLIDER_THUMB_HEIGHT) / 2 : 0;
-    endThumbY = drawingArea.height - (zoomEnd - minStart) / range * drawingArea.height;
-    if (reverse) {
-      previewY = drawingArea.height - previewY - previewHeight;
-      startThumbY = drawingArea.height - startThumbY;
-      endThumbY = drawingArea.height - endThumbY;
-    }
-    startThumbY -= previewThumbHeight / 2;
-    endThumbY -= previewThumbHeight / 2;
-  }
-  const previewOffset = _constants.ZOOM_SLIDER_THUMB_HEIGHT > size ? (_constants.ZOOM_SLIDER_THUMB_HEIGHT - size) / 2 : 0;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomSliderActiveTrackRect, {
-      ref: activePreviewRectRef,
-      x: previewX + (axisDirection === 'x' ? 0 : previewOffset),
-      y: previewY + (axisDirection === 'x' ? previewOffset : 0),
-      preview: preview,
-      width: previewWidth,
-      height: previewHeight,
-      onPointerEnter: onPointerEnter,
-      onPointerLeave: onPointerLeave,
-      className: classes.active
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderThumb.ChartAxisZoomSliderThumb, {
-      ref: setStartThumbEl,
-      x: startThumbX,
-      y: startThumbY,
-      width: previewThumbWidth,
-      height: previewThumbHeight,
-      orientation: axisDirection === 'x' ? 'horizontal' : 'vertical',
-      onMove: onStartThumbMove,
-      onPointerEnter: onPointerEnter,
-      onPointerLeave: onPointerLeave,
-      placement: "start"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderThumb.ChartAxisZoomSliderThumb, {
-      ref: setEndThumbEl,
-      x: endThumbX,
-      y: endThumbY,
-      width: previewThumbWidth,
-      height: previewThumbHeight,
-      orientation: axisDirection === 'x' ? 'horizontal' : 'vertical',
-      onMove: onEndThumbMove,
-      onPointerEnter: onPointerEnter,
-      onPointerLeave: onPointerLeave,
-      placement: "end"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipZoomSliderValue.ChartsTooltipZoomSliderValue, {
-      anchorEl: startThumbEl,
-      open: showTooltip && tooltipStart !== '',
-      placement: axisPosition,
-      children: tooltipStart
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipZoomSliderValue.ChartsTooltipZoomSliderValue, {
-      anchorEl: endThumbEl,
-      open: showTooltip && tooltipEnd !== '',
-      placement: axisPosition,
-      children: tooltipEnd
-    })]
-  });
-}
-
-/**
- * Returns the text for the tooltips on the thumbs of the zoom slider.
- */
-function getZoomSliderTooltipsText(axis, drawingArea) {
-  const formatValue = value => {
-    if (axis.valueFormatter) {
-      return axis.valueFormatter(value, {
-        location: 'zoom-slider-tooltip',
-        scale: axis.scale
-      });
-    }
-    return `${value}`;
-  };
-  const axisDirection = axis.position === 'top' || axis.position === 'bottom' ? 'x' : 'y';
-  let start = axisDirection === 'x' ? drawingArea.left : drawingArea.top;
-  const size = axisDirection === 'x' ? drawingArea.width : drawingArea.height;
-  let end = start + size;
-  if (axisDirection === 'y') {
-    [start, end] = [end, start]; // Invert for y-axis
-  }
-  if (axis.reverse) {
-    [start, end] = [end, start]; // Reverse the start and end if the axis is reversed
-  }
-  const startValue = (0, _internals.invertScale)(axis.scale, axis.data ?? [], start) ?? axis.data?.at(0);
-  const endValue = (0, _internals.invertScale)(axis.scale, axis.data ?? [], end) ?? axis.data?.at(-1);
-  const tooltipStart = formatValue(startValue);
-  const tooltipEnd = formatValue(endValue);
-  return {
-    tooltipStart,
-    tooltipEnd
-  };
-}