@mui/x-charts 8.0.0-alpha.0 → 8.0.0-alpha.2

package/context/ChartDataProvider/useChartDataProviderProps.d.ts

@@ -1,23 +1,19 @@
-import * as React from 'react';
-import type { DrawingProviderProps } from '../DrawingProvider';
+import type { DrawingAreaProviderProps } from '../DrawingAreaProvider';
 import type { CartesianProviderProps } from '../CartesianProvider';
 import type { SeriesProviderProps } from '../SeriesProvider';
 import type { ZAxisContextProviderProps } from '../ZAxisContextProvider';
 import type { ChartDataProviderProps } from './ChartDataProvider';
-import { HighlightedProviderProps } from '..';
-import { ChartsSurfaceProps } from '../../ChartsSurface';
+import { HighlightedProviderProps } from '../HighlightedProvider';
 import { PluginProviderProps } from '../PluginProvider';
 import { AnimationProviderProps } from '../AnimationProvider';
-export declare const useChartDataProviderProps: (props: ChartDataProviderProps, ref: React.Ref<SVGSVGElement>) => {
-    children: React.ReactNode;
-    drawingProviderProps: Omit<DrawingProviderProps, "children">;
+import { SizeProviderProps } from '../SizeProvider';
+export declare const useChartDataProviderProps: (props: ChartDataProviderProps) => {
+    children: import("react").ReactNode;
+    drawingAreaProviderProps: Omit<DrawingAreaProviderProps, "children">;
     seriesProviderProps: Omit<SeriesProviderProps, "children">;
     cartesianProviderProps: Omit<CartesianProviderProps, "children">;
     zAxisContextProps: Omit<ZAxisContextProviderProps, "children">;
     highlightedProviderProps: Omit<HighlightedProviderProps, "children">;
-    chartsSurfaceProps: ChartsSurfaceProps & {
-        ref: any;
-    };
     pluginProviderProps: Omit<PluginProviderProps, "children">;
     animationProviderProps: Omit<AnimationProviderProps, "children">;
     xAxis: {
@@ -31,30 +27,28 @@ export declare const useChartDataProviderProps: (props: ChartDataProviderProps,
         valueFormatter?: ((value: any, context: import("../../internals").AxisValueFormatterContext) => string) | undefined;
         dataKey?: string | undefined;
         sx?: import("@mui/system").SxProps | undefined;
-        classes?: Partial<import("../..").ChartsAxisClasses> | undefined;
         tickMaxStep?: number | undefined;
         tickMinStep?: number | undefined;
         tickNumber?: number | undefined;
         disableLine?: boolean | undefined;
         disableTicks?: boolean | undefined;
-        tickFontSize?: number | undefined;
-        tickLabelStyle?: import("../..").ChartsTextProps["style"];
-        labelStyle?: import("../..").ChartsTextProps["style"];
-        tickLabelInterval?: ("auto" | ((value: any, index: number) => boolean)) | undefined;
-        labelFontSize?: number | undefined;
+        tickLabelStyle?: import("../..").ChartsTextStyle | undefined;
+        labelStyle?: import("../..").ChartsTextStyle | undefined;
+        tickLabelInterval?: "auto" | ((value: any, index: number) => boolean) | undefined;
         tickSize?: number | undefined;
+        classes?: Partial<import("../..").ChartsAxisClasses> | undefined;
         slots?: Partial<import("../../internals").ChartsAxisSlots> | undefined;
         slotProps?: Partial<import("../../internals").ChartsAxisSlotProps> | undefined;
-        tickInterval?: ("auto" | ((value: any, index: number) => boolean) | any[]) | undefined;
-        tickPlacement?: ("start" | "end" | "middle" | "extremities") | undefined;
-        tickLabelPlacement?: ("middle" | "tick") | undefined;
+        tickInterval?: "auto" | ((value: any, index: number) => boolean) | any[] | undefined;
+        tickPlacement?: "start" | "end" | "middle" | "extremities" | undefined;
+        tickLabelPlacement?: "middle" | "tick" | undefined;
         scaleType?: "linear" | "time" | "log" | "band" | "point" | "pow" | "sqrt" | "utc" | undefined;
         colorMap?: import("../../models/colorMapping").ContinuousColorConfig<number | Date> | import("../../models/colorMapping").PiecewiseColorConfig<number | Date> | import("../../models/colorMapping").OrdinalColorConfig<string | number | Date> | undefined;
         hideTooltip?: boolean | undefined;
-        domainLimit?: ("nice" | "strict" | ((min: number, max: number) => {
+        domainLimit?: "nice" | "strict" | ((min: number, max: number) => {
             min: number;
             max: number;
-        })) | undefined;
+        }) | undefined;
         id: import("../../internals").AxisId;
     }[];
     yAxis: {
@@ -68,30 +62,29 @@ export declare const useChartDataProviderProps: (props: ChartDataProviderProps,
         valueFormatter?: ((value: any, context: import("../../internals").AxisValueFormatterContext) => string) | undefined;
         dataKey?: string | undefined;
         sx?: import("@mui/system").SxProps | undefined;
-        classes?: Partial<import("../..").ChartsAxisClasses> | undefined;
         tickMaxStep?: number | undefined;
         tickMinStep?: number | undefined;
         tickNumber?: number | undefined;
         disableLine?: boolean | undefined;
         disableTicks?: boolean | undefined;
-        tickFontSize?: number | undefined;
-        tickLabelStyle?: import("../..").ChartsTextProps["style"];
-        labelStyle?: import("../..").ChartsTextProps["style"];
-        tickLabelInterval?: ("auto" | ((value: any, index: number) => boolean)) | undefined;
-        labelFontSize?: number | undefined;
+        tickLabelStyle?: import("../..").ChartsTextStyle | undefined;
+        labelStyle?: import("../..").ChartsTextStyle | undefined;
+        tickLabelInterval?: "auto" | ((value: any, index: number) => boolean) | undefined;
         tickSize?: number | undefined;
+        classes?: Partial<import("../..").ChartsAxisClasses> | undefined;
         slots?: Partial<import("../../internals").ChartsAxisSlots> | undefined;
         slotProps?: Partial<import("../../internals").ChartsAxisSlotProps> | undefined;
-        tickInterval?: ("auto" | ((value: any, index: number) => boolean) | any[]) | undefined;
-        tickPlacement?: ("start" | "end" | "middle" | "extremities") | undefined;
-        tickLabelPlacement?: ("middle" | "tick") | undefined;
+        tickInterval?: "auto" | ((value: any, index: number) => boolean) | any[] | undefined;
+        tickPlacement?: "start" | "end" | "middle" | "extremities" | undefined;
+        tickLabelPlacement?: "middle" | "tick" | undefined;
         scaleType?: "linear" | "time" | "log" | "band" | "point" | "pow" | "sqrt" | "utc" | undefined;
         colorMap?: import("../../models/colorMapping").ContinuousColorConfig<number | Date> | import("../../models/colorMapping").PiecewiseColorConfig<number | Date> | import("../../models/colorMapping").OrdinalColorConfig<string | number | Date> | undefined;
         hideTooltip?: boolean | undefined;
-        domainLimit?: ("nice" | "strict" | ((min: number, max: number) => {
+        domainLimit?: "nice" | "strict" | ((min: number, max: number) => {
             min: number;
             max: number;
-        })) | undefined;
+        }) | undefined;
         id: import("../../internals").AxisId;
     }[];
+    sizeProviderProps: Omit<SizeProviderProps, "children">;
 };

package/context/ChartDataProvider/useChartDataProviderProps.js

@@ -1,41 +1,26 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["width", "height", "series", "margin", "xAxis", "yAxis", "zAxis", "colors", "dataset", "sx", "title", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "children", "skipAnimation"];
-import * as React from 'react';
-import useForkRef from '@mui/utils/useForkRef';
 import { useDefaultizeAxis } from "./useDefaultizeAxis.js";
-export const useChartDataProviderProps = (props, ref) => {
+export const useChartDataProviderProps = props => {
   const {
-      width,
-      height,
-      series,
-      margin,
-      xAxis,
-      yAxis,
-      zAxis,
-      colors,
-      dataset,
-      sx,
-      title,
-      desc,
-      disableAxisListener,
-      highlightedItem,
-      onHighlightChange,
-      plugins,
-      children,
-      skipAnimation
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const svgRef = React.useRef(null);
-  const chartSurfaceRef = useForkRef(ref, svgRef);
-  const [defaultizedXAxis, defaultizedYAxis] = useDefaultizeAxis(xAxis, yAxis, dataset);
-  const drawingProviderProps = {
     width,
     height,
+    series,
     margin,
-    svgRef
+    xAxis,
+    yAxis,
+    zAxis,
+    colors,
+    dataset,
+    highlightedItem,
+    onHighlightChange,
+    plugins,
+    children,
+    skipAnimation
+  } = props;
+  const [defaultizedXAxis, defaultizedYAxis] = useDefaultizeAxis(xAxis, yAxis, dataset);
+  const drawingAreaProviderProps = {
+    margin
   };
   const animationProviderProps = {
     skipAnimation
@@ -61,26 +46,21 @@ export const useChartDataProviderProps = (props, ref) => {
     highlightedItem,
     onHighlightChange
   };
-  const chartsSurfaceProps = _extends({}, other, {
+  const sizeProviderProps = {
     width,
-    height,
-    ref: chartSurfaceRef,
-    sx,
-    title,
-    desc,
-    disableAxisListener
-  });
+    height
+  };
   return {
     children,
-    drawingProviderProps,
+    drawingAreaProviderProps,
     seriesProviderProps,
     cartesianProviderProps,
     zAxisContextProps,
     highlightedProviderProps,
-    chartsSurfaceProps,
     pluginProviderProps,
     animationProviderProps,
     xAxis: defaultizedXAxis,
-    yAxis: defaultizedYAxis
+    yAxis: defaultizedYAxis,
+    sizeProviderProps
   };
 };

package/context/ChartDataProvider/useDefaultizeAxis.d.ts

@@ -13,29 +13,27 @@ export declare const useDefaultizeAxis: (inXAxis: MakeOptional<AxisConfig<ScaleN
     valueFormatter?: ((value: any, context: import("../../internals").AxisValueFormatterContext) => string) | undefined;
     dataKey?: string | undefined;
     sx?: import("@mui/system").SxProps | undefined;
-    classes?: Partial<import("../..").ChartsAxisClasses> | undefined;
     tickMaxStep?: number | undefined;
     tickMinStep?: number | undefined;
     tickNumber?: number | undefined;
     disableLine?: boolean | undefined;
     disableTicks?: boolean | undefined;
-    tickFontSize?: number | undefined;
-    tickLabelStyle?: import("../..").ChartsTextProps["style"];
-    labelStyle?: import("../..").ChartsTextProps["style"];
-    tickLabelInterval?: ("auto" | ((value: any, index: number) => boolean)) | undefined;
-    labelFontSize?: number | undefined;
+    tickLabelStyle?: import("../..").ChartsTextStyle | undefined;
+    labelStyle?: import("../..").ChartsTextStyle | undefined;
+    tickLabelInterval?: "auto" | ((value: any, index: number) => boolean) | undefined;
     tickSize?: number | undefined;
+    classes?: Partial<import("../..").ChartsAxisClasses> | undefined;
     slots?: Partial<import("../../internals").ChartsAxisSlots> | undefined;
     slotProps?: Partial<import("../../internals").ChartsAxisSlotProps> | undefined;
-    tickInterval?: ("auto" | ((value: any, index: number) => boolean) | any[]) | undefined;
-    tickPlacement?: ("start" | "end" | "middle" | "extremities") | undefined;
-    tickLabelPlacement?: ("middle" | "tick") | undefined;
+    tickInterval?: "auto" | ((value: any, index: number) => boolean) | any[] | undefined;
+    tickPlacement?: "start" | "end" | "middle" | "extremities" | undefined;
+    tickLabelPlacement?: "middle" | "tick" | undefined;
     scaleType?: "linear" | "time" | "log" | "band" | "point" | "pow" | "sqrt" | "utc" | undefined;
     colorMap?: import("../../models/colorMapping").ContinuousColorConfig<number | Date> | import("../../models/colorMapping").PiecewiseColorConfig<number | Date> | import("../../models/colorMapping").OrdinalColorConfig<string | number | Date> | undefined;
     hideTooltip?: boolean | undefined;
-    domainLimit?: ("nice" | "strict" | ((min: number, max: number) => {
+    domainLimit?: "nice" | "strict" | ((min: number, max: number) => {
         min: number;
         max: number;
-    })) | undefined;
+    }) | undefined;
     id: import("../../internals").AxisId;
 }[][];

package/context/ChartProvider/ChartContext.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { ChartContextValue } from './ChartProvider.types';
+/**
+ * @ignore - internal component.
+ */
+export declare const ChartContext: React.Context<ChartContextValue<any> | null>;

package/context/ChartProvider/ChartContext.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+/**
+ * @ignore - internal component.
+ */
+export const ChartContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== 'production') {
+  ChartContext.displayName = 'ChartContext';
+}

package/context/ChartProvider/ChartProvider.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { ChartProviderProps } from './ChartProvider.types';
+declare function ChartProvider(props: ChartProviderProps): React.JSX.Element;
+export { ChartProvider };

package/context/ChartProvider/ChartProvider.js

@@ -0,0 +1,19 @@
+'use client';
+
+import * as React from 'react';
+import { useCharts } from "../../internals/store/useCharts.js";
+import { ChartContext } from "./ChartContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function ChartProvider(props) {
+  const {
+    children
+  } = props;
+  const {
+    contextValue
+  } = useCharts([], {});
+  return /*#__PURE__*/_jsx(ChartContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}
+export { ChartProvider };

package/context/ChartProvider/ChartProvider.types.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { ChartAnyPluginSignature, ChartInstance, ChartPublicAPI } from '../../internals/plugins/models';
+import { ChartStore } from '../../internals/plugins/utils/ChartStore';
+export type ChartContextValue<TSignatures extends readonly ChartAnyPluginSignature[], TOptionalSignatures extends readonly ChartAnyPluginSignature[] = []> = {
+    /**
+     * And object with all the methods needed to interact with the chart.
+     */
+    instance: ChartInstance<TSignatures, TOptionalSignatures>;
+    /**
+     * A subset of the `instance` method that are exposed to the developers.
+     */
+    publicAPI: ChartPublicAPI<TSignatures, TOptionalSignatures>;
+    /**
+     * The internal state of the chart.
+     */
+    store: ChartStore<TSignatures>;
+    /**
+     * The ref to the <svg />.
+     */
+    svgRef: React.RefObject<SVGSVGElement>;
+};
+export interface ChartProviderProps {
+    children: React.ReactNode;
+}

package/context/ChartProvider/ChartProvider.types.js

@@ -0,0 +1 @@
+export {};

package/context/ChartProvider/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ChartProvider';
+export * from './ChartProvider.types';
+export * from './useChartContext';

package/context/ChartProvider/index.js

@@ -0,0 +1,3 @@
+export * from "./ChartProvider.js";
+export * from "./ChartProvider.types.js";
+export * from "./useChartContext.js";

package/context/ChartProvider/useChartContext.d.ts

@@ -0,0 +1,3 @@
+import { ChartAnyPluginSignature } from '../../internals/plugins/models';
+import { ChartContextValue } from './ChartProvider.types';
+export declare const useChartContext: <TSignatures extends readonly ChartAnyPluginSignature[], TOptionalSignatures extends readonly ChartAnyPluginSignature[] = []>() => ChartContextValue<TSignatures, TOptionalSignatures>;

package/context/ChartProvider/useChartContext.js

@@ -0,0 +1,11 @@
+'use client';
+
+import * as React from 'react';
+import { ChartContext } from "./ChartContext.js";
+export const useChartContext = () => {
+  const context = React.useContext(ChartContext);
+  if (context == null) {
+    throw new Error(['MUI X: Could not find the Chart context.', 'It looks like you rendered your component outside of a ChartDataProvider.', 'This can also happen if you are bundling multiple versions of the library.'].join('\n'));
+  }
+  return context;
+};

package/context/{DrawingProvider.d.ts → DrawingAreaProvider/DrawingArea.types.d.ts}

@@ -1,14 +1,12 @@
 import * as React from 'react';
-import { LayoutConfig } from '../models/layout';
-import { Initializable } from './context.types';
-export interface DrawingProviderProps extends LayoutConfig {
+import { LayoutConfig } from '../../models';
+export interface DrawingAreaProviderProps extends Pick<LayoutConfig, 'margin'> {
     children: React.ReactNode;
-    svgRef: React.RefObject<SVGSVGElement>;
 }
 /**
  * Defines the area in which it is possible to draw the charts.
  */
-export type DrawingArea = {
+export type DrawingAreaState = {
     /**
      * The gap between the left border of the SVG and the drawing area.
      */
@@ -51,12 +49,3 @@ export type DrawingArea = {
         direction?: 'x' | 'y';
     }) => boolean;
 };
-export declare const DrawingContext: React.Context<DrawingArea & {
-    /**
-     * A random id used to distinguish each chart on the same page.
-     */
-    chartId: string;
-}>;
-export type SvgContextState = React.RefObject<SVGSVGElement>;
-export declare const SvgContext: React.Context<Initializable<SvgContextState>>;
-export declare function DrawingProvider(props: DrawingProviderProps): React.JSX.Element;

package/context/DrawingAreaProvider/DrawingArea.types.js

@@ -0,0 +1 @@
+export {};

package/context/DrawingAreaProvider/DrawingAreaContext.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { DrawingAreaState } from './DrawingArea.types';
+export declare const DrawingAreaContext: React.Context<DrawingAreaState>;

package/context/DrawingAreaProvider/DrawingAreaContext.js

@@ -0,0 +1,15 @@
+'use client';
+
+import * as React from 'react';
+export const DrawingAreaContext = /*#__PURE__*/React.createContext({
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  height: 300,
+  width: 400,
+  isPointInside: () => false
+});
+if (process.env.NODE_ENV !== 'production') {
+  DrawingAreaContext.displayName = 'DrawingContext';
+}

package/context/DrawingAreaProvider/DrawingAreaProvider.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { DrawingAreaProviderProps } from './DrawingArea.types';
+export declare function DrawingAreaProvider(props: DrawingAreaProviderProps): React.JSX.Element;

package/{modern/context/DrawingProvider.js → context/DrawingAreaProvider/DrawingAreaProvider.js}

@@ -3,42 +3,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useId from '@mui/utils/useId';
-import useChartDimensions from "../hooks/useChartDimensions.js";
-
-/**
- * Defines the area in which it is possible to draw the charts.
- */
+import useChartDimensions from "../../hooks/useChartDimensions.js";
+import { DrawingAreaContext } from "./DrawingAreaContext.js";
+import { useSize } from "../SizeProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const DrawingContext = /*#__PURE__*/React.createContext({
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0,
-  height: 300,
-  width: 400,
-  chartId: '',
-  isPointInside: () => false
-});
-if (process.env.NODE_ENV !== 'production') {
-  DrawingContext.displayName = 'DrawingContext';
-}
-export const SvgContext = /*#__PURE__*/React.createContext({
-  isInitialized: false,
-  data: {
-    current: null
-  }
-});
-if (process.env.NODE_ENV !== 'production') {
-  SvgContext.displayName = 'SvgContext';
-}
-export function DrawingProvider(props) {
+export function DrawingAreaProvider(props) {
   const {
-    width,
-    height,
     margin,
-    svgRef,
     children
   } = props;
+  const {
+    width,
+    height
+  } = useSize();
   const drawingArea = useChartDimensions(width, height, margin);
   const chartId = useId();
   const isPointInside = React.useCallback(({
@@ -64,15 +41,8 @@ export function DrawingProvider(props) {
   }, drawingArea, {
     isPointInside
   }), [chartId, drawingArea, isPointInside]);
-  const refValue = React.useMemo(() => ({
-    isInitialized: true,
-    data: svgRef
-  }), [svgRef]);
-  return /*#__PURE__*/_jsx(SvgContext.Provider, {
-    value: refValue,
-    children: /*#__PURE__*/_jsx(DrawingContext.Provider, {
-      value: value,
-      children: children
-    })
+  return /*#__PURE__*/_jsx(DrawingAreaContext.Provider, {
+    value: value,
+    children: children
   });
 }

package/context/DrawingAreaProvider/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DrawingArea.types';
+export * from './DrawingAreaProvider';
+export * from './DrawingAreaContext';

package/context/DrawingAreaProvider/index.js

@@ -0,0 +1,3 @@
+export * from "./DrawingArea.types.js";
+export * from "./DrawingAreaProvider.js";
+export * from "./DrawingAreaContext.js";