@mui/x-charts-pro 8.6.0 → 8.8.0

package/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
@@ -11,24 +12,39 @@ var _styles = require("@mui/material/styles");
 var _internals = require("@mui/x-charts/internals");
 var React = _interopRequireWildcard(require("react"));
 var _rafThrottle = require("@mui/x-internals/rafThrottle");
+var _system = require("@mui/system");
 var _useChartProZoom = require("../../internals/plugins/useChartProZoom");
 var _ChartAxisZoomSliderThumb = require("./ChartAxisZoomSliderThumb");
 var _ChartsTooltipZoomSliderValue = require("./ChartsTooltipZoomSliderValue");
 var _zoomUtils = require("./zoom-utils");
 var _constants = require("./constants");
+var _chartAxisZoomSliderTrackClasses = require("./chartAxisZoomSliderTrackClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const ZoomSliderActiveTrackRect = (0, _styles.styled)('rect')(({
+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,
@@ -49,6 +65,9 @@ function ChartAxisZoomSliderActiveTrack({
     tooltipStart,
     tooltipEnd
   } = getZoomSliderTooltipsText(axis, drawingArea);
+  const classes = (0, _chartAxisZoomSliderTrackClasses.useUtilityClasses)({
+    axisDirection
+  });
   const previewThumbWidth = axisDirection === 'x' ? _constants.ZOOM_SLIDER_THUMB_WIDTH : _constants.ZOOM_SLIDER_THUMB_HEIGHT;
   const previewThumbHeight = axisDirection === 'x' ? _constants.ZOOM_SLIDER_THUMB_HEIGHT : _constants.ZOOM_SLIDER_THUMB_WIDTH;
   React.useEffect(() => {
@@ -164,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;
@@ -179,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;
@@ -193,16 +212,18 @@ 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,
-      onPointerLeave: onPointerLeave
+      onPointerLeave: onPointerLeave,
+      className: classes.active
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderThumb.ChartAxisZoomSliderThumb, {
       ref: setStartThumbEl,
       x: startThumbX,

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/ChartAxisZoomSliderTrack.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
@@ -13,7 +14,9 @@ var _internals = require("@mui/x-charts/internals");
 var _styles = require("@mui/material/styles");
 var _rafThrottle = require("@mui/x-internals/rafThrottle");
 var _system = require("@mui/system");
+var _clsx = _interopRequireDefault(require("clsx"));
 var _zoomUtils = require("./zoom-utils");
+var _chartAxisZoomSliderTrackClasses = require("./chartAxisZoomSliderTrackClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["axisId", "axisDirection", "reverse", "onSelectStart", "onSelectEnd"];
 const ZoomSliderTrack = (0, _styles.styled)('rect', {
@@ -56,6 +59,9 @@ function ChartAxisZoomSliderTrack(_ref) {
   } = (0, _internals.useChartContext)();
   const store = (0, _internals.useStore)();
   const [isSelecting, setIsSelecting] = React.useState(false);
+  const classes = (0, _chartAxisZoomSliderTrackClasses.useUtilityClasses)({
+    axisDirection
+  });
   const onPointerDown = function onPointerDown(event) {
     const rect = ref.current;
     const element = svgRef.current;
@@ -127,5 +133,7 @@ function ChartAxisZoomSliderTrack(_ref) {
     onPointerDown: onPointerDown,
     axisDirection: axisDirection,
     isSelecting: isSelecting
-  }, other));
+  }, other, {
+    className: (0, _clsx.default)(classes.background, other.className)
+  }));
 }

package/ChartZoomSlider/internals/chartAxisZoomSliderTrackClasses.d.ts

@@ -0,0 +1,15 @@
+import type { ChartAxisZoomSliderActiveTrackProps } from "./ChartAxisZoomSliderActiveTrack.js";
+export interface ChartAxisZoomSliderTrackClasses {
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element to the active part of the track. */
+  active: string;
+  /** Styles applied to the root element to the background part of the track. */
+  background: string;
+}
+export type ChartAxisZoomSliderTrackClassKey = keyof ChartAxisZoomSliderTrackClasses;
+export declare const chartAxisZoomSliderTrackClasses: ChartAxisZoomSliderTrackClasses;
+export declare function getAxisZoomSliderTrackUtilityClass(slot: string): string;
+export declare const useUtilityClasses: (props: Partial<ChartAxisZoomSliderActiveTrackProps>) => Record<"background" | "active", string>;

package/ChartZoomSlider/internals/chartAxisZoomSliderTrackClasses.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.chartAxisZoomSliderTrackClasses = void 0;
+exports.getAxisZoomSliderTrackUtilityClass = getAxisZoomSliderTrackUtilityClass;
+exports.useUtilityClasses = void 0;
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _ClassNameGenerator = _interopRequireDefault(require("@mui/utils/ClassNameGenerator"));
+const chartAxisZoomSliderTrackClasses = exports.chartAxisZoomSliderTrackClasses = ['horizontal', 'vertical', 'background', 'active'].reduce((acc, slot) => {
+  acc[slot] = getAxisZoomSliderTrackUtilityClass(slot);
+  return acc;
+}, {});
+function getAxisZoomSliderTrackUtilityClass(slot) {
+  // We use the `ClassNameGenerator` because the original `generateUtilityClass` function
+  // has a special case for the `active` slot.
+  return `${_ClassNameGenerator.default.generate('MuiChartAxisZoomSliderTrack')}-${slot}`;
+}
+const useUtilityClasses = props => {
+  const {
+    axisDirection
+  } = props;
+  const slots = {
+    background: [axisDirection === 'x' ? 'horizontal' : 'vertical', 'background'],
+    active: [axisDirection === 'x' ? 'horizontal' : 'vertical', 'active']
+  };
+  return (0, _composeClasses.default)(slots, getAxisZoomSliderTrackUtilityClass);
+};
+exports.useUtilityClasses = useUtilityClasses;

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/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 {};