@mui/x-charts-pro 9.0.0-alpha.0 → 9.0.0-alpha.2

package/internals/plugins/useChartProZoom/index.d.mts

@@ -0,0 +1,3 @@
+export * from "./useChartProZoom.selectors.mjs";
+export * from "./useChartProZoom.mjs";
+export * from "./useChartProZoom.types.mjs";

package/internals/plugins/useChartProZoom/index.mjs

@@ -0,0 +1,3 @@
+export * from "./useChartProZoom.selectors.mjs";
+export * from "./useChartProZoom.mjs";
+export * from "./useChartProZoom.types.mjs";

package/internals/plugins/useChartProZoom/initializeZoomInteractionConfig.d.mts

@@ -0,0 +1,3 @@
+import type { AxisId, DefaultizedZoomOptions } from '@mui/x-charts/internals';
+import type { ZoomInteractionConfig, DefaultizedZoomInteractionConfig } from "./ZoomInteractionConfig.types.mjs";
+export declare const initializeZoomInteractionConfig: (zoomInteractionConfig?: ZoomInteractionConfig, optionsLookup?: Record<AxisId, DefaultizedZoomOptions>) => DefaultizedZoomInteractionConfig;

package/internals/plugins/useChartProZoom/useChartProZoom.d.mts

@@ -0,0 +1,3 @@
+import { type ChartPlugin } from '@mui/x-charts/internals';
+import { type UseChartProZoomSignature } from "./useChartProZoom.types.mjs";
+export declare const useChartProZoom: ChartPlugin<UseChartProZoomSignature>;

package/internals/plugins/useChartProZoom/useChartProZoom.mjs

