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

package/context/ChartDataProvider/ChartDataProvider.js

@@ -5,7 +5,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { DrawingAreaProvider } from "../DrawingAreaProvider/index.js";
 import { SeriesProvider } from "../SeriesProvider/index.js";
-import { InteractionProvider } from "../InteractionProvider.js";
 import { CartesianProvider } from "../CartesianProvider/index.js";
 import { PluginProvider } from "../PluginProvider/index.js";
 import { useChartDataProviderProps } from "./useChartDataProviderProps.js";
@@ -13,8 +12,35 @@ import { AnimationProvider } from "../AnimationProvider/index.js";
 import { ZAxisContextProvider } from "../ZAxisContextProvider.js";
 import { HighlightedProvider } from "../HighlightedProvider/index.js";
 import { SizeProvider } from "../SizeProvider/index.js";
-import { SvgRefProvider } from "../SvgRefProvider/index.js";
+import { ChartProvider } from "../ChartProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Orchestrates the data providers for the chart components and hooks.
+ *
+ * Use this component if you have custom HTML components that need to access the chart data.
+ *
+ * Demos:
+ *
+ * - [Composition](http://localhost:3001/x/react-charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartDataProvider API](https://mui.com/x/api/charts/chart-data-provider/)
+ *
+ * @example
+ * ```jsx
+ * <ChartDataProvider
+ *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
+ *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
+ * >
+ *   <ChartsSurface>
+ *      <BarPlot />
+ *      <ChartsXAxis position="bottom" axisId="x-axis" />
+ *   </ChartsSurface>
+ *   {'Custom Legend Component'}
+ * </ChartDataProvider>
+ * ```
+ */
 function ChartDataProvider(props) {
   const {
     children,
@@ -27,27 +53,25 @@ function ChartDataProvider(props) {
     animationProviderProps,
     sizeProviderProps
   } = useChartDataProviderProps(props);
-  return /*#__PURE__*/_jsx(SizeProvider, _extends({}, sizeProviderProps, {
-    children: /*#__PURE__*/_jsx(DrawingAreaProvider, _extends({}, drawingAreaProviderProps, {
-      children: /*#__PURE__*/_jsx(PluginProvider, _extends({}, pluginProviderProps, {
-        children: /*#__PURE__*/_jsx(SeriesProvider, _extends({}, seriesProviderProps, {
-          children: /*#__PURE__*/_jsx(CartesianProvider, _extends({}, cartesianProviderProps, {
-            children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {
-              children: /*#__PURE__*/_jsx(InteractionProvider, {
+  return /*#__PURE__*/_jsx(ChartProvider, {
+    children: /*#__PURE__*/_jsx(SizeProvider, _extends({}, sizeProviderProps, {
+      children: /*#__PURE__*/_jsx(DrawingAreaProvider, _extends({}, drawingAreaProviderProps, {
+        children: /*#__PURE__*/_jsx(PluginProvider, _extends({}, pluginProviderProps, {
+          children: /*#__PURE__*/_jsx(SeriesProvider, _extends({}, seriesProviderProps, {
+            children: /*#__PURE__*/_jsx(CartesianProvider, _extends({}, cartesianProviderProps, {
+              children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {
                 children: /*#__PURE__*/_jsx(HighlightedProvider, _extends({}, highlightedProviderProps, {
                   children: /*#__PURE__*/_jsx(AnimationProvider, _extends({}, animationProviderProps, {
-                    children: /*#__PURE__*/_jsx(SvgRefProvider, {
-                      children: children
-                    })
+                    children: children
                   }))
                 }))
-              })
+              }))
             }))
           }))
         }))
       }))
     }))
-  }));
+  });
 }
 process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -144,7 +168,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
-    labelFontSize: PropTypes.number,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -155,7 +178,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
     tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
@@ -198,7 +220,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
-    labelFontSize: PropTypes.number,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -209,7 +230,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
     tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),

package/context/ChartDataProvider/useChartDataProviderProps.d.ts

@@ -27,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: {
@@ -64,30 +62,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;
     }[];
     sizeProviderProps: Omit<SizeProviderProps, "children">;

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/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/DrawingAreaProvider/DrawingAreaContext.d.ts

@@ -1,8 +1,3 @@
 import * as React from 'react';
 import { DrawingAreaState } from './DrawingArea.types';
-export declare const DrawingAreaContext: React.Context<DrawingAreaState & {
-    /**
-     * A random id used to distinguish each chart on the same page.
-     */
-    chartId: string;
-}>;
+export declare const DrawingAreaContext: React.Context<DrawingAreaState>;

package/context/DrawingAreaProvider/DrawingAreaContext.js

@@ -8,7 +8,6 @@ export const DrawingAreaContext = /*#__PURE__*/React.createContext({
   right: 0,
   height: 300,
   width: 400,
-  chartId: '',
   isPointInside: () => false
 });
 if (process.env.NODE_ENV !== 'production') {