@mui/x-charts-pro 8.1.0 → 8.3.0

package/esm/BarChartPro/BarChartPro.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef"];
+const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef", "showToolbar"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
@@ -16,6 +16,8 @@ import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
 import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
 import { useBarChartProps, ChartsWrapper } from '@mui/x-charts/internals';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
+import { ChartZoomSlider } from "../ChartZoomSlider/index.js";
+import { ChartsToolbarPro } from "../ChartsToolbarPro/index.js";
 import { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
 import { ChartDataProviderPro } from "../ChartDataProviderPro/index.js";
 import { BAR_CHART_PRO_PLUGINS } from "./BarChartPro.plugins.js";
@@ -40,7 +42,8 @@ const BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(inProps,
       initialZoom,
       zoomData,
       onZoomChange,
-      apiRef
+      apiRef,
+      showToolbar
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -69,10 +72,10 @@ const BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(inProps,
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
   return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
-      children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+      children: [showToolbar ? /*#__PURE__*/_jsx(ChartsToolbarPro, {}) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
           children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
-        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartZoomSlider, {}), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
       }))]
     }))
   }));
@@ -84,6 +87,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
   // ----------------------------------------------------------------------
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
+      exportAsImage: PropTypes.func.isRequired,
       exportAsPrint: PropTypes.func.isRequired,
       setZoomData: PropTypes.func.isRequired
     })
@@ -195,7 +199,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
-   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
   /**
@@ -221,6 +225,11 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    * An array of [[BarSeriesType]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar: PropTypes.bool,
   /**
    * If `true`, animations are skipped.
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
@@ -308,6 +317,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -368,6 +380,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -423,6 +438,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -478,6 +496,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -533,6 +554,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -588,6 +612,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -643,6 +670,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -698,6 +728,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   })]).isRequired),
@@ -765,6 +798,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -824,6 +860,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -878,6 +917,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -932,6 +974,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -986,6 +1031,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -1040,6 +1088,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -1094,6 +1145,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -1148,6 +1202,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   })]).isRequired),

package/esm/ChartContainerPro/useChartContainerProProps.d.ts

@@ -1,7 +1,7 @@
 import { ChartAnyPluginSignature, ChartSeriesType, UseChartContainerPropsReturnValue } from '@mui/x-charts/internals';
 import * as React from 'react';
 import { ChartDataProviderProps } from '@mui/x-charts/ChartDataProvider';
-import type { ChartContainerProProps } from './ChartContainerPro';
+import type { ChartContainerProProps } from "./ChartContainerPro.js";
 import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 export type UseChartContainerProPropsReturnValue<TSeries extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = Pick<UseChartContainerPropsReturnValue<TSeries, TSignatures>, 'chartsSurfaceProps' | 'children'> & {
   chartDataProviderProProps: ChartDataProviderProps<TSeries, TSignatures>;

package/esm/ChartDataProviderPro/ChartDataProviderPro.js

@@ -10,7 +10,7 @@ import { useLicenseVerifier } from '@mui/x-license/useLicenseVerifier';
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 import { useChartDataProviderProProps } from "./useChartDataProviderProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const releaseInfo = "MTc0NTQ0NTYwMDAwMA==";
+const releaseInfo = "MTc0NjY1NTIwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/esm/ChartDataProviderPro/useChartDataProviderProProps.d.ts

@@ -1,6 +1,6 @@
 import { ChartAnyPluginSignature, ChartSeriesType } from '@mui/x-charts/internals';
-import type { ChartDataProviderProProps } from './ChartDataProviderPro';
-import type { AllPluginSignatures } from '../internals/plugins/allPlugins';
+import type { ChartDataProviderProProps } from "./ChartDataProviderPro.js";
+import type { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 export declare const useChartDataProviderProProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartDataProviderProProps<TSeries, TSignatures>) => {
   children: import("react").ReactNode;
   localeText: Partial<import("@mui/x-charts/locales").ChartsLocaleText> | undefined;

package/esm/ChartZoomSlider/ChartZoomSlider.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * Renders the zoom slider for all x and y axes that have it enabled.
+ */
+export declare function ChartZoomSlider(): React.JSX.Element;

