@mui/x-charts
Version:
The community edition of MUI X Charts components.
85 lines (78 loc) • 3.81 kB
JavaScript
import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
import { createSelector } from "../../utils/selectors.js";
import { selectorChartsInteractionPointerX, selectorChartsInteractionPointerY } from "../useChartInteraction/useChartInteraction.selectors.js";
import { getAxisIndex, getAxisValue } from "./getAxisValue.js";
import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxisRendering.selectors.js";
const optionalGetAxisId = (_, id) => id;
/**
* Get interaction indexes
*/
function indexGetter(value, axes, ids = axes.axisIds[0]) {
return Array.isArray(ids) ? ids.map(id => getAxisIndex(axes.axis[id], value)) : getAxisIndex(axes.axis[ids], value);
}
export const selectorChartsInteractionXAxisIndex = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis, optionalGetAxisId], (value, axes, id) => value === null ? null : indexGetter(value, axes, id));
export const selectorChartsInteractionYAxisIndex = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis, optionalGetAxisId], (value, axes, id) => value === null ? null : indexGetter(value, axes, id));
/**
* Get interaction values
*/
function valueGetter(value, axes, indexes, ids = axes.axisIds[0]) {
return Array.isArray(ids) ? ids.map((id, axisIndex) => getAxisValue(axes.axis[id], value, indexes[axisIndex])) : getAxisValue(axes.axis[ids], value, indexes);
}
export const selectorChartsInteractionXAxisValue = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis, selectorChartsInteractionXAxisIndex, optionalGetAxisId], (x, xAxes, xIndex, id) => {
if (x === null || xIndex === null || xAxes.axisIds.length === 0) {
return null;
}
return valueGetter(x, xAxes, xIndex, id);
});
export const selectorChartsInteractionYAxisValue = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis, selectorChartsInteractionYAxisIndex, optionalGetAxisId], (y, yAxes, yIndex, id) => {
if (y === null || yIndex === null || yAxes.axisIds.length === 0) {
return null;
}
return valueGetter(y, yAxes, yIndex, id);
});
/**
* Get x-axis ids and corresponding data index that should be display in the tooltip.
*/
export const selectorChartsInteractionTooltipXAxes = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis], (value, axes) => {
if (value === null) {
return [];
}
return axes.axisIds.filter(id => axes.axis[id].triggerTooltip).map(axisId => ({
axisId,
dataIndex: getAxisIndex(axes.axis[axisId], value)
})).filter(({
dataIndex
}) => dataIndex >= 0);
}, {
memoizeOptions: {
// Keep the same reference if array content is the same.
// If possible, avoid this pattern by creating selectors that
// uses string/number as arguments.
resultEqualityCheck: isDeepEqual
}
});
/**
* Get y-axis ids and corresponding data index that should be display in the tooltip.
*/
export const selectorChartsInteractionTooltipYAxes = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis], (value, axes) => {
if (value === null) {
return [];
}
return axes.axisIds.filter(id => axes.axis[id].triggerTooltip).map(axisId => ({
axisId,
dataIndex: getAxisIndex(axes.axis[axisId], value)
})).filter(({
dataIndex
}) => dataIndex >= 0);
}, {
memoizeOptions: {
// Keep the same reference if array content is the same.
// If possible, avoid this pattern by creating selectors that
// uses string/number as arguments.
resultEqualityCheck: isDeepEqual
}
});
/**
* Return `true` if the axis tooltip has something to display.
*/
export const selectorChartsInteractionAxisTooltip = createSelector([selectorChartsInteractionTooltipXAxes, selectorChartsInteractionTooltipYAxes], (xTooltip, yTooltip) => xTooltip.length > 0 || yTooltip.length > 0);