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

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js

@@ -1,296 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { styled } from '@mui/material/styles';
-import { getChartPoint, invertScale, selectorChartAxis, selectorChartAxisZoomOptionsLookup, useChartContext, useDrawingArea, useStore } from '@mui/x-charts/internals';
-import * as React from 'react';
-import { rafThrottle } from '@mui/x-internals/rafThrottle';
-import { shouldForwardProp } from '@mui/system';
-import { selectorChartAxisZoomData } from "../../internals/plugins/useChartProZoom/index.js";
-import { ChartAxisZoomSliderThumb } from "./ChartAxisZoomSliderThumb.js";
-import { ChartsTooltipZoomSliderValue } from "./ChartsTooltipZoomSliderValue.js";
-import { calculateZoomEnd, calculateZoomFromPoint, calculateZoomStart } from "./zoom-utils.js";
-import { ZOOM_SLIDER_THUMB_HEIGHT, ZOOM_SLIDER_THUMB_WIDTH } from "./constants.js";
-import { useUtilityClasses } from "./chartAxisZoomSliderTrackClasses.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ZoomSliderActiveTrackRect = styled('rect', {
-  slot: 'internal',
-  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'preview'
-})(({
-  theme
-}) => _extends({
-  fill: (theme.vars || theme).palette.grey[600]
-}, theme.applyStyles('dark', {
-  fill: (theme.vars || theme).palette.grey[500]
-}), {
-  cursor: 'grab',
-  variants: [{
-    props: {
-      preview: true
-    },
-    style: _extends({
-      fill: 'transparent'
-    }, theme.applyStyles('dark', {
-      fill: 'transparent'
-    }), {
-      rx: 4,
-      ry: 4,
-      stroke: theme.palette.grey[500]
-    })
-  }]
-}));
-export function ChartAxisZoomSliderActiveTrack({
-  axisId,
-  axisDirection,
-  axisPosition,
-  size,
-  preview,
-  zoomData,
-  reverse,
-  showTooltip,
-  onPointerEnter,
-  onPointerLeave
-}) {
-  const {
-    instance
-  } = useChartContext();
-  const {
-    svgRef
-  } = instance;
-  const store = useStore();
-  const axis = store.use(selectorChartAxis, axisId);
-  const drawingArea = 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 = useUtilityClasses({
-    axisDirection
-  });
-  const previewThumbWidth = axisDirection === 'x' ? ZOOM_SLIDER_THUMB_WIDTH : ZOOM_SLIDER_THUMB_HEIGHT;
-  const previewThumbHeight = axisDirection === 'x' ? ZOOM_SLIDER_THUMB_HEIGHT : ZOOM_SLIDER_THUMB_WIDTH;
-  React.useEffect(() => {
-    const activePreviewRect = activePreviewRectRef.current;
-    if (!activePreviewRect) {
-      return;
-    }
-    let prevPointerZoom = 0;
-    const onPointerMove = rafThrottle(event => {
-      const element = svgRef.current;
-      if (!element) {
-        return;
-      }
-      const point = getChartPoint(element, event);
-      const pointerZoom = 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 = selectorChartAxisZoomData(store.state, axisId);
-      const element = svgRef.current;
-      if (!axisZoomData || !element) {
-        return;
-      }
-      const point = getChartPoint(element, event);
-      const pointerDownZoom = 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 = getChartPoint(element, event);
-    instance.setZoomData(prevZoomData => {
-      const zoomOptions = selectorChartAxisZoomOptionsLookup(store.state, axisId);
-      return prevZoomData.map(zoom => {
-        if (zoom.axisId === axisId) {
-          const newStart = calculateZoomFromPoint(store.state, axisId, point);
-          if (newStart === null) {
-            return zoom;
-          }
-          return _extends({}, zoom, {
-            start: calculateZoomStart(newStart, zoom, zoomOptions)
-          });
-        }
-        return zoom;
-      });
-    });
-  };
-  const onEndThumbMove = event => {
-    const element = svgRef.current;
-    if (!element) {
-      return;
-    }
-    const point = getChartPoint(element, event);
-    instance.setZoomData(prevZoomData => {
-      const zoomOptions = selectorChartAxisZoomOptionsLookup(store.state, axisId);
-      return prevZoomData.map(zoom => {
-        if (zoom.axisId === axisId) {
-          const newEnd = calculateZoomFromPoint(store.state, axisId, point);
-          if (newEnd === null) {
-            return zoom;
-          }
-          return _extends({}, zoom, {
-            end: 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
-  } = 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 = ZOOM_SLIDER_THUMB_HEIGHT < size ? (size - ZOOM_SLIDER_THUMB_HEIGHT) / 2 : 0;
-    endThumbX = (zoomEnd - minStart) / range * drawingArea.width;
-    endThumbY = ZOOM_SLIDER_THUMB_HEIGHT < size ? (size - 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 = ZOOM_SLIDER_THUMB_HEIGHT < size ? (size - ZOOM_SLIDER_THUMB_HEIGHT) / 2 : 0;
-    startThumbY = drawingArea.height - (zoomStart - minStart) / range * drawingArea.height;
-    endThumbX = ZOOM_SLIDER_THUMB_HEIGHT < size ? (size - 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 = ZOOM_SLIDER_THUMB_HEIGHT > size ? (ZOOM_SLIDER_THUMB_HEIGHT - size) / 2 : 0;
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_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__*/_jsx(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__*/_jsx(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__*/_jsx(ChartsTooltipZoomSliderValue, {
-      anchorEl: startThumbEl,
-      open: showTooltip && tooltipStart !== '',
-      placement: axisPosition,
-      children: tooltipStart
-    }), /*#__PURE__*/_jsx(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 = invertScale(axis.scale, axis.data ?? [], start) ?? axis.data?.at(0);
-  const endValue = invertScale(axis.scale, axis.data ?? [], end) ?? axis.data?.at(-1);
-  const tooltipStart = formatValue(startValue);
-  const tooltipEnd = formatValue(endValue);
-  return {
-    tooltipStart,
-    tooltipEnd
-  };
-}

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

@@ -1,17 +0,0 @@
-import { type AxisId } from '@mui/x-charts/internals';
-interface ChartAxisZoomSliderPreviewProps {
-  axisId: AxisId;
-  axisDirection: 'x' | 'y';
-  reverse: boolean;
-  x: number;
-  y: number;
-  height: number;
-  width: number;
-}
-export declare function ChartAxisZoomSliderPreview({
-  axisId,
-  axisDirection,
-  reverse,
-  ...props
-}: ChartAxisZoomSliderPreviewProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderPreview.js

@@ -1,97 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["axisId", "axisDirection", "reverse"];
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import { selectorChartAxisZoomOptionsLookup, useStore } from '@mui/x-charts/internals';
-import { alpha } from '@mui/system';
-import useId from '@mui/utils/useId';
-import { selectorChartAxisZoomData } from "../../internals/plugins/useChartProZoom/index.js";
-import { ChartAxisZoomSliderPreviewContent } from "./ChartAxisZoomSliderPreviewContent.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const PreviewBackgroundRect = styled('rect', {
-  slot: 'internal',
-  shouldForwardProp: undefined
-})(({
-  theme
-}) => ({
-  rx: 4,
-  ry: 4,
-  stroke: theme.palette.grey[700],
-  fill: alpha(theme.palette.grey[700], 0.4)
-}));
-export function ChartAxisZoomSliderPreview(_ref) {
-  let {
-      axisId,
-      axisDirection
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return /*#__PURE__*/_jsxs("g", _extends({}, props, {
-    children: [/*#__PURE__*/_jsx(PreviewRectangles, _extends({}, props, {
-      axisId: axisId,
-      axisDirection: axisDirection
-    })), /*#__PURE__*/_jsx("rect", _extends({}, props, {
-      fill: "transparent",
-      rx: 4,
-      ry: 4
-    })), /*#__PURE__*/_jsx(ChartAxisZoomSliderPreviewContent, _extends({
-      axisId: axisId
-    }, props))]
-  }));
-}
-function PreviewRectangles(props) {
-  const {
-    axisId,
-    axisDirection
-  } = props;
-  const store = useStore();
-  const zoomData = store.use(selectorChartAxisZoomData, axisId);
-  const zoomOptions = store.use(selectorChartAxisZoomOptionsLookup, axisId);
-  const id = useId();
-  if (!zoomData) {
-    return null;
-  }
-  const maskId = `zoom-preview-mask-${axisId}-${id}`;
-  let x;
-  let y;
-  let width;
-  let height;
-  const range = zoomOptions.maxEnd - zoomOptions.minStart;
-  if (axisDirection === 'x') {
-    x = props.x + (zoomData.start - zoomOptions.minStart) / range * props.width;
-    y = props.y;
-    width = (zoomData.end - zoomData.start) / range * props.width;
-    height = props.height;
-  } else {
-    x = props.x;
-    y = props.y + (1 - zoomData.end / range) * props.height;
-    width = props.width;
-    height = (zoomData.end - zoomData.start) / range * props.height;
-  }
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsxs("mask", {
-      id: maskId,
-      children: [/*#__PURE__*/_jsx("rect", {
-        x: props.x,
-        y: props.y,
-        width: props.width,
-        height: props.height,
-        fill: "white"
-      }), /*#__PURE__*/_jsx("rect", {
-        x: x,
-        y: y,
-        width: width,
-        height: height,
-        fill: "black",
-        rx: 4,
-        ry: 4
-      })]
-    }), /*#__PURE__*/_jsx(PreviewBackgroundRect, {
-      x: props.x,
-      y: props.y,
-      width: props.width,
-      height: props.height,
-      mask: `url(#${maskId})`
-    })]
-  });
-}

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

@@ -1,9 +0,0 @@
-import { type AxisId } from '@mui/x-charts/internals';
-export interface ChartAxisZoomSliderPreviewContentProps {
-  axisId: AxisId;
-  x: number;
-  y: number;
-  height: number;
-  width: number;
-}
-export declare function ChartAxisZoomSliderPreviewContent(props: ChartAxisZoomSliderPreviewContentProps): import("react/jsx-runtime").JSX.Element;

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderPreviewContent.js

@@ -1,38 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { selectorChartSeriesProcessed, useStore } from '@mui/x-charts/internals';
-import { seriesPreviewPlotMap } from "./seriesPreviewPlotMap.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function ChartAxisZoomSliderPreviewContent(props) {
-  const {
-    axisId,
-    x,
-    y,
-    width,
-    height
-  } = props;
-  const store = useStore();
-  const processedSeries = store.use(selectorChartSeriesProcessed);
-  const children = [];
-  const clipId = `zoom-preview-mask-${axisId}`;
-  for (const [seriesType, Component] of seriesPreviewPlotMap) {
-    const hasSeries = (processedSeries[seriesType]?.seriesOrder?.length ?? 0) > 0;
-    if (hasSeries) {
-      children.push(/*#__PURE__*/_jsx(Component, _extends({}, props), seriesType));
-    }
-  }
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx("clipPath", {
-      id: clipId,
-      children: /*#__PURE__*/_jsx("rect", {
-        x: x,
-        y: y,
-        width: width,
-        height: height
-      })
-    }), /*#__PURE__*/_jsx("g", {
-      clipPath: `url(#${clipId})`,
-      children: children
-    })]
-  });
-}

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

@@ -1,12 +0,0 @@
-import * as React from 'react';
-export interface ChartZoomSliderThumbOwnerState {
-  onMove: (event: PointerEvent) => void;
-  orientation: 'horizontal' | 'vertical';
-  placement: 'start' | 'end';
-}
-export interface ChartZoomSliderThumbProps extends Omit<React.ComponentProps<'rect'>, 'orientation'>, ChartZoomSliderThumbOwnerState {}
-/**
- * Renders the zoom slider thumb, which is responsible for resizing the zoom range.
- * @internal
- */
-export declare const ChartAxisZoomSliderThumb: React.ForwardRefExoticComponent<Omit<ChartZoomSliderThumbProps, "ref"> & React.RefAttributes<SVGRectElement>>;

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderThumb.js

@@ -1,105 +0,0 @@
-'use client';
-
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "onMove", "orientation", "placement", "rx", "ry"];
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import useForkRef from '@mui/utils/useForkRef';
-import useEventCallback from '@mui/utils/useEventCallback';
-import { rafThrottle } from '@mui/x-internals/rafThrottle';
-import clsx from 'clsx';
-import { chartAxisZoomSliderThumbClasses, useUtilityClasses } from "./chartAxisZoomSliderThumbClasses.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const Rect = styled('rect', {
-  slot: 'internal',
-  shouldForwardProp: undefined
-})(({
-  theme
-}) => ({
-  [`&.${chartAxisZoomSliderThumbClasses.root}`]: _extends({
-    fill: (theme.vars || theme).palette.common.white,
-    stroke: (theme.vars || theme).palette.grey[500]
-  }, theme.applyStyles('dark', {
-    fill: (theme.vars || theme).palette.grey[300],
-    stroke: (theme.vars || theme).palette.grey[600]
-  })),
-  [`&.${chartAxisZoomSliderThumbClasses.horizontal}`]: {
-    cursor: 'ew-resize'
-  },
-  [`&.${chartAxisZoomSliderThumbClasses.vertical}`]: {
-    cursor: 'ns-resize'
-  }
-}));
-function preventDefault(event) {
-  event.preventDefault();
-}
-
-/**
- * Renders the zoom slider thumb, which is responsible for resizing the zoom range.
- * @internal
- */
-export const ChartAxisZoomSliderThumb = /*#__PURE__*/React.forwardRef(function ChartAxisZoomSliderThumb(_ref, forwardedRef) {
-  let {
-      className,
-      onMove,
-      orientation,
-      placement,
-      rx = 4,
-      ry = 4
-    } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const classes = useUtilityClasses({
-    onMove,
-    orientation,
-    placement
-  });
-  const thumbRef = React.useRef(null);
-  const ref = useForkRef(thumbRef, forwardedRef);
-  const onMoveEvent = useEventCallback(onMove);
-  React.useEffect(() => {
-    const thumb = thumbRef.current;
-    if (!thumb) {
-      return () => {};
-    }
-
-    // Prevent scrolling on touch devices when dragging the thumb
-    thumb.addEventListener('touchmove', preventDefault, {
-      passive: false
-    });
-    const onPointerMove = rafThrottle(event => {
-      onMoveEvent(event);
-    });
-    const onPointerEnd = event => {
-      thumb.removeEventListener('pointermove', onPointerMove);
-      thumb.removeEventListener('pointerup', onPointerEnd);
-      thumb.removeEventListener('pointercancel', onPointerEnd);
-      thumb.releasePointerCapture(event.pointerId);
-    };
-    const onPointerDown = event => {
-      // Prevent text selection when dragging the thumb
-      event.preventDefault();
-      event.stopPropagation();
-      thumb.setPointerCapture(event.pointerId);
-      thumb.addEventListener('pointermove', onPointerMove);
-      thumb.addEventListener('pointercancel', onPointerEnd);
-      thumb.addEventListener('pointerup', onPointerEnd);
-    };
-    thumb.addEventListener('pointerdown', onPointerDown);
-    return () => {
-      thumb.removeEventListener('pointerdown', onPointerDown);
-      thumb.removeEventListener('pointermove', onPointerMove);
-      thumb.removeEventListener('pointercancel', onPointerEnd);
-      thumb.removeEventListener('pointerup', onPointerEnd);
-      thumb.removeEventListener('touchmove', preventDefault);
-      onPointerMove.clear();
-    };
-  }, [onMoveEvent, orientation]);
-  return /*#__PURE__*/_jsx(Rect, _extends({
-    className: clsx(classes.root, className),
-    ref: ref,
-    rx: rx,
-    ry: ry
-  }, other));
-});
-if (process.env.NODE_ENV !== "production") ChartAxisZoomSliderThumb.displayName = "ChartAxisZoomSliderThumb";

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

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { type AxisId } from '@mui/x-charts/internals';
-interface ChartAxisZoomSliderTrackProps extends React.ComponentProps<'rect'> {
-  axisId: AxisId;
-  axisDirection: 'x' | 'y';
-  reverse: boolean;
-  onSelectStart?: () => void;
-  onSelectEnd?: () => void;
-}
-export declare function ChartAxisZoomSliderTrack({
-  axisId,
-  axisDirection,
-  reverse,
-  onSelectStart,
-  onSelectEnd,
-  ...other
-}: ChartAxisZoomSliderTrackProps): import("react/jsx-runtime").JSX.Element;
-export {};