UNPKG

@mui/x-charts

Version:

The community edition of MUI X Charts components.

156 lines (145 loc) 8.71 kB
"use strict"; 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);