@mui/x-charts/esm/ChartsTooltip/useItemTooltip.js

The community edition of MUI X Charts components.

'use client';

import { useSeries } from "../hooks/useSeries.js";
import { selectorChartsTooltipItem } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
import { useStore } from "../internals/store/useStore.js";
import { useRotationAxes, useXAxes, useYAxes } from "../hooks/useAxis.js";
import { useZAxes } from "../hooks/useZAxis.js";
import { selectorChartSeriesConfig } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.js";
import { isCartesianSeries } from "../internals/isCartesian.js";
export function useInternalItemTooltip() {
  const store = useStore();
  const identifier = store.use(selectorChartsTooltipItem);
  const seriesConfig = store.use(selectorChartSeriesConfig);
  const series = useSeries();
  const {
    xAxis,
    xAxisIds
  } = useXAxes();
  const {
    yAxis,
    yAxisIds
  } = useYAxes();
  const {
    zAxis,
    zAxisIds
  } = useZAxes();
  const {
    rotationAxis,
    rotationAxisIds
  } = useRotationAxes();
  if (!identifier) {
    return null;
  }
  const itemSeries = series[identifier.type]?.series[identifier.seriesId];
  if (!itemSeries) {
    return null;
  }
  const xAxisId = isCartesianSeries(itemSeries) ? itemSeries.xAxisId ?? xAxisIds[0] : undefined;
  const yAxisId = isCartesianSeries(itemSeries) ? itemSeries.yAxisId ?? yAxisIds[0] : undefined;
  const zAxisId = 'zAxisId' in itemSeries ? itemSeries.zAxisId ?? zAxisIds[0] : zAxisIds[0];
  const rotationAxisId = rotationAxisIds[0];
  const getColor = seriesConfig[itemSeries.type].colorProcessor?.(itemSeries, xAxisId !== undefined ? xAxis[xAxisId] : undefined, yAxisId !== undefined ? yAxis[yAxisId] : undefined, zAxisId !== undefined ? zAxis[zAxisId] : undefined) ?? (() => '');
  const axesConfig = {};
  if (xAxisId !== undefined) {
    axesConfig.x = xAxis[xAxisId];
  }
  if (yAxisId !== undefined) {
    axesConfig.y = yAxis[yAxisId];
  }
  if (rotationAxisId !== undefined) {
    axesConfig.rotation = rotationAxis[rotationAxisId];
  }
  return seriesConfig[itemSeries.type].tooltipGetter({
    series: itemSeries,
    axesConfig,
    getColor,
    identifier
  });
}

/**
 * Returns a config object when the tooltip contains a single item to display.
 * Some specific charts like radar need more complex structure. Use specific hook like `useRadarItemTooltip` for them.
 * @returns The tooltip item config
 */
export const useItemTooltip = () => {
  return useInternalItemTooltip();
};

/**
 * Contains an object per value with their content and the label of the associated metric.
 * @returns The tooltip item configs
 */
export const useRadarItemTooltip = () => {
  return useInternalItemTooltip();
};