@mui/x-charts 8.0.0-alpha.6 → 8.0.0-alpha.8

package/node/{context/SeriesProvider → internals/plugins/corePlugins/useChartSeries}/processSeries.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.preprocessSeries = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defaultizeColor = require("../../internals/defaultizeColor");
+var _defaultizeColor = require("../../../defaultizeColor");
 /**
  * This methods is the interface between what the developer is providing and what components receives
  * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if some line data are modified
@@ -18,11 +18,14 @@ var _defaultizeColor = require("../../internals/defaultizeColor");
 const preprocessSeries = ({
   series,
   colors,
-  seriesFormatters,
+  seriesConfig,
   dataset
 }) => {
   // Group series by type
   const seriesGroups = {};
+  // Notice the line about uses `ChartSeriesType` instead of TSeriesType.
+  // That's probably because the series.type is not propagated from the generic but hardcoded in the config.
+
   series.forEach((seriesData, seriesIndex) => {
     const {
       id = `auto-generated-id-${seriesIndex}`,
@@ -42,14 +45,14 @@ const preprocessSeries = ({
     }, (0, _defaultizeColor.defaultizeColor)(seriesData, seriesIndex, colors));
     seriesGroups[type].seriesOrder.push(id);
   });
-  const formattedSeries = {};
+  const processedSeries = {};
   // Apply formatter on a type group
-  Object.keys(seriesFormatters).forEach(type => {
+  Object.keys(seriesConfig).forEach(type => {
     const group = seriesGroups[type];
     if (group !== undefined) {
-      formattedSeries[type] = seriesFormatters[type]?.(group, dataset) ?? seriesGroups[type];
+      processedSeries[type] = seriesConfig[type]?.seriesProcessor?.(group, dataset) ?? seriesGroups[type];
     }
   });
-  return formattedSeries;
+  return processedSeries;
 };
 exports.preprocessSeries = preprocessSeries;

package/node/internals/plugins/corePlugins/useChartSeries/useChartSeries.js

@@ -0,0 +1,80 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartSeries = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _colorPalettes = require("../../../../colorPalettes");
+var _processSeries = require("./processSeries");
+const useChartSeries = ({
+  params,
+  store,
+  seriesConfig
+}) => {
+  const {
+    series,
+    dataset,
+    theme,
+    colors
+  } = params;
+
+  // The effect do not track any value defined synchronously during the 1st render by hooks called after `useChartSeries`
+  // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    store.update(prev => (0, _extends2.default)({}, prev, {
+      series: (0, _extends2.default)({}, prev.series, {
+        processedSeries: (0, _processSeries.preprocessSeries)({
+          series,
+          colors: typeof colors === 'function' ? colors(theme) : colors,
+          seriesConfig,
+          dataset
+        })
+      })
+    }));
+  }, [colors, dataset, series, theme, seriesConfig, store]);
+  return {};
+};
+exports.useChartSeries = useChartSeries;
+useChartSeries.params = {
+  dataset: true,
+  series: true,
+  colors: true,
+  theme: true
+};
+const EMPTY_ARRAY = [];
+useChartSeries.getDefaultizedParams = ({
+  params
+}) => (0, _extends2.default)({
+  series: EMPTY_ARRAY
+}, params, {
+  colors: params.colors ?? _colorPalettes.blueberryTwilightPalette,
+  theme: params.theme ?? 'light'
+});
+useChartSeries.getInitialState = ({
+  series = [],
+  colors,
+  theme,
+  dataset
+}, _, seriesConfig) => {
+  return {
+    series: {
+      seriesConfig,
+      processedSeries: (0, _processSeries.preprocessSeries)({
+        series,
+        colors: typeof colors === 'function' ? colors(theme) : colors,
+        seriesConfig,
+        dataset
+      })
+    }
+  };
+};

package/node/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorChartSeriesState = exports.selectorChartSeriesProcessed = exports.selectorChartSeriesConfig = void 0;
+var _selectors = require("../../utils/selectors");
+const selectorChartSeriesState = state => state.series;
+exports.selectorChartSeriesState = selectorChartSeriesState;
+const selectorChartSeriesProcessed = exports.selectorChartSeriesProcessed = (0, _selectors.createSelector)(selectorChartSeriesState, seriesState => seriesState.processedSeries);
+const selectorChartSeriesConfig = exports.selectorChartSeriesConfig = (0, _selectors.createSelector)(selectorChartSeriesState, seriesState => seriesState.seriesConfig);

package/node/internals/plugins/corePlugins/useChartSeries/useColorProcessor.js

@@ -0,0 +1,27 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useColorProcessor = useColorProcessor;
+var React = _interopRequireWildcard(require("react"));
+var _useSelector = require("../../../store/useSelector");
+var _useStore = require("../../../store/useStore");
+var _useChartSeries = require("./useChartSeries.selectors");
+function useColorProcessor(seriesType) {
+  const store = (0, _useStore.useStore)();
+  const seriesConfig = (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesConfig);
+  const colorProcessors = React.useMemo(() => {
+    const rep = {};
+    Object.keys(seriesConfig).forEach(seriesT => {
+      rep[seriesT] = seriesConfig[seriesT].colorProcessor;
+    });
+    return rep;
+  }, [seriesConfig]);
+  if (!seriesType) {
+    return colorProcessors;
+  }
+  return colorProcessors[seriesType];
+}

package/node/internals/{computeAxisValue.js → plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.js}

@@ -7,27 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.computeAxisValue = computeAxisValue;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _d3Scale = require("@mui/x-charts-vendor/d3-scale");
-var _axis = require("../models/axis");
-var _colorScale = require("./colorScale");
-var _useTicks = require("../hooks/useTicks");
-var _getScale = require("./getScale");
-var _zoom = require("../context/CartesianProvider/zoom");
-var _getAxisExtremum = require("../context/CartesianProvider/getAxisExtremum");
-function getRange(drawingArea, axisDirection, axis) {
-  if (axisDirection === 'rotation') {
-    const {
-      startAngle = 0,
-      endAngle = startAngle + 360
-    } = axis;
-    return axis.reverse ? [Math.PI * startAngle / 180, Math.PI * endAngle / 180] : [Math.PI * endAngle / 180, Math.PI * startAngle / 180];
-  }
-  if (axisDirection === 'radius') {
-    const {
-      minRadius = 0,
-      maxRadius = Math.min(drawingArea.width, drawingArea.height) / 2
-    } = axis;
-    return [minRadius, maxRadius];
-  }
+var _axis = require("../../../../models/axis");
+var _colorScale = require("../../../colorScale");
+var _useTicks = require("../../../../hooks/useTicks");
+var _getScale = require("../../../getScale");
+var _zoom = require("./zoom");
+var _getAxisExtremum = require("./getAxisExtremum");
+function getRange(drawingArea, axisDirection,
+// | 'rotation' | 'radius',
+axis) {
   const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
   return axis.reverse ? [range[1], range[0]] : range;
 }
@@ -44,22 +32,26 @@ function computeAxisValue({
   drawingArea,
   formattedSeries,
   axis: allAxis,
-  extremumGetters,
+  seriesConfig,
   axisDirection,
-  zoomData,
+  zoomMap,
   zoomOptions,
   getFilters
 }) {
+  if (allAxis === undefined) {
+    return {
+      axis: {},
+      axisIds: []
+    };
+  }
   const completeAxis = {};
   allAxis.forEach((eachAxis, axisIndex) => {
     const axis = eachAxis;
     const zoomOption = zoomOptions?.[axis.id];
-    const zoom = zoomData?.find(({
-      axisId
-    }) => axisId === axis.id);
+    const zoom = zoomMap?.get(axis.id);
     const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
     const range = getRange(drawingArea, axisDirection, axis);
-    const [minData, maxData] = (0, _getAxisExtremum.getAxisExtremum)(axis, extremumGetters, axisIndex, formattedSeries, zoom === undefined && !zoomOption ? getFilters : undefined // Do not apply filtering if zoom is already defined.
+    const [minData, maxData] = (0, _getAxisExtremum.getAxisExtremum)(axis, axisDirection, seriesConfig, axisIndex, formattedSeries, zoom === undefined && !zoomOption ? getFilters : undefined // Do not apply filtering if zoom is already defined.
     );
     const data = axis.data ?? [];
     if ((0, _axis.isBandScaleConfig)(axis)) {

package/node/internals/plugins/featurePlugins/useChartCartesianAxis/createAxisFilterMapper.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createGetAxisFilters = exports.createAxisFilterMapper = void 0;
+var _isDefined = require("../../../isDefined");
+var _getAxisExtremum = require("./getAxisExtremum");
+var _getScale = require("../../../getScale");
+const createAxisFilterMapper = ({
+  zoomMap,
+  zoomOptions,
+  seriesConfig,
+  formattedSeries,
+  direction
+}) => (axis, axisIndex) => {
+  const zoomOption = zoomOptions[axis.id];
+  if (!zoomOption || zoomOption.filterMode !== 'discard') {
+    return null;
+  }
+  const zoom = zoomMap?.get(axis.id);
+  if (zoom === undefined || zoom.start <= 0 && zoom.end >= 100) {
+    // No zoom, or zoom with all data visible
+    return null;
+  }
+  let extremums = [];
+  const scaleType = axis.scaleType;
+  if (scaleType === 'point' || scaleType === 'band') {
+    extremums = [0, (axis.data?.length ?? 1) - 1];
+  } else {
+    extremums = (0, _getAxisExtremum.getAxisExtremum)(axis, direction, seriesConfig, axisIndex, formattedSeries);
+  }
+  let min;
+  let max;
+  const continuousScaleType = !scaleType || scaleType === 'band' || scaleType === 'point' ? 'linear' : scaleType;
+  [min, max] = (0, _getScale.getScale)(continuousScaleType, extremums, [0, 100]).nice().domain();
+  min = min instanceof Date ? min.getTime() : min;
+  max = max instanceof Date ? max.getTime() : max;
+  const minVal = min + zoom.start * (max - min) / 100;
+  const maxVal = min + zoom.end * (max - min) / 100;
+  return (value, dataIndex) => {
+    const val = value[direction] ?? axis.data?.[dataIndex];
+    if (val == null) {
+      // If the value does not exist because of missing data point, or out of range index, we just ignore.
+      return true;
+    }
+    if (axis.scaleType === 'point' || axis.scaleType === 'band' || typeof val === 'string') {
+      return dataIndex >= minVal && dataIndex <= maxVal;
+    }
+    return val >= minVal && val <= maxVal;
+  };
+};
+exports.createAxisFilterMapper = createAxisFilterMapper;
+const createGetAxisFilters = filters => ({
+  currentAxisId,
+  seriesXAxisId,
+  seriesYAxisId,
+  isDefaultAxis
+}) => {
+  return (value, dataIndex) => {
+    const axisId = currentAxisId === seriesXAxisId ? seriesYAxisId : seriesXAxisId;
+    if (!axisId || isDefaultAxis) {
+      return Object.values(filters ?? {})[0]?.(value, dataIndex) ?? true;
+    }
+    const data = [seriesYAxisId, seriesXAxisId].filter(id => id !== currentAxisId).map(id => filters[id ?? '']).filter(_isDefined.isDefined);
+    return data.every(f => f(value, dataIndex));
+  };
+};
+exports.createGetAxisFilters = createGetAxisFilters;

package/node/{context/ChartDataProvider/useDefaultizeAxis.js → internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeAxis.js}

@@ -1,16 +1,13 @@
 "use strict";
-'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useDefaultizeAxis = void 0;
+exports.defaultizeAxis = defaultizeAxis;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _constants = require("../../constants");
-const defaultizeAxis = (inAxis, dataset, axisName) => {
+var _constants = require("../../../../constants");
+function defaultizeAxis(inAxis, dataset, axisName) {
   const DEFAULT_AXIS_KEY = axisName === 'x' ? _constants.DEFAULT_X_AXIS_KEY : _constants.DEFAULT_Y_AXIS_KEY;
   return [...(inAxis?.map((axis, index) => (0, _extends2.default)({
     id: `defaultized-${axisName}-axis-${index}`
@@ -31,10 +28,4 @@ const defaultizeAxis = (inAxis, dataset, axisName) => {
       data: dataset.map(d => d[dataKey])
     });
   });
-};
-const useDefaultizeAxis = (inXAxis, inYAxis, dataset) => {
-  const xAxis = React.useMemo(() => defaultizeAxis(inXAxis, dataset, 'x'), [inXAxis, dataset]);
-  const yAxis = React.useMemo(() => defaultizeAxis(inYAxis, dataset, 'y'), [inYAxis, dataset]);
-  return [xAxis, yAxis];
-};
-exports.useDefaultizeAxis = useDefaultizeAxis;
+}

package/node/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAxisExtremum = void 0;
+var _isCartesian = require("../../../isCartesian");
+const axisExtremumCallback = (acc, chartType, axis, axisDirection, seriesConfig, axisIndex, formattedSeries, getFilters) => {
+  const getter = axisDirection === 'x' ? seriesConfig[chartType].xExtremumGetter : seriesConfig[chartType].yExtremumGetter;
+  const series = formattedSeries[chartType]?.series ?? {};
+  const [minChartTypeData, maxChartTypeData] = getter?.({
+    series,
+    axis,
+    axisIndex,
+    isDefaultAxis: axisIndex === 0,
+    getFilters
+  }) ?? [Infinity, -Infinity];
+  const [minData, maxData] = acc;
+  return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
+};
+const getAxisExtremum = (axis, axisDirection, seriesConfig, axisIndex, formattedSeries, getFilters) => {
+  const charTypes = Object.keys(seriesConfig).filter(_isCartesian.isCartesianSeriesType);
+  const extremums = charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, axisDirection, seriesConfig, axisIndex, formattedSeries, getFilters), [Infinity, -Infinity]);
+  if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) {
+    return [Infinity, -Infinity];
+  }
+  return extremums;
+};
+exports.getAxisExtremum = getAxisExtremum;

package/node/internals/plugins/featurePlugins/useChartCartesianAxis/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useChartCartesianAxis: true,
+  defaultizeAxis: true
+};
+Object.defineProperty(exports, "defaultizeAxis", {
+  enumerable: true,
+  get: function () {
+    return _defaultizeAxis.defaultizeAxis;
+  }
+});
+Object.defineProperty(exports, "useChartCartesianAxis", {
+  enumerable: true,
+  get: function () {
+    return _useChartCartesianAxis.useChartCartesianAxis;
+  }
+});
+var _useChartCartesianAxis = require("./useChartCartesianAxis");
+var _defaultizeAxis = require("./defaultizeAxis");
+var _computeAxisValue = require("./computeAxisValue");
+Object.keys(_computeAxisValue).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _computeAxisValue[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _computeAxisValue[key];
+    }
+  });
+});
+var _zoom = require("./zoom.types");
+Object.keys(_zoom).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _zoom[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _zoom[key];
+    }
+  });
+});

package/node/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.js

@@ -0,0 +1,76 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartCartesianAxis = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _warning = require("@mui/x-internals/warning");
+var _colorPalettes = require("../../../../colorPalettes");
+var _useSelector = require("../../../store/useSelector");
+var _useChartDimensions = require("../../corePlugins/useChartDimensions/useChartDimensions.selectors");
+var _useChartSeries = require("../../corePlugins/useChartSeries/useChartSeries.selectors");
+var _defaultizeAxis = require("./defaultizeAxis");
+const useChartCartesianAxis = ({
+  params,
+  store,
+  seriesConfig
+}) => {
+  const {
+    xAxis,
+    yAxis,
+    dataset
+  } = params;
+  if (process.env.NODE_ENV !== 'production') {
+    const ids = [...(xAxis ?? []), ...(yAxis ?? [])].filter(axis => axis.id).map(axis => axis.id);
+    const duplicates = new Set(ids.filter((id, index) => ids.indexOf(id) !== index));
+    if (duplicates.size > 0) {
+      (0, _warning.warnOnce)([`MUI X: The following axis ids are duplicated: ${Array.from(duplicates).join(', ')}.`, `Please make sure that each axis has a unique id.`].join('\n'), 'error');
+    }
+  }
+  const drawingArea = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartDrawingArea);
+  const formattedSeries = (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesState);
+
+  // The effect do not track any value defined synchronously during the 1st render by hooks called after `useChartCartesianAxis`
+  // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    store.update(prev => (0, _extends2.default)({}, prev, {
+      cartesianAxis: (0, _extends2.default)({}, prev.cartesianAxis, {
+        x: (0, _defaultizeAxis.defaultizeAxis)(xAxis, dataset, 'x'),
+        y: (0, _defaultizeAxis.defaultizeAxis)(yAxis, dataset, 'y')
+      })
+    }));
+  }, [seriesConfig, drawingArea, formattedSeries, xAxis, yAxis, dataset, store]);
+  return {};
+};
+exports.useChartCartesianAxis = useChartCartesianAxis;
+useChartCartesianAxis.params = {
+  xAxis: true,
+  yAxis: true,
+  dataset: true
+};
+useChartCartesianAxis.getDefaultizedParams = ({
+  params
+}) => {
+  return (0, _extends2.default)({}, params, {
+    colors: params.colors ?? _colorPalettes.blueberryTwilightPalette,
+    theme: params.theme ?? 'light',
+    defaultizedXAxis: (0, _defaultizeAxis.defaultizeAxis)(params.xAxis, params.dataset, 'x'),
+    defaultizedYAxis: (0, _defaultizeAxis.defaultizeAxis)(params.yAxis, params.dataset, 'y')
+  });
+};
+useChartCartesianAxis.getInitialState = params => ({
+  cartesianAxis: {
+    x: params.defaultizedXAxis,
+    y: params.defaultizedYAxis
+  }
+});

package/node/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorChartYAxis = exports.selectorChartXAxis = exports.selectorChartRawYAxis = exports.selectorChartRawXAxis = exports.selectorChartCartesianAxisState = exports.createZoomMap = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _useChartDimensions = require("../../corePlugins/useChartDimensions");
+var _useChartSeries = require("../../corePlugins/useChartSeries");
+var _selectors = require("../../utils/selectors");
+var _computeAxisValue = require("./computeAxisValue");
+var _createAxisFilterMapper = require("./createAxisFilterMapper");
+const createZoomMap = zoom => {
+  const zoomItemMap = new Map();
+  zoom.forEach(zoomItem => {
+    zoomItemMap.set(zoomItem.axisId, zoomItem);
+  });
+  return zoomItemMap;
+};
+exports.createZoomMap = createZoomMap;
+const selectorChartCartesianAxisState = state => state.cartesianAxis;
+exports.selectorChartCartesianAxisState = selectorChartCartesianAxisState;
+const selectorChartZoomState = state => state.zoom;
+const selectorChartRawXAxis = exports.selectorChartRawXAxis = (0, _selectors.createSelector)(selectorChartCartesianAxisState, axis => axis?.x);
+const selectorChartRawYAxis = exports.selectorChartRawYAxis = (0, _selectors.createSelector)(selectorChartCartesianAxisState, axis => axis?.y);
+
+/**
+ * Following selectors are not exported because they exist in the MIT chart only to ba able to reuse the Zoom state from the pro.
+ */
+
+const selectorChartZoomMap = (0, _selectors.createSelector)(selectorChartZoomState, zoom => zoom?.zoomData && createZoomMap(zoom?.zoomData));
+const selectorChartZoomOptionsLookup = (0, _selectors.createSelector)(selectorChartZoomState, zoom => zoom?.optionsLookup);
+const selectorChartXFilter = (0, _selectors.createSelector)([selectorChartZoomMap, selectorChartZoomOptionsLookup, _useChartSeries.selectorChartSeriesConfig, _useChartSeries.selectorChartSeriesProcessed], (zoomMap, zoomOptions, seriesConfig, formattedSeries) => zoomMap && zoomOptions && (0, _createAxisFilterMapper.createAxisFilterMapper)({
+  zoomMap,
+  zoomOptions,
+  seriesConfig,
+  formattedSeries,
+  direction: 'x'
+}));
+const selectorChartYFilter = (0, _selectors.createSelector)([selectorChartZoomMap, selectorChartZoomOptionsLookup, _useChartSeries.selectorChartSeriesConfig, _useChartSeries.selectorChartSeriesProcessed], (zoomMap, zoomOptions, seriesConfig, formattedSeries) => zoomMap && zoomOptions && (0, _createAxisFilterMapper.createAxisFilterMapper)({
+  zoomMap,
+  zoomOptions,
+  seriesConfig,
+  formattedSeries,
+  direction: 'y'
+}));
+const selectorChartZoomAxisFilters = (0, _selectors.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 (0, _createAxisFilterMapper.createGetAxisFilters)((0, _extends2.default)({}, xFilters, yFilters));
+});
+
+/**
+ * The only interesting selectors that merge axis data and zoom if provided.
+ */
+
+const selectorChartXAxis = exports.selectorChartXAxis = (0, _selectors.createSelector)([selectorChartRawXAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters) => (0, _computeAxisValue.computeAxisValue)({
+  drawingArea,
+  formattedSeries,
+  axis,
+  seriesConfig,
+  axisDirection: 'x',
+  zoomMap,
+  zoomOptions,
+  getFilters
+}));
+const selectorChartYAxis = exports.selectorChartYAxis = (0, _selectors.createSelector)([selectorChartRawYAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters) => (0, _computeAxisValue.computeAxisValue)({
+  drawingArea,
+  formattedSeries,
+  axis,
+  seriesConfig,
+  axisDirection: 'y',
+  zoomMap,
+  zoomOptions,
+  getFilters
+}));

package/node/internals/plugins/featurePlugins/useChartZAxis/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useChartZAxis: true
+};
+Object.defineProperty(exports, "useChartZAxis", {
+  enumerable: true,
+  get: function () {
+    return _useChartZAxis.useChartZAxis;
+  }
+});
+var _useChartZAxis = require("./useChartZAxis");
+var _useChartZAxis2 = require("./useChartZAxis.selectors");
+Object.keys(_useChartZAxis2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartZAxis2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartZAxis2[key];
+    }
+  });
+});