@mui/x-charts-pro 8.0.0-alpha.7 → 8.0.0-alpha.8

package/modern/context/ZoomProvider/ZoomContext.js

@@ -1,16 +0,0 @@
-import * as React from 'react';
-export const ZoomContext = /*#__PURE__*/React.createContext({
-  isInitialized: false,
-  data: {
-    isZoomEnabled: false,
-    isPanEnabled: false,
-    options: {},
-    zoomData: [],
-    setZoomData: () => {},
-    isInteracting: false,
-    setIsInteracting: () => {}
-  }
-});
-if (process.env.NODE_ENV !== 'production') {
-  ZoomContext.displayName = 'ZoomContext';
-}

package/modern/context/ZoomProvider/ZoomProvider.js

@@ -1,56 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import useControlled from '@mui/utils/useControlled';
-import { ZoomContext } from "./ZoomContext.js";
-import { defaultizeZoom } from "./defaultizeZoom.js";
-import { initializeZoomData } from "./initializeZoomData.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export function ZoomProvider({
-  children,
-  xAxis,
-  yAxis,
-  zoom,
-  onZoomChange
-}) {
-  const [isInteracting, setIsInteracting] = React.useState(false);
-  const options = React.useMemo(() => [...defaultizeZoom(xAxis, 'x'), ...defaultizeZoom(yAxis, 'y')].reduce((acc, v) => {
-    acc[v.axisId] = v;
-    return acc;
-  }, {}), [xAxis, yAxis]);
-
-  // Default zoom data is initialized only once when uncontrolled. If the user changes the options
-  // after the initial render, the zoom data will not be updated until the next zoom interaction.
-  // This is required to avoid warnings about controlled/uncontrolled components.
-  const defaultZoomData = React.useRef(initializeZoomData(options));
-  const [zoomData, setZoomData] = useControlled({
-    controlled: zoom,
-    // eslint-disable-next-line react-compiler/react-compiler
-    default: defaultZoomData.current,
-    name: 'ZoomProvider',
-    state: 'zoom'
-  });
-  const setZoomDataCallback = React.useCallback(newZoomData => {
-    setZoomData(newZoomData);
-    onZoomChange?.(newZoomData);
-  }, [setZoomData, onZoomChange]);
-  const value = React.useMemo(() => ({
-    isInitialized: true,
-    data: {
-      isZoomEnabled: Object.keys(options).length > 0,
-      isPanEnabled: isPanEnabled(options),
-      options,
-      zoomData,
-      setZoomData: setZoomDataCallback,
-      isInteracting,
-      setIsInteracting
-    }
-  }), [zoomData, isInteracting, setIsInteracting, options, setZoomDataCallback]);
-  return /*#__PURE__*/_jsx(ZoomContext.Provider, {
-    value: value,
-    children: children
-  });
-}
-function isPanEnabled(options) {
-  return Object.values(options).some(v => v.panning) || false;
-}

package/modern/context/ZoomProvider/ZoomSetup.js

@@ -1,16 +0,0 @@
-import { useSetupPan } from "./useSetupPan.js";
-import { useSetupZoom } from "./useSetupZoom.js";
-
-/**
- * Sets up the zoom functionality if using composition or a custom chart.
- *
- * Simply add this component at the same level as the chart component to enable zooming and panning.
- *
- * See: [Composition](https://mui.com/x/react-charts/composition/)
- */
-function ZoomSetup() {
-  useSetupZoom();
-  useSetupPan();
-  return null;
-}
-export { ZoomSetup };

package/modern/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/modern/context/ZoomProvider/index.js

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

package/modern/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/modern/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/modern/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/modern/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/modern/context/index.js

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

package/node/context/CartesianProviderPro/CartesianProviderPro.js

@@ -1,95 +0,0 @@
-"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.CartesianProviderPro = CartesianProviderPro;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _internals = require("@mui/x-charts/internals");
-var _useZoom = require("../ZoomProvider/useZoom");
-var _createAxisFilterMapper = require("./createAxisFilterMapper");
-var _jsxRuntime = require("react/jsx-runtime");
-function CartesianProviderPro(props) {
-  const {
-    xAxis,
-    yAxis,
-    children
-  } = props;
-  const formattedSeries = (0, _internals.useSeries)();
-  const drawingArea = (0, _internals.useDrawingArea)();
-  const {
-    zoomData,
-    options
-  } = (0, _useZoom.useZoom)();
-  const xExtremumGetters = (0, _internals.useXExtremumGetter)();
-  const yExtremumGetters = (0, _internals.useYExtremumGetter)();
-  const getFilters = React.useMemo(() => {
-    const xMapper = (0, _createAxisFilterMapper.createAxisFilterMapper)({
-      zoomData,
-      extremumGetter: xExtremumGetters,
-      formattedSeries,
-      direction: 'x'
-    });
-    const yMapper = (0, _createAxisFilterMapper.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 (0, _createAxisFilterMapper.createGetAxisFilters)((0, _extends2.default)({}, xFilters, yFilters));
-  }, [formattedSeries, xAxis, xExtremumGetters, yAxis, yExtremumGetters, zoomData]);
-  const xValues = React.useMemo(() => (0, _internals.computeAxisValue)({
-    drawingArea,
-    formattedSeries,
-    axis: xAxis,
-    extremumGetters: xExtremumGetters,
-    axisDirection: 'x',
-    zoomData,
-    zoomOptions: options,
-    getFilters
-  }), [drawingArea, formattedSeries, xAxis, xExtremumGetters, zoomData, options, getFilters]);
-  const yValues = React.useMemo(() => (0, _internals.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__*/(0, _jsxRuntime.jsx)(_internals.CartesianContext.Provider, {
-    value: value,
-    children: children
-  });
-}