package/esm/ChartZoomSlider/ChartZoomSlider.js

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { useXAxes, useYAxes } from '@mui/x-charts/hooks';
+import { ChartAxisZoomSlider } from "./internals/ChartAxisZoomSlider.js";
+
+/**
+ * Renders the zoom slider for all x and y axes that have it enabled.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ChartZoomSlider() {
+  const {
+    xAxisIds,
+    xAxis: xAxes
+  } = useXAxes();
+  const {
+    yAxisIds,
+    yAxis: yAxes
+  } = useYAxes();
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [xAxisIds.map(axisId => {
+      const xAxis = xAxes[axisId];
+      const slider = xAxis.zoom?.slider;
+      if (!slider?.enabled) {
+        return null;
+      }
+      return /*#__PURE__*/_jsx(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__*/_jsx(ChartAxisZoomSlider, {
+        axisId: axisId,
+        axisDirection: "y"
+      }, axisId);
+    })]
+  });
+}

package/esm/ChartZoomSlider/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ChartZoomSlider.js";
+export { type ChartAxisZoomSliderHandleClasses, type ChartAxisZoomSliderHandleClassKey, chartAxisZoomSliderHandleClasses } from "./internals/chartAxisZoomSliderHandleClasses.js";

package/esm/ChartZoomSlider/index.js

@@ -0,0 +1,2 @@
+export * from "./ChartZoomSlider.js";
+export { chartAxisZoomSliderHandleClasses } from "./internals/chartAxisZoomSliderHandleClasses.js";

package/esm/ChartZoomSlider/internals/ChartAxisZoomSlider.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { AxisId, DefaultizedZoomOptions, ZoomData } 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): React.JSX.Element | null;
+export declare function calculateZoomStart(newStart: number, currentZoom: ZoomData, options: Pick<DefaultizedZoomOptions, 'minStart' | 'minSpan' | 'maxSpan'>): number;
+export declare function calculateZoomEnd(newEnd: number, currentZoom: ZoomData, options: Pick<DefaultizedZoomOptions, 'maxEnd' | 'minSpan' | 'maxSpan'>): number;
+export {};

package/esm/ChartZoomSlider/internals/ChartAxisZoomSlider.js

