@mui/x-charts
Version:
The community edition of MUI X Charts components.
156 lines (145 loc) • 8.71 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.selectorChartsInteractionTooltipRotationAxes = exports.selectorChartsInteractionTooltipRadiusAxes = exports.selectorChartsInteractionRotationAxisValues = exports.selectorChartsInteractionRotationAxisValue = exports.selectorChartsInteractionRotationAxisIndexes = exports.selectorChartsInteractionRotationAxisIndex = exports.selectorChartsInteractionRadiusAxisValues = exports.selectorChartsInteractionRadiusAxisValue = exports.selectorChartsInteractionRadiusAxisIndexes = exports.selectorChartsInteractionRadiusAxisIndex = exports.selectorChartsInteractionRadius = exports.selectorChartsInteractionPolarAxisTooltip = void 0;
var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
var _store = require("@mui/x-internals/store");
var _useChartInteraction = require("../useChartInteraction/useChartInteraction.selectors");
var _coordinateTransformation = require("./coordinateTransformation");
var _getAxisIndex = require("./getAxisIndex");
var _useChartPolarAxis = require("./useChartPolarAxis.selectors");
const optionalGetAxisId = (_, id) => id;
const optionalGetAxisIds = (_, ids) => ids;
/**
* Get interaction indexes
*/
function indexGetter(value, axes, ids, type) {
if (type === 'rotation') {
const rotationAxes = axes;
return Array.isArray(ids) ? ids.map(id => (0, _getAxisIndex.getRotationAxisIndex)(rotationAxes.axis[id], value)) : (0, _getAxisIndex.getRotationAxisIndex)(rotationAxes.axis[ids], value);
}
const radiusAxes = axes;
return Array.isArray(ids) ? ids.map(id => (0, _getAxisIndex.getRadiusAxisIndex)(radiusAxes.axis[id], value)) : (0, _getAxisIndex.getRadiusAxisIndex)(radiusAxes.axis[ids], value);
}
// ============================= Rotation axis =============================
/**
* Helper to get the rotation associated to the interaction coordinate.
*/
const selectorChartsInteractionRotationAngle = (0, _store.createSelector)(_useChartInteraction.selectorChartsInteractionPointerX, _useChartInteraction.selectorChartsInteractionPointerY, _useChartPolarAxis.selectorChartPolarCenter, (x, y, center) => {
if (x === null || y === null) {
return null;
}
return (0, _coordinateTransformation.generateSvg2rotation)(center)(x, y);
});
const selectorChartsInteractionRotationAxisIndex = exports.selectorChartsInteractionRotationAxisIndex = (0, _store.createSelector)(selectorChartsInteractionRotationAngle, _useChartPolarAxis.selectorChartRotationAxis, optionalGetAxisId, (rotation, rotationAxis, id) => rotation === null ? null : indexGetter(rotation, rotationAxis, id ?? rotationAxis.axisIds[0], 'rotation'));
const selectorChartsInteractionRotationAxisIndexes = exports.selectorChartsInteractionRotationAxisIndexes = (0, _store.createSelector)(selectorChartsInteractionRotationAngle, _useChartPolarAxis.selectorChartRotationAxis, optionalGetAxisIds, (rotation, rotationAxis, ids) => rotation === null ? null : indexGetter(rotation, rotationAxis, ids ?? rotationAxis.axisIds, 'rotation'));
const selectorChartsInteractionRotationAxisValue = exports.selectorChartsInteractionRotationAxisValue = (0, _store.createSelector)(_useChartPolarAxis.selectorChartRotationAxis, selectorChartsInteractionRotationAxisIndex, optionalGetAxisId, (rotationAxis, rotationIndex, id) => {
id = id ?? rotationAxis.axisIds[0];
if (rotationIndex === null || rotationIndex === -1 || rotationAxis.axisIds.length === 0) {
return null;
}
const data = rotationAxis.axis[id]?.data;
if (!data) {
return null;
}
return data[rotationIndex];
});
const selectorChartsInteractionRotationAxisValues = exports.selectorChartsInteractionRotationAxisValues = (0, _store.createSelector)(_useChartPolarAxis.selectorChartRotationAxis, selectorChartsInteractionRotationAxisIndexes, optionalGetAxisIds, (rotationAxis, rotationIndexes, ids) => {
ids = ids ?? rotationAxis.axisIds;
if (rotationIndexes === null) {
return null;
}
return ids.map((id, axisIndex) => {
const rotationIndex = rotationIndexes[axisIndex];
if (rotationIndex === -1) {
return null;
}
return rotationAxis.axis[id].data?.[rotationIndex];
});
});
/**
* Get rotation-axis ids and corresponding data index that should be display in the tooltip.
*/
const selectorChartsInteractionTooltipRotationAxes = exports.selectorChartsInteractionTooltipRotationAxes = (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
}
})(selectorChartsInteractionRotationAxisIndexes, _useChartPolarAxis.selectorChartRotationAxis, (indexes, axes) => {
if (indexes === null) {
return [];
}
return axes.axisIds.map((axisId, axisIndex) => ({
axisId,
dataIndex: indexes[axisIndex]
})).filter(({
axisId,
dataIndex
}) => axes.axis[axisId].triggerTooltip && dataIndex >= 0);
});
// ============================= Radius axis =============================
/**
* Helper to get the radius associated to the interaction coordinate.
*/
const selectorChartsInteractionRadius = exports.selectorChartsInteractionRadius = (0, _store.createSelector)(_useChartInteraction.selectorChartsInteractionPointerX, _useChartInteraction.selectorChartsInteractionPointerY, _useChartPolarAxis.selectorChartPolarCenter, (x, y, center) => {
if (x === null || y === null) {
return null;
}
return Math.sqrt((x - center.cx) ** 2 + (y - center.cy) ** 2);
});
const selectorChartsInteractionRadiusAxisIndex = exports.selectorChartsInteractionRadiusAxisIndex = (0, _store.createSelector)(selectorChartsInteractionRadius, _useChartPolarAxis.selectorChartRadiusAxis, optionalGetAxisId, (radius, radiusAxis, id) => radius === null ? null : indexGetter(radius, radiusAxis, id ?? radiusAxis.axisIds[0], 'radius'));
const selectorChartsInteractionRadiusAxisIndexes = exports.selectorChartsInteractionRadiusAxisIndexes = (0, _store.createSelector)(selectorChartsInteractionRadius, _useChartPolarAxis.selectorChartRadiusAxis, optionalGetAxisIds, (radius, radiusAxis, ids) => radius === null ? null : indexGetter(radius, radiusAxis, ids ?? radiusAxis.axisIds, 'radius'));
const selectorChartsInteractionRadiusAxisValue = exports.selectorChartsInteractionRadiusAxisValue = (0, _store.createSelector)(_useChartPolarAxis.selectorChartRadiusAxis, selectorChartsInteractionRadiusAxisIndex, optionalGetAxisId, (radiusAxis, radiusIndex, id) => {
id = id ?? radiusAxis.axisIds[0];
if (radiusIndex === null || radiusIndex === -1 || radiusAxis.axisIds.length === 0) {
return null;
}
const data = radiusAxis.axis[id]?.data;
if (!data) {
return null;
}
return data[radiusIndex];
});
const selectorChartsInteractionRadiusAxisValues = exports.selectorChartsInteractionRadiusAxisValues = (0, _store.createSelector)(_useChartPolarAxis.selectorChartRadiusAxis, selectorChartsInteractionRadiusAxisIndexes, optionalGetAxisIds, (radiusAxis, radiusIndexes, ids) => {
ids = ids ?? radiusAxis.axisIds;
if (radiusIndexes === null) {
return null;
}
return ids.map((id, axisIndex) => {
const radiusIndex = radiusIndexes[axisIndex];
if (radiusIndex === -1) {
return null;
}
return radiusAxis.axis[id].data?.[radiusIndex];
});
});
/**
* Get radius-axis ids and corresponding data index that should be display in the tooltip.
*/
const selectorChartsInteractionTooltipRadiusAxes = exports.selectorChartsInteractionTooltipRadiusAxes = (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
}
})(selectorChartsInteractionRadiusAxisIndexes, _useChartPolarAxis.selectorChartRadiusAxis, (indexes, axes) => {
if (indexes === null) {
return [];
}
return axes.axisIds.map((axisId, axisIndex) => ({
axisId,
dataIndex: indexes[axisIndex]
})).filter(({
axisId,
dataIndex
}) => axes.axis[axisId].triggerTooltip && dataIndex >= 0);
});
// ============================= Cross axes selectors =============================
/**
* Return `true` if the axis tooltip has something to display.
*/
const selectorChartsInteractionPolarAxisTooltip = exports.selectorChartsInteractionPolarAxisTooltip = (0, _store.createSelector)(selectorChartsInteractionTooltipRotationAxes, selectorChartsInteractionTooltipRadiusAxes, (rotationTooltip, radiusTooltip) => rotationTooltip.length > 0 || radiusTooltip.length > 0);