[charts-pro] Allow registering preview plots from higher tier packages (#20716)

Author: bernardobelchior

packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSliderPreviewContent.tsx

@@ -1,11 +1,8 @@
 import * as React from 'react';
 import { type AxisId, selectorChartSeriesProcessed, useStore } from '@mui/x-charts/internals';
-import { LinePreviewPlot } from './previews/LinePreviewPlot';
-import { AreaPreviewPlot } from './previews/AreaPreviewPlot';
-import { BarPreviewPlot } from './previews/BarPreviewPlot';
-import { ScatterPreviewPlot } from './previews/ScatterPreviewPlot';
+import { seriesPreviewPlotMap } from './seriesPreviewPlotMap';
 
-interface ChartAxisZoomSliderPreviewContentProps {
+export interface ChartAxisZoomSliderPreviewContentProps {
   axisId: AxisId;
   x: number;
   y: number;
@@ -22,24 +19,12 @@ export function ChartAxisZoomSliderPreviewContent(props: ChartAxisZoomSliderPrev
   const children: React.JSX.Element[] = [];
   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;
+  for (const [seriesType, Component] of seriesPreviewPlotMap) {
+    const hasSeries = (processedSeries[seriesType]?.seriesOrder?.length ?? 0) > 0;
 
-  if (hasLineSeries) {
-    children.push(<AreaPreviewPlot key="area" axisId={axisId} />);
-  }
-
-  if (hasBarSeries) {
-    children.push(<BarPreviewPlot key="bar" {...props} />);
-  }
-
-  if (hasLineSeries) {
-    children.push(<LinePreviewPlot key="line" axisId={axisId} />);
-  }
-
-  if (hasScatterSeries) {
-    children.push(<ScatterPreviewPlot key="scatter" {...props} />);
+    if (hasSeries) {
+      children.push(<Component key={seriesType} {...props} />);
+    }
   }
 
   return (

packages/x-charts-pro/src/ChartZoomSlider/internals/previews/AreaPreviewPlot.tsx

@@ -15,7 +15,7 @@ const AreaPlotRoot = styled('g', {
   slot: 'Root',
 })({});
 
-interface AreaPreviewPlotProps extends PreviewPlotProps {}
+interface AreaPreviewPlotProps extends Pick<PreviewPlotProps, 'axisId'> {}
 
 export function AreaPreviewPlot({ axisId }: AreaPreviewPlotProps) {
   const completedData = useAreaPreviewData(axisId);

packages/x-charts-pro/src/ChartZoomSlider/internals/previews/LineAreaPreviewPlot.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { AreaPreviewPlot } from './AreaPreviewPlot';
+import { LinePreviewPlot } from './LinePreviewPlot';
+import { type PreviewPlotProps } from './PreviewPlot.types';
+
+export function LineAreaPreviewPlot({ axisId }: PreviewPlotProps) {
+  return (
+    <React.Fragment>
+      <AreaPreviewPlot axisId={axisId} />
+      <LinePreviewPlot axisId={axisId} />
+    </React.Fragment>
+  );
+}

packages/x-charts-pro/src/ChartZoomSlider/internals/previews/LinePreviewPlot.tsx

@@ -7,9 +7,9 @@ import {
   selectorChartPreviewComputedYAxis,
   type SeriesId,
 } from '@mui/x-charts/internals';
-import { type PreviewPlotProps } from './PreviewPlot.types';
+import type { PreviewPlotProps } from './PreviewPlot.types';
 
-interface LinePreviewPlotProps extends PreviewPlotProps {}
+interface LinePreviewPlotProps extends Pick<PreviewPlotProps, 'axisId'> {}
 
 export function LinePreviewPlot({ axisId }: LinePreviewPlotProps) {
   const completedData = useLinePreviewData(axisId);

packages/x-charts-pro/src/ChartZoomSlider/internals/previews/PreviewPlot.types.ts

@@ -2,4 +2,8 @@ import { type AxisId } from '@mui/x-charts/internals';
 
 export interface PreviewPlotProps {
   axisId: AxisId;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
 }

packages/x-charts-pro/src/ChartZoomSlider/internals/seriesPreviewPlotMap.ts

@@ -0,0 +1,14 @@
+import type * as React from 'react';
+import { type ChartSeriesType } from '@mui/x-charts/internals';
+import { BarPreviewPlot } from './previews/BarPreviewPlot';
+import { ScatterPreviewPlot } from './previews/ScatterPreviewPlot';
+import { LineAreaPreviewPlot } from './previews/LineAreaPreviewPlot';
+import { type PreviewPlotProps } from './previews/PreviewPlot.types';
+
+export const seriesPreviewPlotMap = new Map<ChartSeriesType, React.ComponentType<PreviewPlotProps>>(
+  [
+    ['bar', BarPreviewPlot],
+    ['line', LineAreaPreviewPlot],
+    ['scatter', ScatterPreviewPlot],
+  ] as const,
+);

packages/x-charts-pro/src/internals/index.ts

@@ -1,2 +1,4 @@
 export { useChartContainerProProps } from '../ChartContainerPro/useChartContainerProProps';
 export type { ChartsSlotsPro, ChartsSlotPropsPro } from './material';
+export { seriesPreviewPlotMap } from '../ChartZoomSlider/internals/seriesPreviewPlotMap';
+export type { PreviewPlotProps } from '../ChartZoomSlider/internals/previews/PreviewPlot.types';