[charts] Plot data at first render if skipAnimation is set to true (

#16166)

Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
Signed-off-by: Jose C Quintas Jr <juniorquintas@gmail.com>
Co-authored-by: Jose C Quintas Jr <juniorquintas@gmail.com>

docs/data/charts/getting-started/getting-started.md

@@ -92,6 +92,15 @@ The outer margin space is where information like axes, titles, and legends are d
 
 See the [Styling documentation](/x/react-charts/styling/#placement) for complete details.
 
+## Server-side rendering
+
+The chart support server-side rendering under two conditions:
+
+1. The `width` and `height` props needs to be provided.
+2. The animation should be disabled with the `skipAnimation` prop.
+
+The reason is that it is not possible to compute the SVG dimensions on the server, and the `skipAnimation` ensures that the animation is not in an "empty" state when first rendering.
+
 ## Axis management
 
 MUI X Charts take a flexible approach to axis management, with support for multiple axes and any combination of scales and ranges.

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

@@ -40,7 +40,7 @@ function BarLabelPlot(props: BarLabelPlotProps) {
 
   const barLabelTransition = useTransition(bars, {
     keys: (bar) => `${bar.seriesId}-${bar.dataIndex}`,
-    from: leaveStyle,
+    from: skipAnimation ? undefined : leaveStyle,
     leave: null,
     enter: enterStyle,
     update: enterStyle,

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

@@ -265,7 +265,7 @@ function BarPlot(props: BarPlotProps) {
 
   const transition = useTransition(completedData, {
     keys: (bar) => `${bar.seriesId}-${bar.dataIndex}`,
-    from: leaveStyle,
+    from: skipAnimation ? undefined : leaveStyle,
     leave: leaveStyle,
     enter: enterStyle,
     update: enterStyle,
@@ -274,7 +274,7 @@ function BarPlot(props: BarPlotProps) {
 
   const maskTransition = useTransition(withoutBorderRadius ? [] : masksData, {
     keys: (v) => v.id,
-    from: leaveStyle,
+    from: skipAnimation ? undefined : leaveStyle,
     leave: leaveStyle,
     enter: enterStyle,
     update: enterStyle,

packages/x-charts/src/LineChart/AnimatedArea.tsx

@@ -32,7 +32,7 @@ function AnimatedArea(props: AnimatedAreaProps) {
   const stringInterpolator = useStringInterpolator(d);
 
   const transitionChange = useTransition([stringInterpolator], {
-    from: { value: 0 },
+    from: skipAnimation ? undefined : { value: 0 },
     to: { value: 1 },
     enter: { value: 1 },
     reset: false,

packages/x-charts/src/LineChart/AnimatedLine.tsx

@@ -32,7 +32,7 @@ function AnimatedLine(props: AnimatedLineProps) {
   const stringInterpolator = useStringInterpolator(d);
 
   const transitionChange = useTransition([stringInterpolator], {
-    from: { value: 0 },
+    from: skipAnimation ? undefined : { value: 0 },
     to: { value: 1 },
     enter: { value: 1 },
     reset: false,

packages/x-charts/src/LineChart/AppearingMask.tsx

@@ -21,7 +21,7 @@ export function AppearingMask(props: AppearingMaskProps) {
   const transitionAppear = useTransition<typeof drawingArea, { animatedWidth: number }>(
     [drawingArea],
     {
-      from: (v) => ({ animatedWidth: v.left }),
+      from: props.skipAnimation ? undefined : (v) => ({ animatedWidth: v.left }),
       enter: (v) => ({ animatedWidth: v.width + v.left + v.right }),
       leave: (v) => ({ animatedWidth: v.width + v.left + v.right }),
       reset: false,

packages/x-charts/src/PieChart/PieArcLabelPlot.tsx

@@ -8,7 +8,7 @@ import {
   DefaultizedPieValueType,
   PieSeriesType,
 } from '../models/seriesType/pie';
-import { defaultLabelTransitionConfig } from './dataTransform/transition';
+import { getDefaultLabelTransitionConfig } from './dataTransform/transition';
 import {
   AnimatedObject,
   ValueWithHighlight,
@@ -121,7 +121,7 @@ function PieArcLabelPlot(props: PieArcLabelPlotProps) {
     data,
   });
   const transition = useTransition<ValueWithHighlight, AnimatedObject>(transformedData, {
-    ...defaultLabelTransitionConfig,
+    ...getDefaultLabelTransitionConfig(skipAnimation),
     immediate: skipAnimation,
   });
 

packages/x-charts/src/PieChart/PieArcPlot.tsx

@@ -9,7 +9,7 @@ import {
   DefaultizedPieValueType,
   PieItemIdentifier,
 } from '../models/seriesType/pie';
-import { defaultTransitionConfig } from './dataTransform/transition';
+import { getDefaultTransitionConfig } from './dataTransform/transition';
 import {
   AnimatedObject,
   ValueWithHighlight,
@@ -91,7 +91,7 @@ function PieArcPlot(props: PieArcPlotProps) {
     data,
   });
   const transition = useTransition<ValueWithHighlight, AnimatedObject>(transformedData, {
-    ...defaultTransitionConfig,
+    ...getDefaultTransitionConfig(skipAnimation),
     immediate: skipAnimation,
   });
 

packages/x-charts/src/PieChart/dataTransform/transition.ts

@@ -1,27 +1,31 @@
 import { UseTransitionProps } from '@react-spring/web';
 import { ValueWithHighlight } from './useTransformData';
 
-export const defaultTransitionConfig: UseTransitionProps<ValueWithHighlight> = {
+export const getDefaultTransitionConfig = (
+  skipAnimation?: boolean,
+): UseTransitionProps<ValueWithHighlight> => ({
   keys: (item) => item.id,
-  from: ({
-    innerRadius,
-    outerRadius,
-    cornerRadius,
-    startAngle,
-    endAngle,
-    paddingAngle,
-    color,
-    isFaded,
-  }) => ({
-    innerRadius,
-    outerRadius: (innerRadius + outerRadius) / 2,
-    cornerRadius,
-    startAngle: (startAngle + endAngle) / 2,
-    endAngle: (startAngle + endAngle) / 2,
-    paddingAngle,
-    fill: color,
-    opacity: isFaded ? 0.3 : 1,
-  }),
+  from: skipAnimation
+    ? undefined
+    : ({
+        innerRadius,
+        outerRadius,
+        cornerRadius,
+        startAngle,
+        endAngle,
+        paddingAngle,
+        color,
+        isFaded,
+      }) => ({
+        innerRadius,
+        outerRadius: (innerRadius + outerRadius) / 2,
+        cornerRadius,
+        startAngle: (startAngle + endAngle) / 2,
+        endAngle: (startAngle + endAngle) / 2,
+        paddingAngle,
+        fill: color,
+        opacity: isFaded ? 0.3 : 1,
+      }),
   leave: ({ innerRadius, startAngle, endAngle }) => ({
     innerRadius,
     outerRadius: innerRadius,
@@ -31,7 +35,6 @@ export const defaultTransitionConfig: UseTransitionProps<ValueWithHighlight> = {
   enter: ({ innerRadius, outerRadius, startAngle, endAngle }) => ({
     innerRadius,
     outerRadius,
-
     startAngle,
     endAngle,
   }),
@@ -59,28 +62,32 @@ export const defaultTransitionConfig: UseTransitionProps<ValueWithHighlight> = {
     friction: 14,
     clamp: true,
   },
-};
+});
 
-export const defaultLabelTransitionConfig: UseTransitionProps<ValueWithHighlight> = {
+export const getDefaultLabelTransitionConfig = (
+  skipAnimation?: boolean,
+): UseTransitionProps<ValueWithHighlight> => ({
   keys: (item) => item.id,
-  from: ({
-    innerRadius,
-    outerRadius,
-    arcLabelRadius,
-    cornerRadius,
-    startAngle,
-    endAngle,
-    paddingAngle,
-  }) => ({
-    innerRadius,
-    outerRadius: (innerRadius + outerRadius) / 2,
-    cornerRadius,
-    arcLabelRadius,
-    startAngle: (startAngle + endAngle) / 2,
-    endAngle: (startAngle + endAngle) / 2,
-    paddingAngle,
-    opacity: 0,
-  }),
+  from: skipAnimation
+    ? undefined
+    : ({
+        innerRadius,
+        outerRadius,
+        arcLabelRadius,
+        cornerRadius,
+        startAngle,
+        endAngle,
+        paddingAngle,
+      }) => ({
+        innerRadius,
+        outerRadius: (innerRadius + outerRadius) / 2,
+        cornerRadius,
+        arcLabelRadius,
+        startAngle: (startAngle + endAngle) / 2,
+        endAngle: (startAngle + endAngle) / 2,
+        paddingAngle,
+        opacity: 0,
+      }),
   leave: ({ innerRadius, startAngle, endAngle }) => ({
     innerRadius,
     outerRadius: innerRadius,
@@ -120,4 +127,4 @@ export const defaultLabelTransitionConfig: UseTransitionProps<ValueWithHighlight
     friction: 14,
     clamp: true,
   },
-};
+});