[charts] Export Pro versions of regular charts

packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { BarChartProps, BarPlot } from '@mui/x-charts/BarChart';
+import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler';
+import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
+import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
+import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
+import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
+import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
+import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
+import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
+import { useBarChartProps } from '@mui/x-charts/internals';
+import { ResponsiveChartContainerPro } from '../ResponsiveChartContainerPro';
+
+export interface BarChartProProps extends BarChartProps {
+  // TODO: Add zoom props
+}
+
+/**
+ * Demos:
+ *
+ * - [Bars](https://mui.com/x/react-charts/bars/)
+ * - [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+ * - [Stacking](https://mui.com/x/react-charts/stacking/)
+ *
+ * API:
+ *
+ * - [BarChart API](https://mui.com/x/api/charts/bar-chart/)
+ */
+const BarChartPro = React.forwardRef(function BarChartPro(props: BarChartProProps, ref) {
+  const {
+    chartContainerProps,
+    barPlotProps,
+    axisClickHandlerProps,
+    gridProps,
+    clipPathProps,
+    clipPathGroupProps,
+    overlayProps,
+    chartsAxisProps,
+    axisHighlightProps,
+    legendProps,
+    tooltipProps,
+
+    children,
+  } = useBarChartProps(props);
+
+  return (
+    <ResponsiveChartContainerPro ref={ref} {...chartContainerProps}>
+      {props.onAxisClick && <ChartsOnAxisClickHandler {...axisClickHandlerProps} />}
+      {props.grid && <ChartsGrid {...gridProps} />}
+      <g {...clipPathGroupProps}>
+        <BarPlot {...barPlotProps} />
+        <ChartsOverlay {...overlayProps} />
+      </g>
+      <ChartsAxis {...chartsAxisProps} />
+      <ChartsLegend {...legendProps} />
+      <ChartsAxisHighlight {...axisHighlightProps} />
+      {!props.loading && <ChartsTooltip {...tooltipProps} />}
+      <ChartsClipPath {...clipPathProps} />
+      {children}
+    </ResponsiveChartContainerPro>
+  );
+});
+
+export { BarChartPro };

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

@@ -0,0 +1 @@
+export * from './BarChartPro';

packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import {
+  AreaPlot,
+  LineChartProps,
+  LineHighlightPlot,
+  LinePlot,
+  MarkPlot,
+} from '@mui/x-charts/LineChart';
+import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler';
+import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
+import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
+import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
+import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
+import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
+import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
+import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
+import { useLineChartProps } from '@mui/x-charts/internals';
+import { ResponsiveChartContainerPro } from '../ResponsiveChartContainerPro';
+
+export interface LineChartProProps extends LineChartProps {
+  // TODO: Add zoom props
+}
+
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [LineChart API](https://mui.com/x/api/charts/line-chart/)
+ */
+const LineChartPro = React.forwardRef(function LineChartPro(props: LineChartProProps, ref) {
+  const {
+    chartContainerProps,
+    axisClickHandlerProps,
+    gridProps,
+    clipPathProps,
+    clipPathGroupProps,
+    areaPlotProps,
+    linePlotProps,
+    markPlotProps,
+    overlayProps,
+    chartsAxisProps,
+    axisHighlightProps,
+    lineHighlightPlotProps,
+    legendProps,
+    tooltipProps,
+
+    children,
+  } = useLineChartProps(props);
+
+  return (
+    <ResponsiveChartContainerPro ref={ref} {...chartContainerProps}>
+      {props.onAxisClick && <ChartsOnAxisClickHandler {...axisClickHandlerProps} />}
+      {props.grid && <ChartsGrid {...gridProps} />}
+      <g {...clipPathGroupProps}>
+        <AreaPlot {...areaPlotProps} />
+        <LinePlot {...linePlotProps} />
+        <ChartsOverlay {...overlayProps} />
+      </g>
+      <ChartsAxis {...chartsAxisProps} />
+      <ChartsAxisHighlight {...axisHighlightProps} />
+      <MarkPlot {...markPlotProps} />
+      <LineHighlightPlot {...lineHighlightPlotProps} />
+      <ChartsLegend {...legendProps} />
+      {!props.loading && <ChartsTooltip {...tooltipProps} />}
+      <ChartsClipPath {...clipPathProps} />
+      {children}
+    </ResponsiveChartContainerPro>
+  );
+});
+
+export { LineChartPro };

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

@@ -0,0 +1 @@
+export * from './LineChartPro';

packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
+import { ScatterChartProps, ScatterPlot } from '@mui/x-charts/ScatterChart';
+import { ZAxisContextProvider } from '@mui/x-charts/context';
+import { ChartsVoronoiHandler } from '@mui/x-charts/ChartsVoronoiHandler';
+import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
+import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
+import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
+import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
+import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
+import { useScatterChartProps } from '@mui/x-charts/internals';
+import { ResponsiveChartContainerPro } from '../ResponsiveChartContainerPro';
+
+export interface ScatterChartProProps extends ScatterChartProps {
+  // TODO: Add zoom props
+}
+
+/**
+ * Demos:
+ *
+ * - [Scatter](https://mui.com/x/react-charts/scatter/)
+ * - [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+ *
+ * API:
+ *
+ * - [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
+ */
+const ScatterChartPro = React.forwardRef(function ScatterChartPro(
+  props: ScatterChartProProps,
+  ref,
+) {
+  const {
+    chartContainerProps,
+    zAxisProps,
+    voronoiHandlerProps,
+    chartsAxisProps,
+    gridProps,
+    scatterPlotProps,
+    overlayProps,
+    legendProps,
+    axisHighlightProps,
+    tooltipProps,
+    children,
+  } = useScatterChartProps(props);
+  return (
+    <ResponsiveChartContainerPro ref={ref} {...chartContainerProps}>
+      <ZAxisContextProvider {...zAxisProps}>
+        {!props.disableVoronoi && <ChartsVoronoiHandler {...voronoiHandlerProps} />}
+        <ChartsAxis {...chartsAxisProps} />
+        {props.grid && <ChartsGrid {...gridProps} />}
+        <ScatterPlot {...scatterPlotProps} />
+        <ChartsOverlay {...overlayProps} />
+        <ChartsLegend {...legendProps} />
+        <ChartsAxisHighlight {...axisHighlightProps} />
+        {!props.loading && <ChartsTooltip {...tooltipProps} />}
+        {children}
+      </ZAxisContextProvider>
+    </ResponsiveChartContainerPro>
+  );
+});
+
+export { ScatterChartPro };

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

@@ -0,0 +1 @@
+export * from './ScatterChartPro';

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

@@ -24,4 +24,7 @@ export * from '@mui/x-charts/Gauge';
 export * from '@mui/x-charts/ChartsSurface';
 
 export * from './ResponsiveChartContainerPro';
+export * from './ScatterChartPro';
+export * from './BarChartPro';
+export * from './LineChartPro';
 export * from './ChartContainerPro';

packages/x-charts/src/BarChart/BarChart.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import useId from '@mui/utils/useId';
 import PropTypes from 'prop-types';
 import { BarPlot, BarPlotProps, BarPlotSlotProps, BarPlotSlots } from './BarPlot';
 import {
@@ -9,7 +8,6 @@ import {
 import { ChartsAxis, ChartsAxisProps } from '../ChartsAxis';
 import { BarSeriesType } from '../models/seriesType/bar';
 import { MakeOptional } from '../models/helpers';
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import {
   ChartsTooltip,
   ChartsTooltipProps,
@@ -36,6 +34,7 @@ import {
   ChartsOverlaySlotProps,
   ChartsOverlaySlots,
 } from '../ChartsOverlay/ChartsOverlay';
+import { useBarChartProps } from './useBarChartProps';
 
 export interface BarChartSlots
   extends ChartsAxisSlots,
@@ -112,112 +111,33 @@ export interface BarChartProps
  */
 const BarChart = React.forwardRef(function BarChart(props: BarChartProps, ref) {
   const {
-    xAxis,
-    yAxis,
-    series,
-    width,
-    height,
-    margin,
-    colors,
-    dataset,
-    sx,
-    layout,
-    tooltip,
-    axisHighlight,
-    legend,
-    grid,
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
-    skipAnimation,
-    borderRadius,
-    onItemClick,
-    onAxisClick,
+    chartContainerProps,
+    barPlotProps,
+    axisClickHandlerProps,
+    gridProps,
+    clipPathProps,
+    clipPathGroupProps,
+    overlayProps,
+    chartsAxisProps,
+    axisHighlightProps,
+    legendProps,
+    tooltipProps,
     children,
-    slots,
-    slotProps,
-    loading,
-    barLabel,
-    highlightedItem,
-    onHighlightChange,
-  } = props;
+  } = useBarChartProps(props);
 
-  const id = useId();
-  const clipPathId = `${id}-clip-path`;
-
-  const hasHorizontalSeries =
-    layout === 'horizontal' ||
-    (layout === undefined && series.some((item) => item.layout === 'horizontal'));
-
-  const defaultAxisConfig = {
-    scaleType: 'band',
-    data: Array.from(
-      { length: Math.max(...series.map((s) => (s.data ?? dataset ?? []).length)) },
-      (_, index) => index,
-    ),
-  } as const;
-
-  const defaultizedAxisHighlight = {
-    ...(hasHorizontalSeries ? ({ y: 'band' } as const) : ({ x: 'band' } as const)),
-    ...axisHighlight,
-  };
   return (
-    <ResponsiveChartContainer
-      ref={ref}
-      series={series.map((s) => ({
-        type: 'bar',
-        ...s,
-        layout: hasHorizontalSeries ? 'horizontal' : 'vertical',
-      }))}
-      width={width}
-      height={height}
-      margin={margin}
-      xAxis={
-        xAxis ??
-        (hasHorizontalSeries ? undefined : [{ id: DEFAULT_X_AXIS_KEY, ...defaultAxisConfig }])
-      }
-      yAxis={
-        yAxis ??
-        (hasHorizontalSeries ? [{ id: DEFAULT_Y_AXIS_KEY, ...defaultAxisConfig }] : undefined)
-      }
-      colors={colors}
-      dataset={dataset}
-      sx={sx}
-      disableAxisListener={
-        tooltip?.trigger !== 'axis' &&
-        axisHighlight?.x === 'none' &&
-        axisHighlight?.y === 'none' &&
-        !onAxisClick
-      }
-      highlightedItem={highlightedItem}
-      onHighlightChange={onHighlightChange}
-    >
-      {onAxisClick && <ChartsOnAxisClickHandler onAxisClick={onAxisClick} />}
-      {grid && <ChartsGrid vertical={grid.vertical} horizontal={grid.horizontal} />}
-      <g clipPath={`url(#${clipPathId})`}>
-        <BarPlot
-          slots={slots}
-          slotProps={slotProps}
-          skipAnimation={skipAnimation}
-          onItemClick={onItemClick}
-          borderRadius={borderRadius}
-          barLabel={barLabel}
-        />
-        <ChartsOverlay loading={loading} slots={slots} slotProps={slotProps} />
+    <ResponsiveChartContainer ref={ref} {...chartContainerProps}>
+      {props.onAxisClick && <ChartsOnAxisClickHandler {...axisClickHandlerProps} />}
+      {props.grid && <ChartsGrid {...gridProps} />}
+      <g {...clipPathGroupProps}>
+        <BarPlot {...barPlotProps} />
+        <ChartsOverlay {...overlayProps} />
       </g>
-      <ChartsAxis
-        topAxis={topAxis}
-        leftAxis={leftAxis}
-        rightAxis={rightAxis}
-        bottomAxis={bottomAxis}
-        slots={slots}
-        slotProps={slotProps}
-      />
-      <ChartsLegend {...legend} slots={slots} slotProps={slotProps} />
-      <ChartsAxisHighlight {...defaultizedAxisHighlight} />
-      {!loading && <ChartsTooltip {...tooltip} slots={slots} slotProps={slotProps} />}
-      <ChartsClipPath id={clipPathId} />
+      <ChartsAxis {...chartsAxisProps} />
+      <ChartsLegend {...legendProps} />
+      <ChartsAxisHighlight {...axisHighlightProps} />
+      {!props.loading && <ChartsTooltip {...tooltipProps} />}
+      <ChartsClipPath {...clipPathProps} />
       {children}
     </ResponsiveChartContainer>
   );