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

package/node/context/CartesianProviderPro/createAxisFilterMapper.js

@@ -1,68 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createGetAxisFilters = exports.createAxisFilterMapper = void 0;
-var _internals = require("@mui/x-charts/internals");
-const createAxisFilterMapper = ({
-  zoomData,
-  extremumGetter,
-  formattedSeries,
-  direction
-}) => (axis, axisIndex) => {
-  if (typeof axis.zoom !== 'object' || axis.zoom.filterMode !== 'discard') {
-    return null;
-  }
-  const zoom = zoomData?.find(({
-    axisId
-  }) => axisId === 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, _internals.getAxisExtremum)(axis, extremumGetter, axisIndex, formattedSeries);
-  }
-  let min;
-  let max;
-
-  // @ts-expect-error The function defaults to linear scale if the scaleType is not recognized.
-  [min, max] = (0, _internals.getScale)(scaleType, 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(_internals.isDefined);
-    return data.every(f => f(value, dataIndex));
-  };
-};
-exports.createGetAxisFilters = createGetAxisFilters;

package/node/context/ChartDataProviderPro/ChartDataProviderPro.js

@@ -1,56 +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.ChartDataProviderPro = ChartDataProviderPro;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _internals = require("@mui/x-charts/internals");
-var _context = require("@mui/x-charts/context");
-var _useLicenseVerifier = require("@mui/x-license/useLicenseVerifier");
-var _releaseInfo = require("../../internals/utils/releaseInfo");
-var _CartesianProviderPro = require("../CartesianProviderPro");
-var _ZoomProvider = require("../ZoomProvider");
-var _useChartDataProviderProProps = require("./useChartDataProviderProProps");
-var _jsxRuntime = require("react/jsx-runtime");
-const releaseInfo = (0, _releaseInfo.getReleaseInfo)();
-function ChartDataProviderPro(props) {
-  const {
-    zoomProviderProps,
-    drawingAreaProviderProps,
-    seriesProviderProps,
-    zAxisContextProps,
-    highlightedProviderProps,
-    cartesianProviderProps,
-    sizeProviderProps,
-    pluginProviderProps,
-    animationProviderProps,
-    children
-  } = (0, _useChartDataProviderProProps.useChartContainerProProps)(props);
-  (0, _useLicenseVerifier.useLicenseVerifier)('x-charts-pro', releaseInfo);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.ChartProvider, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.SizeProvider, (0, _extends2.default)({}, sizeProviderProps, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.DrawingAreaProvider, (0, _extends2.default)({}, drawingAreaProviderProps, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.AnimationProvider, (0, _extends2.default)({}, animationProviderProps, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PluginProvider, (0, _extends2.default)({}, pluginProviderProps, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZoomProvider.ZoomProvider, (0, _extends2.default)({}, zoomProviderProps, {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.SeriesProvider, (0, _extends2.default)({}, seriesProviderProps, {
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CartesianProviderPro.CartesianProviderPro, (0, _extends2.default)({}, cartesianProviderProps, {
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ZAxisContextProvider, (0, _extends2.default)({}, zAxisContextProps, {
-                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.HighlightedProvider, (0, _extends2.default)({}, highlightedProviderProps, {
-                      children: children
-                    }))
-                  }))
-                }))
-              }))
-            }))
-          }))
-        }))
-      }))
-    }))
-  });
-}

package/node/context/ChartDataProviderPro/index.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _ChartDataProviderPro = require("./ChartDataProviderPro");
-Object.keys(_ChartDataProviderPro).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ChartDataProviderPro[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ChartDataProviderPro[key];
-    }
-  });
-});

package/node/context/ChartDataProviderPro/useChartDataProviderProProps.js

@@ -1,50 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useChartContainerProProps = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _internals = require("@mui/x-charts/internals");
-const _excluded = ["zoom", "onZoomChange"];
-const useChartContainerProProps = props => {
-  const {
-      zoom,
-      onZoomChange
-    } = props,
-    baseProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const {
-    children,
-    drawingAreaProviderProps,
-    seriesProviderProps,
-    cartesianProviderProps,
-    zAxisContextProps,
-    highlightedProviderProps,
-    sizeProviderProps,
-    pluginProviderProps,
-    animationProviderProps,
-    xAxis,
-    yAxis
-  } = (0, _internals.useChartDataProviderProps)(baseProps);
-  const zoomProviderProps = {
-    zoom,
-    onZoomChange,
-    xAxis,
-    yAxis
-  };
-  return {
-    zoomProviderProps,
-    children,
-    drawingAreaProviderProps,
-    pluginProviderProps,
-    seriesProviderProps,
-    cartesianProviderProps,
-    zAxisContextProps,
-    highlightedProviderProps,
-    sizeProviderProps,
-    animationProviderProps
-  };
-};
-exports.useChartContainerProProps = useChartContainerProProps;

