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

The community edition of MUI X Charts components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useAxisHighlightValue = useAxisHighlightValue;
var _getValueToPositionMapper = require("../hooks/getValueToPositionMapper");
var _hooks = require("../hooks");
var _useStore = require("../internals/store/useStore");
var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
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 = [];
function useAxisHighlightValue(params) {
  const {
    axisDirection,
    axisId,
    labelPosition = 'end',
    value,
    valueFormatter
  } = params;
  const {
    top,
    left,
    width,
    height,
    right,
    bottom
  } = (0, _hooks.useDrawingArea)();
  const store = (0, _useStore.useStore)();
  const highlightSelector = axisDirection === 'x' ? _useChartCartesianAxis.selectorChartsHighlightXAxisValue : _useChartCartesianAxis.selectorChartsHighlightYAxisValue;
  const axisSelector = axisDirection === 'x' ? _useChartCartesianAxis.selectorChartXAxis : _useChartCartesianAxis.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 = (0, _getValueToPositionMapper.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;
}