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

package/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 };

package/context/CartesianProviderPro/createAxisFilterMapper.d.ts

@@ -1,13 +0,0 @@
-import { FormattedSeries, ExtremumGettersConfig, ExtremumFilter, ZoomAxisFilters, GetZoomAxisFilters } from '@mui/x-charts/internals';
-import { ScaleName, AxisConfig } from '@mui/x-charts/models';
-import { ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
-import { ZoomData } from '../ZoomProvider';
-type CreateAxisFilterMapperParams = {
-    zoomData: ZoomData[];
-    extremumGetter: ExtremumGettersConfig;
-    formattedSeries: FormattedSeries;
-    direction: 'x' | 'y';
-};
-export declare const createAxisFilterMapper: ({ zoomData, extremumGetter, formattedSeries, direction }: CreateAxisFilterMapperParams) => (axis: AxisConfig<ScaleName, any, ChartsAxisProps>, axisIndex: number) => ExtremumFilter | null;
-export declare const createGetAxisFilters: (filters: ZoomAxisFilters) => GetZoomAxisFilters;
-export {};

package/context/CartesianProviderPro/createAxisFilterMapper.js

@@ -1,60 +0,0 @@
-import { getAxisExtremum, isDefined, getScale } from '@mui/x-charts/internals';
-export 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 = 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] = 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;
-  };
-};
-export 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);
-    return data.every(f => f(value, dataIndex));
-  };
-};

package/context/CartesianProviderPro/index.d.ts

@@ -1 +0,0 @@
-export * from './CartesianProviderPro';

package/context/CartesianProviderPro/index.js

@@ -1 +0,0 @@
-export * from "./CartesianProviderPro.js";

package/context/ChartDataProviderPro/ChartDataProviderPro.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { ChartDataProviderProps } from '@mui/x-charts/internals';
-import { ZoomProps } from '../ZoomProvider';
-export interface ChartDataProviderProProps extends ChartDataProviderProps, ZoomProps {
-}
-declare function ChartDataProviderPro(props: ChartDataProviderProProps): React.JSX.Element;
-export { ChartDataProviderPro };

package/context/ChartDataProviderPro/ChartDataProviderPro.js

@@ -1,50 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { DrawingAreaProvider, PluginProvider, SeriesProvider, AnimationProvider, SizeProvider, ChartProvider } from '@mui/x-charts/internals';
-import { HighlightedProvider, ZAxisContextProvider } from '@mui/x-charts/context';
-import { useLicenseVerifier } from '@mui/x-license/useLicenseVerifier';
-import { getReleaseInfo } from "../../internals/utils/releaseInfo.js";
-import { CartesianProviderPro } from "../CartesianProviderPro/index.js";
-import { ZoomProvider } from "../ZoomProvider/index.js";
-import { useChartContainerProProps } from "./useChartDataProviderProProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const releaseInfo = getReleaseInfo();
-function ChartDataProviderPro(props) {
-  const {
-    zoomProviderProps,
-    drawingAreaProviderProps,
-    seriesProviderProps,
-    zAxisContextProps,
-    highlightedProviderProps,
-    cartesianProviderProps,
-    sizeProviderProps,
-    pluginProviderProps,
-    animationProviderProps,
-    children
-  } = useChartContainerProProps(props);
-  useLicenseVerifier('x-charts-pro', releaseInfo);
-  return /*#__PURE__*/_jsx(ChartProvider, {
-    children: /*#__PURE__*/_jsx(SizeProvider, _extends({}, sizeProviderProps, {
-      children: /*#__PURE__*/_jsx(DrawingAreaProvider, _extends({}, drawingAreaProviderProps, {
-        children: /*#__PURE__*/_jsx(AnimationProvider, _extends({}, animationProviderProps, {
-          children: /*#__PURE__*/_jsx(PluginProvider, _extends({}, pluginProviderProps, {
-            children: /*#__PURE__*/_jsx(ZoomProvider, _extends({}, zoomProviderProps, {
-              children: /*#__PURE__*/_jsx(SeriesProvider, _extends({}, seriesProviderProps, {
-                children: /*#__PURE__*/_jsx(CartesianProviderPro, _extends({}, cartesianProviderProps, {
-                  children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {
-                    children: /*#__PURE__*/_jsx(HighlightedProvider, _extends({}, highlightedProviderProps, {
-                      children: children
-                    }))
-                  }))
-                }))
-              }))
-            }))
-          }))
-        }))
-      }))
-    }))
-  });
-}
-export { ChartDataProviderPro };

