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

package/ChartsZoomSlider/internals/ChartsAxisZoomSlider.d.mts

@@ -0,0 +1,20 @@
+import { type AxisId } from '@mui/x-charts/internals';
+interface ChartsZoomSliderProps {
+  /**
+   * 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 ChartsAxisZoomSlider({
+  axisDirection,
+  axisId
+}: ChartsZoomSliderProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/ChartsZoomSlider/internals/ChartsAxisZoomSlider.d.ts

@@ -0,0 +1,20 @@
+import { type AxisId } from '@mui/x-charts/internals';
+interface ChartsZoomSliderProps {
+  /**
+   * 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 ChartsAxisZoomSlider({
+  axisDirection,
+  axisId
+}: ChartsZoomSliderProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/ChartsZoomSlider/internals/ChartsAxisZoomSlider.js

@@ -0,0 +1,111 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsAxisZoomSlider = ChartsAxisZoomSlider;
+var React = _interopRequireWildcard(require("react"));
+var _internals = require("@mui/x-charts/internals");
+var _hooks = require("@mui/x-charts/hooks");
+var _ChartsAxisZoomSliderPreview = require("./ChartsAxisZoomSliderPreview");
+var _constants = require("./constants");
+var _useChartProZoom = require("../../internals/plugins/useChartProZoom");
+var _ChartsAxisZoomSliderTrack = require("./ChartsAxisZoomSliderTrack");
+var _ChartsAxisZoomSliderActiveTrack = require("./ChartsAxisZoomSliderActiveTrack");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Renders the zoom slider for a specific axis.
+ * @internal
+ */
+function ChartsAxisZoomSlider({
+  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)(_ChartsAxisZoomSliderPreview.ChartsAxisZoomSliderPreview, {
+    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)(_ChartsAxisZoomSliderTrack.ChartsAxisZoomSliderTrack, {
+    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)(_ChartsAxisZoomSliderActiveTrack.ChartsAxisZoomSliderActiveTrack, {
+      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/ChartsZoomSlider/internals/ChartsAxisZoomSlider.mjs

@@ -0,0 +1,105 @@
+'use client';
+
+import * as React from 'react';
+import { DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP, selectorChartAxisZoomOptionsLookup, useDrawingArea, useStore, ZOOM_SLIDER_MARGIN, ZOOM_SLIDER_PREVIEW_SIZE } from '@mui/x-charts/internals';
+import { useXAxes, useYAxes } from '@mui/x-charts/hooks';
+import { ChartsAxisZoomSliderPreview } from "./ChartsAxisZoomSliderPreview.mjs";
+import { ZOOM_SLIDER_ACTIVE_TRACK_SIZE, ZOOM_SLIDER_SIZE, ZOOM_SLIDER_TRACK_SIZE } from "./constants.mjs";
+import { selectorChartAxisZoomData } from "../../internals/plugins/useChartProZoom/index.mjs";
+import { ChartsAxisZoomSliderTrack } from "./ChartsAxisZoomSliderTrack.mjs";
+import { ChartsAxisZoomSliderActiveTrack } from "./ChartsAxisZoomSliderActiveTrack.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Renders the zoom slider for a specific axis.
+ * @internal
+ */
+export function ChartsAxisZoomSlider({
+  axisDirection,
+  axisId
+}) {
+  const store = useStore();
+  const drawingArea = useDrawingArea();
+  const zoomData = store.use(selectorChartAxisZoomData, axisId);
+  const zoomOptions = store.use(selectorChartAxisZoomOptionsLookup, axisId);
+  const [showTooltip, setShowTooltip] = React.useState(false);
+  const {
+    xAxis
+  } = useXAxes();
+  const {
+    yAxis
+  } = useYAxes();
+  const showPreview = zoomOptions.slider.preview;
+  if (!zoomData) {
+    return null;
+  }
+  let x;
+  let y;
+  let reverse;
+  let axisPosition;
+  let tooltipConditions;
+  const sliderSize = showPreview ? ZOOM_SLIDER_PREVIEW_SIZE : 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 + ZOOM_SLIDER_MARGIN : drawingArea.top - axis.offset - axisSize - sliderSize - ZOOM_SLIDER_MARGIN;
+    reverse = axis.reverse ?? false;
+    axisPosition = axis.position ?? 'bottom';
+    tooltipConditions = axis.zoom?.slider?.showTooltip ?? 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 + ZOOM_SLIDER_MARGIN : drawingArea.left - axis.offset - axisSize - sliderSize - ZOOM_SLIDER_MARGIN;
+    y = drawingArea.top;
+    reverse = axis.reverse ?? false;
+    axisPosition = axis.position ?? 'left';
+    tooltipConditions = axis.zoom?.slider?.showTooltip ?? DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP;
+  }
+  const backgroundRectOffset = (sliderSize - ZOOM_SLIDER_TRACK_SIZE) / 2;
+  const track = showPreview ? /*#__PURE__*/_jsx(ChartsAxisZoomSliderPreview, {
+    axisId: axisId,
+    axisDirection: axisDirection,
+    reverse: reverse,
+    x: 0,
+    y: 0,
+    height: axisDirection === 'x' ? ZOOM_SLIDER_PREVIEW_SIZE : drawingArea.height,
+    width: axisDirection === 'x' ? drawingArea.width : ZOOM_SLIDER_PREVIEW_SIZE
+  }) : /*#__PURE__*/_jsx(ChartsAxisZoomSliderTrack, {
+    x: axisDirection === 'x' ? 0 : backgroundRectOffset,
+    y: axisDirection === 'x' ? backgroundRectOffset : 0,
+    height: axisDirection === 'x' ? ZOOM_SLIDER_TRACK_SIZE : drawingArea.height,
+    width: axisDirection === 'x' ? drawingArea.width : ZOOM_SLIDER_TRACK_SIZE,
+    rx: ZOOM_SLIDER_TRACK_SIZE / 2,
+    ry: 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__*/_jsxs("g", {
+    "data-charts-zoom-slider": true,
+    transform: `translate(${x} ${y})`,
+    style: {
+      touchAction: 'none'
+    },
+    children: [track, /*#__PURE__*/_jsx(ChartsAxisZoomSliderActiveTrack, {
+      zoomData: zoomData,
+      axisId: axisId,
+      axisPosition: axisPosition,
+      axisDirection: axisDirection,
+      reverse: reverse,
+      showTooltip: showTooltip && tooltipConditions !== 'never' || tooltipConditions === 'always',
+      size: showPreview ? ZOOM_SLIDER_PREVIEW_SIZE : ZOOM_SLIDER_ACTIVE_TRACK_SIZE,
+      preview: showPreview,
+      onPointerEnter: tooltipConditions === 'hover' ? () => setShowTooltip(true) : undefined,
+      onPointerLeave: tooltipConditions === 'hover' ? () => setShowTooltip(false) : undefined
+    })]
+  });
+}

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderActiveTrack.d.mts

@@ -0,0 +1,25 @@
+import { type AxisId, type ZoomData } from '@mui/x-charts/internals';
+export interface ChartsAxisZoomSliderActiveTrackProps {
+  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 ChartsAxisZoomSliderActiveTrack({
+  axisId,
+  axisDirection,
+  axisPosition,
+  size,
+  preview,
+  zoomData,
+  reverse,
+  showTooltip,
+  onPointerEnter,
+  onPointerLeave
+}: ChartsAxisZoomSliderActiveTrackProps): import("react/jsx-runtime").JSX.Element;

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderActiveTrack.d.ts

@@ -0,0 +1,25 @@
+import { type AxisId, type ZoomData } from '@mui/x-charts/internals';
+export interface ChartsAxisZoomSliderActiveTrackProps {
+  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 ChartsAxisZoomSliderActiveTrack({
+  axisId,
+  axisDirection,
+  axisPosition,
+  size,
+  preview,
+  zoomData,
+  reverse,
+  showTooltip,
+  onPointerEnter,
+  onPointerLeave
+}: ChartsAxisZoomSliderActiveTrackProps): import("react/jsx-runtime").JSX.Element;

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderActiveTrack.js

@@ -0,0 +1,303 @@
+"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.ChartsAxisZoomSliderActiveTrack = ChartsAxisZoomSliderActiveTrack;
+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 _ChartsAxisZoomSliderThumb = require("./ChartsAxisZoomSliderThumb");
+var _ChartsTooltipZoomSliderValue = require("./ChartsTooltipZoomSliderValue");
+var _zoomUtils = require("./zoom-utils");
+var _constants = require("./constants");
+var _chartsAxisZoomSliderTrackClasses = require("./chartsAxisZoomSliderTrackClasses");
+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 ChartsAxisZoomSliderActiveTrack({
+  axisId,
+  axisDirection,
+  axisPosition,
+  size,
+  preview,
+  zoomData,
+  reverse,
+  showTooltip,
+  onPointerEnter,
+  onPointerLeave
+}) {
+  const {
+    instance
+  } = (0, _internals.useChartContext)();
+  const {
+    chartsLayerContainerRef
+  } = 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, _chartsAxisZoomSliderTrackClasses.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 = chartsLayerContainerRef.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 = chartsLayerContainerRef.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, chartsLayerContainerRef]);
+  const onStartThumbMove = event => {
+    const element = chartsLayerContainerRef.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 = chartsLayerContainerRef.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)(_ChartsAxisZoomSliderThumb.ChartsAxisZoomSliderThumb, {
+      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)(_ChartsAxisZoomSliderThumb.ChartsAxisZoomSliderThumb, {
+      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
+  };
+}