@mui/x-charts
Version:
The community edition of MUI X Charts components.
98 lines (94 loc) • 4.96 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/index.js";
import { selectorChartSeriesConfig, selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.js";
import { createSelector } from "../../utils/selectors.js";
import { computeAxisValue } from "./computeAxisValue.js";
import { createAxisFilterMapper, createGetAxisFilters } from "./createAxisFilterMapper.js";
import { createZoomLookup } from "./createZoomLookup.js";
import { selectorChartRawXAxis, selectorChartRawYAxis } from "./useChartCartesianAxisLayout.selectors.js";
export const createZoomMap = zoom => {
const zoomItemMap = new Map();
zoom.forEach(zoomItem => {
zoomItemMap.set(zoomItem.axisId, zoomItem);
});
return zoomItemMap;
};
const selectorChartZoomState = state => state.zoom;
/**
* Following selectors are not exported because they exist in the MIT chart only to ba able to reuse the Zoom state from the pro.
*/
export const selectorChartZoomIsInteracting = createSelector(selectorChartZoomState, zoom => zoom?.isInteracting);
export const selectorChartZoomMap = createSelector(selectorChartZoomState, zoom => zoom?.zoomData && createZoomMap(zoom?.zoomData));
const selectorChartXZoomOptionsLookup = createSelector(selectorChartRawXAxis, createZoomLookup('x'));
const selectorChartYZoomOptionsLookup = createSelector(selectorChartRawYAxis, createZoomLookup('y'));
export const selectorChartZoomOptionsLookup = createSelector([selectorChartXZoomOptionsLookup, selectorChartYZoomOptionsLookup], (xLookup, yLookup) => _extends({}, xLookup, yLookup));
export const selectorChartAxisZoomOptionsLookup = createSelector([selectorChartXZoomOptionsLookup, selectorChartYZoomOptionsLookup, (state, axisId) => axisId], (xLookup, yLookup, axisId) => xLookup[axisId] ?? yLookup[axisId]);
const selectorChartXFilter = createSelector([selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartSeriesConfig, selectorChartSeriesProcessed], (zoomMap, zoomOptions, seriesConfig, formattedSeries) => zoomMap && zoomOptions && createAxisFilterMapper({
zoomMap,
zoomOptions,
seriesConfig,
formattedSeries,
direction: 'x'
}));
const selectorChartYFilter = createSelector([selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartSeriesConfig, selectorChartSeriesProcessed], (zoomMap, zoomOptions, seriesConfig, formattedSeries) => zoomMap && zoomOptions && createAxisFilterMapper({
zoomMap,
zoomOptions,
seriesConfig,
formattedSeries,
direction: 'y'
}));
const selectorChartZoomAxisFilters = createSelector([selectorChartXFilter, selectorChartYFilter, selectorChartRawXAxis, selectorChartRawYAxis], (xMapper, yMapper, xAxis, yAxis) => {
if (xMapper === undefined || yMapper === undefined) {
// Early return if there is no zoom.
return undefined;
}
const xFilters = xAxis?.reduce((acc, axis, index) => {
const filter = xMapper(axis, index);
if (filter !== null) {
acc[axis.id] = filter;
}
return acc;
}, {});
const yFilters = yAxis?.reduce((acc, axis, index) => {
const filter = yMapper(axis, index);
if (filter !== null) {
acc[axis.id] = filter;
}
return acc;
}, {});
if (Object.keys(xFilters ?? {}).length === 0 && Object.keys(yFilters ?? {}).length === 0) {
return undefined;
}
return createGetAxisFilters(_extends({}, xFilters, yFilters));
});
/**
* The only interesting selectors that merge axis data and zoom if provided.
*/
export const selectorChartXAxis = createSelector([selectorChartRawXAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters) => computeAxisValue({
drawingArea,
formattedSeries,
axis,
seriesConfig,
axisDirection: 'x',
zoomMap,
zoomOptions,
getFilters
}));
export const selectorChartYAxis = createSelector([selectorChartRawYAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters) => computeAxisValue({
drawingArea,
formattedSeries,
axis,
seriesConfig,
axisDirection: 'y',
zoomMap,
zoomOptions,
getFilters
}));
export const selectorChartAxis = createSelector([selectorChartXAxis, selectorChartYAxis, (_, axisId) => axisId], (xAxes, yAxes, axisId) => xAxes?.axis[axisId] ?? yAxes?.axis[axisId]);
export const selectorChartRawAxis = createSelector([selectorChartRawXAxis, selectorChartRawYAxis, (state, axisId) => axisId], (xAxes, yAxes, axisId) => {
const axis = xAxes?.find(a => a.id === axisId) ?? yAxes?.find(a => a.id === axisId) ?? null;
if (!axis) {
return undefined;
}
return axis;
});