@mui/x-charts 8.0.0-alpha.1 → 8.0.0-alpha.11

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.d.ts

@@ -0,0 +1,264 @@
+import { ChartRootSelector } from '../../utils/selectors';
+import { UseChartDimensionsSignature } from './useChartDimensions.types';
+export declare const selectorChartDimensionsState: ChartRootSelector<UseChartDimensionsSignature>;
+export declare const selectorChartDrawingArea: ((state: import("../useChartId/useChartId.types").UseChartIdState & import("./useChartDimensions.types").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<{}> & {
+    cacheKey: import("../../models").ChartStateCacheKey;
+}) => {
+    width: number;
+    left: number;
+    right: number;
+    height: number;
+    top: number;
+    bottom: number;
+}) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        left: number;
+        top: number;
+        bottom: number;
+        right: number;
+        width: number;
+        height: number;
+        propsWidth: number | undefined;
+        propsHeight: number | undefined;
+    }) => {
+        width: number;
+        left: number;
+        right: number;
+        height: number;
+        top: number;
+        bottom: number;
+    };
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        left: number;
+        top: number;
+        bottom: number;
+        right: number;
+        width: number;
+        height: number;
+        propsWidth: number | undefined;
+        propsHeight: number | undefined;
+    }) => {
+        width: number;
+        left: number;
+        right: number;
+        height: number;
+        top: number;
+        bottom: number;
+    }) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => {
+        width: number;
+        left: number;
+        right: number;
+        height: number;
+        top: number;
+        bottom: number;
+    };
+    dependencies: [ChartRootSelector<UseChartDimensionsSignature>];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+};
+export declare const selectorChartPropsSize: ((state: import("../useChartId/useChartId.types").UseChartIdState & import("./useChartDimensions.types").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<{}> & {
+    cacheKey: import("../../models").ChartStateCacheKey;
+}) => {
+    width: number | undefined;
+    height: number | undefined;
+}) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        left: number;
+        top: number;
+        bottom: number;
+        right: number;
+        width: number;
+        height: number;
+        propsWidth: number | undefined;
+        propsHeight: number | undefined;
+    }) => {
+        width: number | undefined;
+        height: number | undefined;
+    };
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        left: number;
+        top: number;
+        bottom: number;
+        right: number;
+        width: number;
+        height: number;
+        propsWidth: number | undefined;
+        propsHeight: number | undefined;
+    }) => {
+        width: number | undefined;
+        height: number | undefined;
+    }) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => {
+        width: number | undefined;
+        height: number | undefined;
+    };
+    dependencies: [ChartRootSelector<UseChartDimensionsSignature>];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+};
+export declare const selectorChartContainerSize: ((state: import("../useChartId/useChartId.types").UseChartIdState & import("./useChartDimensions.types").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<{}> & {
+    cacheKey: import("../../models").ChartStateCacheKey;
+}) => {
+    width: number;
+    height: number;
+}) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        left: number;
+        top: number;
+        bottom: number;
+        right: number;
+        width: number;
+        height: number;
+        propsWidth: number | undefined;
+        propsHeight: number | undefined;
+    }) => {
+        width: number;
+        height: number;
+    };
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        left: number;
+        top: number;
+        bottom: number;
+        right: number;
+        width: number;
+        height: number;
+        propsWidth: number | undefined;
+        propsHeight: number | undefined;
+    }) => {
+        width: number;
+        height: number;
+    }) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => {
+        width: number;
+        height: number;
+    };
+    dependencies: [ChartRootSelector<UseChartDimensionsSignature>];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * Get the id attribute of the chart.
+ * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
+ * @returns {string} The id attribute of the chart.
+ */
+export declare const selectorChartHasIntrinsicSize: ((state: import("../useChartId/useChartId.types").UseChartIdState & import("./useChartDimensions.types").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<{}> & {
+    cacheKey: import("../../models").ChartStateCacheKey;
+}) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        width: number;
+        height: number;
+    }) => boolean;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        width: number;
+        height: number;
+    }) => boolean) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => boolean;
+    dependencies: [((state: import("../useChartId/useChartId.types").UseChartIdState & import("./useChartDimensions.types").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<{}> & {
+        cacheKey: import("../../models").ChartStateCacheKey;
+    }) => {
+        width: number;
+        height: number;
+    }) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    } & {
+        resultFunc: (resultFuncArgs_0: {
+            left: number;
+            top: number;
+            bottom: number;
+            right: number;
+            width: number;
+            height: number;
+            propsWidth: number | undefined;
+            propsHeight: number | undefined;
+        }) => {
+            width: number;
+            height: number;
+        };
+        memoizedResultFunc: ((resultFuncArgs_0: {
+            left: number;
+            top: number;
+            bottom: number;
+            right: number;
+            width: number;
+            height: number;
+            propsWidth: number | undefined;
+            propsHeight: number | undefined;
+        }) => {
+            width: number;
+            height: number;
+        }) & {
+            clearCache: () => void;
+            resultsCount: () => number;
+            resetResultsCount: () => void;
+        };
+        lastResult: () => {
+            width: number;
+            height: number;
+        };
+        dependencies: [ChartRootSelector<UseChartDimensionsSignature>];
+        recomputations: () => number;
+        resetRecomputations: () => void;
+        dependencyRecomputations: () => number;
+        resetDependencyRecomputations: () => void;
+    } & {
+        memoize: typeof import("reselect").weakMapMemoize;
+        argsMemoize: typeof import("reselect").weakMapMemoize;
+    }];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+};

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js