@@ -0,0 +1,339 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { getSVGPoint, selectorChartAxisZoomOptionsLookup, selectorChartDrawingArea, useChartContext, useDrawingArea, useSelector, useStore, ZOOM_SLIDER_MARGIN } from '@mui/x-charts/internals';
+import { styled } from '@mui/material/styles';
+import { useXAxes, useYAxes } from '@mui/x-charts/hooks';
+import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import { selectorChartAxisZoomData } from "../../internals/plugins/useChartProZoom/index.js";
+import { ChartAxisZoomSliderHandle } from "./ChartAxisZoomSliderHandle.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const BackgroundRect = styled('rect')(({
+  theme
+}) => ({
+  '&': {
+    fill: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[800] : (theme.vars || theme).palette.grey[300]
+  }
+}));
+const ZoomRangePreviewRect = styled('rect')(({
+  theme
+}) => ({
+  '&': {
+    fill: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[500] : (theme.vars || theme).palette.grey[600],
+    cursor: 'grab'
+  }
+}));
+const ZOOM_SLIDER_BACKGROUND_SIZE = 8;
+const ZOOM_SLIDER_FOREGROUND_SIZE = 10;
+const ZOOM_SLIDER_HANDLE_HEIGHT = 20;
+const ZOOM_SLIDER_HANDLE_WIDTH = 10;
+const ZOOM_SLIDER_SIZE = Math.max(ZOOM_SLIDER_BACKGROUND_SIZE, ZOOM_SLIDER_FOREGROUND_SIZE, ZOOM_SLIDER_HANDLE_HEIGHT, ZOOM_SLIDER_HANDLE_WIDTH);
+
+/**
+ * Renders the zoom slider for a specific axis.
+ * @internal
+ */
+export function ChartAxisZoomSlider({
+  axisDirection,
+  axisId
+}) {
+  const store = useStore();
+  const drawingArea = useDrawingArea();
+  const zoomData = useSelector(store, selectorChartAxisZoomData, axisId);
+  const {
+    xAxis
+  } = useXAxes();
+  const {
+    yAxis
+  } = useYAxes();
+  if (!zoomData) {
+    return null;
+  }
+  let x;
+  let y;
+  let reverse;
+  if (axisDirection === 'x') {
+    const axis = xAxis[axisId];
+    if (!axis) {
+      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 - ZOOM_SLIDER_SIZE - ZOOM_SLIDER_MARGIN;
+    reverse = axis.reverse ?? false;
+  } else {
+    const axis = yAxis[axisId];
+    if (!axis) {
+      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 - ZOOM_SLIDER_SIZE - ZOOM_SLIDER_MARGIN;
+    y = drawingArea.top;
+    reverse = axis.reverse ?? false;
+  }
+  const backgroundRectOffset = (ZOOM_SLIDER_SIZE - ZOOM_SLIDER_BACKGROUND_SIZE) / 2;
+  return /*#__PURE__*/_jsxs("g", {
+    transform: `translate(${x} ${y})`,
+    children: [/*#__PURE__*/_jsx(BackgroundRect, {
+      x: axisDirection === 'x' ? 0 : backgroundRectOffset,
+      y: axisDirection === 'x' ? backgroundRectOffset : 0,
+      height: axisDirection === 'x' ? ZOOM_SLIDER_BACKGROUND_SIZE : drawingArea.height,
+      width: axisDirection === 'x' ? drawingArea.width : ZOOM_SLIDER_BACKGROUND_SIZE,
+      rx: ZOOM_SLIDER_BACKGROUND_SIZE / 2,
+      ry: ZOOM_SLIDER_BACKGROUND_SIZE / 2
+    }), /*#__PURE__*/_jsx(ChartAxisZoomSliderSpan, {
+      zoomData: zoomData,
+      axisId: axisId,
+      axisDirection: axisDirection,
+      reverse: reverse
+    })]
+  });
+}
+function ChartAxisZoomSliderSpan({
+  axisId,
+  axisDirection,
+  zoomData,
+  reverse
+}) {
+  const {
+    instance,
+    svgRef
+  } = useChartContext();
+  const store = useStore();
+  const drawingArea = useDrawingArea();
+  const activePreviewRectRef = React.useRef(null);
+  const previewHandleWidth = axisDirection === 'x' ? ZOOM_SLIDER_HANDLE_WIDTH : ZOOM_SLIDER_HANDLE_HEIGHT;
+  const previewHandleHeight = axisDirection === 'x' ? ZOOM_SLIDER_HANDLE_HEIGHT : ZOOM_SLIDER_HANDLE_WIDTH;
+  React.useEffect(() => {
+    const activePreviewRect = activePreviewRectRef.current;
+    if (!activePreviewRect) {
+      return;
+    }
+
+    /* min and max values of zoom to ensure the pointer anchor in the slider is maintained  */
+    let pointerZoomMin;
+    let pointerZoomMax;
+    let prevPointerZoom = 0;
+    const onPointerMove = rafThrottle(event => {
+      const {
+        left,
+        top,
+        height,
+        width
+      } = selectorChartDrawingArea(store.getSnapshot());
+      const axisZoomData = selectorChartAxisZoomData(store.getSnapshot(), axisId);
+      const element = svgRef.current;
+      if (!axisZoomData || !element) {
+        return;
+      }
+      const point = getSVGPoint(element, event);
+      let pointerZoom;
+      if (axisDirection === 'x') {
+        pointerZoom = (point.x - left) / width * 100;
+      } else {
+        pointerZoom = (top + height - point.y) / height * 100;
+      }
+      if (reverse) {
+        pointerZoom = 100 - pointerZoom;
+      }
+      pointerZoom = Math.max(pointerZoomMin, Math.min(pointerZoomMax, pointerZoom));
+      const deltaZoom = pointerZoom - prevPointerZoom;
+      prevPointerZoom = pointerZoom;
+      instance.moveZoomRange(axisId, deltaZoom);
+    });
+    const onPointerUp = () => {
+      activePreviewRect.removeEventListener('pointermove', onPointerMove);
+      activePreviewRect.removeEventListener('pointerup', onPointerUp);
+    };
+    const onPointerDown = event => {
+      // Prevent text selection when dragging
+      event.preventDefault();
+      activePreviewRect.setPointerCapture(event.pointerId);
+      const {
+        left,
+        top,
+        height,
+        width
+      } = selectorChartDrawingArea(store.getSnapshot());
+      const axisZoomData = selectorChartAxisZoomData(store.getSnapshot(), axisId);
+      const element = svgRef.current;
+      if (!axisZoomData || !element) {
+        return;
+      }
+      const point = getSVGPoint(element, event);
+
+      // The corresponding value of zoom where the pointer was pressed
+      let pointerDownZoom;
+      if (axisDirection === 'x') {
+        pointerDownZoom = (point.x - left) / width * 100;
+      } else {
+        pointerDownZoom = (top + height - point.y) / height * 100;
+      }
+      if (reverse) {
+        pointerDownZoom = 100 - pointerDownZoom;
+      }
+      prevPointerZoom = pointerDownZoom;
+      pointerZoomMin = pointerDownZoom - axisZoomData.start;
+      pointerZoomMax = 100 - (axisZoomData.end - pointerDownZoom);
+      activePreviewRect.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 onResizeStart = event => {
+    const element = svgRef.current;
+    if (!element) {
+      return;
+    }
+    const point = getSVGPoint(element, event);
+    instance.setZoomData(prevZoomData => {
+      const {
+        left,
+        top,
+        width,
+        height
+      } = selectorChartDrawingArea(store.value);
+      const zoomOptions = selectorChartAxisZoomOptionsLookup(store.value, axisId);
+      return prevZoomData.map(zoom => {
+        if (zoom.axisId === axisId) {
+          let newStart;
+          if (axisDirection === 'x') {
+            newStart = (point.x - left) / width * 100;
+          } else {
+            newStart = (top + height - point.y) / height * 100;
+          }
+          if (reverse) {
+            newStart = 100 - newStart;
+          }
+          return _extends({}, zoom, {
+            start: calculateZoomStart(newStart, zoom, zoomOptions)
+          });
+        }
+        return zoom;
+      });
+    });
+  };
+  const onResizeEnd = event => {
+    const element = svgRef.current;
+    if (!element) {
+      return;
+    }
+    const point = getSVGPoint(element, event);
+    instance.setZoomData(prevZoomData => {
+      const {
+        left,
+        top,
+        width,
+        height
+      } = selectorChartDrawingArea(store.value);
+      const zoomOptions = selectorChartAxisZoomOptionsLookup(store.value, axisId);
+      return prevZoomData.map(zoom => {
+        if (zoom.axisId === axisId) {
+          let newEnd;
+          if (axisDirection === 'x') {
+            newEnd = (point.x - left) / width * 100;
+          } else {
+            newEnd = (top + height - point.y) / height * 100;
+          }
+          if (reverse) {
+            newEnd = 100 - newEnd;
+          }
+          return _extends({}, zoom, {
+            end: calculateZoomEnd(newEnd, zoom, zoomOptions)
+          });
+        }
+        return zoom;
+      });
+    });
+  };
+  let previewX;
+  let previewY;
+  let previewWidth;
+  let previewHeight;
+  let startHandleX;
+  let startHandleY;
+  let endHandleX;
+  let endHandleY;
+  if (axisDirection === 'x') {
+    previewX = zoomData.start / 100 * drawingArea.width;
+    previewY = 0;
+    previewWidth = drawingArea.width * (zoomData.end - zoomData.start) / 100;
+    previewHeight = ZOOM_SLIDER_FOREGROUND_SIZE;
+    startHandleX = zoomData.start / 100 * drawingArea.width;
+    startHandleY = 0;
+    endHandleX = zoomData.end / 100 * drawingArea.width;
+    endHandleY = 0;
+    if (reverse) {
+      previewX = drawingArea.width - previewX - previewWidth;
+      startHandleX = drawingArea.width - startHandleX;
+      endHandleX = drawingArea.width - endHandleX;
+    }
+    startHandleX -= previewHandleWidth / 2;
+    endHandleX -= previewHandleWidth / 2;
+  } else {
+    previewX = 0;
+    previewY = drawingArea.height - zoomData.end / 100 * drawingArea.height;
+    previewWidth = ZOOM_SLIDER_FOREGROUND_SIZE;
+    previewHeight = drawingArea.height * (zoomData.end - zoomData.start) / 100;
+    startHandleX = 0;
+    startHandleY = drawingArea.height - zoomData.start / 100 * drawingArea.height;
+    endHandleX = 0;
+    endHandleY = drawingArea.height - zoomData.end / 100 * drawingArea.height;
+    if (reverse) {
+      previewY = drawingArea.height - previewY - previewHeight;
+      startHandleY = drawingArea.height - startHandleY;
+      endHandleY = drawingArea.height - endHandleY;
+    }
+    startHandleY -= previewHandleHeight / 2;
+    endHandleY -= previewHandleHeight / 2;
+  }
+  const previewOffset = (ZOOM_SLIDER_HANDLE_HEIGHT - ZOOM_SLIDER_FOREGROUND_SIZE) / 2;
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(ZoomRangePreviewRect, {
+      ref: activePreviewRectRef,
+      x: previewX + (axisDirection === 'x' ? 0 : previewOffset),
+      y: previewY + (axisDirection === 'x' ? previewOffset : 0),
+      width: previewWidth,
+      height: previewHeight
+    }), /*#__PURE__*/_jsx(ChartAxisZoomSliderHandle, {
+      x: startHandleX,
+      y: startHandleY,
+      width: previewHandleWidth,
+      height: previewHandleHeight,
+      orientation: axisDirection === 'x' ? 'horizontal' : 'vertical',
+      onResize: onResizeStart,
+      placement: "start"
+    }), /*#__PURE__*/_jsx(ChartAxisZoomSliderHandle, {
+      x: endHandleX,
+      y: endHandleY,
+      width: previewHandleWidth,
+      height: previewHandleHeight,
+      orientation: axisDirection === 'x' ? 'horizontal' : 'vertical',
+      onResize: onResizeEnd,
+      placement: "end"
+    })]
+  });
+}
+export function calculateZoomStart(newStart, currentZoom, options) {
+  const {
+    minStart,
+    minSpan,
+    maxSpan
+  } = options;
+  return Math.max(minStart, currentZoom.end - maxSpan, Math.min(currentZoom.end - minSpan, newStart));
+}
+export function calculateZoomEnd(newEnd, currentZoom, options) {
+  const {
+    maxEnd,
+    minSpan,
+    maxSpan
+  } = options;
+  return Math.min(maxEnd, currentZoom.start + maxSpan, Math.max(currentZoom.start + minSpan, newEnd));
+}

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderHandle.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface ChartZoomSliderHandleOwnerState {
+  onResize: (event: PointerEvent) => void;
+  orientation: 'horizontal' | 'vertical';
+  placement: 'start' | 'end';
+}
+export interface ChartZoomSliderHandleProps extends Pick<React.ComponentProps<'rect'>, 'x' | 'y' | 'width' | 'height' | 'rx' | 'ry'>, ChartZoomSliderHandleOwnerState {}
+/**
+ * Renders the zoom slider handle, which is responsible for resizing the zoom range.
+ * @internal
+ */
+export declare const ChartAxisZoomSliderHandle: React.ForwardRefExoticComponent<ChartZoomSliderHandleProps & React.RefAttributes<SVGRectElement>>;