package/node/context/ZoomProvider/ZoomContext.js

@@ -1,23 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ZoomContext = void 0;
-var React = _interopRequireWildcard(require("react"));
-const ZoomContext = exports.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/node/context/ZoomProvider/ZoomProvider.js

@@ -1,63 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ZoomProvider = ZoomProvider;
-var React = _interopRequireWildcard(require("react"));
-var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"));
-var _ZoomContext = require("./ZoomContext");
-var _defaultizeZoom = require("./defaultizeZoom");
-var _initializeZoomData = require("./initializeZoomData");
-var _jsxRuntime = require("react/jsx-runtime");
-function ZoomProvider({
-  children,
-  xAxis,
-  yAxis,
-  zoom,
-  onZoomChange
-}) {
-  const [isInteracting, setIsInteracting] = React.useState(false);
-  const options = React.useMemo(() => [...(0, _defaultizeZoom.defaultizeZoom)(xAxis, 'x'), ...(0, _defaultizeZoom.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((0, _initializeZoomData.initializeZoomData)(options));
-  const [zoomData, setZoomData] = (0, _useControlled.default)({
-    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__*/(0, _jsxRuntime.jsx)(_ZoomContext.ZoomContext.Provider, {
-    value: value,
-    children: children
-  });
-}
-function isPanEnabled(options) {
-  return Object.values(options).some(v => v.panning) || false;
-}

package/node/context/ZoomProvider/ZoomSetup.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ZoomSetup = ZoomSetup;
-var _useSetupPan = require("./useSetupPan");
-var _useSetupZoom = require("./useSetupZoom");
-/**
- * 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() {
-  (0, _useSetupZoom.useSetupZoom)();
-  (0, _useSetupPan.useSetupPan)();
-  return null;
-}

package/node/context/ZoomProvider/defaultizeZoom.js

@@ -1,40 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.defaultizeZoom = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _internals = require("@mui/x-charts/internals");
-const defaultZoomOptions = {
-  minStart: 0,
-  maxEnd: 100,
-  step: 5,
-  minSpan: 10,
-  maxSpan: 100,
-  panning: true,
-  filterMode: 'keep'
-};
-const defaultizeZoom = (axis, axisDirection) => {
-  if (!axis) {
-    return [];
-  }
-  const defaultized = axis.map(v => {
-    if (!v.zoom) {
-      return undefined;
-    }
-    if (v.zoom === true) {
-      return (0, _extends2.default)({
-        axisId: v.id,
-        axisDirection
-      }, defaultZoomOptions);
-    }
-    return (0, _extends2.default)({
-      axisId: v.id,
-      axisDirection
-    }, defaultZoomOptions, v.zoom);
-  }).filter(_internals.isDefined);
-  return defaultized;
-};
-exports.defaultizeZoom = defaultizeZoom;

package/node/context/ZoomProvider/index.js

@@ -1,38 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _ZoomContext = require("./ZoomContext");
-Object.keys(_ZoomContext).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ZoomContext[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ZoomContext[key];
-    }
-  });
-});
-var _ZoomProvider = require("./ZoomProvider");
-Object.keys(_ZoomProvider).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ZoomProvider[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ZoomProvider[key];
-    }
-  });
-});
-var _Zoom = require("./Zoom.types");
-Object.keys(_Zoom).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Zoom[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Zoom[key];
-    }
-  });
-});

package/node/context/ZoomProvider/initializeZoomData.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.initializeZoomData = void 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.
-const initializeZoomData = options => {
-  return Object.values(options).map(({
-    axisId,
-    minStart: start,
-    maxEnd: end
-  }) => ({
-    axisId,
-    start,
-    end
-  }));
-};
-exports.initializeZoomData = initializeZoomData;

package/node/context/ZoomProvider/useSetupPan.js

@@ -1,114 +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.useSetupPan = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _hooks = require("@mui/x-charts/hooks");
-var _internals = require("@mui/x-charts/internals");
-var _useZoom = require("./useZoom");
-const useSetupPan = () => {
-  const {
-    zoomData,
-    setZoomData,
-    setIsInteracting,
-    isPanEnabled,
-    options
-  } = (0, _useZoom.useZoom)();
-  const drawingArea = (0, _hooks.useDrawingArea)();
-  const svgRef = (0, _hooks.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 = (0, _internals.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 (0, _extends2.default)({}, zoom, {
-          start: newMinPercent,
-          end: newMaxPercent
-        });
-      });
-      setZoomData(newZoomData);
-    };
-    const handleDown = event => {
-      eventCacheRef.current.push(event);
-      const point = (0, _internals.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]);
-};
-exports.useSetupPan = useSetupPan;