@mui/x-charts-pro 8.0.0-alpha.0 → 8.0.0-alpha.10

package/context/ZoomProvider/defaultizeZoom.d.ts

@@ -1,2 +0,0 @@
-import { AxisConfigForZoom, DefaultizedZoomOptions } from './Zoom.types';
-export declare const defaultizeZoom: (axis: AxisConfigForZoom[] | undefined, axisDirection: "x" | "y") => DefaultizedZoomOptions[];

package/context/ZoomProvider/defaultizeZoom.js

@@ -1,32 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { isDefined } from '@mui/x-charts/internals';
-const defaultZoomOptions = {
-  minStart: 0,
-  maxEnd: 100,
-  step: 5,
-  minSpan: 10,
-  maxSpan: 100,
-  panning: true,
-  filterMode: 'keep'
-};
-export const defaultizeZoom = (axis, axisDirection) => {
-  if (!axis) {
-    return [];
-  }
-  const defaultized = axis.map(v => {
-    if (!v.zoom) {
-      return undefined;
-    }
-    if (v.zoom === true) {
-      return _extends({
-        axisId: v.id,
-        axisDirection
-      }, defaultZoomOptions);
-    }
-    return _extends({
-      axisId: v.id,
-      axisDirection
-    }, defaultZoomOptions, v.zoom);
-  }).filter(isDefined);
-  return defaultized;
-};

package/context/ZoomProvider/index.d.ts

@@ -1,3 +0,0 @@
-export * from './ZoomContext';
-export * from './ZoomProvider';
-export * from './Zoom.types';

package/context/ZoomProvider/index.js

@@ -1,3 +0,0 @@
-export * from "./ZoomContext.js";
-export * from "./ZoomProvider.js";
-export * from "./Zoom.types.js";

package/context/ZoomProvider/initializeZoomData.d.ts

@@ -1,6 +0,0 @@
-import { ZoomState } from './Zoom.types';
-export declare const initializeZoomData: (options: ZoomState["options"]) => {
-    axisId: import("@mui/x-charts/internals").AxisId;
-    start: number;
-    end: number;
-}[];

package/context/ZoomProvider/initializeZoomData.js

@@ -1,13 +0,0 @@
-// This function is used to initialize the zoom data when it is not provided by the user.
-// It is helpful to avoid the need to provide the possibly auto-generated id for each axis.
-export const initializeZoomData = options => {
-  return Object.values(options).map(({
-    axisId,
-    minStart: start,
-    maxEnd: end
-  }) => ({
-    axisId,
-    start,
-    end
-  }));
-};

package/context/ZoomProvider/useSetupPan.d.ts

@@ -1 +0,0 @@
-export declare const useSetupPan: () => void;

package/context/ZoomProvider/useSetupPan.js