@@ -0,0 +1,25 @@
+import { createSelector } from "../../utils/selectors.js";
+export const selectorChartDimensionsState = state => state.dimensions;
+export const selectorChartDrawingArea = createSelector(selectorChartDimensionsState, dimensionsState => ({
+  width: dimensionsState.width,
+  left: dimensionsState.left,
+  right: dimensionsState.right,
+  height: dimensionsState.height,
+  top: dimensionsState.top,
+  bottom: dimensionsState.bottom
+}));
+export const selectorChartPropsSize = createSelector(selectorChartDimensionsState, dimensionsState => ({
+  width: dimensionsState.propsWidth,
+  height: dimensionsState.propsHeight
+}));
+export const selectorChartContainerSize = createSelector(selectorChartDimensionsState, dimensionsState => ({
+  width: dimensionsState.width + dimensionsState.left + dimensionsState.right,
+  height: dimensionsState.height + dimensionsState.top + dimensionsState.bottom
+}));
+
+/**
+ * Get the id attribute of the chart.
+ * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
+ * @returns {string} The id attribute of the chart.
+ */
+export const selectorChartHasIntrinsicSize = createSelector(selectorChartContainerSize, svgSize => svgSize.width > 0 && svgSize.height > 0);

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.d.ts

@@ -0,0 +1,99 @@
+import { ChartPluginSignature } from '../../models';
+export interface ChartMargin {
+    /**
+     * The gap between the left border of the SVG and the drawing area.
+     */
+    left: number;
+    /**
+     * The gap between the top border of the SVG and the drawing area.
+     */
+    top: number;
+    /**
+     * The gap between the bottom border of the SVG and the drawing area.
+     */
+    bottom: number;
+    /**
+     * The gap between the right border of the SVG and the drawing area.
+     */
+    right: number;
+}
+export interface UseChartDimensionsParameters {
+    /**
+     * The width of the chart in px. If not defined, it takes the width of the parent element.
+     */
+    width?: number;
+    /**
+     * The height of the chart in px. If not defined, it takes the height of the parent element.
+     */
+    height?: number;
+    /**
+     * The margin between the SVG and the drawing area.
+     * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+     * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+     */
+    margin?: Partial<ChartMargin>;
+}
+export type UseChartDimensionsDefaultizedParameters = UseChartDimensionsParameters & {
+    margin: ChartMargin;
+};
+export interface UseChartDimensionsState {
+    dimensions: {
+        /**
+         * The gap between the left border of the SVG and the drawing area.
+         */
+        left: number;
+        /**
+         * The gap between the top border of the SVG and the drawing area.
+         */
+        top: number;
+        /**
+         * The gap between the bottom border of the SVG and the drawing area.
+         */
+        bottom: number;
+        /**
+         * The gap between the right border of the SVG and the drawing area.
+         */
+        right: number;
+        /**
+         * The width of the drawing area.
+         */
+        width: number;
+        /**
+         * The height of the drawing area.
+         */
+        height: number;
+        /**
+         * The SVG width in px provided by props.
+         */
+        propsWidth: number | undefined;
+        /**
+         * The SVG height in px provided by props.
+         */
+        propsHeight: number | undefined;
+    };
+}
+export interface UseChartDimensionsInstance {
+    /**
+     * Checks if a point is inside the drawing area.
+     * @param {Object} point The point to check.
+     * @param {number} point.x The x coordinate of the point.
+     * @param {number} point.y The y coordinate of the point.
+     * @param {Object} options The options of the check.
+     * @param {Element} [options.targetElement] The element to check if it is allowed to overflow the drawing area.
+     * @param {'x' | 'y'} [options.direction] The direction to check.
+     * @returns {boolean} `true` if the point is inside the drawing area, `false` otherwise.
+     */
+    isPointInside: (point: {
+        x: number;
+        y: number;
+    }, options?: {
+        targetElement?: Element;
+        direction?: 'x' | 'y';
+    }) => boolean;
+}
+export type UseChartDimensionsSignature = ChartPluginSignature<{
+    params: UseChartDimensionsParameters;
+    defaultizedParams: UseChartDimensionsDefaultizedParameters;
+    state: UseChartDimensionsState;
+    instance: UseChartDimensionsInstance;
+}>;

