[charts-premium] Add Highlight support to RadialBarChart

docs/data/charts/radial-bars/BasicRadialBarChart.js

@@ -16,6 +16,8 @@ const months = [
   'Dec',
 ];
 
+const highlightScope = { highlight: 'item', fade: 'global' };
+
 export default function BasicRadialBarChart() {
   return (
     <RadialBarChart
@@ -24,16 +26,19 @@ export default function BasicRadialBarChart() {
         {
           data: [3, 5, 7, null, 12, 15, 18, 16, 13, 9, 6, 4],
           label: 'Temperature',
+          highlightScope,
         },
         {
           data: [12, 15, 18, 16, 13, null, 6, 4, 3, 5, 7, 9],
           label: 'Temperature',
           stack: 'a',
+          highlightScope,
         },
         {
           data: [7, 9, 12, 15, 18, 16, 13, null, 6, 4, 3, 5],
           label: 'Temperature',
           stack: 'a',
+          highlightScope,
         },
       ]}
       rotationAxis={[{ scaleType: 'band', data: months }]}

docs/data/charts/radial-bars/BasicRadialBarChart.tsx

@@ -15,6 +15,7 @@ const months = [
   'Nov',
   'Dec',
 ];
+const highlightScope = { highlight: 'item', fade: 'global' } as const;
 
 export default function BasicRadialBarChart() {
   return (
@@ -24,17 +25,20 @@ export default function BasicRadialBarChart() {
         {
           data: [3, 5, 7, null, 12, 15, 18, 16, 13, 9, 6, 4],
           label: 'Temperature',
+          highlightScope,
         },
 
         {
           data: [12, 15, 18, 16, 13, null, 6, 4, 3, 5, 7, 9],
           label: 'Temperature',
           stack: 'a',
+          highlightScope,
         },
         {
           data: [7, 9, 12, 15, 18, 16, 13, null, 6, 4, 3, 5],
           label: 'Temperature',
           stack: 'a',
+          highlightScope,
         },
       ]}
       rotationAxis={[{ scaleType: 'band', data: months }]}

docs/data/charts/radial-bars/HorizontalRadialBarChart.js

@@ -3,6 +3,8 @@ import { Unstable_RadialBarChart as RadialBarChart } from '@mui/x-charts-premium
 
 const quarters = ['Q1', 'Q2', 'Q3', 'Q4'];
 
+const highlightScope = { highlight: 'item', fade: 'global' };
+
 export default function HorizontalRadialBarChart() {
   return (
     <RadialBarChart
@@ -12,17 +14,20 @@ export default function HorizontalRadialBarChart() {
           data: [3, 5, 7, 9],
           label: 'Temperature',
           layout: 'horizontal',
+          highlightScope,
         },
         {
           data: [9, 12, 15, 17],
           label: 'Temperature',
           layout: 'horizontal',
+          highlightScope,
           stack: 'stack1',
         },
         {
           data: [3, 5, 15, 3],
           label: 'Temperature',
           layout: 'horizontal',
+          highlightScope,
           stack: 'stack1',
         },
       ]}

docs/data/charts/radial-bars/HorizontalRadialBarChart.tsx

@@ -3,6 +3,8 @@ import { Unstable_RadialBarChart as RadialBarChart } from '@mui/x-charts-premium
 
 const quarters = ['Q1', 'Q2', 'Q3', 'Q4'];
 
+const highlightScope = { highlight: 'item', fade: 'global' } as const;
+
 export default function HorizontalRadialBarChart() {
   return (
     <RadialBarChart
@@ -12,17 +14,20 @@ export default function HorizontalRadialBarChart() {
           data: [3, 5, 7, 9],
           label: 'Temperature',
           layout: 'horizontal',
+          highlightScope,
         },
         {
           data: [9, 12, 15, 17],
           label: 'Temperature',
           layout: 'horizontal',
+          highlightScope,
           stack: 'stack1',
         },
         {
           data: [3, 5, 15, 3],
           label: 'Temperature',
           layout: 'horizontal',
+          highlightScope,
           stack: 'stack1',
         },
       ]}

packages/x-charts-premium/src/RadialBarChart/RadialBarElement.tsx

@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
 import { styled } from '@mui/material/styles';
 import { type SeriesId } from '@mui/x-charts/internals';
+import { useItemHighlightState } from '../hooks';
 import { type RadialBarClasses, useUtilityClasses } from './radialBarClasses';
 
 type RadialBarElementProps = Omit<React.SVGProps<SVGPathElement>, 'ref'> & {
@@ -40,6 +41,15 @@ function RadialBarElement(props: RadialBarElementProps) {
 
   const classes = useUtilityClasses({ classes: innerClasses });
 
+  const identifier = React.useMemo(
+    () => ({ type: 'radialBar' as const, seriesId, dataIndex }),
+    [seriesId, dataIndex],
+  );
+  const highlightState = useItemHighlightState(identifier);
+
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
+
   const d = d3Arc()({
     startAngle,
     endAngle,
@@ -56,6 +66,10 @@ function RadialBarElement(props: RadialBarElementProps) {
       onClick={onClick}
       cursor={onClick ? 'pointer' : undefined}
       data-index={dataIndex}
+      data-highlighted={isHighlighted || undefined}
+      data-faded={isFaded || undefined}
+      filter={isHighlighted ? 'brightness(120%)' : undefined}
+      opacity={isFaded ? 0.3 : 1}
       {...other}
     />
   );

packages/x-charts-premium/src/RadialBarChart/seriesConfig/getItemAtPosition.ts

@@ -0,0 +1,92 @@
+import {
+  type ChartState,
+  type ProcessedSeries,
+  type UseChartPolarAxisSignature,
+  selectorAllSeriesOfType,
+  selectorChartPolarCenter,
+  selectorChartRadiusAxis,
+  selectorChartRotationAxis,
+  getBandIndex,
+  clampAngleRad,
+  generateSvg2rotation,
+} from '@mui/x-charts/internals';
+import type { SeriesItemIdentifierWithType } from '@mui/x-charts/models';
+
+export default function getItemAtPosition(
+  state: ChartState<[UseChartPolarAxisSignature]>,
+  point: { x: number; y: number },
+): SeriesItemIdentifierWithType<'radialBar'> | undefined {
+  const { axis: rotationAxes, axisIds: rotationAxisIds } = selectorChartRotationAxis(state);
+  const { axis: radiusAxes, axisIds: radiusAxisIds } = selectorChartRadiusAxis(state);
+  const center = selectorChartPolarCenter(state);
+  const seriesState = selectorAllSeriesOfType(state, 'radialBar') as ProcessedSeries['radialBar'];
+
+  if (!seriesState || seriesState.seriesOrder.length === 0) {
+    return undefined;
+  }
+
+  const defaultRotationAxisId = rotationAxisIds[0];
+  const defaultRadiusAxisId = radiusAxisIds[0];
+
+  const polarCoordinate = {
+    rotation: generateSvg2rotation(center)(point.x, point.y),
+    radius: Math.sqrt((point.x - center.cx) ** 2 + (point.y - center.cy) ** 2),
+  };
+
+  for (let stackIndex = 0; stackIndex < seriesState.stackingGroups.length; stackIndex += 1) {
+    const group = seriesState.stackingGroups[stackIndex];
+    const seriesIds = group.ids;
+
+    for (const seriesId of seriesIds) {
+      const series = (seriesState.series ?? {})[seriesId];
+
+      const rotationAxisId = series.rotationAxisId ?? defaultRotationAxisId;
+      const radiusAxisId = series.radiusAxisId ?? defaultRadiusAxisId;
+
+      const rotationAxis = rotationAxes[rotationAxisId];
+      const radiusAxis = radiusAxes[radiusAxisId];
+
+      const bandAxis = series.layout === 'horizontal' ? radiusAxis : rotationAxis;
+      const continuousAxis = series.layout === 'horizontal' ? rotationAxis : radiusAxis;
+
+      const clampedAngle =
+        rotationAxis.scale.range()[0] +
+        clampAngleRad(polarCoordinate.rotation - rotationAxis.scale.range()[0]);
+      const bandCoordinate = series.layout === 'horizontal' ? polarCoordinate.radius : clampedAngle;
+      const valueCoordinate =
+        series.layout === 'horizontal' ? clampedAngle : polarCoordinate.radius;
+
+      const dataIndex = getBandIndex(
+        bandAxis,
+        { groupNumber: seriesState.stackingGroups.length, groupIndex: stackIndex },
+        bandCoordinate,
+      );
+
+      if (dataIndex === -1) {
+        continue;
+      }
+
+      // The point is inside the band for this series
+      const bar = series.visibleStackedData[dataIndex];
+      const start = continuousAxis.scale(bar[0]);
+      const end = continuousAxis.scale(bar[1]);
+
+      if (start == null || end == null) {
+        continue;
+      }
+
+      const continuousMin = Math.min(start, end);
+      const continuousMax = Math.max(start, end);
+
+      if (valueCoordinate >= continuousMin && valueCoordinate <= continuousMax) {
+        return {
+          type: 'radialBar',
+          seriesId,
+          dataIndex,
+        };
+      }
+    }
+  }
+
+  return undefined;
+}

packages/x-charts-premium/src/RadialBarChart/seriesConfig/index.ts

@@ -14,6 +14,7 @@ import colorProcessor from './getColor';
 import seriesProcessor from './seriesProcessor';
 import getSeriesWithDefaultValues from './getSeriesWithDefaultValues';
 import descriptionGetter from './descriptionGetter';
+import getItemAtPosition from './getItemAtPosition';
 import { radiusExtremumGetter, rotationExtremumGetter } from './extremums';
 import tooltipGetter from './tooltip';
 
@@ -29,7 +30,7 @@ export const radialBarSeriesConfig: ChartSeriesTypeConfig<'radialBar'> = {
   rotationExtremumGetter,
   radiusExtremumGetter,
   getSeriesWithDefaultValues,
-  // getItemAtPosition,
+  getItemAtPosition,
   keyboardFocusHandler,
   identifierSerializer: identifierSerializerSeriesIdDataIndex,
   identifierCleaner: identifierCleanerSeriesIdDataIndex,

packages/x-charts-premium/src/RadialBarChart/useRadialBarPlotData.ts

@@ -12,6 +12,7 @@ import {
   type StackingGroupsType,
   type ChartsRotationAxisProps,
   type ChartsRadiusAxisProps,
+  type ChartsRadialAxisProps,
 } from '@mui/x-charts/internals';
 import { type SeriesId } from '@mui/x-charts/models';
 
@@ -91,7 +92,7 @@ function processRadialBarDataForPlot(
 
         const baseAxisConfig = (
           verticalLayout ? rotationAxisConfig : radiusAxisConfig
-        ) as ComputedAxis<'band'>;
+        ) as ComputedAxis<'band', any, ChartsRadialAxisProps>;
         const valueAxisConfig = verticalLayout ? radiusAxisConfig : rotationAxisConfig;
 
         const reverse = valueAxisConfig.reverse ?? false;

packages/x-charts-premium/src/RadialLineChart/RadialLineChart.plugins.ts

@@ -15,7 +15,7 @@ import {
   type UseChartVisibilityManagerSignature,
   type ConvertSignaturesIntoPlugins,
 } from '@mui/x-charts/internals';
-import { useChartProExport, type UseChartProExportSignature } from '../plugins';
+import { useChartProExport, type UseChartProExportSignature } from '@mui/x-charts-pro/plugins';
 
 export type RadialLineChartPluginSignatures = [
   UseChartZAxisSignature,

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

@@ -63,6 +63,7 @@ export * from './clampAngle';
 export * from './getLabel';
 export * from './legendUtils';
 export * from './getChartPoint';
+export * from './plugins/featurePlugins/useChartPolarAxis/coordinateTransformation';
 export * from './isDefined';
 export * from './getScale';
 export * from './getAsNumber';

packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/createZoomLookup.ts

@@ -1,16 +1,11 @@
-import {
-  type AxisConfig,
-  type ChartsXAxisProps,
-  type ChartsYAxisProps,
-  type ScaleName,
-} from '../../../../models';
-import { type AxisId } from '../../../../models/axis';
+import type { AxisConfig, ScaleName } from '../../../../models';
+import type { AxisId, ChartsCartesianAxisProps } from '../../../../models/axis';
 import { defaultizeZoom } from './defaultizeZoom';
 import { type DefaultizedZoomOptions } from './useChartCartesianAxis.types';
 
 export const createZoomLookup =
   (axisDirection: 'x' | 'y') =>
-  (axes: AxisConfig<ScaleName, any, ChartsXAxisProps | ChartsYAxisProps>[] = []) =>
+  (axes: AxisConfig<ScaleName, any, ChartsCartesianAxisProps>[] = []) =>
     axes.reduce<Record<AxisId, DefaultizedZoomOptions>>((acc, v) => {
       // @ts-ignore
       const { zoom, id: axisId, reverse } = v;

packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/index.ts

@@ -5,6 +5,7 @@ export * from './useChartCartesianAxisLayout.selectors';
 export * from './useChartCartesianInteraction.selectors';
 export * from './useChartCartesianHighlight.selectors';
 export * from './useChartCartesianAxisPreview.selectors';
+export { getBandIndex } from './useChartCartesianAxisPosition.selectors';
 export * from './useChartAxisAutoSize.selectors';
 export * from './useChartCartesianTooltip.selectors';
 export { defaultizeXAxis, defaultizeYAxis } from './defaultizeAxis';