@mui/x-charts/RadarChart/RadarSeriesPlot/useRadarSeriesData.mjs

The community edition of MUI X Charts components.

import _extends from "@babel/runtime/helpers/esm/extends";
import { useRotationScale } from "../../hooks/useScale.mjs";
import { useRadarSeries } from "../../hooks/useRadarSeries.mjs";
import { useRadiusAxes } from "../../hooks/useAxis.mjs";
import { useItemHighlightStateGetter } from "../../hooks/useItemHighlightStateGetter.mjs";
import { useChartsContext } from "../../context/ChartsProvider/useChartsContext.mjs";
import { getSeriesColorFn } from "../../internals/getSeriesColorFn.mjs";

/**
 * 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
  } = useChartsContext();
  const rotationScale = useRotationScale();
  const {
    radiusAxis
  } = useRadiusAxes();
  const radarSeries = useRadarSeries(querySeriesId === undefined ? undefined : [querySeriesId]);
  const getHighlightState = useItemHighlightStateGetter();
  const metrics = rotationScale?.domain() ?? [];
  const angles = metrics.map(key => rotationScale(key));
  return radarSeries.map(series => {
    const seriesId = series.id;
    const seriesHighlightState = getHighlightState({
      type: 'radar',
      seriesId
    });
    const isSeriesHighlighted = seriesHighlightState === 'highlighted';
    const isSeriesFaded = seriesHighlightState === 'faded';
    const getColor = getSeriesColorFn(series);
    return _extends({}, series, {
      seriesId: series.id,
      isSeriesHighlighted,
      isSeriesFaded,
      points: series.data.map((value, dataIndex) => {
        const pointHighlightState = getHighlightState({
          type: 'radar',
          seriesId,
          dataIndex
        });
        const highlighted = pointHighlightState === 'highlighted';
        const faded = pointHighlightState === 'faded';
        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
          })
        };
      })
    });
  });
}