@mui/x-charts
Version:
The community edition of MUI X Charts components.
90 lines (88 loc) • 3.23 kB
JavaScript
;
'use client';
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useRegisterPointerInteractions = useRegisterPointerInteractions;
var React = _interopRequireWildcard(require("react"));
var _hooks = require("../../../../hooks");
var _useStore = require("../../../store/useStore");
var _ChartsProvider = require("../../../../context/ChartsProvider");
var _getChartPoint = require("../../../getChartPoint");
/**
* Hook that registers pointer interaction handlers on the chart container.
* It iterates through all series configs' `getItemAtPosition` to find which
* item is at the pointer position and updates highlight/tooltip state accordingly.
*/
function useRegisterPointerInteractions() {
const {
instance
} = (0, _ChartsProvider.useChartsContext)();
const chartsLayerContainerRef = (0, _hooks.useChartsLayerContainerRef)();
const store = (0, _useStore.useStore)();
const interactionActive = React.useRef(false);
const lastItemRef = React.useRef(undefined);
React.useEffect(() => {
const element = chartsLayerContainerRef.current;
if (!element) {
return undefined;
}
const hasGetItemAtPosition = Object.values(store.state.seriesConfig.config).some(config => config.getItemAtPosition != null);
if (!hasGetItemAtPosition) {
return undefined;
}
function onPointerEnter() {
interactionActive.current = true;
}
function reset() {
const lastItem = lastItemRef.current;
if (lastItem) {
lastItemRef.current = undefined;
instance.removeTooltipItem(lastItem);
instance.clearHighlight();
}
}
function onPointerLeave() {
interactionActive.current = false;
reset();
}
const onPointerMove = function onPointerMove(event) {
const svgPoint = (0, _getChartPoint.getChartPoint)(element, event);
if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
reset();
return;
}
let item;
for (const seriesType of Object.keys(store.state.seriesConfig.config)) {
item = store.state.seriesConfig.config[seriesType].getItemAtPosition?.(store.state, {
x: svgPoint.x,
y: svgPoint.y
});
if (item) {
break;
}
}
if (item) {
instance.setLastUpdateSource('pointer');
instance.setTooltipItem(item);
instance.setHighlight(item);
lastItemRef.current = item;
} else {
reset();
}
};
element.addEventListener('pointerleave', onPointerLeave);
element.addEventListener('pointermove', onPointerMove);
element.addEventListener('pointerenter', onPointerEnter);
return () => {
element.removeEventListener('pointerenter', onPointerEnter);
element.removeEventListener('pointermove', onPointerMove);
element.removeEventListener('pointerleave', onPointerLeave);
/* Clean up state if this item is unmounted while active. */
if (interactionActive.current) {
onPointerLeave();
}
};
}, [instance, store, chartsLayerContainerRef, store.state.seriesConfig.config]);
}