@@ -0,0 +1,176 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { selectorChartZoomOptionsLookup, createZoomLookup, selectorChartAxisZoomOptionsLookup } from '@mui/x-charts/internals';
+import debounce from '@mui/utils/debounce';
+import { useEffectAfterFirstRender } from '@mui/x-internals/useEffectAfterFirstRender';
+import { useEventCallback } from '@mui/material/utils';
+import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
+import { calculateZoom } from "./calculateZoom.mjs";
+import { useZoomOnWheel } from "./gestureHooks/useZoomOnWheel.mjs";
+import { useZoomOnPinch } from "./gestureHooks/useZoomOnPinch.mjs";
+import { usePanOnDrag } from "./gestureHooks/usePanOnDrag.mjs";
+import { usePanOnWheel } from "./gestureHooks/usePanOnWheel.mjs";
+import { useZoomOnTapAndDrag } from "./gestureHooks/useZoomOnTapAndDrag.mjs";
+import { usePanOnPressAndDrag } from "./gestureHooks/usePanOnPressAndDrag.mjs";
+import { useZoomOnBrush } from "./gestureHooks/useZoomOnBrush.mjs";
+import { useZoomOnDoubleTapReset } from "./gestureHooks/useZoomOnDoubleTapReset.mjs";
+import { initializeZoomInteractionConfig } from "./initializeZoomInteractionConfig.mjs";
+import { initializeZoomData } from "./initializeZoomData.mjs";
+export const useChartProZoom = pluginData => {
+  const {
+    store,
+    params
+  } = pluginData;
+  const {
+    zoomData: paramsZoomData,
+    onZoomChange: onZoomChangeProp,
+    zoomInteractionConfig
+  } = params;
+  const onZoomChange = useEventCallback(onZoomChangeProp ?? (() => {}));
+  const optionsLookup = store.use(selectorChartZoomOptionsLookup);
+  useEffectAfterFirstRender(() => {
+    store.set('zoom', _extends({}, store.state.zoom, {
+      zoomInteractionConfig: initializeZoomInteractionConfig(zoomInteractionConfig, optionsLookup)
+    }));
+  }, [store, zoomInteractionConfig, optionsLookup]);
+
+  // This is debounced. We want to run it only once after the interaction ends.
+  const removeIsInteracting = React.useMemo(() => debounce(() => store.set('zoom', _extends({}, store.state.zoom, {
+    isInteracting: false
+  })), 166), [store]);
+
+  // Manage controlled state
+  React.useEffect(() => {
+    if (paramsZoomData === undefined) {
+      return;
+    }
+    if (process.env.NODE_ENV !== 'production' && !store.state.zoom.isControlled) {
+      console.error([`MUI X Charts: A chart component is changing the \`zoomData\` from uncontrolled to controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', 'Decide between using a controlled or uncontrolled for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
+    }
+    store.set('zoom', _extends({}, store.state.zoom, {
+      isInteracting: true,
+      zoomData: paramsZoomData
+    }));
+    removeIsInteracting();
+  }, [store, paramsZoomData, removeIsInteracting]);
+  const setZoomDataCallback = React.useCallback(zoomData => {
+    const newZoomData = typeof zoomData === 'function' ? zoomData([...store.state.zoom.zoomData]) : zoomData;
+    if (isDeepEqual(store.state.zoom.zoomData, newZoomData)) {
+      return;
+    }
+    onZoomChange(newZoomData);
+    if (store.state.zoom.isControlled) {
+      store.set('zoom', _extends({}, store.state.zoom, {
+        isInteracting: true
+      }));
+    } else {
+      store.set('zoom', _extends({}, store.state.zoom, {
+        isInteracting: true,
+        zoomData: newZoomData
+      }));
+      removeIsInteracting();
+    }
+  }, [onZoomChange, store, removeIsInteracting]);
+  const setAxisZoomData = React.useCallback((axisId, zoomData) => {
+    setZoomDataCallback(prev => prev.map(prevZoom => {
+      if (prevZoom.axisId !== axisId) {
+        return prevZoom;
+      }
+      return typeof zoomData === 'function' ? zoomData(prevZoom) : zoomData;
+    }));
+  }, [setZoomDataCallback]);
+  const moveZoomRange = React.useCallback((axisId, by) => {
+    setZoomDataCallback(prevZoomData => {
+      return prevZoomData.map(zoom => {
+        if (zoom.axisId !== axisId) {
+          return zoom;
+        }
+        const options = optionsLookup[axisId];
+        if (!options) {
+          return zoom;
+        }
+        let start = zoom.start;
+        let end = zoom.end;
+        if (by > 0) {
+          const span = end - start;
+          end = Math.min(end + by, options.maxEnd);
+          start = end - span;
+        } else {
+          const span = end - start;
+          start = Math.max(start + by, options.minStart);
+          end = start + span;
+        }
+        return _extends({}, zoom, {
+          start,
+          end
+        });
+      });
+    });
+  }, [optionsLookup, setZoomDataCallback]);
+  React.useEffect(() => {
+    return () => {
+      removeIsInteracting.clear();
+    };
+  }, [removeIsInteracting]);
+
+  // Add events
+  usePanOnDrag(pluginData, setZoomDataCallback);
+  usePanOnPressAndDrag(pluginData, setZoomDataCallback);
+  usePanOnWheel(pluginData, setZoomDataCallback);
+  useZoomOnWheel(pluginData, setZoomDataCallback);
+  useZoomOnPinch(pluginData, setZoomDataCallback);
+  useZoomOnTapAndDrag(pluginData, setZoomDataCallback);
+  useZoomOnBrush(pluginData, setZoomDataCallback);
+  useZoomOnDoubleTapReset(pluginData, setZoomDataCallback);
+  const zoom = React.useCallback(step => {
+    setZoomDataCallback(prev => prev.map(zoomData => {
+      const zoomOptions = selectorChartAxisZoomOptionsLookup(store.state, zoomData.axisId);
+      return calculateZoom(zoomData, step, zoomOptions);
+    }));
+  }, [setZoomDataCallback, store]);
+  const zoomIn = React.useCallback(() => zoom(0.1), [zoom]);
+  const zoomOut = React.useCallback(() => zoom(-0.1), [zoom]);
+  return {
+    publicAPI: {
+      setZoomData: setZoomDataCallback,
+      setAxisZoomData,
+      zoomIn,
+      zoomOut
+    },
+    instance: {
+      setZoomData: setZoomDataCallback,
+      setAxisZoomData,
+      moveZoomRange,
+      zoomIn,
+      zoomOut
+    }
+  };
+};
+useChartProZoom.params = {
+  initialZoom: true,
+  onZoomChange: true,
+  zoomData: true,
+  zoomInteractionConfig: true
+};
+useChartProZoom.getInitialState = params => {
+  const {
+    initialZoom,
+    zoomData,
+    defaultizedXAxis,
+    defaultizedYAxis
+  } = params;
+  const optionsLookup = _extends({}, createZoomLookup('x')(defaultizedXAxis), createZoomLookup('y')(defaultizedYAxis));
+  const userZoomData =
+  // eslint-disable-next-line no-nested-ternary
+  zoomData !== undefined ? zoomData : initialZoom !== undefined ? initialZoom : undefined;
+  return {
+    zoom: {
+      zoomData: initializeZoomData(optionsLookup, userZoomData),
+      isInteracting: false,
+      isControlled: zoomData !== undefined,
+      zoomInteractionConfig: initializeZoomInteractionConfig(params.zoomInteractionConfig, optionsLookup)
+    }
+  };
+};

package/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.mts

@@ -0,0 +1,18 @@
+import { type AxisId, type ChartRootSelector } from '@mui/x-charts/internals';
+import { type UseChartProZoomSignature } from "./useChartProZoom.types.mjs";
+export declare const selectorChartZoomState: ChartRootSelector<UseChartProZoomSignature, 'zoom'>;
+export declare const selectorChartZoomIsInteracting: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.mjs").UseChartProZoomState & Partial<{}> & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+}) => boolean;
+export declare const selectorChartZoomIsEnabled: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+}) => boolean;
+export declare const selectorChartAxisZoomData: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+}, axisId: AxisId) => import("@mui/x-charts/internals").ZoomData | undefined;
+export declare const selectorChartCanZoomOut: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.mjs").UseChartProZoomState & Partial<{}> & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+}) => boolean;
+export declare const selectorChartCanZoomIn: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.mjs").UseChartProZoomState & Partial<{}> & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+}) => boolean;

package/internals/plugins/useChartProZoom/useChartProZoom.types.d.mts

@@ -0,0 +1,84 @@
+import { type UseChartSeriesSignature, type ChartPluginSignature, type UseChartCartesianAxisSignature, type UseChartCartesianAxisDefaultizedParameters, type ZoomData, type AxisId, type UseChartBrushSignature } from '@mui/x-charts/internals';
+import { type ZoomInteractionConfig, type DefaultizedZoomInteractionConfig } from "./ZoomInteractionConfig.types.mjs";
+export interface UseChartProZoomParameters {
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: readonly ZoomData[];
+  /**
+   * Callback fired when the zoom has changed.
+   *
+   * @param {ZoomData[]} zoomData Updated zoom data.
+   */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /**
+   * The list of zoom data related to each axis.
+   */
+  zoomData?: readonly ZoomData[];
+  /**
+   * Configuration for zoom interactions.
+   */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+}
+export type UseChartProZoomDefaultizedParameters = UseChartProZoomParameters & UseChartCartesianAxisDefaultizedParameters;
+export interface UseChartProZoomState {
+  zoom: {
+    /**
+     * Whether the user is currently interacting with the chart.
+     * This is useful to disable animations while the user is interacting.
+     */
+    isInteracting: boolean;
+    /**
+     * Mapping of axis id to the zoom data.
+     */
+    zoomData: readonly ZoomData[];
+    /**
+     * Internal information to know if the user control the state or not.
+     */
+    isControlled: boolean;
+    /**
+     * Configuration for zoom interactions.
+     */
+    zoomInteractionConfig: DefaultizedZoomInteractionConfig;
+  };
+}
+export interface UseChartProZoomPublicApi {
+  /**
+   * Set the zoom data state.
+   * @param {ZoomData[] | ((prev: ZoomData[]) => ZoomData[])} value  The new value. Can either be the new zoom data, or an updater function.
+   * @returns {void}
+   */
+  setZoomData: (value: ZoomData[] | ((prev: ZoomData[]) => ZoomData[])) => void;
+  /**
+   * Set the zoom data for an axis.
+   * @param {AxisId} axisId The id of the axis to set the zoom data for.
+   * @param {ZoomData | ((prev: ZoomData) => ZoomData)} value  The new value. Can either be the new zoom data, or an updater function.
+   * @returns {void}
+   */
+  setAxisZoomData: (axisId: AxisId, value: ZoomData | ((prev: ZoomData) => ZoomData)) => void;
+}
+export interface UseChartProZoomInstance extends UseChartProZoomPublicApi {
+  /**
+   * Translate the zoom range (i.e., both start and end) for a specific axis.
+   * @param {AxisId} axisId The id of the axis to move the zoom range for.
+   * @param {number} by The amount to move the zoom range by. Ranges from 0 to 100.
+   */
+  moveZoomRange: (axisId: AxisId, by: number) => void;
+  /**
+   * Zoom in the chart.
+   */
+  zoomIn: () => void;
+  /**
+   * Zoom out the chart.
+   */
+  zoomOut: () => void;
+}
+export type UseChartProZoomSignature = ChartPluginSignature<{
+  params: UseChartProZoomParameters;
+  defaultizedParams: UseChartProZoomDefaultizedParameters;
+  state: UseChartProZoomState;
+  publicAPI: UseChartProZoomPublicApi;
+  instance: UseChartProZoomInstance;
+  dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature, UseChartBrushSignature];
+}>;

package/internals/slots/chartsBaseSlots.d.mts

@@ -0,0 +1,10 @@
+import { type ChartsBaseSlots } from '@mui/x-charts/models';
+import type * as React from 'react';
+import { type ChartBaseDividerProps, type ChartBaseMenuItemProps, type ChartBaseMenuListProps, type ChartBasePopperProps, type ChartBaseTooltipProps } from "./chartBaseSlotProps.mjs";
+export interface ChartsBaseSlotsPro extends ChartsBaseSlots {
+  baseDivider: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip: React.ComponentType<ChartBaseTooltipProps>;
+}

package/models/index.d.mts

@@ -0,0 +1,4 @@
+export * from '@mui/x-charts/models';
+export type { ZoomData, ZoomFilterMode, ZoomOptions, ZoomSliderOptions, ZoomSliderShowTooltip } from '@mui/x-charts/internals';
+export * from "./seriesType/index.mjs";
+export { defaultOnBeforeExport } from "../internals/plugins/useChartProExport/defaults.mjs";

package/models/index.mjs

@@ -0,0 +1,6 @@
+// This re-export-block is automatically generated, to customize, simply remove the block.
+export * from '@mui/x-charts/models';
+// End of re-export-block
+
+export * from "./seriesType/index.mjs";
+export { defaultOnBeforeExport } from "../internals/plugins/useChartProExport/defaults.mjs";

package/models/seriesType/index.d.mts

@@ -0,0 +1 @@
+export * from "./heatmap.mjs";

package/models/seriesType/index.mjs

@@ -0,0 +1 @@
+export * from "./heatmap.mjs";