package/internals/plugins/corePlugins/useChartId/index.d.ts

@@ -0,0 +1,3 @@
+export { useChartId } from './useChartId';
+export type { UseChartIdSignature, UseChartIdParameters, UseChartIdDefaultizedParameters, } from './useChartId.types';
+export * from './useChartId.selectors';

package/internals/plugins/corePlugins/useChartId/index.js

@@ -0,0 +1,2 @@
+export { useChartId } from "./useChartId.js";
+export * from "./useChartId.selectors.js";

package/internals/plugins/corePlugins/useChartId/useChartId.d.ts

@@ -0,0 +1,3 @@
+import { ChartPlugin } from '../../models';
+import { UseChartIdSignature } from './useChartId.types';
+export declare const useChartId: ChartPlugin<UseChartIdSignature>;

package/internals/plugins/corePlugins/useChartId/useChartId.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { createChartDefaultId } from "./useChartId.utils.js";
+export const useChartId = ({
+  params,
+  store
+}) => {
+  React.useEffect(() => {
+    store.update(prevState => {
+      if (params.id === undefined || params.id === prevState.id.providedChartId && prevState.id.chartId !== undefined) {
+        return prevState;
+      }
+      return _extends({}, prevState, {
+        id: _extends({}, prevState.id, {
+          chartId: params.id ?? createChartDefaultId()
+        })
+      });
+    });
+  }, [store, params.id]);
+  return {};
+};
+useChartId.params = {
+  id: true
+};
+useChartId.getInitialState = ({
+  id
+}) => ({
+  id: {
+    chartId: id,
+    providedChartId: id
+  }
+});

package/internals/plugins/corePlugins/useChartId/useChartId.selectors.d.ts

