[charts-pro] Add data-series to elements of funnel chart

docs/data/charts/funnel/FunnelDataAttributes.js

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import {
+  Unstable_FunnelChart as FunnelChart,
+  funnelSectionClasses,
+} from '@mui/x-charts-pro/FunnelChart';
+
+export default function FunnelDataAttributes() {
+  return (
+    <Box sx={{ width: '100%', maxWidth: 400 }}>
+      <FunnelChart
+        {...funnelProps}
+        sx={{
+          [`[data-series="main"] .${funnelSectionClasses.root}:nth-of-type(1)`]: {
+            fill: 'url(#pattern)',
+          },
+        }}
+      >
+        <defs>
+          <pattern id="pattern" width="50" height="50" patternUnits="userSpaceOnUse">
+            <rect width="100%" height="100%" fill="hotpink" />
+            <circle fill="slateblue" cx="15" cy="15" r="10" />
+            <circle fill="slateblue" cx="40" cy="40" r="10" />
+          </pattern>
+        </defs>
+      </FunnelChart>
+    </Box>
+  );
+}
+
+const funnelProps = {
+  height: 300,
+  hideLegend: true,
+  series: [
+    {
+      id: 'main',
+      data: [{ value: 200 }, { value: 180 }, { value: 90 }, { value: 50 }],
+    },
+  ],
+};

docs/data/charts/funnel/FunnelDataAttributes.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import {
+  Unstable_FunnelChart as FunnelChart,
+  funnelSectionClasses,
+} from '@mui/x-charts-pro/FunnelChart';
+
+export default function FunnelDataAttributes() {
+  return (
+    <Box sx={{ width: '100%', maxWidth: 400 }}>
+      <FunnelChart
+        {...funnelProps}
+        sx={{
+          [`[data-series="main"] .${funnelSectionClasses.root}:nth-of-type(1)`]: {
+            fill: 'url(#pattern)',
+          },
+        }}
+      >
+        <defs>
+          <pattern id="pattern" width="50" height="50" patternUnits="userSpaceOnUse">
+            <rect width="100%" height="100%" fill="hotpink" />
+            <circle fill="slateblue" cx="15" cy="15" r="10" />
+            <circle fill="slateblue" cx="40" cy="40" r="10" />
+          </pattern>
+        </defs>
+      </FunnelChart>
+    </Box>
+  );
+}
+
+const funnelProps = {
+  height: 300,
+  hideLegend: true,
+  series: [
+    {
+      id: 'main',
+      data: [{ value: 200 }, { value: 180 }, { value: 90 }, { value: 50 }],
+    },
+  ],
+} as const;

docs/data/charts/funnel/FunnelDataAttributes.tsx.preview

@@ -0,0 +1,16 @@
+<FunnelChart
+  {...funnelProps}
+  sx={{
+    [`[data-series="main"] .${funnelSectionClasses.root}:nth-of-type(1)`]: {
+      fill: 'url(#pattern)',
+    },
+  }}
+>
+  <defs>
+    <pattern id="pattern" width="50" height="50" patternUnits="userSpaceOnUse">
+      <rect width="100%" height="100%" fill="hotpink" />
+      <circle fill="slateblue" cx="15" cy="15" r="10" />
+      <circle fill="slateblue" cx="40" cy="40" r="10" />
+    </pattern>
+  </defs>
+</FunnelChart>

docs/data/charts/funnel/funnel.md

@@ -123,6 +123,16 @@ The funnel colors can be customized in two ways.
 
 {{"demo": "FunnelColor.js"}}
 
+### CSS
+
+The funnel chart can be styled using CSS.
+
+Each section group has a `data-series` attribute that can be used to target specific series sections.
+
+In order to target specific sections, you can use the `:nth-child` or `:nth-child-of-type` selectors as shown in the example below.
+
+{{"demo": "FunnelDataAttributes.js"}}
+
 ## Multiple funnels
 
 By default, multiple series are displayed on top of each other.

packages/x-charts-pro/src/FunnelChart/FunnelPlot.tsx

@@ -209,7 +209,7 @@ const useAggregatedData = () => {
       });
     });
 
-    return result.flat();
+    return result;
   }, [seriesData, xAxis, xAxisIds, yAxis, yAxisIds, gap]);
 
   return allData;
@@ -222,36 +222,48 @@ function FunnelPlot(props: FunnelPlotProps) {
 
   return (
     <React.Fragment>
-      {data.map(({ d, color, id, seriesId, dataIndex, variant }) => (
-        <FunnelSection
-          {...other}
-          d={d}
-          color={color}
-          key={id}
-          dataIndex={dataIndex}
-          seriesId={seriesId}
-          variant={variant}
-          onClick={
-            onItemClick &&
-            ((event) => {
-              onItemClick(event, { type: 'funnel', seriesId, dataIndex });
-            })
-          }
-        />
-      ))}
-      {data.map(({ id, label, seriesId, dataIndex }) => {
-        if (!label || !label.value) {
-          return null;
-        }
-
+      {data.map((series) => {
+        return (
+          <g data-series={series[0].seriesId} key={series[0].seriesId}>
+            {series.map(({ d, color, id, seriesId, dataIndex, variant }) => (
+              <FunnelSection
+                {...other}
+                d={d}
+                color={color}
+                key={id}
+                dataIndex={dataIndex}
+                seriesId={seriesId}
+                variant={variant}
+                onClick={
+                  onItemClick &&
+                  ((event) => {
+                    onItemClick(event, { type: 'funnel', seriesId, dataIndex });
+                  })
+                }
+              />
+            ))}
+          </g>
+        );
+      })}
+      {data.map((series) => {
         return (
-          <FunnelSectionLabel
-            key={id}
-            label={label}
-            dataIndex={dataIndex}
-            seriesId={seriesId}
-            {...other}
-          />
+          <g data-series={series[0].seriesId} key={series[0].seriesId}>
+            {series.map(({ id, label, seriesId, dataIndex }) => {
+              if (!label || !label.value) {
+                return null;
+              }
+
+              return (
+                <FunnelSectionLabel
+                  key={id}
+                  label={label}
+                  dataIndex={dataIndex}
+                  seriesId={seriesId}
+                  {...other}
+                />
+              );
+            })}
+          </g>
         );
       })}
     </React.Fragment>

packages/x-charts-pro/src/FunnelChart/FunnelSection.tsx

@@ -62,6 +62,8 @@ const FunnelSection = consumeSlots(
         strokeWidth={isOutlined ? 1.5 : 0}
         cursor={onClick ? 'pointer' : 'unset'}
         onClick={onClick}
+        data-highlighted={isHighlighted || undefined}
+        data-faded={isFaded || undefined}
         className={clsx(
           classes?.root,
           isHighlighted && classes?.highlighted,