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

package/esm/BarChart/BarElement.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "dataIndex", "classes", "color", "slots", "slotProps", "style", "onClick", "skipAnimation", "layout", "x", "xOrigin", "y", "yOrigin", "width", "height", "hidden"];
+const _excluded = ["seriesId", "dataIndex", "classes", "color", "slots", "slotProps", "style", "onClick", "skipAnimation", "layout", "x", "xOrigin", "y", "yOrigin", "width", "height", "hidden"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
@@ -14,7 +14,7 @@ import { useIsItemFocused } from "../hooks/useIsItemFocused.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function BarElement(props) {
   const {
-      id,
+      seriesId,
       dataIndex,
       classes: innerClasses,
       color,
@@ -35,9 +35,9 @@ function BarElement(props) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const itemIdentifier = React.useMemo(() => ({
     type: 'bar',
-    seriesId: id,
+    seriesId,
     dataIndex
-  }), [id, dataIndex]);
+  }), [seriesId, dataIndex]);
   const interactionProps = useInteractionItemProps(itemIdentifier);
   const {
     isFaded,
@@ -45,11 +45,11 @@ function BarElement(props) {
   } = useItemHighlighted(itemIdentifier);
   const isFocused = useIsItemFocused(React.useMemo(() => ({
     type: 'bar',
-    seriesId: id,
+    seriesId,
     dataIndex
-  }), [id, dataIndex]));
+  }), [seriesId, dataIndex]));
   const ownerState = {
-    id,
+    seriesId,
     dataIndex,
     classes: innerClasses,
     color,
@@ -64,7 +64,7 @@ function BarElement(props) {
     externalSlotProps: slotProps?.bar,
     externalForwardedProps: other,
     additionalProps: _extends({}, interactionProps, {
-      id,
+      seriesId,
       dataIndex,
       color,
       x,
@@ -94,8 +94,8 @@ process.env.NODE_ENV !== "production" ? BarElement.propTypes = {
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
   dataIndex: PropTypes.number.isRequired,
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   layout: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
+  seriesId: PropTypes.string.isRequired,
   skipAnimation: PropTypes.bool.isRequired,
   /**
    * The props used for each component slot.

package/esm/BarChart/BarLabel/BarLabel.js

@@ -100,7 +100,7 @@ process.env.NODE_ENV !== "production" ? BarLabel.propTypes = {
    * @default 'center'
    */
   placement: PropTypes.oneOf(['center', 'outside']),
-  seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  seriesId: PropTypes.string.isRequired,
   skipAnimation: PropTypes.bool.isRequired,
   /**
    * Width of the bar this label belongs to.

package/esm/BarChart/FocusedBar.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 import { useFocusedItem } from "../hooks/useFocusedItem.js";
 import { useBarSeriesContext, useXAxes, useYAxes } from "../hooks/index.js";
-import { getBarDimensions } from "../internals/getBarDimensions.js";
+import { createGetBarDimensions } from "../internals/createGetBarDimensions.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function FocusedBar(props) {
   const theme = useTheme();
@@ -33,15 +33,13 @@ export function FocusedBar(props) {
   const yAxisConfig = yAxis[yAxisId];
   const verticalLayout = barSeries.series[focusedItem.seriesId].layout === 'vertical';
   const groupIndex = barSeries.stackingGroups.findIndex(group => group.ids.includes(focusedItem.seriesId));
-  const barDimensions = getBarDimensions({
+  const barDimensions = createGetBarDimensions({
     verticalLayout,
     xAxisConfig,
     yAxisConfig,
     series,
-    dataIndex: focusedItem.dataIndex,
-    numberOfGroups: barSeries.stackingGroups.length,
-    groupIndex
-  });
+    numberOfGroups: barSeries.stackingGroups.length
+  })(focusedItem.dataIndex, groupIndex);
   if (barDimensions === null) {
     return null;
   }

package/esm/BarChart/IndividualBarPlot.js

@@ -64,7 +64,7 @@ export function IndividualBarPlot(_ref) {
           height
         }) => {
           const barElement = /*#__PURE__*/_jsx(BarElement, _extends({
-            id: seriesId,
+            seriesId: seriesId,
             dataIndex: dataIndex,
             color: color,
             skipAnimation: skipAnimation ?? false,

package/esm/BarChart/barClasses.d.ts

@@ -9,4 +9,4 @@ export interface BarClasses {
 export type BarClassKey = keyof BarClasses;
 export declare function getBarUtilityClass(slot: string): string;
 export declare const barClasses: BarClasses;
-export declare const useUtilityClasses: (classes?: Partial<BarClasses>) => Record<"series" | "root" | "seriesLabels", string>;
+export declare const useUtilityClasses: (classes?: Partial<BarClasses>) => Record<"root" | "series" | "seriesLabels", string>;

package/esm/BarChart/barClasses.js

@@ -2,9 +2,9 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getBarUtilityClass(slot) {
-  return generateUtilityClass('MuiBar', slot);
+  return generateUtilityClass('MuiBarChart', slot);
 }
-export const barClasses = generateUtilityClasses('MuiBar', ['root', 'series', 'seriesLabels']);
+export const barClasses = generateUtilityClasses('MuiBarChart', ['root', 'series', 'seriesLabels']);
 export const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],

package/esm/BarChart/barElementClasses.d.ts

@@ -14,11 +14,12 @@ export interface BarElementClasses {
 }
 export type BarElementClassKey = keyof BarElementClasses;
 export interface BarElementOwnerState {
-  id: SeriesId;
+  seriesId: SeriesId;
   dataIndex: number;
   color: string;
   isFaded: boolean;
   isHighlighted: boolean;
+  isFocused: boolean;
   classes?: Partial<BarElementClasses>;
 }
 export declare function getBarElementUtilityClass(slot: string): string;

package/esm/BarChart/barElementClasses.js

@@ -8,12 +8,12 @@ export const barElementClasses = generateUtilityClasses('MuiBarElement', ['root'
 export const useUtilityClasses = ownerState => {
   const {
     classes,
-    id,
+    seriesId,
     isHighlighted,
     isFaded
   } = ownerState;
   const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+    root: ['root', `series-${seriesId}`, isHighlighted && 'highlighted', isFaded && 'faded']
   };
   return composeClasses(slots, getBarElementUtilityClass, classes);
 };

package/esm/BarChart/seriesConfig/bar/extremums.d.ts

@@ -1,3 +1,3 @@
-import { type CartesianExtremumGetter } from "../../../internals/plugins/models/seriesConfig/index.js";
+import type { CartesianExtremumGetter } from "../../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export declare const getExtremumX: CartesianExtremumGetter<'bar'>;
 export declare const getExtremumY: CartesianExtremumGetter<'bar'>;

package/esm/BarChart/seriesConfig/bar/getColor.d.ts

@@ -1,3 +1,3 @@
-import { type ColorProcessor } from "../../../internals/plugins/models/index.js";
+import type { ColorProcessor } from "../../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const getColor: ColorProcessor<'bar'>;
 export default getColor;

package/esm/BarChart/seriesConfig/bar/getSeriesWithDefaultValues.d.ts

@@ -1,6 +1,6 @@
 import { type AllSeriesType } from "../../../models/seriesType/index.js";
 export declare function getSeriesWithDefaultValues(seriesData: AllSeriesType<'bar'>, seriesIndex: number, colors: readonly string[]): {
-  id: import("../../../index.js").SeriesId;
+  id: string;
   color: string;
   type: "bar";
   data?: ReadonlyArray<import("../../../index.js").BarValueType | null>;
@@ -12,7 +12,7 @@ export declare function getSeriesWithDefaultValues(seriesData: AllSeriesType<'ba
   barLabel?: "value" | ((item: import("@mui/x-charts/BarChart").BarItem, context: import("@mui/x-charts/BarChart").BarLabelContext) => string | null | undefined);
   barLabelPlacement?: "center" | "outside";
   valueFormatter?: import("../../../internals/index.js").SeriesValueFormatter<number | null> | undefined;
-  highlightScope?: import("../../../index.js").HighlightScope;
+  highlightScope?: import("../../../internals/index.js").CommonHighlightScope | undefined;
   labelMarkType?: import("../../../internals/index.js").ChartsLabelMarkType;
   colorGetter?: ((data: import("../../../internals/index.js").ColorCallbackValue<number | null>) => string) | undefined;
   xAxisId?: import("../../../internals/index.js").AxisId;

package/esm/BarChart/seriesConfig/bar/keyboardFocusHandler.d.ts

@@ -1,3 +1,4 @@
+import { type ComposableCartesianChartSeriesType } from "../../../internals/commonNextFocusItem.js";
 import type { KeyboardFocusHandler } from "../../../internals/plugins/featurePlugins/useChartKeyboardNavigation/keyboardFocusHandler.types.js";
-declare const keyboardFocusHandler: KeyboardFocusHandler<'bar', 'bar' | 'line' | 'scatter'>;
+declare const keyboardFocusHandler: KeyboardFocusHandler<'bar', ComposableCartesianChartSeriesType>;
 export default keyboardFocusHandler;

package/esm/BarChart/seriesConfig/bar/keyboardFocusHandler.js

@@ -1,15 +1,14 @@
-import { createGetNextIndexFocusedItem, createGetPreviousIndexFocusedItem, createGetNextSeriesFocusedItem, createGetPreviousSeriesFocusedItem } from "../../../internals/commonNextFocusItem.js";
-const outSeriesTypes = new Set(['bar', 'line', 'scatter']);
+import { createGetNextIndexFocusedItem, createGetPreviousIndexFocusedItem, createGetNextSeriesFocusedItem, createGetPreviousSeriesFocusedItem, composableCartesianSeriesTypes } from "../../../internals/commonNextFocusItem.js";
 const keyboardFocusHandler = event => {
   switch (event.key) {
     case 'ArrowRight':
-      return createGetNextIndexFocusedItem(outSeriesTypes);
+      return createGetNextIndexFocusedItem(composableCartesianSeriesTypes);
     case 'ArrowLeft':
-      return createGetPreviousIndexFocusedItem(outSeriesTypes);
+      return createGetPreviousIndexFocusedItem(composableCartesianSeriesTypes);
     case 'ArrowDown':
-      return createGetPreviousSeriesFocusedItem(outSeriesTypes);
+      return createGetPreviousSeriesFocusedItem(composableCartesianSeriesTypes);
     case 'ArrowUp':
-      return createGetNextSeriesFocusedItem(outSeriesTypes);
+      return createGetNextSeriesFocusedItem(composableCartesianSeriesTypes);
     default:
       return null;
   }

package/esm/BarChart/seriesConfig/bar/legend.d.ts

@@ -1,3 +1,3 @@
-import { type LegendGetter } from "../../../internals/plugins/models/index.js";
+import type { LegendGetter } from "../../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const legendGetter: LegendGetter<'bar'>;
 export default legendGetter;

package/esm/BarChart/seriesConfig/bar/legend.js

@@ -12,7 +12,6 @@ const legendGetter = params => {
     acc.push({
       type: 'bar',
       markType: series[seriesId].labelMarkType,
-      id: seriesId,
       seriesId,
       color: series[seriesId].color,
       label: formattedLabel

package/esm/BarChart/seriesConfig/bar/seriesProcessor.d.ts

@@ -1,3 +1,3 @@
-import { type SeriesProcessor } from "../../../internals/plugins/models/index.js";
+import type { SeriesProcessor } from "../../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const seriesProcessor: SeriesProcessor<'bar'>;
 export default seriesProcessor;

package/esm/BarChart/seriesConfig/bar/tooltip.d.ts

@@ -1,4 +1,4 @@
-import type { AxisTooltipGetter, TooltipGetter } from "../../../internals/plugins/models/index.js";
+import type { AxisTooltipGetter, TooltipGetter } from "../../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const tooltipGetter: TooltipGetter<'bar'>;
 export declare const axisTooltipGetter: AxisTooltipGetter<'bar', 'x' | 'y'>;
 export default tooltipGetter;

package/esm/BarChart/seriesConfig/bar/tooltipPosition.d.ts

@@ -1,3 +1,3 @@
-import type { TooltipItemPositionGetter } from "../../../internals/plugins/models/seriesConfig/tooltipItemPositionGetter.types.js";
+import type { TooltipItemPositionGetter } from "../../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'bar'>;
 export default tooltipItemPositionGetter;

package/esm/BarChart/seriesConfig/bar/tooltipPosition.js

@@ -1,4 +1,4 @@
-import { getBarDimensions } from "../../../internals/getBarDimensions.js";
+import { createGetBarDimensions } from "../../../internals/createGetBarDimensions.js";
 const tooltipItemPositionGetter = params => {
   const {
     series,
@@ -16,15 +16,14 @@ const tooltipItemPositionGetter = params => {
   if (axesConfig.x === undefined || axesConfig.y === undefined) {
     return null;
   }
-  const dimensions = getBarDimensions({
+  const groupIndex = series.bar.stackingGroups.findIndex(group => group.ids.includes(itemSeries.id));
+  const dimensions = createGetBarDimensions({
     verticalLayout: itemSeries.layout === 'vertical',
     xAxisConfig: axesConfig.x,
     yAxisConfig: axesConfig.y,
     series: itemSeries,
-    dataIndex: identifier.dataIndex,
-    numberOfGroups: series.bar.stackingGroups.length,
-    groupIndex: series.bar.stackingGroups.findIndex(group => group.ids.includes(itemSeries.id))
-  });
+    numberOfGroups: series.bar.stackingGroups.length
+  })(identifier.dataIndex, groupIndex);
   if (dimensions == null) {
     return null;
   }

package/esm/BarChart/seriesConfig/index.d.ts

@@ -1,2 +1,2 @@
-import { type ChartSeriesTypeConfig } from "../../internals/plugins/models/seriesConfig/index.js";
+import type { ChartSeriesTypeConfig } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export declare const barSeriesConfig: ChartSeriesTypeConfig<'bar'>;

package/esm/BarChart/seriesConfig/index.js

@@ -7,6 +7,7 @@ import tooltipGetter, { axisTooltipGetter } from "./bar/tooltip.js";
 import tooltipItemPositionGetter from "./bar/tooltipPosition.js";
 import { getSeriesWithDefaultValues } from "./bar/getSeriesWithDefaultValues.js";
 import { identifierSerializerSeriesIdDataIndex } from "../../internals/identifierSerializer.js";
+import { identifierCleanerSeriesIdDataIndex } from "../../internals/identifierCleaner.js";
 export const barSeriesConfig = {
   seriesProcessor,
   colorProcessor: getColor,
@@ -18,5 +19,6 @@ export const barSeriesConfig = {
   yExtremumGetter: getExtremumY,
   getSeriesWithDefaultValues,
   keyboardFocusHandler,
-  identifierSerializer: identifierSerializerSeriesIdDataIndex
+  identifierSerializer: identifierSerializerSeriesIdDataIndex,
+  identifierCleaner: identifierCleanerSeriesIdDataIndex
 };

package/esm/BarChart/useBarPlotData.d.ts

@@ -11,7 +11,7 @@ export declare function useBarPlotData(drawingArea: ChartDrawingArea, xAxes: Com
 };
 export declare function processBarDataForPlot(drawingArea: ChartDrawingArea, chartId: string | undefined, stackingGroups: StackingGroupsType, series: Record<SeriesId, ChartSeriesDefaultized<'bar'>>, xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>, defaultXAxisId: AxisId, defaultYAxisId: AxisId): {
   completedData: {
-    seriesId: SeriesId;
+    seriesId: string;
     barLabel: "value" | ((item: import("@mui/x-charts/BarChart").BarItem, context: import("@mui/x-charts/BarChart").BarLabelContext) => string | null | undefined) | undefined;
     barLabelPlacement: "center" | "outside" | undefined;
     data: ProcessedBarData[];

package/esm/BarChart/useBarPlotData.js

@@ -3,7 +3,7 @@ import getColor from "./seriesConfig/bar/getColor.js";
 import { useXAxes, useYAxes } from "../hooks/useAxis.js";
 import { checkBarChartScaleErrors } from "./checkBarChartScaleErrors.js";
 import { useBarSeriesContext } from "../hooks/useBarSeries.js";
-import { getBarDimensions } from "../internals/getBarDimensions.js";
+import { createGetBarDimensions } from "../internals/createGetBarDimensions.js";
 import { useChartId } from "../hooks/useChartId.js";
 export function useBarPlotData(drawingArea, xAxes, yAxes) {
   const seriesData = useBarSeriesContext() ?? {
@@ -43,16 +43,15 @@ export function processBarDataForPlot(drawingArea, chartId, stackingGroups, seri
       const yOrigin = Math.round(yScale(0) ?? 0);
       const colorGetter = getColor(series[seriesId], xAxes[xAxisId], yAxes[yAxisId]);
       const seriesDataPoints = [];
+      const getBarDimensions = createGetBarDimensions({
+        verticalLayout,
+        xAxisConfig,
+        yAxisConfig,
+        series: series[seriesId],
+        numberOfGroups: stackingGroups.length
+      });
       for (let dataIndex = 0; dataIndex < baseScaleConfig.data.length; dataIndex += 1) {
-        const barDimensions = getBarDimensions({
-          verticalLayout,
-          xAxisConfig,
-          yAxisConfig,
-          series: series[seriesId],
-          dataIndex,
-          numberOfGroups: stackingGroups.length,
-          groupIndex
-        });
+        const barDimensions = getBarDimensions(dataIndex, groupIndex);
         if (barDimensions == null) {
           continue;
         }

package/esm/BarChart/useRegisterItemClickHandlers.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { useSvgRef } from "../hooks/useSvgRef.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
-import { getSVGPoint } from "../internals/getSVGPoint.js";
+import { getChartPoint } from "../internals/getChartPoint.js";
 import { useStore } from "../internals/store/useStore.js";
 import { selectorBarItemAtPosition } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors.js";
 
@@ -41,7 +41,7 @@ export function useRegisterItemClickHandlers(onItemClick) {
         }
       }
       lastPointerUp = null;
-      const svgPoint = getSVGPoint(element, point);
+      const svgPoint = getChartPoint(element, point);
       if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
         return;
       }

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;