@@ -1,106 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { useDrawingArea, useSvgRef } from '@mui/x-charts/hooks';
-import { getSVGPoint } from '@mui/x-charts/internals';
-import { useZoom } from "./useZoom.js";
-export const useSetupPan = () => {
-  const {
-    zoomData,
-    setZoomData,
-    setIsInteracting,
-    isPanEnabled,
-    options
-  } = useZoom();
-  const drawingArea = useDrawingArea();
-  const svgRef = useSvgRef();
-  const isDraggingRef = React.useRef(false);
-  const touchStartRef = React.useRef(null);
-  const eventCacheRef = React.useRef([]);
-  React.useEffect(() => {
-    const element = svgRef.current;
-    if (element === null || !isPanEnabled) {
-      return () => {};
-    }
-    const handlePan = event => {
-      if (element === null || !isDraggingRef.current || eventCacheRef.current.length > 1) {
-        return;
-      }
-      if (touchStartRef.current == null) {
-        return;
-      }
-      const point = getSVGPoint(element, event);
-      const movementX = point.x - touchStartRef.current.x;
-      const movementY = (point.y - touchStartRef.current.y) * -1;
-      const newZoomData = touchStartRef.current.zoomData.map(zoom => {
-        const option = options[zoom.axisId];
-        if (!option || !option.panning) {
-          return zoom;
-        }
-        const min = zoom.start;
-        const max = zoom.end;
-        const span = max - min;
-        const MIN_PERCENT = option.minStart;
-        const MAX_PERCENT = option.maxEnd;
-        const movement = option.axisDirection === 'x' ? movementX : movementY;
-        const dimension = option.axisDirection === 'x' ? drawingArea.width : drawingArea.height;
-        let newMinPercent = min - movement / dimension * span;
-        let newMaxPercent = max - movement / dimension * span;
-        if (newMinPercent < MIN_PERCENT) {
-          newMinPercent = MIN_PERCENT;
-          newMaxPercent = newMinPercent + span;
-        }
-        if (newMaxPercent > MAX_PERCENT) {
-          newMaxPercent = MAX_PERCENT;
-          newMinPercent = newMaxPercent - span;
-        }
-        if (newMinPercent < MIN_PERCENT || newMaxPercent > MAX_PERCENT || span < option.minSpan || span > option.maxSpan) {
-          return zoom;
-        }
-        return _extends({}, zoom, {
-          start: newMinPercent,
-          end: newMaxPercent
-        });
-      });
-      setZoomData(newZoomData);
-    };
-    const handleDown = event => {
-      eventCacheRef.current.push(event);
-      const point = getSVGPoint(element, event);
-      if (!drawingArea.isPointInside(point)) {
-        return;
-      }
-
-      // If there is only one pointer, prevent selecting text
-      if (eventCacheRef.current.length === 1) {
-        event.preventDefault();
-      }
-      isDraggingRef.current = true;
-      setIsInteracting(true);
-      touchStartRef.current = {
-        x: point.x,
-        y: point.y,
-        zoomData
-      };
-    };
-    const handleUp = event => {
-      eventCacheRef.current.splice(eventCacheRef.current.findIndex(cachedEvent => cachedEvent.pointerId === event.pointerId), 1);
-      setIsInteracting(false);
-      isDraggingRef.current = false;
-      touchStartRef.current = null;
-    };
-    element.addEventListener('pointerdown', handleDown);
-    document.addEventListener('pointermove', handlePan);
-    document.addEventListener('pointerup', handleUp);
-    document.addEventListener('pointercancel', handleUp);
-    document.addEventListener('pointerleave', handleUp);
-    return () => {
-      element.removeEventListener('pointerdown', handleDown);
-      document.removeEventListener('pointermove', handlePan);
-      document.removeEventListener('pointerup', handleUp);
-      document.removeEventListener('pointercancel', handleUp);
-      document.removeEventListener('pointerleave', handleUp);
-    };
-  }, [drawingArea, svgRef, isDraggingRef, setIsInteracting, zoomData, setZoomData, isPanEnabled, options]);
-};

package/context/ZoomProvider/useSetupZoom.d.ts

@@ -1 +0,0 @@
-export declare const useSetupZoom: () => void;

package/context/ZoomProvider/useSetupZoom.js

