@mui/x-charts 8.26.0 → 8.27.4

package/context/ChartProvider/useChartContext.js

@@ -1,18 +1,12 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useChartContext = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _ChartContext = require("./ChartContext");
-const useChartContext = () => {
-  const context = React.useContext(_ChartContext.ChartContext);
-  if (context == null) {
-    throw new Error(['MUI X Charts: 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;
-};
-exports.useChartContext = useChartContext;
+var _useChartsContext = require("../ChartsProvider/useChartsContext");
+/**
+ * @deprecated Use `useChartsContext` instead. We added S to the charts prefix to align with other components.
+ */
+const useChartContext = exports.useChartContext = _useChartsContext.useChartsContext;

package/context/ChartsProvider/ChartsContext.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { ChartsContextValue } from "./ChartsProvider.types.js";
+/**
+ * @ignore - internal component.
+ */
+export declare const ChartsContext: React.Context<ChartsContextValue<any> | null>;

package/context/ChartsProvider/ChartsContext.js

@@ -0,0 +1,14 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+/**
+ * @ignore - internal component.
+ */
+const ChartsContext = exports.ChartsContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== "production") ChartsContext.displayName = "ChartsContext";

package/context/ChartsProvider/ChartsProvider.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { ChartsProviderProps } from "./ChartsProvider.types.js";
+import { type ChartAnyPluginSignature, type ChartSeriesConfig } from "../../internals/plugins/models/index.js";
+import type { ChartSeriesType } from "../../models/seriesType/config.js";
+import type { ChartCorePluginSignatures } from "../../internals/plugins/corePlugins/index.js";
+export declare const defaultSeriesConfig: ChartSeriesConfig<'bar' | 'scatter' | 'line' | 'pie'>;
+declare function ChartsProvider<TSeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = ChartCorePluginSignatures<TSeriesType>>(props: React.PropsWithChildren<ChartsProviderProps<TSeriesType, TSignatures>>): import("react/jsx-runtime").JSX.Element;
+export { ChartsProvider };

package/context/ChartsProvider/ChartsProvider.js

@@ -0,0 +1,47 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsProvider = ChartsProvider;
+exports.defaultSeriesConfig = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useCharts = require("../../internals/store/useCharts");
+var _ChartsContext = require("./ChartsContext");
+var _useChartCartesianAxis = require("../../internals/plugins/featurePlugins/useChartCartesianAxis");
+var _useChartTooltip = require("../../internals/plugins/featurePlugins/useChartTooltip");
+var _useChartInteraction = require("../../internals/plugins/featurePlugins/useChartInteraction");
+var _useChartZAxis = require("../../internals/plugins/featurePlugins/useChartZAxis");
+var _useChartHighlight = require("../../internals/plugins/featurePlugins/useChartHighlight/useChartHighlight");
+var _seriesConfig = require("../../BarChart/seriesConfig");
+var _seriesConfig2 = require("../../LineChart/seriesConfig");
+var _seriesConfig3 = require("../../PieChart/seriesConfig");
+var _seriesConfig4 = require("../../ScatterChart/seriesConfig");
+var _jsxRuntime = require("react/jsx-runtime");
+const defaultSeriesConfig = exports.defaultSeriesConfig = {
+  bar: _seriesConfig.barSeriesConfig,
+  scatter: _seriesConfig4.scatterSeriesConfig,
+  line: _seriesConfig2.lineSeriesConfig,
+  pie: _seriesConfig3.pieSeriesConfig
+};
+
+// For consistency with the v7, the cartesian axes are set by default.
+// To remove them, you can provide a `plugins` props.
+const defaultPlugins = [_useChartZAxis.useChartZAxis, _useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight];
+function ChartsProvider(props) {
+  const {
+    children,
+    plugins = defaultPlugins,
+    pluginParams = {},
+    seriesConfig = defaultSeriesConfig
+  } = props;
+  const {
+    contextValue
+  } = (0, _useCharts.useCharts)(plugins, pluginParams, seriesConfig);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsContext.ChartsContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}

package/context/ChartsProvider/ChartsProvider.types.d.ts

@@ -0,0 +1,40 @@
+import { type Store } from '@mui/x-internals/store';
+import type { ChartAnyPluginSignature, ChartInstance, ChartPublicAPI, ChartSeriesConfig, ChartState, ConvertSignaturesIntoPlugins, MergeSignaturesProperty } from "../../internals/plugins/models/index.js";
+import type { ChartCorePluginSignatures } from "../../internals/plugins/corePlugins/index.js";
+import type { UseChartBaseProps } from "../../internals/store/useCharts.types.js";
+import type { ChartSeriesType } from "../../models/seriesType/config.js";
+export type ChartsContextValue<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: Store<ChartState<TSignatures, TOptionalSignatures>>;
+  /**
+   * The ref to the <svg />.
+   */
+  svgRef: React.RefObject<SVGSVGElement | null>;
+  /**
+   * The ref to the chart root element.
+   */
+  chartRootRef: React.RefObject<HTMLDivElement | null>;
+};
+export type ChartsPluginParams<TSeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = UseChartBaseProps<TSignatures> & MergeSignaturesProperty<[...ChartCorePluginSignatures<TSeriesType>, ...TSignatures], 'params'>;
+export interface ChartsProviderProps<TSeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> {
+  /**
+   * Array of plugins used to add features to the chart.
+   */
+  plugins?: ConvertSignaturesIntoPlugins<TSignatures>;
+  pluginParams?: ChartsPluginParams<TSeriesType, TSignatures>;
+  /**
+   * The configuration helpers used to compute attributes according to the series type.
+   * @ignore Unstable props for internal usage.
+   */
+  seriesConfig?: ChartSeriesConfig<TSeriesType>;
+}

package/context/ChartsProvider/ChartsProvider.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/context/ChartsProvider/index.d.ts

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

package/context/ChartsProvider/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartsProvider = require("./ChartsProvider");
+Object.keys(_ChartsProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsProvider[key];
+    }
+  });
+});
+var _ChartsProvider2 = require("./ChartsProvider.types");
+Object.keys(_ChartsProvider2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsProvider2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsProvider2[key];
+    }
+  });
+});
+var _useChartsContext = require("./useChartsContext");
+Object.keys(_useChartsContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useChartsContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartsContext[key];
+    }
+  });
+});

