@mui/x-charts
Version:
The community edition of MUI X Charts components.
228 lines (226 loc) • 7.96 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
import useEventCallback from '@mui/utils/useEventCallback';
import { Delaunay } from '@mui/x-charts-vendor/d3-delaunay';
import { getValueToPositionMapper } from "../../../../hooks/useScale.js";
import { getSVGPoint } from "../../../getSVGPoint.js";
import { useSelector } from "../../../store/useSelector.js";
import { selectorChartXAxis, selectorChartYAxis, selectorChartZoomIsInteracting } from "../useChartCartesianAxis/index.js";
import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/useChartSeries.selectors.js";
import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/index.js";
export const useChartVoronoi = ({
svgRef,
params,
store,
instance
}) => {
const {
disableVoronoi,
voronoiMaxRadius,
onItemClick
} = params;
const drawingArea = useSelector(store, selectorChartDrawingArea);
const {
axis: xAxis,
axisIds: xAxisIds
} = useSelector(store, selectorChartXAxis);
const {
axis: yAxis,
axisIds: yAxisIds
} = useSelector(store, selectorChartYAxis);
const zoomIsInteracting = useSelector(store, selectorChartZoomIsInteracting);
const {
series,
seriesOrder
} = useSelector(store, selectorChartSeriesProcessed)?.scatter ?? {};
const voronoiRef = React.useRef({});
const delauneyRef = React.useRef(undefined);
const lastFind = React.useRef(undefined);
const defaultXAxisId = xAxisIds[0];
const defaultYAxisId = yAxisIds[0];
useEnhancedEffect(() => {
store.update(prev => prev.voronoi.isVoronoiEnabled === !disableVoronoi ? prev : _extends({}, prev, {
voronoi: {
isVoronoiEnabled: !disableVoronoi
}
}));
}, [store, disableVoronoi]);
useEnhancedEffect(() => {
// This effect generate and store the Delaunay object that's used to map coordinate to closest point.
if (zoomIsInteracting || seriesOrder === undefined || series === undefined || disableVoronoi) {
// If there is no scatter chart series
return;
}
voronoiRef.current = {};
let points = [];
seriesOrder.forEach(seriesId => {
const {
data,
xAxisId,
yAxisId
} = series[seriesId];
const xScale = xAxis[xAxisId ?? defaultXAxisId].scale;
const yScale = yAxis[yAxisId ?? defaultYAxisId].scale;
const getXPosition = getValueToPositionMapper(xScale);
const getYPosition = getValueToPositionMapper(yScale);
const seriesPoints = data.flatMap(({
x,
y
}) => {
const pointX = getXPosition(x);
const pointY = getYPosition(y);
if (!instance.isPointInside(pointX, pointY)) {
// If the point is not displayed we move them to a trash coordinate.
// This avoids managing index mapping before/after filtering.
// The trash point is far enough such that any point in the drawing area will be closer to the mouse than the trash coordinate.
return [-drawingArea.width, -drawingArea.height];
}
return [pointX, pointY];
});
voronoiRef.current[seriesId] = {
seriesId,
startIndex: points.length,
endIndex: points.length + seriesPoints.length
};
points = points.concat(seriesPoints);
});
delauneyRef.current = new Delaunay(points);
lastFind.current = undefined;
}, [zoomIsInteracting, defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis, drawingArea, instance, disableVoronoi]);
React.useEffect(() => {
if (svgRef.current === null || disableVoronoi) {
return undefined;
}
const element = svgRef.current;
function getClosestPoint(event) {
// Get mouse coordinate in global SVG space
const svgPoint = getSVGPoint(element, event);
if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
lastFind.current = undefined;
return 'outside-chart';
}
if (!delauneyRef.current) {
return 'no-point-found';
}
const closestPointIndex = delauneyRef.current.find(svgPoint.x, svgPoint.y, lastFind.current);
if (closestPointIndex === undefined) {
return 'no-point-found';
}
lastFind.current = closestPointIndex;
const closestSeries = Object.values(voronoiRef.current).find(value => {
return 2 * closestPointIndex >= value.startIndex && 2 * closestPointIndex < value.endIndex;
});
if (closestSeries === undefined) {
return 'no-point-found';
}
const dataIndex = (2 * closestPointIndex - voronoiRef.current[closestSeries.seriesId].startIndex) / 2;
if (voronoiMaxRadius !== undefined) {
const pointX = delauneyRef.current.points[2 * closestPointIndex];
const pointY = delauneyRef.current.points[2 * closestPointIndex + 1];
const dist2 = (pointX - svgPoint.x) ** 2 + (pointY - svgPoint.y) ** 2;
if (dist2 > voronoiMaxRadius ** 2) {
// The closest point is too far to be considered.
return 'outside-voronoi-max-radius';
}
}
return {
seriesId: closestSeries.seriesId,
dataIndex
};
}
const handleMouseLeave = () => {
instance.cleanInteraction?.();
instance.clearHighlight?.();
};
const handleMouseMove = event => {
const closestPoint = getClosestPoint(event);
if (closestPoint === 'outside-chart') {
instance.cleanInteraction?.();
instance.clearHighlight?.();
return;
}
if (closestPoint === 'outside-voronoi-max-radius' || closestPoint === 'no-point-found') {
instance.removeItemInteraction?.();
instance.clearHighlight?.();
return;
}
const {
seriesId,
dataIndex
} = closestPoint;
instance.setItemInteraction?.({
type: 'scatter',
seriesId,
dataIndex
});
instance.setHighlight?.({
seriesId,
dataIndex
});
};
const handleMouseClick = event => {
if (!onItemClick) {
return;
}
const closestPoint = getClosestPoint(event);
if (typeof closestPoint === 'string') {
// No point fond for any reason
return;
}
const {
seriesId,
dataIndex
} = closestPoint;
onItemClick(event, {
type: 'scatter',
seriesId,
dataIndex
});
};
element.addEventListener('pointerleave', handleMouseLeave);
element.addEventListener('pointermove', handleMouseMove);
element.addEventListener('click', handleMouseClick);
return () => {
element.removeEventListener('pointerleave', handleMouseLeave);
element.removeEventListener('pointermove', handleMouseMove);
element.removeEventListener('click', handleMouseClick);
};
}, [svgRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, disableVoronoi, drawingArea, instance]);
// Instance implementation
const enableVoronoiCallback = useEventCallback(() => {
store.update(prev => _extends({}, prev, {
voronoi: _extends({}, prev.voronoi, {
isVoronoiEnabled: true
})
}));
});
const disableVoronoiCallback = useEventCallback(() => {
store.update(prev => _extends({}, prev, {
voronoi: _extends({}, prev.voronoi, {
isVoronoiEnabled: false
})
}));
});
return {
instance: {
enableVoronoi: enableVoronoiCallback,
disableVoronoi: disableVoronoiCallback
}
};
};
useChartVoronoi.getDefaultizedParams = ({
params
}) => _extends({}, params, {
disableVoronoi: params.disableVoronoi ?? !params.series.some(item => item.type === 'scatter')
});
useChartVoronoi.getInitialState = params => ({
voronoi: {
isVoronoiEnabled: !params.disableVoronoi
}
});
useChartVoronoi.params = {
disableVoronoi: true,
voronoiMaxRadius: true,
onItemClick: true
};