@mui/x-charts/ChartsAxisHighlightValue/useAxisHighlightValue.mjs

The community edition of MUI X Charts components.

import { getValueToPositionMapper } from "../hooks/getValueToPositionMapper.mjs";
import { useDrawingArea } from "../hooks/index.mjs";
import { useStore } from "../internals/store/useStore.mjs";
import { selectorChartsHighlightXAxisValue, selectorChartsHighlightYAxisValue, selectorChartXAxis, selectorChartYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.mjs";
function getAxisValueFormatter(axis, valueFormatter) {
  if (valueFormatter) {
    return valueFormatter;
  }
  if (axis.valueFormatter) {
    return v => axis.valueFormatter(v, {
      location: 'tooltip',
      scale: axis.scale
    });
  }
  return v => `${v}`;
}
const EMPTY_ARRAY = [];
export function useAxisHighlightValue(params) {
  const {
    axisDirection,
    axisId,
    labelPosition = 'end',
    value,
    valueFormatter
  } = params;
  const {
    top,
    left,
    width,
    height,
    right,
    bottom
  } = useDrawingArea();
  const store = useStore();
  const highlightSelector = axisDirection === 'x' ? selectorChartsHighlightXAxisValue : selectorChartsHighlightYAxisValue;
  const axisSelector = axisDirection === 'x' ? selectorChartXAxis : selectorChartYAxis;
  const axisHighlightValues = store.use(highlightSelector);
  const axes = store.use(axisSelector);
  if (labelPosition === 'none') {
    return EMPTY_ARRAY;
  }
  let items;
  if (value !== undefined && value !== null) {
    const targetAxisId = axisId ?? axes.axisIds[0];
    items = [{
      axisId: targetAxisId,
      value
    }];
  } else {
    items = axisHighlightValues.filter(item => (axisId === undefined || item.axisId === axisId) && item.value !== undefined).map(item => ({
      axisId: item.axisId,
      value: item.value
    }));
  }
  const result = [];
  for (const {
    axisId: itemAxisId,
    value: itemValue
  } of items) {
    const axis = axes.axis[itemAxisId];
    if (!axis) {
      continue;
    }
    const scale = axis.scale;
    const position = getValueToPositionMapper(scale)(itemValue);
    if (!Number.isFinite(position)) {
      continue;
    }
    const format = getAxisValueFormatter(axis, valueFormatter);
    const formattedValue = format(itemValue);
    if (axisDirection === 'x') {
      if (labelPosition === 'start' || labelPosition === 'both') {
        result.push({
          key: `${itemAxisId}-${String(itemValue)}-start`,
          x: position,
          y: top,
          formattedValue,
          position: 'top',
          minCoord: left,
          maxCoord: left + width,
          space: top
        });
      }
      if (labelPosition === 'end' || labelPosition === 'both') {
        result.push({
          key: `${itemAxisId}-${String(itemValue)}-end`,
          x: position,
          y: top + height,
          formattedValue,
          position: 'bottom',
          minCoord: left,
          maxCoord: left + width,
          space: bottom
        });
      }
    } else {
      if (labelPosition === 'start' || labelPosition === 'both') {
        result.push({
          key: `${itemAxisId}-${String(itemValue)}-start`,
          x: left,
          y: position,
          formattedValue,
          position: 'left',
          minCoord: top,
          maxCoord: top + height,
          space: left
        });
      }
      if (labelPosition === 'end' || labelPosition === 'both') {
        result.push({
          key: `${itemAxisId}-${String(itemValue)}-end`,
          x: left + width,
          y: position,
          formattedValue,
          position: 'right',
          minCoord: top,
          maxCoord: top + height,
          space: right
        });
      }
    }
  }
  return result;
}