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

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;