@mui/x-charts
Version:
The community edition of MUI X Charts components.
173 lines (169 loc) • 6.86 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.selectorChartsTooltipAxisPosition = exports.selectorChartsInteractionTooltipYAxes = exports.selectorChartsInteractionTooltipXAxes = exports.selectorChartsInteractionAxisTooltip = void 0;
var _store = require("@mui/x-internals/store");
var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
var _useChartCartesianAxisRendering = require("./useChartCartesianAxisRendering.selectors");
var _useChartInteraction = require("../useChartInteraction");
var _useChartInteraction2 = require("../useChartInteraction/useChartInteraction.selectors");
var _useChartKeyboardNavigation = require("../useChartKeyboardNavigation/useChartKeyboardNavigation.selectors");
var _getAxisValue = require("./getAxisValue");
var _getValueToPositionMapper = require("../../../../hooks/getValueToPositionMapper");
var _useChartDimensions = require("../../corePlugins/useChartDimensions/useChartDimensions.selectors");
const selectorChartControlledCartesianAxisTooltip = state => state.controlledCartesianAxisTooltip;
const EMPTY_ARRAY = [];
function getKeyboardAxisTooltip(keyboardIndex, axes) {
if (keyboardIndex === undefined) {
return EMPTY_ARRAY;
}
const axis = axes.axis[keyboardIndex.axisId];
if (!axis?.triggerTooltip) {
return EMPTY_ARRAY;
}
return [keyboardIndex];
}
/**
* Get x-axis ids and corresponding data index that should be display in the tooltip.
*/
const selectorChartsInteractionTooltipXAxes = exports.selectorChartsInteractionTooltipXAxes = (0, _store.createSelectorMemoizedWithOptions)({
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.isDeepEqual
}
})(selectorChartControlledCartesianAxisTooltip, _useChartInteraction.selectorChartsInteractionPointerX, _useChartCartesianAxisRendering.selectorChartXAxis, _useChartInteraction2.selectorChartsLastInteraction, _useChartKeyboardNavigation.selectorChartsKeyboardXAxisIndex, (controlledValues, value, axes, lastInteraction, keyboardIndex) => {
if (controlledValues !== undefined) {
if (controlledValues.length === 0) {
return EMPTY_ARRAY;
}
const ids = new Set(axes.axisIds);
const filteredArray = controlledValues.filter(({
axisId
}) => ids.has(axisId));
return filteredArray.length === controlledValues.length ? controlledValues : filteredArray;
}
if (lastInteraction === 'keyboard') {
return getKeyboardAxisTooltip(keyboardIndex, axes);
}
if (value === null) {
return EMPTY_ARRAY;
}
return axes.axisIds.filter(id => axes.axis[id].triggerTooltip).map(axisId => ({
axisId,
dataIndex: (0, _getAxisValue.getAxisIndex)(axes.axis[axisId], value)
})).filter(({
dataIndex
}) => dataIndex >= 0);
});
/**
* Get y-axis ids and corresponding data index that should be display in the tooltip.
*/
const selectorChartsInteractionTooltipYAxes = exports.selectorChartsInteractionTooltipYAxes = (0, _store.createSelectorMemoizedWithOptions)({
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.isDeepEqual
}
})(selectorChartControlledCartesianAxisTooltip, _useChartInteraction.selectorChartsInteractionPointerY, _useChartCartesianAxisRendering.selectorChartYAxis, _useChartInteraction2.selectorChartsLastInteraction, _useChartKeyboardNavigation.selectorChartsKeyboardYAxisIndex, (controlledValues, value, axes, lastInteraction, keyboardIndex) => {
if (controlledValues !== undefined) {
if (controlledValues.length === 0) {
return EMPTY_ARRAY;
}
const ids = new Set(axes.axisIds);
const filteredArray = controlledValues.filter(({
axisId
}) => ids.has(axisId));
return filteredArray.length === controlledValues.length ? controlledValues : filteredArray;
}
if (lastInteraction === 'keyboard') {
return getKeyboardAxisTooltip(keyboardIndex, axes);
}
if (value === null) {
return EMPTY_ARRAY;
}
return axes.axisIds.filter(id => axes.axis[id].triggerTooltip).map(axisId => ({
axisId,
dataIndex: (0, _getAxisValue.getAxisIndex)(axes.axis[axisId], value)
})).filter(({
dataIndex
}) => dataIndex >= 0);
});
/**
* Return `true` if the axis tooltip has something to display.
*/
const selectorChartsInteractionAxisTooltip = exports.selectorChartsInteractionAxisTooltip = (0, _store.createSelector)(selectorChartsInteractionTooltipXAxes, selectorChartsInteractionTooltipYAxes, (xTooltip, yTooltip) => xTooltip.length > 0 || yTooltip.length > 0);
function getCoordinatesFromAxis(identifier, axes) {
const axis = axes.axis[identifier.axisId];
if (!axis) {
return null;
}
const value = axis.data?.[identifier.dataIndex];
if (value == null) {
return null;
}
const coordinate = (0, _getValueToPositionMapper.getValueToPositionMapper)(axis.scale)(value);
if (coordinate === undefined) {
return null;
}
return coordinate;
}
const selectorChartsTooltipAxisPosition = exports.selectorChartsTooltipAxisPosition = (0, _store.createSelectorMemoized)(selectorChartsInteractionTooltipXAxes, selectorChartsInteractionTooltipYAxes, _useChartCartesianAxisRendering.selectorChartXAxis, _useChartCartesianAxisRendering.selectorChartYAxis, _useChartDimensions.selectorChartDrawingArea, function selectorChartsTooltipItemPosition(xAxesIdentifiers, yAxesIdentifiers, xAxes, yAxes, drawingArea, placement) {
if (xAxesIdentifiers.length === 0 && yAxesIdentifiers.length === 0) {
return null;
}
if (xAxesIdentifiers.length > 0) {
const x = getCoordinatesFromAxis(xAxesIdentifiers[0], xAxes);
if (x === null) {
return null;
}
switch (placement) {
case 'left':
case 'right':
return {
x,
y: drawingArea.top + drawingArea.height / 2
};
case 'bottom':
return {
x,
y: drawingArea.top + drawingArea.height
};
case 'top':
default:
return {
x,
y: drawingArea.top
};
}
}
if (yAxesIdentifiers.length > 0) {
const y = getCoordinatesFromAxis(yAxesIdentifiers[0], yAxes);
if (y === null) {
return null;
}
switch (placement) {
case 'right':
return {
x: drawingArea.left + drawingArea.width / 2,
y
};
case 'bottom':
case 'top':
return {
x: drawingArea.left + drawingArea.width / 2,
y
};
case 'left':
default:
return {
x: drawingArea.left + drawingArea.width / 2,
y
};
}
}
return null;
});