@mui/x-charts-pro 8.7.0 → 8.9.0

package/ChartZoomSlider/internals/ChartAxisZoomSlider.js

@@ -9,6 +9,7 @@ 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");
@@ -25,6 +26,7 @@ function ChartAxisZoomSlider({
   const store = (0, _internals.useStore)();
   const drawingArea = (0, _internals.useDrawingArea)();
   const zoomData = (0, _internals.useSelector)(store, _useChartProZoom.selectorChartAxisZoomData, [axisId]);
+  const zoomOptions = (0, _internals.useSelector)(store, _internals.selectorChartAxisZoomOptionsLookup, [axisId]);
   const [showTooltip, setShowTooltip] = React.useState(false);
   const {
     xAxis
@@ -32,6 +34,7 @@ function ChartAxisZoomSlider({
   const {
     yAxis
   } = (0, _hooks.useYAxes)();
+  const showPreview = zoomOptions.slider.preview;
   if (!zoomData) {
     return null;
   }
@@ -40,6 +43,7 @@ function ChartAxisZoomSlider({
   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') {
@@ -47,7 +51,7 @@ function ChartAxisZoomSlider({
     }
     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 - _constants.ZOOM_SLIDER_SIZE - _internals.ZOOM_SLIDER_MARGIN;
+    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;
@@ -57,38 +61,49 @@ function ChartAxisZoomSlider({
       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 - _constants.ZOOM_SLIDER_SIZE - _internals.ZOOM_SLIDER_MARGIN;
+    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 = (_constants.ZOOM_SLIDER_SIZE - _constants.ZOOM_SLIDER_TRACK_SIZE) / 2;
+  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: [/*#__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
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderActiveTrack.ChartAxisZoomSliderActiveTrack, {
+    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

@@ -4,6 +4,8 @@ export interface ChartAxisZoomSliderActiveTrackProps {
   axisId: AxisId;
   axisDirection: 'x' | 'y';
   axisPosition: 'top' | 'bottom' | 'left' | 'right';
+  size: number;
+  preview: boolean;
   zoomData: ZoomData;
   reverse?: boolean;
   showTooltip: boolean;
@@ -14,6 +16,8 @@ export declare function ChartAxisZoomSliderActiveTrack({
   axisId,
   axisDirection,
   axisPosition,
+  size,
+  preview,
   zoomData,
   reverse,
   showTooltip,

package/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js

@@ -12,6 +12,7 @@ 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");
@@ -19,18 +20,31 @@ 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')(({
+const ZoomSliderActiveTrackRect = (0, _styles.styled)('rect', {
+  shouldForwardProp: prop => (0, _system.shouldForwardProp)(prop) && prop !== 'preview'
+})(({
   theme
 }) => ({
-  '&': {
-    fill: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[500] : (theme.vars || theme).palette.grey[600],
-    cursor: 'grab'
-  }
+  fill: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[500] : (theme.vars || theme).palette.grey[600],
+  cursor: 'grab',
+  variants: [{
+    props: {
+      preview: true
+    },
+    style: {
+      fill: 'transparent',
+      rx: 4,
+      ry: 4,
+      stroke: theme.palette.grey[500]
+    }
+  }]
 }));
 function ChartAxisZoomSliderActiveTrack({
   axisId,
   axisDirection,
   axisPosition,
+  size,
+  preview,
   zoomData,
   reverse,
   showTooltip,
@@ -169,11 +183,11 @@ function ChartAxisZoomSliderActiveTrack({
     previewX = (zoomStart - minStart) / range * drawingArea.width;
     previewY = 0;
     previewWidth = drawingArea.width * (zoomEnd - zoomStart) / range;
-    previewHeight = _constants.ZOOM_SLIDER_ACTIVE_TRACK_SIZE;
+    previewHeight = size;
     startThumbX = (zoomStart - minStart) / range * drawingArea.width;
-    startThumbY = 0;
+    startThumbY = _constants.ZOOM_SLIDER_THUMB_HEIGHT < size ? (size - _constants.ZOOM_SLIDER_THUMB_HEIGHT) / 2 : 0;
     endThumbX = (zoomEnd - minStart) / range * drawingArea.width;
-    endThumbY = 0;
+    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;
@@ -184,11 +198,11 @@ function ChartAxisZoomSliderActiveTrack({
   } else {
     previewX = 0;
     previewY = drawingArea.height - (zoomEnd - minStart) / range * drawingArea.height;
-    previewWidth = _constants.ZOOM_SLIDER_ACTIVE_TRACK_SIZE;
+    previewWidth = size;
     previewHeight = drawingArea.height * (zoomEnd - zoomStart) / range;
-    startThumbX = 0;
+    startThumbX = _constants.ZOOM_SLIDER_THUMB_HEIGHT < size ? (size - _constants.ZOOM_SLIDER_THUMB_HEIGHT) / 2 : 0;
     startThumbY = drawingArea.height - (zoomStart - minStart) / range * drawingArea.height;
-    endThumbX = 0;
+    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;
@@ -198,12 +212,13 @@ function ChartAxisZoomSliderActiveTrack({
     startThumbY -= previewThumbHeight / 2;
     endThumbY -= previewThumbHeight / 2;
   }
-  const previewOffset = (_constants.ZOOM_SLIDER_THUMB_HEIGHT - _constants.ZOOM_SLIDER_ACTIVE_TRACK_SIZE) / 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,

package/ChartZoomSlider/internals/ChartAxisZoomSliderPreview.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { 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): React.JSX.Element;
+export {};

package/ChartZoomSlider/internals/ChartAxisZoomSliderPreview.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartAxisZoomSliderPreview = ChartAxisZoomSliderPreview;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _internals = require("@mui/x-charts/internals");
+var _system = require("@mui/system");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _useChartProZoom = require("../../internals/plugins/useChartProZoom");
+var _ChartAxisZoomSliderPreviewContent = require("./ChartAxisZoomSliderPreviewContent");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["axisId", "axisDirection", "reverse"];
+const PreviewBackgroundRect = (0, _styles.styled)('rect')(({
+  theme
+}) => ({
+  rx: 4,
+  ry: 4,
+  stroke: theme.palette.grey[700],
+  fill: (0, _system.alpha)(theme.palette.grey[700], 0.4)
+}));
+function ChartAxisZoomSliderPreview(_ref) {
+  let {
+      axisId,
+      axisDirection
+    } = _ref,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, props, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PreviewRectangles, (0, _extends2.default)({}, props, {
+      axisId: axisId,
+      axisDirection: axisDirection
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({}, props, {
+      fill: "transparent",
+      rx: 4,
+      ry: 4
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderPreviewContent.ChartAxisZoomSliderPreviewContent, (0, _extends2.default)({
+      axisId: axisId
+    }, props))]
+  }));
+}
+function PreviewRectangles(props) {
+  const {
+    axisId,
+    axisDirection
+  } = props;
+  const store = (0, _internals.useStore)();
+  const zoomData = (0, _internals.useSelector)(store, _useChartProZoom.selectorChartAxisZoomData, [axisId]);
+  const zoomOptions = (0, _internals.useSelector)(store, _internals.selectorChartAxisZoomOptionsLookup, [axisId]);
+  const id = (0, _useId.default)();
+  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__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("mask", {
+      id: maskId,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+        x: props.x,
+        y: props.y,
+        width: props.width,
+        height: props.height,
+        fill: "white"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+        x: x,
+        y: y,
+        width: width,
+        height: height,
+        fill: "black",
+        rx: 4,
+        ry: 4
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviewBackgroundRect, {
+      x: props.x,
+      y: props.y,
+      width: props.width,
+      height: props.height,
+      mask: `url(#${maskId})`
+    })]
+  });
+}

package/ChartZoomSlider/internals/ChartAxisZoomSliderPreviewContent.d.ts

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

package/ChartZoomSlider/internals/ChartAxisZoomSliderPreviewContent.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartAxisZoomSliderPreviewContent = ChartAxisZoomSliderPreviewContent;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _internals = require("@mui/x-charts/internals");
+var _LinePreviewPlot = require("./previews/LinePreviewPlot");
+var _AreaPreviewPlot = require("./previews/AreaPreviewPlot");
+var _BarPreviewPlot = require("./previews/BarPreviewPlot");
+var _ScatterPreviewPlot = require("./previews/ScatterPreviewPlot");
+var _jsxRuntime = require("react/jsx-runtime");
+function ChartAxisZoomSliderPreviewContent(props) {
+  const {
+    axisId,
+    x,
+    y,
+    width,
+    height
+  } = props;
+  const store = (0, _internals.useStore)();
+  const processedSeries = (0, _internals.useSelector)(store, _internals.selectorChartSeriesProcessed);
+  const children = [];
+  const clipId = `zoom-preview-mask-${axisId}`;
+  const hasLineSeries = (processedSeries.line?.seriesOrder?.length ?? 0) > 0;
+  const hasBarSeries = (processedSeries.bar?.seriesOrder?.length ?? 0) > 0;
+  const hasScatterSeries = (processedSeries.scatter?.seriesOrder?.length ?? 0) > 0;
+  if (hasLineSeries) {
+    children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPreviewPlot.AreaPreviewPlot, {
+      axisId: axisId
+    }, "area"));
+  }
+  if (hasBarSeries) {
+    children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPreviewPlot.BarPreviewPlot, (0, _extends2.default)({}, props), "bar"));
+  }
+  if (hasLineSeries) {
+    children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePreviewPlot.LinePreviewPlot, {
+      axisId: axisId
+    }, "line"));
+  }
+  if (hasScatterSeries) {
+    children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterPreviewPlot.ScatterPreviewPlot, (0, _extends2.default)({}, props), "scatter"));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
+      id: clipId,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+        x: x,
+        y: y,
+        width: width,
+        height: height
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      clipPath: `url(#${clipId})`,
+      children: children
+    })]
+  });
+}

package/ChartZoomSlider/internals/previews/AreaPreviewPlot.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { SeriesId } from '@mui/x-charts/internals';
+import { PreviewPlotProps } from "./PreviewPlot.types.js";
+interface AreaPreviewPlotProps extends PreviewPlotProps {}
+export declare function AreaPreviewPlot({
+  axisId
+}: AreaPreviewPlotProps): React.JSX.Element;
+export interface PreviewAreaElementProps extends Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
+  id: SeriesId;
+  gradientId?: string;
+  color: string;
+  d: string;
+}
+export {};

package/ChartZoomSlider/internals/previews/AreaPreviewPlot.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AreaPreviewPlot = AreaPreviewPlot;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _internals = require("@mui/x-charts/internals");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["id", "color", "gradientId", "onClick"];
+const AreaPlotRoot = (0, _styles.styled)('g', {
+  name: 'MuiAreaPlot',
+  slot: 'Root'
+})();
+function AreaPreviewPlot({
+  axisId
+}) {
+  const completedData = useAreaPreviewData(axisId);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AreaPlotRoot, {
+    children: completedData.map(({
+      d,
+      seriesId,
+      color,
+      area,
+      gradientId
+    }) => !!area && /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviewAreaElement, {
+      id: seriesId,
+      d: d,
+      color: color,
+      gradientId: gradientId
+    }, seriesId))
+  });
+}
+/**
+ * Preview of the area element for the zoom preview.
+ * Based on AreaElement and AnimatedArea.
+ */
+function PreviewAreaElement(_ref) {
+  let {
+      id,
+      color,
+      gradientId
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("path", (0, _extends2.default)({
+    fill: gradientId ? `url(#${gradientId})` : color,
+    stroke: "none",
+    "data-series": id
+  }, other));
+}
+function useAreaPreviewData(axisId) {
+  const store = (0, _internals.useStore)();
+  const xAxes = (0, _internals.useSelector)(store, _internals.selectorChartPreviewComputedXAxis, [axisId]);
+  const yAxes = (0, _internals.useSelector)(store, _internals.selectorChartPreviewComputedYAxis, [axisId]);
+  return (0, _internals.useAreaPlotData)(xAxes, yAxes);
+}

package/ChartZoomSlider/internals/previews/BarPreviewPlot.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { PreviewPlotProps } from "./PreviewPlot.types.js";
+interface BarPreviewPlotProps extends PreviewPlotProps {
+  x: number;
+  y: number;
+  height: number;
+  width: number;
+}
+export declare function BarPreviewPlot(props: BarPreviewPlotProps): React.JSX.Element;
+export {};

package/ChartZoomSlider/internals/previews/BarPreviewPlot.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BarPreviewPlot = BarPreviewPlot;
+var React = _interopRequireWildcard(require("react"));
+var _internals = require("@mui/x-charts/internals");
+var _BarChart = require("@mui/x-charts/BarChart");
+var _jsxRuntime = require("react/jsx-runtime");
+function BarPreviewPlot(props) {
+  const drawingArea = {
+    left: props.x,
+    top: props.y,
+    width: props.width,
+    height: props.height,
+    right: props.x + props.width,
+    bottom: props.y + props.height
+  };
+  const {
+    completedData
+  } = useBarPreviewData(props.axisId, drawingArea);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+    children: completedData.map(({
+      seriesId,
+      data
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      children: data.map(({
+        dataIndex,
+        color,
+        layout,
+        x,
+        xOrigin,
+        y,
+        yOrigin,
+        width,
+        height
+      }) => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarElement, {
+          id: seriesId,
+          dataIndex: dataIndex,
+          color: color,
+          skipAnimation: true,
+          layout: layout ?? 'vertical',
+          x: x,
+          xOrigin: xOrigin,
+          y: y,
+          yOrigin: yOrigin,
+          width: width,
+          height: height
+        }, dataIndex);
+      })
+    }, seriesId))
+  });
+}
+function useBarPreviewData(axisId, drawingArea) {
+  const store = (0, _internals.useStore)();
+  const xAxes = (0, _internals.useSelector)(store, _internals.selectorChartPreviewComputedXAxis, [axisId]);
+  const yAxes = (0, _internals.useSelector)(store, _internals.selectorChartPreviewComputedYAxis, [axisId]);
+  return (0, _internals.useBarPlotData)(drawingArea, xAxes, yAxes);
+}

package/ChartZoomSlider/internals/previews/LinePreviewPlot.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { SeriesId } from '@mui/x-charts/internals';
+import { PreviewPlotProps } from "./PreviewPlot.types.js";
+interface LinePreviewPlotProps extends PreviewPlotProps {}
+export declare function LinePreviewPlot({
+  axisId
+}: LinePreviewPlotProps): React.JSX.Element;
+export interface PreviewLineElementProps extends Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
+  id: SeriesId;
+  gradientId?: string;
+  color: string;
+  d: string;
+}
+export {};

package/ChartZoomSlider/internals/previews/LinePreviewPlot.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinePreviewPlot = LinePreviewPlot;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _internals = require("@mui/x-charts/internals");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["id", "color", "gradientId", "onClick"];
+function LinePreviewPlot({
+  axisId
+}) {
+  const completedData = useLinePreviewData(axisId);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+    children: completedData.map(({
+      d,
+      seriesId,
+      color,
+      gradientId
+    }) => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviewLineElement, {
+        id: seriesId,
+        d: d,
+        color: color,
+        gradientId: gradientId
+      }, seriesId);
+    })
+  });
+}
+/**
+ * Preview of the line element for the zoom preview.
+ * Based on LineElement and AnimatedLine.
+ */
+function PreviewLineElement(_ref) {
+  let {
+      id,
+      color,
+      gradientId
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("path", (0, _extends2.default)({
+    stroke: gradientId ? `url(#${gradientId})` : color,
+    strokeWidth: 2,
+    strokeLinejoin: "round",
+    fill: "none",
+    "data-series": id
+  }, other));
+}
+function useLinePreviewData(axisId) {
+  const store = (0, _internals.useStore)();
+  const xAxes = (0, _internals.useSelector)(store, _internals.selectorChartPreviewComputedXAxis, [axisId]);
+  const yAxes = (0, _internals.useSelector)(store, _internals.selectorChartPreviewComputedYAxis, [axisId]);
+  return (0, _internals.useLinePlotData)(xAxes, yAxes);
+}

package/ChartZoomSlider/internals/previews/PreviewPlot.types.d.ts

@@ -0,0 +1,4 @@
+import { AxisId } from '@mui/x-charts/internals';
+export interface PreviewPlotProps {
+  axisId: AxisId;
+}

package/ChartZoomSlider/internals/previews/PreviewPlot.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/ChartZoomSlider/internals/previews/ScatterPreviewPlot.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { PreviewPlotProps } from "./PreviewPlot.types.js";
+interface ScatterPreviewPlotProps extends PreviewPlotProps {
+  x: number;
+  y: number;
+  height: number;
+  width: number;
+}
+export declare function ScatterPreviewPlot({
+  axisId,
+  x,
+  y,
+  height,
+  width
+}: ScatterPreviewPlotProps): React.JSX.Element | null;
+export {};