@mui/x-charts 8.27.0 → 9.0.0-alpha.1

package/esm/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/esm/ChartContainer/index.js

@@ -1,6 +1 @@
-export * from "./ChartContainer.js";
-
-/**
- * @deprecated Use `ChartApi` from `@mui/x-charts/context` instead.
- */
-export {};
+export * from "./ChartContainer.js";

package/esm/ChartContainer/useChartContainerProps.d.ts

@@ -1,15 +1,13 @@
-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: ChartDataProviderProps<TSeries, TSignatures>;
-  chartsSurfaceProps: ChartsSurfaceProps & {
-    ref: React.Ref<SVGSVGElement>;
-  };
-  children: React.ReactNode;
-};
-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>;
+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>) => UseChartContainerPropsReturnValue<TSeries, TSignatures>;

package/esm/ChartContainer/useChartContainerProps.js

@@ -1,97 +1,14 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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"];
-import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
-export 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 = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const chartsSurfaceProps = _extends({
-    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 ?? DEFAULT_PLUGINS,
-    slots,
-    slotProps
-  };
-  return {
-    chartDataProviderProps,
-    chartsSurfaceProps,
-    children
-  };
+import { useChartsContainerProps } from "../ChartsContainer/useChartsContainerProps.js";
+
+/**
+ * @deprecated Use `UseChartsContainerPropsReturnValue` instead.
+ */
+
+/**
+ * @deprecated Use `useChartsContainerProps` instead.
+ */
+export const useChartContainerProps = props => {
+  return useChartsContainerProps(props);
 };

package/esm/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/esm/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/esm/ChartDataProvider/useChartDataProviderProps.js

@@ -2,11 +2,12 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "localeText", "plugins", "seriesConfig", "slots", "slotProps"];
+const _excluded = ["children", "localeText", "plugins", "slots", "slotProps", "seriesConfig"];
 import { useTheme, useThemeProps } from '@mui/material/styles';
+import { defaultSeriesConfig } from "../internals/plugins/utils/defaultSeriesConfig.js";
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 export 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 = useThemeProps({
     props: inProps,
     name: 'MuiChartDataProvider'
@@ -15,17 +16,17 @@ export const useChartDataProviderProps = inProps => {
       children,
       localeText,
       plugins = DEFAULT_PLUGINS,
-      seriesConfig,
       slots,
-      slotProps
+      slotProps,
+      seriesConfig = defaultSeriesConfig
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const theme = useTheme();
   const chartProviderProps = {
     plugins: plugins,
-    seriesConfig,
     pluginParams: _extends({
-      theme: theme.palette.mode
+      theme: theme.palette.mode,
+      seriesConfig
     }, other)
   };
   return {

package/esm/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/esm/ChartsAxis/ChartsAxis.js

@@ -28,12 +28,14 @@ function ChartsAxis(props) {
     yAxisIds,
     yAxis
   } = useYAxes();
+  const XAxis = slots?.xAxis ?? ChartsXAxis;
+  const YAxis = slots?.yAxis ?? ChartsYAxis;
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [xAxisIds.map(axisId => {
       if (!xAxis[axisId].position || xAxis[axisId].position === 'none') {
         return null;
       }
-      return /*#__PURE__*/_jsx(ChartsXAxis, {
+      return /*#__PURE__*/_jsx(XAxis, {
         slots: slots,
         slotProps: slotProps,
         axisId: axisId
@@ -42,7 +44,7 @@ function ChartsAxis(props) {
       if (!yAxis[axisId].position || yAxis[axisId].position === 'none') {
         return null;
       }
-      return /*#__PURE__*/_jsx(ChartsYAxis, {
+      return /*#__PURE__*/_jsx(YAxis, {
         slots: slots,
         slotProps: slotProps,
         axisId: axisId

package/esm/ChartsAxis/axisClasses.d.ts

@@ -27,13 +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}`.
-   *
-   * @deprecated Use the data attribute `data-axis-id` instead.
-   */
-  id: string;
 }
 export type ChartsAxisClassKey = keyof ChartsAxisClasses;
 export declare function getAxisUtilityClass(slot: string): string;

package/esm/ChartsAxis/axisClasses.js

@@ -3,4 +3,4 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getAxisUtilityClass(slot) {
   return generateUtilityClass('MuiChartsAxis', slot);
 }
-export const axisClasses = generateUtilityClasses('MuiChartsAxis', ['root', 'line', 'tickContainer', 'tick', 'tickLabel', 'label', 'directionX', 'directionY', 'top', 'bottom', 'left', 'right', 'id']);
+export const axisClasses = generateUtilityClasses('MuiChartsAxis', ['root', 'line', 'tickContainer', 'tick', 'tickLabel', 'label', 'directionX', 'directionY', 'top', 'bottom', 'left', 'right']);

package/esm/ChartsAxisHighlight/ChartsXAxisHighlight.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { getValueToPositionMapper } from "../hooks/useScale.js";
+import { getValueToPositionMapper } from "../hooks/getValueToPositionMapper.js";
 import { isOrdinalScale } from "../internals/scaleGuards.js";
 import { useStore } from "../internals/store/useStore.js";
 import { selectorChartsHighlightXAxisValue, selectorChartXAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";

package/esm/ChartsAxisHighlight/ChartsYAxisHighlight.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { getValueToPositionMapper } from "../hooks/useScale.js";
+import { getValueToPositionMapper } from "../hooks/getValueToPositionMapper.js";
 import { isOrdinalScale } from "../internals/scaleGuards.js";
 import { useStore } from "../internals/store/useStore.js";
 import { selectorChartsHighlightYAxisValue, selectorChartYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";

package/esm/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 };