package/context/ChartDataProviderPro/index.d.ts

@@ -1 +0,0 @@
-export * from './ChartDataProviderPro';

package/context/ChartDataProviderPro/index.js

@@ -1 +0,0 @@
-export * from "./ChartDataProviderPro.js";

package/context/ChartDataProviderPro/useChartDataProviderProProps.d.ts

@@ -1,14 +0,0 @@
-import { ZoomProviderProps } from '../ZoomProvider';
-import type { ChartDataProviderProProps } from './ChartDataProviderPro';
-export declare const useChartContainerProProps: (props: ChartDataProviderProProps) => {
-    zoomProviderProps: Omit<ZoomProviderProps, "children">;
-    children: import("react").ReactNode;
-    drawingAreaProviderProps: Omit<import("@mui/x-charts/internals").DrawingAreaProviderProps, "children">;
-    pluginProviderProps: Omit<import("@mui/x-charts/internals").PluginProviderProps, "children">;
-    seriesProviderProps: Omit<import("@mui/x-charts/internals").SeriesProviderProps, "children">;
-    cartesianProviderProps: Omit<import("@mui/x-charts/internals").CartesianProviderProps, "children">;
-    zAxisContextProps: Omit<import("@mui/x-charts").ZAxisContextProviderProps, "children">;
-    highlightedProviderProps: Omit<import("@mui/x-charts").HighlightedProviderProps, "children">;
-    sizeProviderProps: Omit<import("@mui/x-charts/internals").SizeProviderProps, "children">;
-    animationProviderProps: Omit<import("@mui/x-charts/internals").AnimationProviderProps, "children">;
-};

package/context/ChartDataProviderPro/useChartDataProviderProProps.js

@@ -1,43 +0,0 @@
-'use client';
-
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["zoom", "onZoomChange"];
-import { useChartDataProviderProps } from '@mui/x-charts/internals';
-export const useChartContainerProProps = props => {
-  const {
-      zoom,
-      onZoomChange
-    } = props,
-    baseProps = _objectWithoutPropertiesLoose(props, _excluded);
-  const {
-    children,
-    drawingAreaProviderProps,
-    seriesProviderProps,
-    cartesianProviderProps,
-    zAxisContextProps,
-    highlightedProviderProps,
-    sizeProviderProps,
-    pluginProviderProps,
-    animationProviderProps,
-    xAxis,
-    yAxis
-  } = useChartDataProviderProps(baseProps);
-  const zoomProviderProps = {
-    zoom,
-    onZoomChange,
-    xAxis,
-    yAxis
-  };
-  return {
-    zoomProviderProps,
-    children,
-    drawingAreaProviderProps,
-    pluginProviderProps,
-    seriesProviderProps,
-    cartesianProviderProps,
-    zAxisContextProps,
-    highlightedProviderProps,
-    sizeProviderProps,
-    animationProviderProps
-  };
-};

package/context/ZoomProvider/Zoom.types.d.ts