@@ -1,274 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useDrawingArea, useSvgRef } from '@mui/x-charts/hooks';
-import { getSVGPoint } from '@mui/x-charts/internals';
-import { useZoom } from "./useZoom.js";
-/**
- * Helper to get the range (in percents of a reference range) corresponding to a given scale.
- * @param centerRatio {number} The ratio of the point that should not move between the previous and next range.
- * @param scaleRatio {number} The target scale ratio.
- * @returns The range to display.
- */
-const zoomAtPoint = (centerRatio, scaleRatio, currentZoomData, options) => {
-  const MIN_RANGE = options.minStart;
-  const MAX_RANGE = options.maxEnd;
-  const MIN_ALLOWED_SPAN = options.minSpan;
-  const minRange = currentZoomData.start;
-  const maxRange = currentZoomData.end;
-  const point = minRange + centerRatio * (maxRange - minRange);
-  let newMinRange = (minRange + point * (scaleRatio - 1)) / scaleRatio;
-  let newMaxRange = (maxRange + point * (scaleRatio - 1)) / scaleRatio;
-  let minSpillover = 0;
-  let maxSpillover = 0;
-  if (newMinRange < MIN_RANGE) {
-    minSpillover = Math.abs(newMinRange);
-    newMinRange = MIN_RANGE;
-  }
-  if (newMaxRange > MAX_RANGE) {
-    maxSpillover = Math.abs(newMaxRange - MAX_RANGE);
-    newMaxRange = MAX_RANGE;
-  }
-  if (minSpillover > 0 && maxSpillover > 0) {
-    return [MIN_RANGE, MAX_RANGE];
-  }
-  newMaxRange += minSpillover;
-  newMinRange -= maxSpillover;
-  newMinRange = Math.min(MAX_RANGE - MIN_ALLOWED_SPAN, Math.max(MIN_RANGE, newMinRange));
-  newMaxRange = Math.max(MIN_ALLOWED_SPAN, Math.min(MAX_RANGE, newMaxRange));
-  return [newMinRange, newMaxRange];
-};
-export const useSetupZoom = () => {
-  const {
-    setZoomData,
-    isZoomEnabled,
-    options,
-    setIsInteracting
-  } = useZoom();
-  const drawingArea = useDrawingArea();
-  const svgRef = useSvgRef();
-  const eventCacheRef = React.useRef([]);
-  const eventPrevDiff = React.useRef(0);
-  const interactionTimeoutRef = React.useRef(undefined);
-  React.useEffect(() => {
-    const element = svgRef.current;
-    if (element === null || !isZoomEnabled) {
-      return () => {};
-    }
-    const wheelHandler = event => {
-      if (element === null) {
-        return;
-      }
-      const point = getSVGPoint(element, event);
-      if (!drawingArea.isPointInside(point)) {
-        return;
-      }
-      event.preventDefault();
-      if (interactionTimeoutRef.current) {
-        clearTimeout(interactionTimeoutRef.current);
-      }
-      setIsInteracting(true);
-      // Debounce transition to `isInteractive=false`.
-      // Useful because wheel events don't have an "end" event.
-      interactionTimeoutRef.current = window.setTimeout(() => {
-        setIsInteracting(false);
-      }, 166);
-      setZoomData(prevZoomData => {
-        return prevZoomData.map(zoom => {
-          const option = options[zoom.axisId];
-          if (!option) {
-            return zoom;
-          }
-          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea) : getVerticalCenterRatio(point, drawingArea);
-          const {
-            scaleRatio,
-            isZoomIn
-          } = getWheelScaleRatio(event, option.step);
-          const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
-          if (!isSpanValid(newMinRange, newMaxRange, isZoomIn, option)) {
-            return zoom;
-          }
-          return {
-            axisId: zoom.axisId,
-            start: newMinRange,
-            end: newMaxRange
-          };
-        });
-      });
-    };
-    function pointerDownHandler(event) {
-      eventCacheRef.current.push(event);
-      setIsInteracting(true);
-    }
-    function pointerMoveHandler(event) {
-      if (element === null) {
-        return;
-      }
-      const index = eventCacheRef.current.findIndex(cachedEv => cachedEv.pointerId === event.pointerId);
-      eventCacheRef.current[index] = event;
-
-      // Not a pinch gesture
-      if (eventCacheRef.current.length !== 2) {
-        return;
-      }
-      const firstEvent = eventCacheRef.current[0];
-      const curDiff = getDiff(eventCacheRef.current);
-      setZoomData(prevZoomData => {
-        const newZoomData = prevZoomData.map(zoom => {
-          const option = options[zoom.axisId];
-          if (!option) {
-            return zoom;
-          }
-          const {
-            scaleRatio,
-            isZoomIn
-          } = getPinchScaleRatio(curDiff, eventPrevDiff.current, option.step);
-
-          // If the scale ratio is 0, it means the pinch gesture is not valid.
-          if (scaleRatio === 0) {
-            return zoom;
-          }
-          const point = getSVGPoint(element, firstEvent);
-          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea) : getVerticalCenterRatio(point, drawingArea);
-          const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
-          if (!isSpanValid(newMinRange, newMaxRange, isZoomIn, option)) {
-            return zoom;
-          }
-          return {
-            axisId: zoom.axisId,
-            start: newMinRange,
-            end: newMaxRange
-          };
-        });
-        eventPrevDiff.current = curDiff;
-        return newZoomData;
-      });
-    }
-    function pointerUpHandler(event) {
-      eventCacheRef.current.splice(eventCacheRef.current.findIndex(cachedEvent => cachedEvent.pointerId === event.pointerId), 1);
-      if (eventCacheRef.current.length < 2) {
-        eventPrevDiff.current = 0;
-      }
-      if (event.type === 'pointerup' || event.type === 'pointercancel') {
-        setIsInteracting(false);
-      }
-    }
-    element.addEventListener('wheel', wheelHandler);
-    element.addEventListener('pointerdown', pointerDownHandler);
-    element.addEventListener('pointermove', pointerMoveHandler);
-    element.addEventListener('pointerup', pointerUpHandler);
-    element.addEventListener('pointercancel', pointerUpHandler);
-    element.addEventListener('pointerout', pointerUpHandler);
-    element.addEventListener('pointerleave', pointerUpHandler);
-
-    // Prevent zooming the entire page on touch devices
-    element.addEventListener('touchstart', preventDefault);
-    element.addEventListener('touchmove', preventDefault);
-    return () => {
-      element.removeEventListener('wheel', wheelHandler);
-      element.removeEventListener('pointerdown', pointerDownHandler);
-      element.removeEventListener('pointermove', pointerMoveHandler);
-      element.removeEventListener('pointerup', pointerUpHandler);
-      element.removeEventListener('pointercancel', pointerUpHandler);
-      element.removeEventListener('pointerout', pointerUpHandler);
-      element.removeEventListener('pointerleave', pointerUpHandler);
-      element.removeEventListener('touchstart', preventDefault);
-      element.removeEventListener('touchmove', preventDefault);
-      if (interactionTimeoutRef.current) {
-        clearTimeout(interactionTimeoutRef.current);
-      }
-    };
-  }, [svgRef, setZoomData, drawingArea, isZoomEnabled, options, setIsInteracting]);
-};
-
-/**
- * Checks if the new span is valid.
- */
-function isSpanValid(minRange, maxRange, isZoomIn, option) {
-  const newSpanPercent = maxRange - minRange;
-  if (isZoomIn && newSpanPercent < option.minSpan || !isZoomIn && newSpanPercent > option.maxSpan) {
-    return false;
-  }
-  if (minRange < option.minStart || maxRange > option.maxEnd) {
-    return false;
-  }
-  return true;
-}
-function getMultiplier(event) {
-  const ctrlMultiplier = event.ctrlKey ? 3 : 1;
-
-  // DeltaMode: 0 is pixel, 1 is line, 2 is page
-  // This is defined by the browser.
-  if (event.deltaMode === 1) {
-    return 1 * ctrlMultiplier;
-  }
-  if (event.deltaMode) {
-    return 10 * ctrlMultiplier;
-  }
-  return 0.2 * ctrlMultiplier;
-}
-
-/**
- * Get the scale ratio and if it's a zoom in or out from a wheel event.
- */
-function getWheelScaleRatio(event, step) {
-  const deltaY = -event.deltaY;
-  const multiplier = getMultiplier(event);
-  const scaledStep = step * multiplier * deltaY / 1000;
-  // Clamp the scale ratio between 0.1 and 1.9 so that the zoom is not too big or too small.
-  const scaleRatio = Math.min(Math.max(1 + scaledStep, 0.1), 1.9);
-  const isZoomIn = deltaY > 0;
-  return {
-    scaleRatio,
-    isZoomIn
-  };
-}
-
-/**
- * Get the scale ratio and if it's a zoom in or out from a pinch gesture.
- */
-function getPinchScaleRatio(curDiff, prevDiff, step) {
-  const scaledStep = step / 1000;
-  let scaleRatio = 0;
-  let isZoomIn = false;
-  const hasMoved = prevDiff > 0;
-  if (hasMoved && curDiff > prevDiff) {
-    // The distance between the two pointers has increased
-    scaleRatio = 1 + scaledStep;
-    isZoomIn = true;
-  }
-  if (hasMoved && curDiff < prevDiff) {
-    // The distance between the two pointers has decreased
-    scaleRatio = 1 - scaledStep;
-    isZoomIn = false;
-  }
-  return {
-    scaleRatio,
-    isZoomIn
-  };
-}
-function getDiff(eventCache) {
-  const [firstEvent, secondEvent] = eventCache;
-  return Math.hypot(firstEvent.pageX - secondEvent.pageX, firstEvent.pageY - secondEvent.pageY);
-}
-
-/**
- * Get the ratio of the point in the horizontal center of the area.
- */
-function getHorizontalCenterRatio(point, area) {
-  const {
-    left,
-    width
-  } = area;
-  return (point.x - left) / width;
-}
-function preventDefault(event) {
-  event.preventDefault();
-}
-function getVerticalCenterRatio(point, area) {
-  const {
-    top,
-    height
-  } = area;
-  return (point.y - top) / height * -1 + 1;
-}

