Address feedback

Author: bernardobelchior

packages/x-charts/src/RadarChart/RadarSeriesPlot/RadarSeriesMarks.tsx

@@ -7,7 +7,6 @@ import { useItemHighlightedGetter } from '../../hooks/useItemHighlightedGetter';
 import { RadarSeriesPlotClasses, useUtilityClasses } from './radarSeriesPlotClasses';
 import { SeriesId } from '../../models/seriesType/common';
 import { HighlightItemData } from '../../internals/plugins/featurePlugins/useChartHighlight';
-import { getSeriesColorFn } from '../../internals/getSeriesColorFn';
 
 interface GetCirclePropsParams {
   seriesId: SeriesId;
@@ -47,14 +46,11 @@ function RadarSeriesMarks(props: RadarSeriesMarksProps) {
 
   return (
     <React.Fragment>
-      {seriesCoordinates?.map((series) => {
-        if (series.hideMark) {
+      {seriesCoordinates?.map(({ seriesId: id, points, hideMark, fillArea }) => {
+        if (hideMark) {
           return null;
         }
 
-        const { seriesId: id, points, fillArea } = series;
-        const getColor = getSeriesColorFn(series);
-
         return (
           <g key={id}>
             {points.map((point, index) => (
@@ -63,7 +59,7 @@ function RadarSeriesMarks(props: RadarSeriesMarksProps) {
                 {...getCircleProps({
                   seriesId: id,
                   point,
-                  color: getColor({ value: point.value, dataIndex: point.dataIndex }),
+                  color: point.color,
                   fillArea,
                   isFaded,
                   isHighlighted,

packages/x-charts/src/RadarChart/RadarSeriesPlot/RadarSeriesPlot.tsx

@@ -7,7 +7,6 @@ import { useUtilityClasses } from './radarSeriesPlotClasses';
 import { getPathProps } from './RadarSeriesArea';
 import { getCircleProps } from './RadarSeriesMarks';
 import { useRadarRotationIndex } from './useRadarRotationIndex';
-import { getSeriesColorFn } from '../../internals/getSeriesColorFn';
 
 function RadarSeriesPlot(props: RadarSeriesPlotProps) {
   const { seriesId: inSeriesId, classes: inClasses, onAreaClick, onMarkClick } = props;
@@ -21,10 +20,7 @@ function RadarSeriesPlot(props: RadarSeriesPlotProps) {
 
   return (
     <g className={classes.root}>
-      {seriesCoordinates?.map((series, seriesIndex) => {
-        const { seriesId, points, color, hideMark, fillArea } = series;
-        const getColor = getSeriesColorFn(series);
-
+      {seriesCoordinates?.map(({ seriesId, points, color, hideMark, fillArea }, seriesIndex) => {
         return (
           <g key={seriesId}>
             {
@@ -57,7 +53,7 @@ function RadarSeriesPlot(props: RadarSeriesPlotProps) {
                   {...getCircleProps({
                     seriesId,
                     point,
-                    color: getColor({ value: point.value, dataIndex: point.dataIndex }),
+                    color: point.color,
                     fillArea,
                     isFaded,
                     isHighlighted,

packages/x-charts/src/RadarChart/RadarSeriesPlot/useRadarSeriesData.ts

@@ -5,6 +5,7 @@ import { useItemHighlightedGetter } from '../../hooks/useItemHighlightedGetter';
 import { SeriesId } from '../../models/seriesType/common';
 import { UseChartPolarAxisSignature } from '../../internals/plugins/featurePlugins/useChartPolarAxis';
 import { useChartContext } from '../../context/ChartProvider/useChartContext';
+import { getSeriesColorFn } from '../../internals/getSeriesColorFn';
 
 /**
  * This hook provides all the data needed to display radar series.
@@ -28,6 +29,7 @@ export function useRadarSeriesData(querySeriesId?: SeriesId) {
     const seriesId = series.id;
     const isSeriesHighlighted = isItemHighlighted({ seriesId });
     const isSeriesFaded = !isSeriesHighlighted && isItemFaded({ seriesId });
+    const getColor = getSeriesColorFn(series);
 
     return {
       ...series,
@@ -48,6 +50,7 @@ export function useRadarSeriesData(querySeriesId?: SeriesId) {
           isItemFaded: faded,
           dataIndex,
           value,
+          color: getColor({ value, dataIndex }),
         };
       }),
     };