@mui/x-charts/esm/RadarChart/RadarAxisHighlight/useRadarAxisHighlight.js

The community edition of MUI X Charts components.

import { useRadiusAxes } from "../../hooks/useAxis.js";
import { useRadarSeries } from "../../hooks/useRadarSeries.js";
import { useRotationScale } from "../../hooks/useScale.js";
import { useSelector } from "../../internals/store/useSelector.js";
import { useStore } from "../../internals/store/useStore.js";
import { useChartContext } from "../../context/ChartProvider/useChartContext.js";
import { selectorChartPolarCenter } from "../../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
import { selectorChartsInteractionRotationAxisIndex, selectorChartsInteractionRotationAxisValue } from "../../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.js";
export function useRadarAxisHighlight(params) {
  const {
    includesNeighbors = false
  } = params ?? {};
  const radarSeries = useRadarSeries();
  const rotationScale = useRotationScale();
  const {
    radiusAxis,
    radiusAxisIds
  } = useRadiusAxes();
  const {
    instance
  } = useChartContext();
  const store = useStore();
  const rotationAxisIndex = useSelector(store, selectorChartsInteractionRotationAxisIndex);
  const rotationAxisValue = useSelector(store, selectorChartsInteractionRotationAxisValue);
  const center = useSelector(store, selectorChartPolarCenter);
  const highlightedIndex = rotationAxisIndex;
  if (!rotationScale) {
    return null;
  }
  if (highlightedIndex === null || highlightedIndex === -1) {
    return null;
  }
  if (radarSeries === undefined || radarSeries.length === 0) {
    return null;
  }
  const metric = radiusAxisIds[highlightedIndex];
  const radiusScale = radiusAxis[metric].scale;
  const angle = rotationScale(rotationAxisValue);
  const radius = radiusScale.range()[1];
  return {
    center,
    radius,
    instance,
    highlightedIndex,
    highlightedMetric: metric,
    highlightedAngle: angle,
    series: radarSeries,
    points: radarSeries.map(series => {
      const value = series.data[highlightedIndex];
      const r = radiusScale(value);
      const [x, y] = instance.polar2svg(r, angle);
      const retrunedValue = {
        highlighted: {
          x,
          y,
          r,
          angle,
          value
        }
      };
      if (!includesNeighbors) {
        return retrunedValue;
      }
      const dataLength = series.data.length;
      const prevIndex = (dataLength + highlightedIndex - 1) % dataLength;
      const nextIndex = (highlightedIndex + 1) % dataLength;
      const prevValue = series.data[prevIndex];
      const nextValue = series.data[nextIndex];
      if (prevValue != null) {
        const prevR = radiusAxis[radiusAxisIds[prevIndex]].scale(prevValue);
        const prevAngle = rotationScale(rotationScale.domain()[prevIndex]);
        const [px, py] = instance.polar2svg(prevR, prevAngle);
        retrunedValue.previous = {
          x: px,
          y: py,
          r: prevR,
          angle: prevAngle,
          value: prevValue
        };
      }
      if (nextValue != null) {
        const nextR = radiusAxis[radiusAxisIds[nextIndex]].scale(nextValue);
        const nextAngle = rotationScale(rotationScale.domain()[nextIndex]);
        const [nx, ny] = instance.polar2svg(nextR, nextAngle);
        retrunedValue.next = {
          x: nx,
          y: ny,
          r: nextR,
          angle: nextAngle,
          value: nextValue
        };
      }
      return retrunedValue;
    })
  };
}