@mui/x-charts-pro 8.7.0 → 8.8.0

package/esm/ChartZoomSlider/internals/ChartAxisZoomSlider.js

@@ -1,9 +1,10 @@
 'use client';
 
 import * as React from 'react';
-import { DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP, useDrawingArea, useSelector, useStore, ZOOM_SLIDER_MARGIN } from '@mui/x-charts/internals';
+import { DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP, selectorChartAxisZoomOptionsLookup, useDrawingArea, useSelector, useStore, ZOOM_SLIDER_MARGIN, ZOOM_SLIDER_PREVIEW_SIZE } from '@mui/x-charts/internals';
 import { useXAxes, useYAxes } from '@mui/x-charts/hooks';
-import { ZOOM_SLIDER_SIZE, ZOOM_SLIDER_TRACK_SIZE } from "./constants.js";
+import { ChartAxisZoomSliderPreview } from "./ChartAxisZoomSliderPreview.js";
+import { ZOOM_SLIDER_ACTIVE_TRACK_SIZE, ZOOM_SLIDER_SIZE, ZOOM_SLIDER_TRACK_SIZE } from "./constants.js";
 import { selectorChartAxisZoomData } from "../../internals/plugins/useChartProZoom/index.js";
 import { ChartAxisZoomSliderTrack } from "./ChartAxisZoomSliderTrack.js";
 import { ChartAxisZoomSliderActiveTrack } from "./ChartAxisZoomSliderActiveTrack.js";
