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

The community edition of MUI X Charts components.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useRadarSeriesData = useRadarSeriesData;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _useScale = require("../../hooks/useScale");
var _useRadarSeries = require("../../hooks/useRadarSeries");
var _useAxis = require("../../hooks/useAxis");
var _useItemHighlightStateGetter = require("../../hooks/useItemHighlightStateGetter");
var _useChartsContext = require("../../context/ChartsProvider/useChartsContext");
var _getSeriesColorFn = require("../../internals/getSeriesColorFn");
/**
 * This hook provides all the data needed to display radar series.
 * @param querySeriesId The id of the series to display
 * @returns
 */
function useRadarSeriesData(querySeriesId) {
  const {
    instance
  } = (0, _useChartsContext.useChartsContext)();
  const rotationScale = (0, _useScale.useRotationScale)();
  const {
    radiusAxis
  } = (0, _useAxis.useRadiusAxes)();
  const radarSeries = (0, _useRadarSeries.useRadarSeries)(querySeriesId === undefined ? undefined : [querySeriesId]);
  const getHighlightState = (0, _useItemHighlightStateGetter.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 = (0, _getSeriesColorFn.getSeriesColorFn)(series);
    return (0, _extends2.default)({}, 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
          })
        };
      })
    });
  });
}