package/context/ChartsProvider/useChartsContext.d.ts

@@ -0,0 +1,3 @@
+import { type ChartAnyPluginSignature } from "../../internals/plugins/models/index.js";
+import { type ChartsContextValue } from "./ChartsProvider.types.js";
+export declare const useChartsContext: <TSignatures extends readonly ChartAnyPluginSignature[], TOptionalSignatures extends readonly ChartAnyPluginSignature[] = []>() => ChartsContextValue<TSignatures, TOptionalSignatures>;

package/context/ChartsProvider/useChartsContext.js

@@ -0,0 +1,18 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartsContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _ChartsContext = require("./ChartsContext");
+const useChartsContext = () => {
+  const context = React.useContext(_ChartsContext.ChartsContext);
+  if (context == null) {
+    throw new Error('MUI X Charts: Could not find the Charts context. ' + 'This happens when the component is rendered outside of a ChartsDataProvider or ChartsContainer parent component, ' + 'which means the required context is not available. ' + 'Wrap your component in a ChartsDataProvider or ChartsContainer. ' + 'This can also happen if you are bundling multiple versions of the library.');
+  }
+  return context;
+};
+exports.useChartsContext = useChartsContext;

package/context/ChartsSlotsContext.d.ts

@@ -7,7 +7,7 @@ export interface ChartsSlotsContextValue<T extends ChartsSlots & Record<keyof T,
 }
 export declare const ChartsSlotsContext: React.Context<ChartsSlotsContextValue<ChartsSlots> | null>;
 /**
- * Get the slots and slotProps from the nearest `ChartDataProvider` or `ChartDataProviderPro`.
+ * Get the slots and slotProps from the nearest `ChartsDataProvider` or `ChartsDataProviderPro`.
  * @returns {ChartsSlotsContextValue} The slots and slotProps from the context.
  */
 export declare function useChartsSlots<T extends ChartsSlots & Record<keyof T, React.ComponentType<any>> = ChartsSlots>(): ChartsSlotsContextValue<T>;

package/context/ChartsSlotsContext.js

@@ -15,7 +15,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 const ChartsSlotsContext = exports.ChartsSlotsContext = /*#__PURE__*/React.createContext(null);
 
 /**
- * Get the slots and slotProps from the nearest `ChartDataProvider` or `ChartDataProviderPro`.
+ * Get the slots and slotProps from the nearest `ChartsDataProvider` or `ChartsDataProviderPro`.
  * @returns {ChartsSlotsContextValue} The slots and slotProps from the context.
  */
 if (process.env.NODE_ENV !== "production") ChartsSlotsContext.displayName = "ChartsSlotsContext";

package/esm/ChartContainer/ChartContainer.d.ts

@@ -1,35 +1,22 @@
-import * as React from 'react';
 import { type ChartSeriesType } from "../models/seriesType/config.js";
-import { type ChartDataProviderProps } from "../ChartDataProvider/index.js";
-import { type ChartsSurfaceProps } from "../ChartsSurface/index.js";
 import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 import { type ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
-export type ChartContainerProps<SeriesType extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>> = Omit<ChartDataProviderProps<SeriesType, TSignatures>, 'children'> & ChartsSurfaceProps;
+import { type ChartsContainerProps, type ChartsContainerSlotProps, type ChartsContainerSlots } from "../ChartsContainer/index.js";
 /**
- * It sets up the data providers as well as the `<svg>` for the chart.
- *
- * This is a combination of both the `ChartDataProvider` and `ChartsSurface` components.
- *
- * Demos:
- *
- * - [Composition](https://mui.com/x/api/charts/composition/)
- *
- * API:
- *
- * - [ChartContainer API](https://mui.com/x/api/charts/chart-container/)
- *
- * @example
- * ```jsx
- * <ChartContainer
- *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
- *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
- * >
- *    <BarPlot />
- *    <ChartsXAxis axisId="x-axis" />
- * </ChartContainer>
- * ```
+ * @deprecated Use `ChartsContainerSlots` instead. We added S to the charts prefix to align with other components.
  */
-declare const ChartContainer: <TSeries extends ChartSeriesType>(props: ChartContainerProps<TSeries> & {
+export type ChartContainerSlots = ChartsContainerSlots;
+/**
+ * @deprecated Use `ChartsContainerSlotProps` instead. We added S to the charts prefix to align with other components.
+ */
+export type ChartContainerSlotProps = ChartsContainerSlotProps;
+/**
+ * @deprecated Use `ChartsContainerProps` instead. We added S to the charts prefix to align with other components.
+ */
+export type ChartContainerProps<SeriesType extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>> = ChartsContainerProps<SeriesType, TSignatures>;
+/**
+ * @deprecated Use `ChartsContainer` instead. We added S to the charts prefix to align with other components.
+ */
+export declare const ChartContainer: <TSeries extends ChartSeriesType>(props: ChartsContainerProps<TSeries> & {
   ref?: React.ForwardedRef<SVGSVGElement>;
-}) => React.JSX.Element;
-export { ChartContainer };
+}) => React.JSX.Element;