@@ -0,0 +1,36 @@
+import { ChartRootSelector } from '../../utils/selectors';
+import { UseChartIdSignature } from './useChartId.types';
+/**
+ * Get the id attribute of the chart.
+ * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
+ * @returns {string} The id attribute of the chart.
+ */
+export declare const selectorChartId: ((state: import("./useChartId.types").UseChartIdState & import("../useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<{}> & {
+    cacheKey: import("../../models").ChartStateCacheKey;
+}) => string | undefined) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        chartId: string | undefined;
+        providedChartId: string | undefined;
+    }) => string | undefined;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        chartId: string | undefined;
+        providedChartId: string | undefined;
+    }) => string | undefined) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => string | undefined;
+    dependencies: [ChartRootSelector<UseChartIdSignature>];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+};

package/internals/plugins/corePlugins/useChartId/useChartId.selectors.js

@@ -0,0 +1,9 @@
+import { createSelector } from "../../utils/selectors.js";
+const selectorChartIdState = state => state.id;
+
+/**
+ * Get the id attribute of the chart.
+ * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
+ * @returns {string} The id attribute of the chart.
+ */
+export const selectorChartId = createSelector(selectorChartIdState, idState => idState.chartId);

package/internals/plugins/corePlugins/useChartId/useChartId.types.d.ts

@@ -0,0 +1,20 @@
+import { ChartPluginSignature } from '../../models';
+export interface UseChartIdParameters {
+    /**
+     * This prop is used to help implement the accessibility logic.
+     * If you don't provide this prop. It falls back to a randomly generated id.
+     */
+    id?: string | undefined;
+}
+export type UseChartIdDefaultizedParameters = Required<UseChartIdParameters>;
+export interface UseChartIdState {
+    id: {
+        chartId: string | undefined;
+        providedChartId: string | undefined;
+    };
+}
+export type UseChartIdSignature = ChartPluginSignature<{
+    params: UseChartIdParameters;
+    defaultizedParams: UseChartIdDefaultizedParameters;
+    state: UseChartIdState;
+}>;

package/internals/plugins/corePlugins/useChartId/useChartId.utils.d.ts

@@ -0,0 +1 @@
+export declare const createChartDefaultId: () => string;

package/internals/plugins/corePlugins/useChartId/useChartId.utils.js

@@ -0,0 +1,5 @@
+let globalChartDefaultId = 0;
+export const createChartDefaultId = () => {
+  globalChartDefaultId += 1;
+  return `mui-chart-${globalChartDefaultId}`;
+};

package/internals/plugins/corePlugins/useChartSeries/index.d.ts

@@ -0,0 +1,3 @@
+export { useChartSeries } from './useChartSeries';
+export type { UseChartSeriesSignature, UseChartSeriesParameters, UseChartSeriesDefaultizedParameters, ProcessedSeries, } from './useChartSeries.types';
+export * from './useChartSeries.selectors';

package/internals/plugins/corePlugins/useChartSeries/index.js

@@ -0,0 +1,2 @@
+export { useChartSeries } from "./useChartSeries.js";
+export * from "./useChartSeries.selectors.js";

package/internals/plugins/corePlugins/useChartSeries/processSeries.d.ts

@@ -0,0 +1,18 @@
+import { AllSeriesType } from '../../../../models/seriesType';
+import { ChartSeriesType, DatasetType } from '../../../../models/seriesType/config';
+import { ChartSeriesConfig } from '../../models/seriesConfig';
+import { SeriesProcessorResult } from '../../models/seriesConfig/seriesProcessor.types';
+/**
+ * This methods is the interface between what the developer is providing and what components receives
+ * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if some line data are modified
+ * It also add defaultized values such as the ids, colors
+ * @param series The array of series provided by the developer
+ * @param colors The color palette used to defaultize series colors
+ * @returns An object structuring all the series by type.
+ */
+export declare const preprocessSeries: <TSeriesType extends ChartSeriesType>({ series, colors, seriesConfig, dataset, }: {
+    series: AllSeriesType<TSeriesType>[];
+    colors: string[];
+    seriesConfig: ChartSeriesConfig<TSeriesType>;
+    dataset?: DatasetType;
+}) => { [type in TSeriesType]?: SeriesProcessorResult<TSeriesType> | undefined; };

