@mui/x-charts 8.26.0 → 9.0.0-alpha.0

package/ChartContainer/index.d.ts

@@ -1,8 +1 @@
-import type { ChartApi as ChartApiOriginal, PluginsPerSeriesType } from "../context/ChartApi.js";
-import type { ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
-import type { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
-export * from "./ChartContainer.js";
-/**
- * @deprecated Use `ChartApi` from `@mui/x-charts/context` instead.
- */
-export type ChartApi<TSeries extends keyof PluginsPerSeriesType | undefined = undefined, TSignatures extends readonly ChartAnyPluginSignature[] = (TSeries extends keyof PluginsPerSeriesType ? PluginsPerSeriesType[TSeries] : AllPluginSignatures)> = ChartApiOriginal<TSeries, TSignatures>;
+export * from "./ChartContainer.js";

package/ChartContainer/useChartContainerProps.d.ts

@@ -1,15 +1,14 @@
 import type * as React from 'react';
-import { type ChartsSurfaceProps } from "../ChartsSurface/index.js";
-import { type ChartDataProviderProps } from "../ChartDataProvider/index.js";
-import type { ChartContainerProps } from "./ChartContainer.js";
 import { type ChartSeriesType } from "../models/seriesType/config.js";
 import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 import { type ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
-export type UseChartContainerPropsReturnValue<TSeries extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = {
-  chartDataProviderProps: Omit<ChartDataProviderProps<TSeries, TSignatures>, 'children'>;
-  chartsSurfaceProps: ChartsSurfaceProps & {
-    ref: React.Ref<SVGSVGElement>;
-  };
-  children: React.ReactNode;
-};
+import { type UseChartsContainerPropsReturnValue } from "../ChartsContainer/useChartsContainerProps.js";
+import type { ChartContainerProps } from "./ChartContainer.js";
+/**
+ * @deprecated Use `UseChartsContainerPropsReturnValue` instead.
+ */
+export type UseChartContainerPropsReturnValue<TSeries extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = UseChartsContainerPropsReturnValue<TSeries, TSignatures>;
+/**
+ * @deprecated Use `useChartsContainerProps` instead.
+ */
 export declare const useChartContainerProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartContainerProps<TSeries, TSignatures>, ref: React.Ref<SVGSVGElement>) => UseChartContainerPropsReturnValue<TSeries, TSignatures>;

package/ChartContainer/useChartContainerProps.js

@@ -1,104 +1,19 @@
 "use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useChartContainerProps = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _allPlugins = require("../internals/plugins/allPlugins");
-const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "tooltipItem", "onTooltipItemChange", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins", "localeText", "slots", "slotProps", "experimentalFeatures", "enableKeyboardNavigation", "brushConfig", "onHiddenItemsChange", "hiddenItems", "initialHiddenItems"];
+var _useChartsContainerProps = require("../ChartsContainer/useChartsContainerProps");
+/**
+ * @deprecated Use `UseChartsContainerPropsReturnValue` instead.
+ */
+
+/**
+ * @deprecated Use `useChartsContainerProps` instead.
+ */
 const useChartContainerProps = (props, ref) => {
-  const _ref = props,
-    {
-      width,
-      height,
-      margin,
-      children,
-      series,
-      colors,
-      dataset,
-      desc,
-      onAxisClick,
-      highlightedAxis,
-      onHighlightedAxisChange,
-      tooltipItem,
-      onTooltipItemChange,
-      disableVoronoi,
-      voronoiMaxRadius,
-      onItemClick,
-      disableAxisListener,
-      highlightedItem,
-      onHighlightChange,
-      sx,
-      title,
-      xAxis,
-      yAxis,
-      zAxis,
-      rotationAxis,
-      radiusAxis,
-      skipAnimation,
-      seriesConfig,
-      plugins,
-      localeText,
-      slots,
-      slotProps,
-      experimentalFeatures,
-      enableKeyboardNavigation,
-      brushConfig,
-      onHiddenItemsChange,
-      hiddenItems,
-      initialHiddenItems
-    } = _ref,
-    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
-  const chartsSurfaceProps = (0, _extends2.default)({
-    title,
-    desc,
-    sx,
-    ref
-  }, other);
-  const chartDataProviderProps = {
-    margin,
-    series,
-    colors,
-    dataset,
-    disableAxisListener,
-    highlightedItem,
-    onHighlightChange,
-    onAxisClick,
-    highlightedAxis,
-    onHighlightedAxisChange,
-    tooltipItem,
-    onTooltipItemChange,
-    disableVoronoi,
-    voronoiMaxRadius,
-    onItemClick,
-    xAxis,
-    yAxis,
-    zAxis,
-    rotationAxis,
-    radiusAxis,
-    skipAnimation,
-    width,
-    height,
-    localeText,
-    seriesConfig,
-    experimentalFeatures,
-    enableKeyboardNavigation,
-    brushConfig,
-    onHiddenItemsChange,
-    hiddenItems,
-    initialHiddenItems,
-    plugins: plugins ?? _allPlugins.DEFAULT_PLUGINS,
-    slots,
-    slotProps
-  };
-  return {
-    chartDataProviderProps,
-    chartsSurfaceProps,
-    children
-  };
+  return (0, _useChartsContainerProps.useChartsContainerProps)(props, ref);
 };
 exports.useChartContainerProps = useChartContainerProps;

package/ChartDataProvider/ChartDataProvider.d.ts

@@ -5,15 +5,17 @@ import { type ChartSeriesType } from "../models/seriesType/config.js";
 import { type ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
 import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 import { type ChartsLocalizationProviderProps } from "../ChartsLocalizationProvider/index.js";
-export type ChartDataProviderProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = React.PropsWithChildren<ChartProviderProps<TSeries, TSignatures>['pluginParams'] & Pick<ChartProviderProps<TSeries, TSignatures>, 'seriesConfig' | 'plugins'>> & ChartsLocalizationProviderProps & {
+export interface ChartDataProviderSlots extends ChartsSlots {}
+export interface ChartDataProviderSlotProps extends ChartsSlotProps {}
+export type ChartDataProviderProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = React.PropsWithChildren<ChartProviderProps<TSeries, TSignatures>['pluginParams'] & Pick<ChartProviderProps<TSeries, TSignatures>, 'plugins'>> & ChartsLocalizationProviderProps & {
   /**
    * Slots to customize charts' components.
    */
-  slots?: Partial<ChartsSlots>;
+  slots?: Partial<ChartDataProviderSlots>;
   /**
    * The props for the slots.
    */
-  slotProps?: Partial<ChartsSlotProps>;
+  slotProps?: Partial<ChartDataProviderSlotProps>;
 };
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/ChartDataProvider/useChartDataProviderProps.d.ts

@@ -8,6 +8,6 @@ export declare const useChartDataProviderProps: <TSeries extends ChartSeriesType
   children: import("react").ReactNode;
   localeText: Partial<import("../locales/index.js").ChartsLocaleText> | undefined;
   chartProviderProps: ChartProviderProps<TSeries, TSignatures>;
-  slots: Partial<import("../internals/index.js").ChartsSlots> | undefined;
-  slotProps: Partial<import("../internals/index.js").ChartsSlotProps> | undefined;
+  slots: Partial<import("./ChartDataProvider.js").ChartDataProviderSlots> | undefined;
+  slotProps: Partial<import("./ChartDataProvider.js").ChartDataProviderSlotProps> | undefined;
 };

package/ChartDataProvider/useChartDataProviderProps.js

@@ -9,10 +9,11 @@ exports.useChartDataProviderProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _styles = require("@mui/material/styles");
+var _defaultSeriesConfig = require("../internals/plugins/utils/defaultSeriesConfig");
 var _allPlugins = require("../internals/plugins/allPlugins");
-const _excluded = ["children", "localeText", "plugins", "seriesConfig", "slots", "slotProps"];
+const _excluded = ["children", "localeText", "plugins", "slots", "slotProps", "seriesConfig"];
 const useChartDataProviderProps = inProps => {
-  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  // eslint-disable-next-line mui/material-ui-name-matches-component-name
   const props = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiChartDataProvider'
@@ -21,17 +22,17 @@ const useChartDataProviderProps = inProps => {
       children,
       localeText,
       plugins = _allPlugins.DEFAULT_PLUGINS,
-      seriesConfig,
       slots,
-      slotProps
+      slotProps,
+      seriesConfig = _defaultSeriesConfig.defaultSeriesConfig
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const theme = (0, _styles.useTheme)();
   const chartProviderProps = {
     plugins: plugins,
-    seriesConfig,
     pluginParams: (0, _extends2.default)({
-      theme: theme.palette.mode
+      theme: theme.palette.mode,
+      seriesConfig
     }, other)
   };
   return {

package/ChartsAxis/ChartsAxis.d.ts

@@ -1,4 +1,5 @@
 import { type ChartsAxisSlotProps, type ChartsAxisSlots } from "../models/axis.js";
+export type { ChartsAxisSlots, ChartsAxisSlotProps };
 export interface ChartsAxisProps {
   /**
    * Overridable component slots.

package/ChartsAxis/ChartsAxis.js

@@ -35,12 +35,14 @@ function ChartsAxis(props) {
     yAxisIds,
     yAxis
   } = (0, _hooks.useYAxes)();
+  const XAxis = slots?.xAxis ?? _ChartsXAxis.ChartsXAxis;
+  const YAxis = slots?.yAxis ?? _ChartsYAxis.ChartsYAxis;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [xAxisIds.map(axisId => {
       if (!xAxis[axisId].position || xAxis[axisId].position === 'none') {
         return null;
       }
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsXAxis.ChartsXAxis, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(XAxis, {
         slots: slots,
         slotProps: slotProps,
         axisId: axisId
@@ -49,7 +51,7 @@ function ChartsAxis(props) {
       if (!yAxis[axisId].position || yAxis[axisId].position === 'none') {
         return null;
       }
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsYAxis.ChartsYAxis, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(YAxis, {
         slots: slots,
         slotProps: slotProps,
         axisId: axisId

package/ChartsAxis/axisClasses.d.ts

@@ -27,11 +27,6 @@ export interface ChartsAxisClasses {
   left: string;
   /** Styles applied to the right axis. */
   right: string;
-  /**
-   * Styles applied to the root element for the axis with the given ID.
-   * Needs to be suffixed with the axis ID: `.${axisClasses.id}-${axisId}`.
-   */
-  id: string;
 }
 export type ChartsAxisClassKey = keyof ChartsAxisClasses;
 export declare function getAxisUtilityClass(slot: string): string;

package/ChartsAxis/axisClasses.js

@@ -11,4 +11,4 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getAxisUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiChartsAxis', slot);
 }
-const axisClasses = exports.axisClasses = (0, _generateUtilityClasses.default)('MuiChartsAxis', ['root', 'line', 'tickContainer', 'tick', 'tickLabel', 'label', 'directionX', 'directionY', 'top', 'bottom', 'left', 'right', 'id']);
+const axisClasses = exports.axisClasses = (0, _generateUtilityClasses.default)('MuiChartsAxis', ['root', 'line', 'tickContainer', 'tick', 'tickLabel', 'label', 'directionX', 'directionY', 'top', 'bottom', 'left', 'right']);

package/ChartsContainer/ChartsContainer.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { type ChartSeriesType } from "../models/seriesType/config.js";
+import { type ChartDataProviderProps, type ChartDataProviderSlotProps, type ChartDataProviderSlots } 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 interface ChartsContainerSlots extends ChartDataProviderSlots {}
+export interface ChartsContainerSlotProps extends ChartDataProviderSlotProps {}
+export type ChartsContainerProps<SeriesType extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>> = Omit<ChartDataProviderProps<SeriesType, TSignatures>, 'children'> & ChartsSurfaceProps;
+/**
+ * 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:
+ *
+ * - [ChartsContainer API](https://mui.com/x/api/charts/charts-container/)
+ *
+ * @example
+ * ```jsx
+ * <ChartsContainer
+ *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
+ *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
+ * >
+ *    <BarPlot />
+ *    <ChartsXAxis axisId="x-axis" />
+ * </ChartsContainer>
+ * ```
+ */
+declare const ChartsContainer: <TSeries extends ChartSeriesType>(props: ChartsContainerProps<TSeries> & {
+  ref?: React.ForwardedRef<SVGSVGElement>;
+}) => React.JSX.Element;
+export { ChartsContainer };