@@ -19,6 +20,7 @@ export function ChartAxisZoomSlider({
   const store = useStore();
   const drawingArea = useDrawingArea();
   const zoomData = useSelector(store, selectorChartAxisZoomData, [axisId]);
+  const zoomOptions = useSelector(store, selectorChartAxisZoomOptionsLookup, [axisId]);
   const [showTooltip, setShowTooltip] = React.useState(false);
   const {
     xAxis
@@ -26,6 +28,7 @@ export function ChartAxisZoomSlider({
   const {
     yAxis
   } = useYAxes();
+  const showPreview = zoomOptions.slider.preview;
   if (!zoomData) {
     return null;
   }
@@ -34,6 +37,7 @@ export function ChartAxisZoomSlider({
   let reverse;
   let axisPosition;
   let tooltipConditions;
+  const sliderSize = showPreview ? ZOOM_SLIDER_PREVIEW_SIZE : ZOOM_SLIDER_SIZE;
   if (axisDirection === 'x') {
     const axis = xAxis[axisId];
     if (!axis || axis.position === 'none') {
@@ -41,7 +45,7 @@ export function ChartAxisZoomSlider({
     }
     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;
+    y = axis.position === 'bottom' ? drawingArea.top + drawingArea.height + axis.offset + axisSize + ZOOM_SLIDER_MARGIN : drawingArea.top - axis.offset - axisSize - sliderSize - ZOOM_SLIDER_MARGIN;
     reverse = axis.reverse ?? false;
     axisPosition = axis.position ?? 'bottom';
     tooltipConditions = axis.zoom?.slider?.showTooltip ?? DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP;
@@ -51,38 +55,49 @@ export function ChartAxisZoomSlider({
       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;
+    x = axis.position === 'right' ? drawingArea.left + drawingArea.width + axis.offset + axisSize + ZOOM_SLIDER_MARGIN : drawingArea.left - axis.offset - axisSize - sliderSize - ZOOM_SLIDER_MARGIN;
     y = drawingArea.top;
     reverse = axis.reverse ?? false;
     axisPosition = axis.position ?? 'left';
     tooltipConditions = axis.zoom?.slider?.showTooltip ?? DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP;
   }
-  const backgroundRectOffset = (ZOOM_SLIDER_SIZE - ZOOM_SLIDER_TRACK_SIZE) / 2;
+  const backgroundRectOffset = (sliderSize - ZOOM_SLIDER_TRACK_SIZE) / 2;
+  const track = showPreview ? /*#__PURE__*/_jsx(ChartAxisZoomSliderPreview, {
+    axisId: axisId,
+    axisDirection: axisDirection,
+    reverse: reverse,
+    x: 0,
+    y: 0,
+    height: axisDirection === 'x' ? ZOOM_SLIDER_PREVIEW_SIZE : drawingArea.height,
+    width: axisDirection === 'x' ? drawingArea.width : ZOOM_SLIDER_PREVIEW_SIZE
+  }) : /*#__PURE__*/_jsx(ChartAxisZoomSliderTrack, {
+    x: axisDirection === 'x' ? 0 : backgroundRectOffset,
+    y: axisDirection === 'x' ? backgroundRectOffset : 0,
+    height: axisDirection === 'x' ? ZOOM_SLIDER_TRACK_SIZE : drawingArea.height,
+    width: axisDirection === 'x' ? drawingArea.width : ZOOM_SLIDER_TRACK_SIZE,
+    rx: ZOOM_SLIDER_TRACK_SIZE / 2,
+    ry: ZOOM_SLIDER_TRACK_SIZE / 2,
+    axisId: axisId,
+    axisDirection: axisDirection,
+    reverse: reverse,
+    onSelectStart: tooltipConditions === 'hover' ? () => setShowTooltip(true) : undefined,
+    onSelectEnd: tooltipConditions === 'hover' ? () => setShowTooltip(false) : undefined
+  });
   return /*#__PURE__*/_jsxs("g", {
     "data-charts-zoom-slider": true,
     transform: `translate(${x} ${y})`,
     style: {
       touchAction: 'none'
     },
-    children: [/*#__PURE__*/_jsx(ChartAxisZoomSliderTrack, {
-      x: axisDirection === 'x' ? 0 : backgroundRectOffset,
-      y: axisDirection === 'x' ? backgroundRectOffset : 0,
-      height: axisDirection === 'x' ? ZOOM_SLIDER_TRACK_SIZE : drawingArea.height,
-      width: axisDirection === 'x' ? drawingArea.width : ZOOM_SLIDER_TRACK_SIZE,
-      rx: ZOOM_SLIDER_TRACK_SIZE / 2,
-      ry: ZOOM_SLIDER_TRACK_SIZE / 2,
-      axisId: axisId,
-      axisDirection: axisDirection,
-      reverse: reverse,
-      onSelectStart: tooltipConditions === 'hover' ? () => setShowTooltip(true) : undefined,
-      onSelectEnd: tooltipConditions === 'hover' ? () => setShowTooltip(false) : undefined
-    }), /*#__PURE__*/_jsx(ChartAxisZoomSliderActiveTrack, {
+    children: [track, /*#__PURE__*/_jsx(ChartAxisZoomSliderActiveTrack, {
       zoomData: zoomData,
       axisId: axisId,
       axisPosition: axisPosition,
       axisDirection: axisDirection,
       reverse: reverse,
       showTooltip: showTooltip && tooltipConditions !== 'never' || tooltipConditions === 'always',
+      size: showPreview ? ZOOM_SLIDER_PREVIEW_SIZE : ZOOM_SLIDER_ACTIVE_TRACK_SIZE,
+      preview: showPreview,
       onPointerEnter: tooltipConditions === 'hover' ? () => setShowTooltip(true) : undefined,
       onPointerLeave: tooltipConditions === 'hover' ? () => setShowTooltip(false) : undefined
     })]

package/esm/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/esm/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js

@@ -5,25 +5,39 @@ import { styled } from '@mui/material/styles';
 import { getSVGPoint, invertScale, selectorChartAxis, selectorChartAxisZoomOptionsLookup, useChartContext, useDrawingArea, useSelector, 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_ACTIVE_TRACK_SIZE, ZOOM_SLIDER_THUMB_HEIGHT, ZOOM_SLIDER_THUMB_WIDTH } from "./constants.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')(({
+const ZoomSliderActiveTrackRect = styled('rect', {
+  shouldForwardProp: prop => 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]
+    }
+  }]
 }));
 export function ChartAxisZoomSliderActiveTrack({
   axisId,
   axisDirection,
   axisPosition,
+  size,
+  preview,
   zoomData,
   reverse,
   showTooltip,
@@ -162,11 +176,11 @@ export function ChartAxisZoomSliderActiveTrack({
     previewX = (zoomStart - minStart) / range * drawingArea.width;
     previewY = 0;
     previewWidth = drawingArea.width * (zoomEnd - zoomStart) / range;
-    previewHeight = ZOOM_SLIDER_ACTIVE_TRACK_SIZE;
+    previewHeight = size;
     startThumbX = (zoomStart - minStart) / range * drawingArea.width;
-    startThumbY = 0;
+    startThumbY = ZOOM_SLIDER_THUMB_HEIGHT < size ? (size - ZOOM_SLIDER_THUMB_HEIGHT) / 2 : 0;
     endThumbX = (zoomEnd - minStart) / range * drawingArea.width;
-    endThumbY = 0;
+    endThumbY = ZOOM_SLIDER_THUMB_HEIGHT < size ? (size - ZOOM_SLIDER_THUMB_HEIGHT) / 2 : 0;
     if (reverse) {
       previewX = drawingArea.width - previewX - previewWidth;
       startThumbX = drawingArea.width - startThumbX;
@@ -177,11 +191,11 @@ export function ChartAxisZoomSliderActiveTrack({
   } else {
     previewX = 0;
     previewY = drawingArea.height - (zoomEnd - minStart) / range * drawingArea.height;
-    previewWidth = ZOOM_SLIDER_ACTIVE_TRACK_SIZE;
+    previewWidth = size;
     previewHeight = drawingArea.height * (zoomEnd - zoomStart) / range;
-    startThumbX = 0;
+    startThumbX = ZOOM_SLIDER_THUMB_HEIGHT < size ? (size - ZOOM_SLIDER_THUMB_HEIGHT) / 2 : 0;
     startThumbY = drawingArea.height - (zoomStart - minStart) / range * drawingArea.height;
-    endThumbX = 0;
+    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;
@@ -191,12 +205,13 @@ export function ChartAxisZoomSliderActiveTrack({
     startThumbY -= previewThumbHeight / 2;
     endThumbY -= previewThumbHeight / 2;
   }
-  const previewOffset = (ZOOM_SLIDER_THUMB_HEIGHT - ZOOM_SLIDER_ACTIVE_TRACK_SIZE) / 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,

package/esm/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/esm/ChartZoomSlider/internals/ChartAxisZoomSliderPreview.js

@@ -0,0 +1,94 @@
+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, useSelector, 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')(({
+  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 = useSelector(store, selectorChartAxisZoomData, [axisId]);
+  const zoomOptions = useSelector(store, 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

@@ -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/esm/ChartZoomSlider/internals/ChartAxisZoomSliderPreviewContent.js

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { selectorChartSeriesProcessed, useSelector, useStore } from '@mui/x-charts/internals';
+import { LinePreviewPlot } from "./previews/LinePreviewPlot.js";
+import { AreaPreviewPlot } from "./previews/AreaPreviewPlot.js";
+import { BarPreviewPlot } from "./previews/BarPreviewPlot.js";
+import { ScatterPreviewPlot } from "./previews/ScatterPreviewPlot.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 = useSelector(store, 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__*/_jsx(AreaPreviewPlot, {
+      axisId: axisId
+    }, "area"));
+  }
+  if (hasBarSeries) {
+    children.push(/*#__PURE__*/_jsx(BarPreviewPlot, _extends({}, props), "bar"));
+  }
+  if (hasLineSeries) {
+    children.push(/*#__PURE__*/_jsx(LinePreviewPlot, {
+      axisId: axisId
+    }, "line"));
+  }
+  if (hasScatterSeries) {
+    children.push(/*#__PURE__*/_jsx(ScatterPreviewPlot, _extends({}, props), "scatter"));
+  }
+  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/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/esm/ChartZoomSlider/internals/previews/AreaPreviewPlot.js

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["id", "color", "gradientId", "onClick"];
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { useSelector, useStore, useAreaPlotData, selectorChartPreviewComputedXAxis, selectorChartPreviewComputedYAxis } from '@mui/x-charts/internals';
+import { jsx as _jsx } from "react/jsx-runtime";
+const AreaPlotRoot = styled('g', {
+  name: 'MuiAreaPlot',
+  slot: 'Root'
+})();
+export function AreaPreviewPlot({
+  axisId
+}) {
+  const completedData = useAreaPreviewData(axisId);
+  return /*#__PURE__*/_jsx(AreaPlotRoot, {
+    children: completedData.map(({
+      d,
+      seriesId,
+      color,
+      area,
+      gradientId
+    }) => !!area && /*#__PURE__*/_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 = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx("path", _extends({
+    fill: gradientId ? `url(#${gradientId})` : color,
+    stroke: "none",
+    "data-series": id
+  }, other));
+}
+function useAreaPreviewData(axisId) {
+  const store = useStore();
+  const xAxes = useSelector(store, selectorChartPreviewComputedXAxis, [axisId]);
+  const yAxes = useSelector(store, selectorChartPreviewComputedYAxis, [axisId]);
+  return useAreaPlotData(xAxes, yAxes);
+}

package/esm/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/esm/ChartZoomSlider/internals/previews/BarPreviewPlot.js

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { selectorChartPreviewComputedXAxis, selectorChartPreviewComputedYAxis, useBarPlotData, useSelector, useStore } from '@mui/x-charts/internals';
+import { BarElement } from '@mui/x-charts/BarChart';
+import { jsx as _jsx } from "react/jsx-runtime";
+export 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__*/_jsx("g", {
+    children: completedData.map(({
+      seriesId,
+      data
+    }) => /*#__PURE__*/_jsx("g", {
+      children: data.map(({
+        dataIndex,
+        color,
+        layout,
+        x,
+        xOrigin,
+        y,
+        yOrigin,
+        width,
+        height
+      }) => {
+        return /*#__PURE__*/_jsx(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 = useStore();
+  const xAxes = useSelector(store, selectorChartPreviewComputedXAxis, [axisId]);
+  const yAxes = useSelector(store, selectorChartPreviewComputedYAxis, [axisId]);
+  return useBarPlotData(drawingArea, xAxes, yAxes);
+}

package/esm/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/esm/ChartZoomSlider/internals/previews/LinePreviewPlot.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["id", "color", "gradientId", "onClick"];
+import * as React from 'react';
+import { useSelector, useStore, useLinePlotData, selectorChartPreviewComputedXAxis, selectorChartPreviewComputedYAxis } from '@mui/x-charts/internals';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function LinePreviewPlot({
+  axisId
+}) {
+  const completedData = useLinePreviewData(axisId);
+  return /*#__PURE__*/_jsx("g", {
+    children: completedData.map(({
+      d,
+      seriesId,
+      color,
+      gradientId
+    }) => {
+      return /*#__PURE__*/_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 = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx("path", _extends({
+    stroke: gradientId ? `url(#${gradientId})` : color,
+    strokeWidth: 2,
+    strokeLinejoin: "round",
+    fill: "none",
+    "data-series": id
+  }, other));
+}
+function useLinePreviewData(axisId) {
+  const store = useStore();
+  const xAxes = useSelector(store, selectorChartPreviewComputedXAxis, [axisId]);
+  const yAxes = useSelector(store, selectorChartPreviewComputedYAxis, [axisId]);
+  return useLinePlotData(xAxes, yAxes);
+}

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

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

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

@@ -0,0 +1 @@
+export {};

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