[charts] Add a series processor using the drawing area

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

@@ -1,14 +1,14 @@
 import type { ChartSeriesTypeConfig } from '@mui/x-charts/internals';
 import { getExtremumX, getExtremumY } from './extremums';
-import seriesProcessor from './seriesProcessor';
+import seriesProcessorWithoutDimensions from './seriesProcessor';
 import getColor from './getColor';
 import legendGetter from './legend';
 import tooltipGetter from './tooltip';
 import getSeriesWithDefaultValues from './getSeriesWithDefaultValues';
 import tooltipItemPositionGetter from './tooltipPosition';
 
 export const funnelSeriesConfig: ChartSeriesTypeConfig<'funnel'> = {
-  seriesProcessor,
+  seriesProcessorWithoutDimensions,
   colorProcessor: getColor,
   legendGetter,
   tooltipGetter,

packages/x-charts-pro/src/FunnelChart/seriesConfig/seriesProcessor.ts

@@ -1,4 +1,4 @@
-import { SeriesProcessor, ChartSeriesDefaultized } from '@mui/x-charts/internals';
+import { SeriesProcessorWithoutDimensions, ChartSeriesDefaultized } from '@mui/x-charts/internals';
 import type { FunnelCurveType } from '../curves';
 
 const createPoint = ({
@@ -38,7 +38,7 @@ const getFunnelDirection = (
     : 'decreasing';
 };
 
-const seriesProcessor: SeriesProcessor<'funnel'> = (params) => {
+const seriesProcessorWithoutDimensions: SeriesProcessorWithoutDimensions<'funnel'> = (params) => {
   const { seriesOrder, series } = params;
 
   const completedSeries: Record<string, ChartSeriesDefaultized<'funnel'>> = {};
@@ -143,4 +143,4 @@ const seriesProcessor: SeriesProcessor<'funnel'> = (params) => {
   };
 };
 
-export default seriesProcessor;
+export default seriesProcessorWithoutDimensions;

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

@@ -1,13 +1,13 @@
 import { ChartSeriesTypeConfig } from '@mui/x-charts/internals';
 import { getBaseExtremum } from './extremums';
-import seriesProcessor from './seriesProcessor';
+import seriesProcessorWithoutDimensions from './seriesProcessor';
 import getColor from './getColor';
 import tooltipGetter from './tooltip';
 import getSeriesWithDefaultValues from './getSeriesWithDefaultValues';
 import tooltipItemPositionGetter from './tooltipPosition';
 
 export const heatmapSeriesConfig: ChartSeriesTypeConfig<'heatmap'> = {
-  seriesProcessor,
+  seriesProcessorWithoutDimensions,
   colorProcessor: getColor,
   legendGetter: () => [],
   tooltipGetter,

packages/x-charts-pro/src/Heatmap/seriesConfig/seriesProcessor.ts

@@ -1,7 +1,7 @@
-import { SeriesProcessor, SeriesId } from '@mui/x-charts/internals';
+import { SeriesProcessorWithoutDimensions, SeriesId } from '@mui/x-charts/internals';
 import { DefaultizedHeatmapSeriesType } from '../../models/seriesType/heatmap';
 
-const seriesProcessor: SeriesProcessor<'heatmap'> = (params) => {
+const seriesProcessorWithoutDimensions: SeriesProcessorWithoutDimensions<'heatmap'> = (params) => {
   const { series, seriesOrder } = params;
 
   const defaultizedSeries: Record<SeriesId, DefaultizedHeatmapSeriesType> = {};
@@ -21,4 +21,4 @@ const seriesProcessor: SeriesProcessor<'heatmap'> = (params) => {
   };
 };
 
-export default seriesProcessor;
+export default seriesProcessorWithoutDimensions;

packages/x-charts-pro/src/SankeyChart/SankeyPlot.tsx

@@ -1,14 +1,11 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled, useTheme } from '@mui/material/styles';
-import { useDrawingArea } from '@mui/x-charts/hooks';
+import { styled } from '@mui/material/styles';
 import {
-  SankeyLayout,
   type SankeyLinkIdentifierWithData,
   type SankeyNodeIdentifierWithData,
 } from './sankey.types';
-import { calculateSankeyLayout } from './calculateSankeyLayout';
 import { SankeyNodeElement } from './SankeyNodeElement';
 import { SankeyLinkElement } from './SankeyLinkElement';
 import { SankeyLinkLabel } from './SankeyLinkLabel';
@@ -66,15 +63,7 @@ function SankeyPlot(props: SankeyPlotProps) {
 
   const series = seriesContext.series[seriesContext.seriesOrder?.[0]];
   const classes = useUtilityClasses({ classes: inputClasses });
-  const drawingArea = useDrawingArea();
-  const { data, linkOptions, nodeOptions } = series;
-  const theme = useTheme();
-
-  // Calculate layout based on data and dimensions
-  const layout: SankeyLayout = React.useMemo(
-    () => calculateSankeyLayout(data, drawingArea, theme, series),
-    [drawingArea, data, series, theme],
-  );
+  const { data, linkOptions, nodeOptions, sankeyLayout } = series;
 
   // Early return if no data or dimensions
   if (!data || !data.links) {
@@ -84,7 +73,7 @@ function SankeyPlot(props: SankeyPlotProps) {
   return (
     <SankeyPlotRoot className={classes.root}>
       <g className={classes.links}>
-        {layout.links.map((link) => (
+        {sankeyLayout.links.map((link) => (
           <SankeyLinkElement
             seriesId={series.id}
             key={`${link.source.id}-${link.target.id}`}
@@ -96,7 +85,7 @@ function SankeyPlot(props: SankeyPlotProps) {
       </g>
 
       <g className={classes.nodes}>
-        {layout.nodes.map((node) => (
+        {sankeyLayout.nodes.map((node) => (
           <SankeyNodeElement
             seriesId={series.id}
             key={node.id}
@@ -109,7 +98,7 @@ function SankeyPlot(props: SankeyPlotProps) {
 
       {linkOptions?.showValues && (
         <g className={classes.linkLabels}>
-          {layout.links.map((link) => (
+          {sankeyLayout.links.map((link) => (
             <SankeyLinkLabel key={`label-${link.source.id}-${link.target.id}`} link={link} />
           ))}
         </g>

packages/x-charts-pro/src/SankeyChart/calculateSankeyLayout.ts

@@ -1,10 +1,8 @@
 'use client';
 import { sankey, type SankeyGraph } from '@mui/x-charts-vendor/d3-sankey';
 import type { ChartDrawingArea } from '@mui/x-charts/hooks';
-import type { Theme } from '@mui/material/styles';
 import { path } from '@mui/x-charts-vendor/d3-path';
 import type {
-  SankeySeriesType,
   SankeyLayout,
   SankeyLayoutLink,
   SankeyLayoutNode,
@@ -22,12 +20,10 @@ import { getNodeAlignFunction } from './utils';
  */
 
 export function calculateSankeyLayout(
-  data: DefaultizedSankeySeriesType['data'],
+  series: DefaultizedSankeySeriesType,
   drawingArea: ChartDrawingArea,
-  theme: Theme,
-  series: Pick<SankeySeriesType, 'nodeOptions' | 'linkOptions' | 'iterations'> = {},
 ): SankeyLayout {
-  const { iterations = 6, nodeOptions, linkOptions } = series;
+  const { data, iterations = 6, nodeOptions, linkOptions } = series;
   const {
     width: nodeWidth = 15,
     padding: nodePadding = 10,

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

@@ -1,16 +1,37 @@
-import type { ChartSeriesTypeConfig } from '@mui/x-charts/internals';
+import type {
+  ChartSeriesTypeConfig,
+  SeriesProcessor,
+  SeriesProcessorResult,
+} from '@mui/x-charts/internals';
 import { getSeriesWithDefaultValues } from './getSeriesWithDefaultValues';
 import { tooltipGetter } from './tooltipGetter';
+import { calculateSankeyLayout } from '../calculateSankeyLayout';
 
 // Simple passthrough functions for sankey chart
-const seriesProcessor = (series: any) => series;
+const seriesProcessorWithoutDimensions = (series: any) => series;
 const colorProcessor = (series: any) => series;
 const legendGetter = () => [];
 
+const seriesProcessor: SeriesProcessor<'sankey'> = (series, drawingArea) => {
+  if (series.seriesOrder.length === 0) {
+    return series as SeriesProcessorResult<'sankey'>;
+  }
+  return {
+    series: {
+      [series.seriesOrder[0]]: {
+        ...series.series[series.seriesOrder[0]],
+        sankeyLayout: calculateSankeyLayout(series.series[series.seriesOrder[0]], drawingArea),
+      },
+    },
+    seriesOrder: series.seriesOrder,
+  } satisfies SeriesProcessorResult<'sankey'>;
+};
+
 export const sankeySeriesConfig: ChartSeriesTypeConfig<'sankey'> = {
-  seriesProcessor,
+  seriesProcessorWithoutDimensions,
   colorProcessor,
   legendGetter,
   tooltipGetter,
   getSeriesWithDefaultValues,
+  seriesProcessor,
 };

packages/x-charts-pro/src/typeOverloads/modules.ts

@@ -13,6 +13,7 @@ import {
   HeatmapValueType,
 } from '../models/seriesType/heatmap';
 import {
+  SankeyLayout,
   SankeySeriesType,
   type DefaultizedSankeySeriesType,
   type SankeyItemIdentifier,
@@ -24,6 +25,7 @@ declare module '@mui/x-charts/internals' {
     heatmap: {
       seriesInput: DefaultizedProps<HeatmapSeriesType, 'id'>;
       series: DefaultizedHeatmapSeriesType;
+      seriesComputedPosition: {};
       seriesProp: HeatmapSeriesType;
       itemIdentifier: HeatmapItemIdentifier;
       itemIdentifierWithData: HeatmapItemIdentifier;
@@ -35,6 +37,7 @@ declare module '@mui/x-charts/internals' {
         data: MakeRequired<FunnelValueType, 'color'>[];
       };
       series: DefaultizedFunnelSeriesType;
+      seriesComputedPosition: {};
       seriesProp: FunnelSeriesType;
       itemIdentifier: FunnelItemIdentifier;
       itemIdentifierWithData: FunnelItemIdentifier;
@@ -44,6 +47,7 @@ declare module '@mui/x-charts/internals' {
     sankey: {
       seriesInput: DefaultizedSankeySeriesType;
       series: DefaultizedSankeySeriesType;
+      seriesComputedPosition: { sankeyLayout: SankeyLayout };
       seriesProp: SankeySeriesType;
       itemIdentifier: SankeyItemIdentifier;
       itemIdentifierWithData: SankeyItemIdentifierWithData;

packages/x-charts/src/BarChart/seriesConfig/bar/seriesProcessor.ts

@@ -4,14 +4,17 @@ import type { DefaultizedBarSeriesType } from '../../../models';
 import { getStackingGroups } from '../../../internals/stackSeries';
 import { DatasetElementType, DatasetType } from '../../../models/seriesType/config';
 import { SeriesId } from '../../../models/seriesType/common';
-import { SeriesProcessor } from '../../../internals/plugins/models';
+import { SeriesProcessorWithoutDimensions } from '../../../internals/plugins/models';
 
 type BarDataset = DatasetType<number | null>;
 
 const barValueFormatter = ((v) =>
   v == null ? '' : v.toLocaleString()) as DefaultizedBarSeriesType['valueFormatter'];
 
-const seriesProcessor: SeriesProcessor<'bar'> = (params, dataset) => {
+const seriesProcessorWithoutDimensions: SeriesProcessorWithoutDimensions<'bar'> = (
+  params,
+  dataset,
+) => {
   const { seriesOrder, series } = params;
   const stackingGroups = getStackingGroups(params);
 
@@ -112,4 +115,4 @@ const seriesProcessor: SeriesProcessor<'bar'> = (params, dataset) => {
   };
 };
 
-export default seriesProcessor;
+export default seriesProcessorWithoutDimensions;

packages/x-charts/src/BarChart/seriesConfig/index.ts

@@ -1,14 +1,14 @@
 import { ChartSeriesTypeConfig } from '../../internals/plugins/models/seriesConfig';
 import { getExtremumX, getExtremumY } from './bar/extremums';
-import seriesProcessor from './bar/seriesProcessor';
+import seriesProcessorWithoutDimensions from './bar/seriesProcessor';
 import legendGetter from './bar/legend';
 import getColor from './bar/getColor';
 import tooltipGetter, { axisTooltipGetter } from './bar/tooltip';
 import tooltipItemPositionGetter from './bar/tooltipPosition';
 import getSeriesWithDefaultValues from './bar/getSeriesWithDefaultValues';
 
 export const barSeriesConfig: ChartSeriesTypeConfig<'bar'> = {
-  seriesProcessor,
+  seriesProcessorWithoutDimensions,
   colorProcessor: getColor,
   legendGetter,
   tooltipGetter,

packages/x-charts/src/LineChart/seriesConfig/index.ts

@@ -1,6 +1,6 @@
 import { ChartSeriesTypeConfig } from '../../internals/plugins/models/seriesConfig';
 import { getExtremumX, getExtremumY } from './extremums';
-import seriesProcessor from './seriesProcessor';
+import seriesProcessorWithoutDimensions from './seriesProcessor';
 import getColor from './getColor';
 import legendGetter from './legend';
 import tooltipGetter, { axisTooltipGetter } from './tooltip';
@@ -9,7 +9,7 @@ import tooltipItemPositionGetter from './tooltipPosition';
 
 export const lineSeriesConfig: ChartSeriesTypeConfig<'line'> = {
   colorProcessor: getColor,
-  seriesProcessor,
+  seriesProcessorWithoutDimensions,
   legendGetter,
   tooltipGetter,
   tooltipItemPositionGetter,

packages/x-charts/src/LineChart/seriesConfig/seriesProcessor.ts

@@ -5,9 +5,12 @@ import { getStackingGroups } from '../../internals/stackSeries';
 import { ChartSeries, DatasetElementType, DatasetType } from '../../models/seriesType/config';
 import { defaultizeValueFormatter } from '../../internals/defaultizeValueFormatter';
 import { SeriesId } from '../../models/seriesType/common';
-import { SeriesProcessor } from '../../internals/plugins/models';
+import { SeriesProcessorWithoutDimensions } from '../../internals/plugins/models';
 
-const seriesProcessor: SeriesProcessor<'line'> = (params, dataset) => {
+const seriesProcessorWithoutDimensions: SeriesProcessorWithoutDimensions<'line'> = (
+  params,
+  dataset,
+) => {
   const { seriesOrder, series } = params;
   const stackingGroups = getStackingGroups({ ...params, defaultStrategy: { stackOffset: 'none' } });
 
@@ -104,4 +107,4 @@ const seriesProcessor: SeriesProcessor<'line'> = (params, dataset) => {
   };
 };
 
-export default seriesProcessor;
+export default seriesProcessorWithoutDimensions;

packages/x-charts/src/PieChart/seriesConfig/index.ts

@@ -1,5 +1,5 @@
 import { ChartSeriesTypeConfig } from '../../internals/plugins/models/seriesConfig';
-import seriesProcessor from './seriesProcessor';
+import seriesProcessorWithoutDimensions from './seriesProcessor';
 import getColor from './getColor';
 import legendGetter from './legend';
 import tooltipGetter from './tooltip';
@@ -8,7 +8,7 @@ import tooltipItemPositionGetter from './tooltipPosition';
 
 export const pieSeriesConfig: ChartSeriesTypeConfig<'pie'> = {
   colorProcessor: getColor,
-  seriesProcessor,
+  seriesProcessorWithoutDimensions,
   legendGetter,
   tooltipGetter,
   tooltipItemPositionGetter,

packages/x-charts/src/PieChart/seriesConfig/seriesProcessor.ts

@@ -3,7 +3,7 @@ import { ChartSeriesDefaultized } from '../../models/seriesType/config';
 import { ChartsPieSorting, PieValueType } from '../../models/seriesType/pie';
 import { SeriesId } from '../../models/seriesType/common';
 import { getLabel } from '../../internals/getLabel';
-import { SeriesProcessor } from '../../internals/plugins/models';
+import { SeriesProcessorWithoutDimensions } from '../../internals/plugins/models';
 import { deg2rad } from '../../internals/angleConversion';
 
 const getSortingComparator = (comparator: ChartsPieSorting = 'none') => {
@@ -22,7 +22,7 @@ const getSortingComparator = (comparator: ChartsPieSorting = 'none') => {
   }
 };
 
-const seriesProcessor: SeriesProcessor<'pie'> = (params) => {
+const seriesProcessorWithoutDimensions: SeriesProcessorWithoutDimensions<'pie'> = (params) => {
   const { seriesOrder, series } = params;
 
   const defaultizedSeries: Record<SeriesId, ChartSeriesDefaultized<'pie'>> = {};
@@ -63,4 +63,4 @@ const seriesProcessor: SeriesProcessor<'pie'> = (params) => {
   };
 };
 
-export default seriesProcessor;
+export default seriesProcessorWithoutDimensions;

packages/x-charts/src/RadarChart/seriesConfig/formatter.ts

@@ -1,7 +1,7 @@
 import { defaultizeValueFormatter } from '../../internals/defaultizeValueFormatter';
-import { SeriesProcessor } from '../../internals/plugins/models/seriesConfig';
+import { SeriesProcessorWithoutDimensions } from '../../internals/plugins/models/seriesConfig';
 
-const formatter: SeriesProcessor<'radar'> = (params) => {
+const formatter: SeriesProcessorWithoutDimensions<'radar'> = (params) => {
   const { seriesOrder, series } = params;
 
   return {

packages/x-charts/src/RadarChart/seriesConfig/index.ts

@@ -8,7 +8,7 @@ import getSeriesWithDefaultValues from './getSeriesWithDefaultValues';
 
 export const radarSeriesConfig: ChartSeriesTypeConfig<'radar'> = {
   colorProcessor: getColor,
-  seriesProcessor: formatter,
+  seriesProcessorWithoutDimensions: formatter,
   legendGetter,
   tooltipGetter,
   axisTooltipGetter,

packages/x-charts/src/ScatterChart/seriesConfig/index.ts

@@ -1,14 +1,14 @@
 import { ChartSeriesTypeConfig } from '../../internals/plugins/models/seriesConfig';
 import { getExtremumX, getExtremumY } from './extremums';
-import seriesProcessor from './seriesProcessor';
+import seriesProcessorWithoutDimensions from './seriesProcessor';
 import getColor from './getColor';
 import legendGetter from './legend';
 import tooltipGetter from './tooltip';
 import getSeriesWithDefaultValues from './getSeriesWithDefaultValues';
 import tooltipItemPositionGetter from './tooltipPosition';
 
 export const scatterSeriesConfig: ChartSeriesTypeConfig<'scatter'> = {
-  seriesProcessor,
+  seriesProcessorWithoutDimensions,
   colorProcessor: getColor,
   legendGetter,
   tooltipGetter,