package/{modern/context/SeriesProvider → internals/plugins/corePlugins/useChartSeries}/processSeries.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { defaultizeColor } from "../../internals/defaultizeColor.js";
+import { defaultizeColor } from "../../../defaultizeColor.js";
 /**
  * This methods is the interface between what the developer is providing and what components receives
  * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if some line data are modified
@@ -11,11 +11,14 @@ import { defaultizeColor } from "../../internals/defaultizeColor.js";
 export const preprocessSeries = ({
   series,
   colors,
-  seriesFormatters,
+  seriesConfig,
   dataset
 }) => {
   // Group series by type
   const seriesGroups = {};
+  // Notice the line about uses `ChartSeriesType` instead of TSeriesType.
+  // That's probably because the series.type is not propagated from the generic but hardcoded in the config.
+
   series.forEach((seriesData, seriesIndex) => {
     const {
       id = `auto-generated-id-${seriesIndex}`,
@@ -35,13 +38,13 @@ export const preprocessSeries = ({
     }, defaultizeColor(seriesData, seriesIndex, colors));
     seriesGroups[type].seriesOrder.push(id);
   });
-  const formattedSeries = {};
+  const processedSeries = {};
   // Apply formatter on a type group
-  Object.keys(seriesFormatters).forEach(type => {
+  Object.keys(seriesConfig).forEach(type => {
     const group = seriesGroups[type];
     if (group !== undefined) {
-      formattedSeries[type] = seriesFormatters[type]?.(group, dataset) ?? seriesGroups[type];
+      processedSeries[type] = seriesConfig[type]?.seriesProcessor?.(group, dataset) ?? seriesGroups[type];
     }
   });
-  return formattedSeries;
+  return processedSeries;
 };

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.d.ts

@@ -0,0 +1,3 @@
+import { ChartPlugin } from '../../models';
+import { UseChartSeriesSignature } from './useChartSeries.types';
+export declare const useChartSeries: ChartPlugin<UseChartSeriesSignature>;

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.js

@@ -0,0 +1,72 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { rainbowSurgePalette } from "../../../../colorPalettes/index.js";
+import { preprocessSeries } from "./processSeries.js";
+export const useChartSeries = ({
+  params,
+  store,
+  seriesConfig
+}) => {
+  const {
+    series,
+    dataset,
+    theme,
+    colors
+  } = params;
+
+  // The effect do not track any value defined synchronously during the 1st render by hooks called after `useChartSeries`
+  // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    store.update(prev => _extends({}, prev, {
+      series: _extends({}, prev.series, {
+        processedSeries: preprocessSeries({
+          series,
+          colors: typeof colors === 'function' ? colors(theme) : colors,
+          seriesConfig,
+          dataset
+        })
+      })
+    }));
+  }, [colors, dataset, series, theme, seriesConfig, store]);
+  return {};
+};
+useChartSeries.params = {
+  dataset: true,
+  series: true,
+  colors: true,
+  theme: true
+};
+const EMPTY_ARRAY = [];
+useChartSeries.getDefaultizedParams = ({
+  params
+}) => _extends({
+  series: EMPTY_ARRAY
+}, params, {
+  colors: params.colors ?? rainbowSurgePalette,
+  theme: params.theme ?? 'light'
+});
+useChartSeries.getInitialState = ({
+  series = [],
+  colors,
+  theme,
+  dataset
+}, _, seriesConfig) => {
+  return {
+    series: {
+      seriesConfig,
+      processedSeries: preprocessSeries({
+        series,
+        colors: typeof colors === 'function' ? colors(theme) : colors,
+        seriesConfig,
+        dataset
+      })
+    }
+  };
+};