[charts-premium] Add highlight to the RadialLineChart

docs/data/charts/radial-lines/ElementHighlights.js

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import TextField from '@mui/material/TextField';
+import MenuItem from '@mui/material/MenuItem';
+import { Unstable_RadialLineChart as RadialLineChart } from '@mui/x-charts-premium/RadialLineChart';
+
+const params = {
+  series: [
+    {
+      data: [3, 4, 1, 6, 5],
+      label: 'A',
+      area: false,
+      stack: 'total',
+    },
+    { data: [4, 3, 1, 5, 8], label: 'B', area: false, stack: 'total' },
+    {
+      data: [4, 2, 5, 4, 1],
+      label: 'C',
+      area: false,
+      stack: 'total',
+    },
+  ],
+  rotationAxis: [{ scaleType: 'point', data: [1, 2, 3, 4, 5] }],
+  height: 400,
+  grid: { rotation: true, radius: true },
+};
+
+export default function ElementHighlights() {
+  const [withArea, setWithArea] = React.useState(false);
+  const [highlight, setHighlight] = React.useState('item');
+  const [fade, setFade] = React.useState('global');
+
+  return (
+    <Stack
+      direction={{ xs: 'column', xl: 'row' }}
+      spacing={1}
+      sx={{ width: '100%' }}
+    >
+      <Box sx={{ flexGrow: 1 }}>
+        <RadialLineChart
+          {...params}
+          series={params.series.map((series) => ({
+            ...series,
+            area: withArea,
+            highlightScope: {
+              highlight,
+              fade,
+            },
+          }))}
+        />
+      </Box>
+      <Stack
+        direction={{ xs: 'row', xl: 'column' }}
+        spacing={3}
+        useFlexGap
+        sx={{ justifyContent: 'center', flexWrap: 'wrap' }}
+      >
+        <TextField
+          select
+          label="highlight"
+          value={highlight}
+          onChange={(event) => setHighlight(event.target.value)}
+          sx={{ minWidth: 150 }}
+        >
+          <MenuItem value={'none'}>none</MenuItem>
+          <MenuItem value={'item'}>item</MenuItem>
+          <MenuItem value={'series'}>series</MenuItem>
+        </TextField>
+        <TextField
+          select
+          label="fade"
+          value={fade}
+          onChange={(event) => setFade(event.target.value)}
+          sx={{ minWidth: 150 }}
+        >
+          <MenuItem value={'none'}>none</MenuItem>
+          <MenuItem value={'series'}>series</MenuItem>
+          <MenuItem value={'global'}>global</MenuItem>
+        </TextField>
+
+        <FormControlLabel
+          control={
+            <Switch
+              checked={withArea}
+              onChange={(event) => setWithArea(event.target.checked)}
+            />
+          }
+          label="Fill line area"
+        />
+      </Stack>
+    </Stack>
+  );
+}

docs/data/charts/radial-lines/ElementHighlights.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import TextField from '@mui/material/TextField';
+import MenuItem from '@mui/material/MenuItem';
+import { Unstable_RadialLineChart as RadialLineChart } from '@mui/x-charts-premium/RadialLineChart';
+
+type HighlightOptions = 'none' | 'item' | 'series';
+type FadeOptions = 'none' | 'series' | 'global';
+
+const params = {
+  series: [
+    {
+      data: [3, 4, 1, 6, 5],
+      label: 'A',
+      area: false,
+      stack: 'total',
+    },
+    { data: [4, 3, 1, 5, 8], label: 'B', area: false, stack: 'total' },
+    {
+      data: [4, 2, 5, 4, 1],
+      label: 'C',
+      area: false,
+      stack: 'total',
+    },
+  ],
+  rotationAxis: [{ scaleType: 'point' as const, data: [1, 2, 3, 4, 5] }],
+  height: 400,
+  grid: { rotation: true, radius: true },
+};
+
+export default function ElementHighlights() {
+  const [withArea, setWithArea] = React.useState(false);
+  const [highlight, setHighlight] = React.useState<HighlightOptions>('item');
+  const [fade, setFade] = React.useState<FadeOptions>('global');
+
+  return (
+    <Stack
+      direction={{ xs: 'column', xl: 'row' }}
+      spacing={1}
+      sx={{ width: '100%' }}
+    >
+      <Box sx={{ flexGrow: 1 }}>
+        <RadialLineChart
+          {...params}
+          series={params.series.map((series) => ({
+            ...series,
+            area: withArea,
+            highlightScope: {
+              highlight,
+              fade,
+            },
+          }))}
+        />
+      </Box>
+      <Stack
+        direction={{ xs: 'row', xl: 'column' }}
+        spacing={3}
+        useFlexGap
+        sx={{ justifyContent: 'center', flexWrap: 'wrap' }}
+      >
+        <TextField
+          select
+          label="highlight"
+          value={highlight}
+          onChange={(event) => setHighlight(event.target.value as HighlightOptions)}
+          sx={{ minWidth: 150 }}
+        >
+          <MenuItem value={'none'}>none</MenuItem>
+          <MenuItem value={'item'}>item</MenuItem>
+          <MenuItem value={'series'}>series</MenuItem>
+        </TextField>
+        <TextField
+          select
+          label="fade"
+          value={fade}
+          onChange={(event) => setFade(event.target.value as FadeOptions)}
+          sx={{ minWidth: 150 }}
+        >
+          <MenuItem value={'none'}>none</MenuItem>
+          <MenuItem value={'series'}>series</MenuItem>
+          <MenuItem value={'global'}>global</MenuItem>
+        </TextField>
+
+        <FormControlLabel
+          control={
+            <Switch
+              checked={withArea}
+              onChange={(event) => setWithArea(event.target.checked)}
+            />
+          }
+          label="Fill line area"
+        />
+      </Stack>
+    </Stack>
+  );
+}

