@mui/x-charts/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.js

The community edition of MUI X Charts components.

"use strict";
'use client';

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useChartCartesianAxis = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _warning = require("@mui/x-internals/warning");
var _colorPalettes = require("../../../../colorPalettes");
var _useSelector = require("../../../store/useSelector");
var _useChartDimensions = require("../../corePlugins/useChartDimensions/useChartDimensions.selectors");
var _useChartSeries = require("../../corePlugins/useChartSeries/useChartSeries.selectors");
var _defaultizeAxis = require("./defaultizeAxis");
var _useChartCartesianAxisRendering = require("./useChartCartesianAxisRendering.selectors");
var _getAxisValue = require("./getAxisValue");
var _getSVGPoint = require("../../../getSVGPoint");
var _useChartInteraction = require("../useChartInteraction");
const useChartCartesianAxis = ({
  params,
  store,
  seriesConfig,
  svgRef,
  instance
}) => {
  const {
    xAxis,
    yAxis,
    dataset
  } = params;
  if (process.env.NODE_ENV !== 'production') {
    const ids = [...(xAxis ?? []), ...(yAxis ?? [])].filter(axis => axis.id).map(axis => axis.id);
    const duplicates = new Set(ids.filter((id, index) => ids.indexOf(id) !== index));
    if (duplicates.size > 0) {
      (0, _warning.warnOnce)([`MUI X Charts: The following axis ids are duplicated: ${Array.from(duplicates).join(', ')}.`, `Please make sure that each axis has a unique id.`].join('\n'), 'error');
    }
  }
  const drawingArea = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartDrawingArea);
  const processedSeries = (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesProcessed);
  const isInteractionEnabled = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionIsInitialized);
  const {
    axis: xAxisWithScale,
    axisIds: xAxisIds
  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxisRendering.selectorChartXAxis);
  const {
    axis: yAxisWithScale,
    axisIds: yAxisIds
  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxisRendering.selectorChartYAxis);

  // The effect do not track any value defined synchronously during the 1st render by hooks called after `useChartCartesianAxis`
  // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
  const isFirstRender = React.useRef(true);
  React.useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
      return;
    }
    store.update(prev => (0, _extends2.default)({}, prev, {
      cartesianAxis: (0, _extends2.default)({}, prev.cartesianAxis, {
        x: (0, _defaultizeAxis.defaultizeXAxis)(xAxis, dataset),
        y: (0, _defaultizeAxis.defaultizeYAxis)(yAxis, dataset)
      })
    }));
  }, [seriesConfig, drawingArea, xAxis, yAxis, dataset, store]);
  const usedXAxis = xAxisIds[0];
  const usedYAxis = yAxisIds[0];
  React.useEffect(() => {
    const element = svgRef.current;
    if (!isInteractionEnabled || element === null || params.disableAxisListener) {
      return () => {};
    }
    const handleOut = () => {
      instance.cleanInteraction?.();
    };
    const handleMove = event => {
      const target = 'targetTouches' in event ? event.targetTouches[0] : event;
      const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, target);
      if (!instance.isPointInside(svgPoint.x, svgPoint.y, event.target)) {
        instance.cleanInteraction?.();
        return;
      }
      instance.setPointerCoordinate?.(svgPoint);
    };
    const handleDown = event => {
      const target = event.currentTarget;
      if (!target) {
        return;
      }
      if ('hasPointerCapture' in target && target.hasPointerCapture(event.pointerId)) {
        target.releasePointerCapture(event.pointerId);
      }
    };
    element.addEventListener('pointerdown', handleDown);
    element.addEventListener('pointermove', handleMove);
    element.addEventListener('pointercancel', handleOut);
    element.addEventListener('pointerleave', handleOut);
    return () => {
      element.removeEventListener('pointerdown', handleDown);
      element.removeEventListener('pointermove', handleMove);
      element.removeEventListener('pointercancel', handleOut);
      element.removeEventListener('pointerleave', handleOut);
    };
  }, [svgRef, store, xAxisWithScale, usedXAxis, yAxisWithScale, usedYAxis, instance, params.disableAxisListener, isInteractionEnabled]);
  React.useEffect(() => {
    const element = svgRef.current;
    const onAxisClick = params.onAxisClick;
    if (element === null || !onAxisClick) {
      return () => {};
    }
    const handleMouseClick = event => {
      event.preventDefault();
      let dataIndex = null;
      let isXAxis = false;
      const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, event);
      const xIndex = (0, _getAxisValue.getAxisIndex)(xAxisWithScale[usedXAxis], svgPoint.x);
      isXAxis = xIndex !== -1;
      dataIndex = isXAxis ? xIndex : (0, _getAxisValue.getAxisIndex)(yAxisWithScale[usedYAxis], svgPoint.y);
      const USED_AXIS_ID = isXAxis ? xAxisIds[0] : yAxisIds[0];
      if (dataIndex == null || dataIndex === -1) {
        return;
      }

      // The .data exist because otherwise the dataIndex would be null or -1.
      const axisValue = (isXAxis ? xAxisWithScale : yAxisWithScale)[USED_AXIS_ID].data[dataIndex];
      const seriesValues = {};
      Object.keys(processedSeries).filter(seriesType => ['bar', 'line'].includes(seriesType)).forEach(seriesType => {
        processedSeries[seriesType]?.seriesOrder.forEach(seriesId => {
          const seriesItem = processedSeries[seriesType].series[seriesId];
          const providedXAxisId = seriesItem.xAxisId;
          const providedYAxisId = seriesItem.yAxisId;
          const axisKey = isXAxis ? providedXAxisId : providedYAxisId;
          if (axisKey === undefined || axisKey === USED_AXIS_ID) {
            seriesValues[seriesId] = seriesItem.data[dataIndex];
          }
        });
      });
      onAxisClick(event, {
        dataIndex,
        axisValue,
        seriesValues
      });
    };
    element.addEventListener('click', handleMouseClick);
    return () => {
      element.removeEventListener('click', handleMouseClick);
    };
  }, [params.onAxisClick, processedSeries, svgRef, xAxisWithScale, xAxisIds, yAxisWithScale, yAxisIds, usedXAxis, usedYAxis]);
  return {};
};
exports.useChartCartesianAxis = useChartCartesianAxis;
useChartCartesianAxis.params = {
  xAxis: true,
  yAxis: true,
  dataset: true,
  onAxisClick: true,
  disableAxisListener: true
};
useChartCartesianAxis.getDefaultizedParams = ({
  params
}) => {
  return (0, _extends2.default)({}, params, {
    colors: params.colors ?? _colorPalettes.rainbowSurgePalette,
    theme: params.theme ?? 'light',
    defaultizedXAxis: (0, _defaultizeAxis.defaultizeXAxis)(params.xAxis, params.dataset),
    defaultizedYAxis: (0, _defaultizeAxis.defaultizeYAxis)(params.yAxis, params.dataset)
  });
};
useChartCartesianAxis.getInitialState = params => ({
  cartesianAxis: {
    x: params.defaultizedXAxis,
    y: params.defaultizedYAxis
  }
});