@@ -1,144 +0,0 @@
-import { AxisId } from '@mui/x-charts/internals';
-export type ZoomProviderProps = {
-    children: React.ReactNode;
-    /**
-     * The configuration of the x-axes.
-     * If not provided, a default axis config is used.
-     * An array of [[AxisConfig]] objects.
-     */
-    xAxis?: AxisConfigForZoom[];
-    /**
-     * The configuration of the y-axes.
-     * If not provided, a default axis config is used.
-     * An array of [[AxisConfig]] objects.
-     */
-    yAxis?: AxisConfigForZoom[];
-} & ZoomProps;
-/**
- * Represents the state of the ZoomProvider.
- */
-export type ZoomState = {
-    /**
-     * Whether zooming is enabled.
-     */
-    isZoomEnabled: boolean;
-    /**
-     * Whether panning is enabled.
-     */
-    isPanEnabled: boolean;
-    /**
-     * The zoom options for each axis.
-     */
-    options: Record<AxisId, DefaultizedZoomOptions>;
-    /**
-     * The zoom data for each axis
-     * @default []
-     */
-    zoomData: ZoomData[];
-    /**
-     * Set the zoom data for each axis.
-     * @param {ZoomData[]} zoomData The new zoom data.
-     */
-    setZoomData: (zoomData: ZoomData[] | ((zoomData: ZoomData[]) => ZoomData[])) => void;
-    /**
-     * Whether the user is currently interacting with the chart.
-     * This is useful to prevent animations from running while the user is interacting.
-     */
-    isInteracting: boolean;
-    /**
-     * Set the interaction state of the chart.
-     * @param {boolean} isInteracting The new interaction state.
-     */
-    setIsInteracting: (isInteracting: boolean) => void;
-};
-export type ZoomOptions = {
-    /**
-     * The starting percentage of the zoom range. In the range of 0 to 100.
-     *
-     * @default 0
-     */
-    minStart?: number;
-    /**
-     * The ending percentage of the zoom range. In the range of 0 to 100.
-     *
-     * @default 100
-     */
-    maxEnd?: number;
-    /**
-     * The step size of the zooming function. Defines the granularity of the zoom.
-     *
-     * @default 5
-     */
-    step?: number;
-    /**
-     * Restricts the minimum span size in the range of 0 to 100.
-     *
-     * If the span size is smaller than the minSpan, the span will be resized to the minSpan.
-     *
-     * @default 10
-     */
-    minSpan?: number;
-    /**
-     * Restricts the maximum span size in the range of 0 to 100.
-     *
-     * If the span size is larger than the maxSpan, the span will be resized to the maxSpan.
-     *
-     * @default 100
-     */
-    maxSpan?: number;
-    /**
-     * Set to `false` to disable panning. Useful when you want to pan programmatically,
-     * or to show only a specific section of the chart.
-     *
-     * @default true
-     */
-    panning?: boolean;
-    /**
-     * Defines how to filter the axis data when it is outside of the zoomed range of this axis.
-     *
-     * - `keep`: The data outside the zoomed range is kept. And the other axes will stay the same.
-     * - `discard`: The data outside the zoomed range is discarded for the other axes.
-     *    The other axes will be adjusted to fit the zoomed range.
-     *
-     * @default 'keep'
-     */
-    filterMode?: 'discard' | 'keep';
-};
-export type ZoomData = {
-    /**
-     * The starting percentage of the zoom range. In the range of 0 to 100.
-     *
-     * @default 0
-     */
-    start: number;
-    /**
-     * The ending percentage of the zoom range. In the range of 0 to 100.
-     *
-     * @default 100
-     */
-    end: number;
-    /**
-     * The axis id that the zoom data belongs to.
-     */
-    axisId: AxisId;
-};
-export type ZoomProps = {
-    /**
-     * The list of zoom data related to each axis.
-     */
-    zoom?: ZoomData[];
-    /**
-     * Callback fired when the zoom has changed.
-     *
-     * @param {ZoomData[]} zoomData Updated zoom data.
-     */
-    onZoomChange?: (zoomData: ZoomData[] | ((zoomData: ZoomData[]) => ZoomData[])) => void;
-};
-export type DefaultizedZoomOptions = Required<ZoomOptions> & {
-    axisId: AxisId;
-    axisDirection: 'x' | 'y';
-};
-export type AxisConfigForZoom = {
-    id: AxisId;
-    zoom?: ZoomOptions | boolean;
-};

package/context/ZoomProvider/ZoomContext.d.ts

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import { Initializable } from '@mui/x-charts/internals';
-import { ZoomState } from './Zoom.types';
-export declare const ZoomContext: React.Context<Initializable<ZoomState>>;

package/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/context/ZoomProvider/ZoomProvider.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-import { ZoomProviderProps } from './Zoom.types';
-export declare function ZoomProvider({ children, xAxis, yAxis, zoom, onZoomChange }: ZoomProviderProps): React.JSX.Element;

package/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/context/ZoomProvider/ZoomSetup.d.ts

@@ -1,9 +0,0 @@
-/**
- * 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/)
- */
-declare function ZoomSetup(): null;
-export { ZoomSetup };

package/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/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;