docs/data/charts/radial-lines/radial-lines.md

@@ -1,7 +1,7 @@
 ---
 title: React Radial Line chart
 productId: x-charts
-components: ChartsRadialDataProvider, ChartsRadialGrid, RadialLineChart, RadialMarkPlot, RadialLinePlot, RadialAreaPlot
+components: ChartsRadialDataProvider, ChartsRadialGrid, RadialLineChart, RadialMarkPlot, RadialLinePlot, RadialAreaPlot, RadialLineHighlightPlot
 ---
 
 # Charts - Radial Lines
@@ -14,6 +14,12 @@ The `RadialLineChart` component accepts `series`, `rotationAxis`, and `radiusAxi
 
 {{"demo": "BasicRadialLineChart.js", "bg": "outline"}}
 
+## Highlight
+
+Like other series the radial line series have a `highlightScope` property which accept an objects with `highlight` and `fade` properties.
+
+{{"demo": "ElementHighlights.js", "bg": "outline"}}
+
 ## Radial grid
 
 Similarly to the `ChartsGrid` we provide a `ChartsRadialGrid` for radial coordinates

docs/data/chartsApiPages.ts

@@ -386,6 +386,11 @@ const chartsApiPages: MuiPage[] = [
     title: 'RadialLineChart',
     plan: 'premium',
   },
+  {
+    pathname: '/x/api/charts/radial-line-highlight-plot',
+    title: 'RadialLineHighlightPlot',
+    plan: 'premium',
+  },
   {
     pathname: '/x/api/charts/radial-line-plot',
     title: 'RadialLinePlot',

docs/pages/x/api/charts/radial-line-chart.json

@@ -137,6 +137,7 @@
       "default": "ChartsNoDataOverlay",
       "class": null
     },
+    { "name": "radialLineHighlight", "description": "", "class": null },
     {
       "name": "toolbar",
       "description": "Custom component for the toolbar.",

docs/pages/x/api/charts/radial-line-highlight-plot.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ApiPage } from '@mui/internal-core-docs/ApiPage';
+import { mapApiPageTranslations } from '@mui/internal-core-docs/mapApiPageTranslations';
+import jsonPageContent from './radial-line-highlight-plot.json';
+
+export default function Page(props) {
+  const { descriptions } = props;
+  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
+}
+
+export async function getStaticProps() {
+  const req = require.context(
+    'docs/translations/api-docs/charts/radial-line-highlight-plot',
+    false,
+    /\.\/radial-line-highlight-plot.*\.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return { props: { descriptions } };
+}

docs/pages/x/api/charts/radial-line-highlight-plot.json

@@ -0,0 +1,15 @@
+{
+  "props": {},
+  "name": "RadialLineHighlightPlot",
+  "imports": [
+    "import { RadialLineHighlightPlot } from '@mui/x-charts-premium/RadialLineChart';",
+    "import { RadialLineHighlightPlot } from '@mui/x-charts-premium';"
+  ],
+  "slots": [{ "name": "radialLineHighlight", "description": "", "class": null }],
+  "classes": [],
+  "muiName": "MuiRadialLineHighlightPlot",
+  "filename": "/packages/x-charts-premium/src/RadialLineChart/RadialLineHighlightPlot.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/x/react-charts/radial-lines/\">Charts - Radial Lines</a></li></ul>",
+  "cssComponent": false
+}

docs/public/static/error-codes.json

@@ -265,5 +265,6 @@
   "265": "MUI X Scheduler: `TimelineGridEventContext` is missing. TimelineGrid Event parts must be placed within <TimelineGrid.Event />.",
   "266": "MUI X Scheduler: `TimelineGridEventRowContext` is missing. <TimelineGrid.Event /> part must be placed within <TimelineGrid.EventRow />.",
   "267": "MUI X Scheduler: TimelineGridRootContext is missing. TimelineGrid parts must be placed within <TimelineGrid.Root />.",
-  "268": "MUI X Scheduler: TimelineGridSubGridContext is missing. <TimelineGrid.TitleRow /> and <TimelineGrid.EventRow /> must be placed within <TimelineGrid.SubGrid />."
+  "268": "MUI X Scheduler: TimelineGridSubGridContext is missing. <TimelineGrid.TitleRow /> and <TimelineGrid.EventRow /> must be placed within <TimelineGrid.SubGrid />.",
+  "269": "MUI X Charts: getAxisIndex is not implemented for polar continuous axes. This function only supports ordinal (band/point) scales."
 }

docs/translations/api-docs/charts/radial-line-chart/radial-line-chart.json

@@ -104,6 +104,7 @@
     "line": "The component that renders the line.",
     "loadingOverlay": "Overlay component rendered when the chart is in a loading state.",
     "noDataOverlay": "Overlay component rendered when the chart has no data to display.",
+    "radialLineHighlight": "",
     "toolbar": "Custom component for the toolbar.",
     "tooltip": "Custom component for the tooltip popper."
   }

docs/translations/api-docs/charts/radial-line-highlight-plot/radial-line-highlight-plot.json

@@ -0,0 +1,9 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "slotProps": { "description": "The props used for each component slot." },
+    "slots": { "description": "Overridable component slots." }
+  },
+  "classDescriptions": {},
+  "slotDescriptions": { "radialLineHighlight": "" }
+}

packages/x-charts-premium/src/RadialLineChart/RadialArea.tsx

@@ -3,6 +3,7 @@ import { areaRadial as d3AreaRadial } from '@mui/x-charts-vendor/d3-shape';
 import type { CurveType, SeriesId } from '@mui/x-charts/models';
 import { getCurveFactory } from '@mui/x-charts/internals';
 import { type RadialLinePoint } from './useRadialLinePlotData';
+import { useItemHighlightState } from '../hooks';
 
 export interface RadialAreaProps extends Omit<React.SVGProps<SVGPathElement>, 'ref' | 'points'> {
   seriesId: SeriesId;
@@ -15,20 +16,31 @@ export interface RadialAreaProps extends Omit<React.SVGProps<SVGPathElement>, 'r
 function RadialArea(props: RadialAreaProps) {
   const { seriesId, color, hidden, curve, points, ...other } = props;
 
+  const identifier = React.useMemo(() => ({ type: 'radialLine' as const, seriesId }), [seriesId]);
+
+  const highlightState = useItemHighlightState(identifier);
+
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
+
   const d =
     d3AreaRadial<RadialLinePoint>()
       .angle((p) => p.angle)
       .innerRadius((p) => p.baseRadius)
       .outerRadius((p) => p.radius)
       .curve(getCurveFactory(curve))(points) || '';
 
+  const fadedOpacity = isFaded ? 0.3 : 1;
   return (
     <path
       data-series={seriesId}
+      data-highlighted={isHighlighted || undefined}
+      data-faded={isFaded || undefined}
       d={d}
       fill={color}
       stroke="none"
-      opacity={hidden ? 0 : 1}
+      filter={isHighlighted ? 'brightness(120%)' : undefined}
+      opacity={hidden ? 0 : fadedOpacity}
       {...other}
     />
   );

packages/x-charts-premium/src/RadialLineChart/RadialLine.tsx

@@ -3,6 +3,7 @@ import { lineRadial as d3LineRadial } from '@mui/x-charts-vendor/d3-shape';
 import { getCurveFactory } from '@mui/x-charts/internals';
 import { type CurveType, type SeriesId } from '@mui/x-charts/models';
 import { type RadialLinePoint } from './useRadialLinePlotData';
+import { useItemHighlightState } from '../hooks';
 
 export interface RadialLineProps extends Omit<React.SVGProps<SVGPathElement>, 'ref' | 'points'> {
   seriesId: SeriesId;
@@ -15,19 +16,30 @@ export interface RadialLineProps extends Omit<React.SVGProps<SVGPathElement>, 'r
 function RadialLine(props: RadialLineProps) {
   const { seriesId, color, hidden, points, curve, ...other } = props;
 
+  const identifier = React.useMemo(() => ({ type: 'radialLine' as const, seriesId }), [seriesId]);
+
+  const highlightState = useItemHighlightState(identifier);
+
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
+
   const d =
     d3LineRadial<RadialLinePoint>()
       .angle((p) => p.angle)
       .radius((p) => p.radius)
       .curve(getCurveFactory(curve))(points) || '';
 
+  const fadedOpacity = isFaded ? 0.3 : 1;
   return (
     <path
       data-series={seriesId}
+      data-highlighted={isHighlighted || undefined}
+      data-faded={isFaded || undefined}
       d={d}
       stroke={color}
       fill="none"
-      opacity={hidden ? 0 : 1}
+      filter={isHighlighted ? 'brightness(120%)' : undefined}
+      opacity={hidden ? 0 : fadedOpacity}
       {...other}
     />
   );