@mui/x-charts 8.0.0-alpha.7 → 8.0.0-alpha.9

package/node/internals/plugins/corePlugins/useChartDimensions/index.js

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

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

@@ -0,0 +1,183 @@
+"use strict";
+'use client';
+
+/* eslint-disable react-compiler/react-compiler */
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartDimensions = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _ownerWindow = _interopRequireDefault(require("@mui/utils/ownerWindow"));
+var _constants = require("../../../../constants");
+var _useChartDimensions = require("./useChartDimensions.selectors");
+const MAX_COMPUTE_RUN = 10;
+const useChartDimensions = ({
+  params,
+  store,
+  svgRef
+}) => {
+  const hasInSize = params.width !== undefined && params.height !== undefined;
+  const stateRef = React.useRef({
+    displayError: false,
+    initialCompute: true,
+    computeRun: 0
+  });
+  // States only used for the initialization of the size.
+  const [innerWidth, setInnerWidth] = React.useState(0);
+  const [innerHeight, setInnerHeight] = React.useState(0);
+  const computeSize = React.useCallback(() => {
+    const mainEl = svgRef?.current;
+    if (!mainEl) {
+      return {};
+    }
+    const win = (0, _ownerWindow.default)(mainEl);
+    const computedStyle = win.getComputedStyle(mainEl);
+    const newHeight = Math.floor(parseFloat(computedStyle.height)) || 0;
+    const newWidth = Math.floor(parseFloat(computedStyle.width)) || 0;
+    store.update(prev => {
+      const prevWidth = prev.dimensions.width + prev.dimensions.left + prev.dimensions.right;
+      const prevHeight = prev.dimensions.height + prev.dimensions.top + prev.dimensions.bottom;
+      if (prevWidth === newWidth && prevHeight === newHeight) {
+        return prev;
+      }
+      return (0, _extends2.default)({}, prev, {
+        dimensions: (0, _extends2.default)({}, prev.dimensions, {
+          width: newWidth - prev.dimensions.left - prev.dimensions.right,
+          height: newHeight - prev.dimensions.top - prev.dimensions.bottom
+        })
+      });
+    });
+    return {
+      height: newHeight,
+      width: newWidth
+    };
+  }, [store, svgRef]);
+  store.update(prev => {
+    if ((params.width === undefined || prev.dimensions.propsWidth === params.width) && (params.height === undefined || prev.dimensions.propsHeight === params.height)) {
+      return prev;
+    }
+    return (0, _extends2.default)({}, prev, {
+      dimensions: (0, _extends2.default)({}, prev.dimensions, {
+        width: params.width === undefined ? prev.dimensions.width : params.width - prev.dimensions.left - prev.dimensions.right,
+        height: params.height === undefined ? prev.dimensions.height : params.height - prev.dimensions.top - prev.dimensions.bottom,
+        propsWidth: params.width,
+        propsHeight: params.height
+      })
+    });
+  });
+  React.useEffect(() => {
+    // Ensure the error detection occurs after the first rendering.
+    stateRef.current.displayError = true;
+  }, []);
+
+  // This effect is used to compute the size of the container on the initial render.
+  // It is not bound to the raf loop to avoid an unwanted "resize" event.
+  // https://github.com/mui/mui-x/issues/13477#issuecomment-2336634785
+  (0, _useEnhancedEffect.default)(() => {
+    // computeRun is used to avoid infinite loops.
+    if (hasInSize || !stateRef.current.initialCompute || stateRef.current.computeRun > MAX_COMPUTE_RUN) {
+      return;
+    }
+    const computedSize = computeSize();
+    if (computedSize.width !== innerWidth || computedSize.height !== innerHeight) {
+      stateRef.current.computeRun += 1;
+      if (computedSize.width !== undefined) {
+        setInnerWidth(computedSize.width);
+      }
+      if (computedSize.height !== undefined) {
+        setInnerHeight(computedSize.height);
+      }
+    } else if (stateRef.current.initialCompute) {
+      stateRef.current.initialCompute = false;
+    }
+  }, [innerHeight, innerWidth, computeSize, hasInSize]);
+  (0, _useEnhancedEffect.default)(() => {
+    if (hasInSize) {
+      return () => {};
+    }
+    computeSize();
+    const elementToObserve = svgRef.current;
+    if (typeof ResizeObserver === 'undefined') {
+      return () => {};
+    }
+    let animationFrame;
+    const observer = new ResizeObserver(() => {
+      // See https://github.com/mui/mui-x/issues/8733
+      animationFrame = requestAnimationFrame(() => {
+        computeSize();
+      });
+    });
+    if (elementToObserve) {
+      observer.observe(elementToObserve);
+    }
+    return () => {
+      if (animationFrame) {
+        cancelAnimationFrame(animationFrame);
+      }
+      if (elementToObserve) {
+        observer.unobserve(elementToObserve);
+      }
+    };
+  }, [computeSize, hasInSize, svgRef]);
+  if (process.env.NODE_ENV !== 'production') {
+    if (stateRef.current.displayError && params.width === undefined && innerWidth === 0) {
+      console.error(`MUI X: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
+      stateRef.current.displayError = false;
+    }
+    if (stateRef.current.displayError && params.height === undefined && innerHeight === 0) {
+      console.error(`MUI X: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
+      stateRef.current.displayError = false;
+    }
+  }
+  const isPointInside = React.useCallback(({
+    x,
+    y
+  }, options) => {
+    // For element allowed to overflow, wrapping them in <g data-drawing-container /> make them fully part of the drawing area.
+    if (options?.targetElement && options?.targetElement.closest('[data-drawing-container]')) {
+      return true;
+    }
+    const drawingArea = (0, _useChartDimensions.selectorChartDimensionsState)(store.value);
+    const isInsideX = x >= drawingArea.left - 1 && x <= drawingArea.left + drawingArea.width;
+    const isInsideY = y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height;
+    if (options?.direction === 'x') {
+      return isInsideX;
+    }
+    if (options?.direction === 'y') {
+      return isInsideY;
+    }
+    return isInsideX && isInsideY;
+  }, [store.value]);
+  return {
+    instance: {
+      isPointInside
+    }
+  };
+};
+exports.useChartDimensions = useChartDimensions;
+useChartDimensions.params = {
+  width: true,
+  height: true,
+  margin: true
+};
+useChartDimensions.getDefaultizedParams = ({
+  params
+}) => (0, _extends2.default)({}, params, {
+  margin: params.margin ? (0, _extends2.default)({}, _constants.DEFAULT_MARGINS, params.margin) : _constants.DEFAULT_MARGINS
+});
+useChartDimensions.getInitialState = ({
+  width,
+  height,
+  margin
+}) => ({
+  dimensions: (0, _extends2.default)({}, margin, {
+    width: (width ?? 0) - margin.left - margin.right,
+    height: (height ?? 0) - margin.top - margin.bottom,
+    propsWidth: width,
+    propsHeight: height
+  })
+});

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorChartPropsSize = exports.selectorChartHasIntrinsicSize = exports.selectorChartDrawingArea = exports.selectorChartDimensionsState = exports.selectorChartContainerSize = void 0;
+var _selectors = require("../../utils/selectors");
+const selectorChartDimensionsState = state => state.dimensions;
+exports.selectorChartDimensionsState = selectorChartDimensionsState;
+const selectorChartDrawingArea = exports.selectorChartDrawingArea = (0, _selectors.createSelector)(selectorChartDimensionsState, dimensionsState => ({
+  width: dimensionsState.width,
+  left: dimensionsState.left,
+  right: dimensionsState.right,
+  height: dimensionsState.height,
+  top: dimensionsState.top,
+  bottom: dimensionsState.bottom
+}));
+const selectorChartPropsSize = exports.selectorChartPropsSize = (0, _selectors.createSelector)(selectorChartDimensionsState, dimensionsState => ({
+  width: dimensionsState.propsWidth,
+  height: dimensionsState.propsHeight
+}));
+const selectorChartContainerSize = exports.selectorChartContainerSize = (0, _selectors.createSelector)(selectorChartDimensionsState, dimensionsState => ({
+  width: dimensionsState.width + dimensionsState.left + dimensionsState.right,
+  height: dimensionsState.height + dimensionsState.top + dimensionsState.bottom
+}));
+
+/**
+ * Get the id attribute of the chart.
+ * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
+ * @returns {string} The id attribute of the chart.
+ */
+const selectorChartHasIntrinsicSize = exports.selectorChartHasIntrinsicSize = (0, _selectors.createSelector)(selectorChartContainerSize, svgSize => svgSize.width > 0 && svgSize.height > 0);

package/node/internals/plugins/corePlugins/useChartId/index.js

@@ -3,10 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  useChartId: true
+};
 Object.defineProperty(exports, "useChartId", {
   enumerable: true,
   get: function () {
     return _useChartId.useChartId;
   }
 });
-var _useChartId = require("./useChartId");
+var _useChartId = require("./useChartId");
+var _useChartId2 = require("./useChartId.selectors");
+Object.keys(_useChartId2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartId2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartId2[key];
+    }
+  });
+});

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

@@ -15,7 +15,7 @@ const useChartId = ({
 }) => {
   React.useEffect(() => {
     store.update(prevState => {
-      if (params.id === prevState.id.providedChartId && prevState.id.chartId !== undefined) {
+      if (params.id === undefined || params.id === prevState.id.providedChartId && prevState.id.chartId !== undefined) {
         return prevState;
       }
       return (0, _extends2.default)({}, prevState, {

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

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

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;
+}