package/context/ZoomProvider/useZoom.d.ts

@@ -1,7 +0,0 @@
-import { ZoomState } from './Zoom.types';
-/**
- * Get access to the zoom state.
- *
- * @returns {ZoomState} The zoom state.
- */
-export declare function useZoom(): ZoomState;

package/context/ZoomProvider/useZoom.js

@@ -1,19 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { ZoomContext } from "./ZoomContext.js";
-/**
- * Get access to the zoom state.
- *
- * @returns {ZoomState} The zoom state.
- */
-export function useZoom() {
-  const {
-    data,
-    isInitialized
-  } = React.useContext(ZoomContext);
-  if (!isInitialized) {
-    throw new Error(['MUI X: Could not find the zoom context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
-  }
-  return data;
-}

package/context/index.d.ts

@@ -1,3 +0,0 @@
-export type { ZoomOptions, ZoomData, ZoomProps, ZoomState } from './ZoomProvider/Zoom.types';
-export * from './ZoomProvider/useZoom';
-export * from './ZoomProvider/ZoomSetup';

package/context/index.js

@@ -1,5 +0,0 @@
-// # Zoom & Pan
-
-export * from "./ZoomProvider/useZoom.js";
-export * from "./ZoomProvider/ZoomSetup.js";
-export {};

package/modern/Heatmap/DefaultHeatmapTooltip.js

@@ -1,99 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipRow, ChartsTooltipCell, ChartsTooltipMark } from '@mui/x-charts/ChartsTooltip';
-import { useXAxis, useYAxis } from '@mui/x-charts/hooks';
-import { getLabel } from '@mui/x-charts/internals';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function DefaultHeatmapTooltip(props) {
-  const {
-    series,
-    itemData,
-    sx,
-    classes,
-    getColor
-  } = props;
-  const xAxis = useXAxis();
-  const yAxis = useYAxis();
-  if (itemData.dataIndex === undefined || !series.data[itemData.dataIndex]) {
-    return null;
-  }
-  const color = getColor(itemData.dataIndex);
-  const valueItem = series.data[itemData.dataIndex];
-  const [xIndex, yIndex] = valueItem;
-  const formattedX = xAxis.valueFormatter?.(xAxis.data[xIndex], {
-    location: 'tooltip'
-  }) ?? xAxis.data[xIndex].toLocaleString();
-  const formattedY = yAxis.valueFormatter?.(yAxis.data[yIndex], {
-    location: 'tooltip'
-  }) ?? yAxis.data[yIndex].toLocaleString();
-  const formattedValue = series.valueFormatter(valueItem, {
-    dataIndex: itemData.dataIndex
-  });
-  const seriesLabel = getLabel(series.label, 'tooltip');
-  return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
-    sx: sx,
-    className: classes.root,
-    children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
-      className: classes.table,
-      children: [/*#__PURE__*/_jsx("thead", {
-        children: /*#__PURE__*/_jsxs(ChartsTooltipRow, {
-          children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
-            children: formattedX
-          }), formattedX && formattedY && /*#__PURE__*/_jsx(ChartsTooltipCell, {}), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            children: formattedY
-          })]
-        })
-      }), /*#__PURE__*/_jsx("tbody", {
-        children: /*#__PURE__*/_jsxs(ChartsTooltipRow, {
-          className: classes.row,
-          children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: clsx(classes.markCell, classes.cell),
-            children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
-              color: color,
-              className: classes.mark
-            })
-          }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: clsx(classes.labelCell, classes.cell),
-            children: seriesLabel
-          }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: clsx(classes.valueCell, classes.cell),
-            children: formattedValue
-          })]
-        })
-      })]
-    })
-  });
-}
-process.env.NODE_ENV !== "production" ? DefaultHeatmapTooltip.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object.isRequired,
-  /**
-   * Get the color of the item with index `dataIndex`.
-   * @param {number} dataIndex The data index of the item.
-   * @returns {string} The color to display.
-   */
-  getColor: PropTypes.func.isRequired,
-  /**
-   * The data used to identify the triggered item.
-   */
-  itemData: PropTypes.shape({
-    dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    type: PropTypes.oneOf(['heatmap']).isRequired
-  }).isRequired,
-  /**
-   * The series linked to the triggered item.
-   */
-  series: PropTypes.object.isRequired,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-} : void 0;
-export { DefaultHeatmapTooltip };

