@mui/x-charts/esm/hooks/useInteractionItemProps.js

The community edition of MUI X Charts components.

'use client';

import * as React from 'react';
import { useChartContext } from "../context/ChartProvider/index.js";
const onPointerDown = event => {
  if ('hasPointerCapture' in event.currentTarget && event.currentTarget.hasPointerCapture(event.pointerId)) {
    event.currentTarget.releasePointerCapture(event.pointerId);
  }
};
export const useInteractionItemProps = (data, skip) => {
  const {
    instance
  } = useChartContext();
  const interactionActive = React.useRef(false);
  const onPointerEnter = React.useCallback(() => {
    interactionActive.current = true;
    instance.setItemInteraction({
      type: data.type,
      seriesId: data.seriesId,
      dataIndex: data.dataIndex
    });
    instance.setHighlight({
      seriesId: data.seriesId,
      dataIndex: data.dataIndex
    });
  }, [instance, data.type, data.seriesId, data.dataIndex]);
  const onPointerLeave = React.useCallback(() => {
    interactionActive.current = false;
    instance.removeItemInteraction({
      type: data.type,
      seriesId: data.seriesId,
      dataIndex: data.dataIndex
    });
    instance.clearHighlight();
  }, [instance, data.type, data.seriesId, data.dataIndex]);
  React.useEffect(() => {
    return () => {
      /* Clean up state if this item is unmounted while active. */
      if (interactionActive.current) {
        onPointerLeave();
      }
    };
  }, [onPointerLeave]);
  if (skip) {
    return {};
  }
  return {
    onPointerEnter,
    onPointerLeave,
    onPointerDown
  };
};
export const useInteractionAllItemProps = (data, skip) => {
  const {
    instance
  } = useChartContext();
  const results = React.useMemo(() => {
    return data.map(item => {
      if (skip) {
        return {};
      }
      const onPointerEnter = () => {
        if (!item) {
          return;
        }
        instance.setItemInteraction(item);
        instance.setHighlight({
          seriesId: item.seriesId,
          dataIndex: item.dataIndex
        });
      };
      const onPointerLeave = () => {
        if (!item) {
          return;
        }
        instance.removeItemInteraction(item);
        instance.clearHighlight();
      };
      return {
        onPointerEnter,
        onPointerLeave,
        onPointerDown
      };
    });
  }, [data, instance, skip]);
  return results;
};