@mui/x-charts/esm/RadarChart/RadarSeriesPlot/useRadarSeriesData.js

The community edition of MUI X Charts components.

import _extends from "@babel/runtime/helpers/esm/extends";
import { useRotationScale } from "../../hooks/useScale.js";
import { useRadarSeries } from "../../hooks/useRadarSeries.js";
import { useRadiusAxes } from "../../hooks/useAxis.js";
import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.js";
import { useChartContext } from "../../context/ChartProvider/useChartContext.js";
import { getSeriesColorFn } from "../../internals/getSeriesColorFn.js";

/**
 * This hook provides all the data needed to display radar series.
 * @param querySeriesId The id of the series to display
 * @returns
 */
export function useRadarSeriesData(querySeriesId) {
  const {
    instance
  } = useChartContext();
  const rotationScale = useRotationScale();
  const {
    radiusAxis
  } = useRadiusAxes();
  const radarSeries = useRadarSeries(querySeriesId === undefined ? undefined : [querySeriesId]);
  const {
    isFaded: isItemFaded,
    isHighlighted: isItemHighlighted
  } = useItemHighlightedGetter();
  const metrics = rotationScale?.domain() ?? [];
  const angles = metrics.map(key => rotationScale(key));
  return radarSeries.map(series => {
    const seriesId = series.id;
    const isSeriesHighlighted = isItemHighlighted({
      seriesId
    });
    const isSeriesFaded = !isSeriesHighlighted && isItemFaded({
      seriesId
    });
    const getColor = getSeriesColorFn(series);
    return _extends({}, series, {
      seriesId: series.id,
      isSeriesHighlighted,
      isSeriesFaded,
      points: series.data.map((value, dataIndex) => {
        const highlighted = isItemHighlighted({
          seriesId,
          dataIndex
        });
        const faded = !highlighted && isItemFaded({
          seriesId,
          dataIndex
        });
        const r = radiusAxis[metrics[dataIndex]].scale(value);
        const angle = angles[dataIndex];
        const [x, y] = instance.polar2svg(r, angle);
        return {
          x,
          y,
          isItemHighlighted: highlighted,
          isItemFaded: faded,
          dataIndex,
          value,
          color: getColor({
            value,
            dataIndex
          })
        };
      })
    });
  });
}