package/modern/context/CartesianProviderPro/CartesianProviderPro.js

@@ -1,89 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { useDrawingArea, useSeries, CartesianContext, computeAxisValue, useXExtremumGetter, useYExtremumGetter } from '@mui/x-charts/internals';
-import { useZoom } from "../ZoomProvider/useZoom.js";
-import { createAxisFilterMapper, createGetAxisFilters } from "./createAxisFilterMapper.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-function CartesianProviderPro(props) {
-  const {
-    xAxis,
-    yAxis,
-    children
-  } = props;
-  const formattedSeries = useSeries();
-  const drawingArea = useDrawingArea();
-  const {
-    zoomData,
-    options
-  } = useZoom();
-  const xExtremumGetters = useXExtremumGetter();
-  const yExtremumGetters = useYExtremumGetter();
-  const getFilters = React.useMemo(() => {
-    const xMapper = createAxisFilterMapper({
-      zoomData,
-      extremumGetter: xExtremumGetters,
-      formattedSeries,
-      direction: 'x'
-    });
-    const yMapper = createAxisFilterMapper({
-      zoomData,
-      extremumGetter: yExtremumGetters,
-      formattedSeries,
-      direction: 'y'
-    });
-    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));
-  }, [formattedSeries, xAxis, xExtremumGetters, yAxis, yExtremumGetters, zoomData]);
-  const xValues = React.useMemo(() => computeAxisValue({
-    drawingArea,
-    formattedSeries,
-    axis: xAxis,
-    extremumGetters: xExtremumGetters,
-    axisDirection: 'x',
-    zoomData,
-    zoomOptions: options,
-    getFilters
-  }), [drawingArea, formattedSeries, xAxis, xExtremumGetters, zoomData, options, getFilters]);
-  const yValues = React.useMemo(() => computeAxisValue({
-    drawingArea,
-    formattedSeries,
-    axis: yAxis,
-    extremumGetters: yExtremumGetters,
-    axisDirection: 'y',
-    zoomData,
-    zoomOptions: options,
-    getFilters
-  }), [drawingArea, formattedSeries, yAxis, yExtremumGetters, zoomData, options, getFilters]);
-  const value = React.useMemo(() => ({
-    isInitialized: true,
-    data: {
-      xAxis: xValues.axis,
-      yAxis: yValues.axis,
-      xAxisIds: xValues.axisIds,
-      yAxisIds: yValues.axisIds
-    }
-  }), [xValues, yValues]);
-  return /*#__PURE__*/_jsx(CartesianContext.Provider, {
-    value: value,
-    children: children
-  });
-}
-export { CartesianProviderPro };