@mui/x-charts 8.20.0 → 8.22.0

package/esm/BarChart/checkBarChartScaleErrors.d.ts

@@ -0,0 +1,7 @@
+import { type AxisId, type ComputedXAxis, type ComputedYAxis } from "../models/axis.js";
+import { type SeriesId } from "../models/seriesType/common.js";
+export declare function checkBarChartScaleErrors(verticalLayout: boolean, seriesId: SeriesId, seriesDataLength: number, xAxisId: AxisId, xAxis: {
+  [axisId: AxisId]: Pick<ComputedXAxis, 'scaleType' | 'data'>;
+}, yAxisId: AxisId, yAxis: {
+  [axisId: AxisId]: Pick<ComputedYAxis, 'scaleType' | 'data'>;
+}): void;

package/esm/BarChart/{checkScaleErrors.js → checkBarChartScaleErrors.js}

@@ -1,13 +1,12 @@
 import { warnOnce } from '@mui/x-internals/warning';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
-import { isBandScaleConfig, isPointScaleConfig } from "../models/axis.js";
 const getAxisMessage = (axisDirection, axisId) => {
   const axisName = `${axisDirection}-axis`;
   const axisIdName = `${axisDirection}Axis`;
   const axisDefaultKey = axisDirection === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
   return axisId === axisDefaultKey ? `The first \`${axisIdName}\`` : `The ${axisName} with id "${axisId}"`;
 };
-export function checkScaleErrors(verticalLayout, seriesId, series, xAxisId, xAxis, yAxisId, yAxis) {
+export function checkBarChartScaleErrors(verticalLayout, seriesId, seriesDataLength, xAxisId, xAxis, yAxisId, yAxis) {
   const xAxisConfig = xAxis[xAxisId];
   const yAxisConfig = yAxis[yAxisId];
   const discreteAxisConfig = verticalLayout ? xAxisConfig : yAxisConfig;
@@ -16,18 +15,18 @@ export function checkScaleErrors(verticalLayout, seriesId, series, xAxisId, xAxi
   const continuousAxisId = verticalLayout ? yAxisId : xAxisId;
   const discreteAxisDirection = verticalLayout ? 'x' : 'y';
   const continuousAxisDirection = verticalLayout ? 'y' : 'x';
-  if (!isBandScaleConfig(discreteAxisConfig)) {
+  if (discreteAxisConfig.scaleType !== 'band') {
     throw new Error(`MUI X Charts: ${getAxisMessage(discreteAxisDirection, discreteAxisId)} should be of type "band" to display the bar series of id "${seriesId}".`);
   }
   if (discreteAxisConfig.data === undefined) {
     throw new Error(`MUI X Charts: ${getAxisMessage(discreteAxisDirection, discreteAxisId)} should have data property.`);
   }
-  if (isBandScaleConfig(continuousAxisConfig) || isPointScaleConfig(continuousAxisConfig)) {
+  if (continuousAxisConfig.scaleType === 'band' || continuousAxisConfig.scaleType === 'point') {
     throw new Error(`MUI X Charts: ${getAxisMessage(continuousAxisDirection, continuousAxisId)} should be a continuous type to display the bar series of id "${seriesId}".`);
   }
   if (process.env.NODE_ENV !== 'production') {
-    if (discreteAxisConfig.data.length < series.stackedData.length) {
-      warnOnce([`MUI X Charts: ${getAxisMessage(discreteAxisDirection, discreteAxisId)} has less data (${discreteAxisConfig.data.length} values) than the bar series of id "${seriesId}" (${series.stackedData.length} values).`, 'The axis data should have at least the same length than the series using it.'], 'error');
+    if (discreteAxisConfig.data.length < seriesDataLength) {
+      warnOnce([`MUI X Charts: ${getAxisMessage(discreteAxisDirection, discreteAxisId)} has less data (${discreteAxisConfig.data.length} values) than the bar series of id "${seriesId}" (${seriesDataLength} values).`, 'The axis data should have at least the same length than the series using it.'], 'error');
     }
   }
 }

package/esm/BarChart/index.d.ts

@@ -2,6 +2,7 @@ export * from "./BarChart.js";
 export * from "./BarPlot.js";
 export * from "./BarElement.js";
 export * from "./BarLabel/index.js";
+export * from "./FocusedBar.js";
 export * from "./barElementClasses.js";
 export * from "./BarChart.plugins.js";
 export { type BarProps } from "./AnimatedBarElement.js";

package/esm/BarChart/index.js

@@ -2,6 +2,7 @@ export * from "./BarChart.js";
 export * from "./BarPlot.js";
 export * from "./BarElement.js";
 export * from "./BarLabel/index.js";
+export * from "./FocusedBar.js";
 export * from "./barElementClasses.js";
 export * from "./BarChart.plugins.js";
 export { barClasses, getBarUtilityClass } from "./barClasses.js";

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

@@ -1,3 +1,3 @@
-import { CartesianExtremumGetter } from "../../../internals/plugins/models/seriesConfig/index.js";
+import { type CartesianExtremumGetter } from "../../../internals/plugins/models/seriesConfig/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 { ColorProcessor } from "../../../internals/plugins/models/index.js";
+import { type ColorProcessor } from "../../../internals/plugins/models/index.js";
 declare const getColor: ColorProcessor<'bar'>;
 export default getColor;

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

@@ -1,3 +1,5 @@
-import type { GetSeriesWithDefaultValues } from "../../../internals/plugins/models/seriesConfig/index.js";
-declare const getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'bar'>;
-export default getSeriesWithDefaultValues;
+import { type AllSeriesType } from "../../../models/seriesType/index.js";
+export declare function getSeriesWithDefaultValues<T extends 'bar'>(seriesData: AllSeriesType<T>, seriesIndex: number, colors: readonly string[]): AllSeriesType<T> & {
+  id: import("../../../index.js").SeriesId;
+  color: string;
+};

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

@@ -1,8 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
+export function getSeriesWithDefaultValues(seriesData, seriesIndex, colors) {
   return _extends({}, seriesData, {
     id: seriesData.id ?? `auto-generated-id-${seriesIndex}`,
     color: seriesData.color ?? colors[seriesIndex % colors.length]
   });
-};
-export default getSeriesWithDefaultValues;
+}

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { getBarDimensions } from "../../useBarPlotData.js";
+import { getBarDimensions } from "../../../internals/getBarDimensions.js";
 const tooltipItemPositionGetter = params => {
   const {
     series,

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

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

package/esm/BarChart/seriesConfig/index.js

@@ -4,7 +4,7 @@ import legendGetter from "./bar/legend.js";
 import getColor from "./bar/getColor.js";
 import tooltipGetter, { axisTooltipGetter } from "./bar/tooltip.js";
 import tooltipItemPositionGetter from "./bar/tooltipPosition.js";
-import getSeriesWithDefaultValues from "./bar/getSeriesWithDefaultValues.js";
+import { getSeriesWithDefaultValues } from "./bar/getSeriesWithDefaultValues.js";
 export const barSeriesConfig = {
   seriesProcessor,
   colorProcessor: getColor,

package/esm/BarChart/types.d.ts

@@ -5,15 +5,15 @@ export type AnimationData = {
   y: number;
   width: number;
   height: number;
-  yOrigin: number;
-  xOrigin: number;
-  layout: BarSeriesType['layout'];
 };
 export interface ProcessedBarSeriesData {
   seriesId: SeriesId;
   data: ProcessedBarData[];
   barLabel?: BarSeriesType['barLabel'];
   barLabelPlacement?: BarSeriesType['barLabelPlacement'];
+  layout: 'vertical' | 'horizontal';
+  xOrigin: number;
+  yOrigin: number;
 }
 export interface ProcessedBarData extends AnimationData {
   seriesId: SeriesId;
@@ -26,4 +26,7 @@ export interface MaskData extends AnimationData {
   id: string;
   hasNegative: boolean;
   hasPositive: boolean;
+  xOrigin: number;
+  yOrigin: number;
+  layout: 'horizontal' | 'vertical';
 }

package/esm/BarChart/useBarChartProps.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import type { BarChartProps } from "./BarChart.js";
-import { ChartContainerProps } from "../ChartContainer/index.js";
-import { BarPlotProps } from "./BarPlot.js";
-import { ChartsGridProps } from "../ChartsGrid/index.js";
-import { ChartsClipPathProps } from "../ChartsClipPath/index.js";
-import { ChartsOverlayProps } from "../ChartsOverlay/index.js";
-import { ChartsAxisProps } from "../ChartsAxis/index.js";
-import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
-import { ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
+import { type ChartContainerProps } from "../ChartContainer/index.js";
+import { type BarPlotProps } from "./BarPlot.js";
+import { type ChartsGridProps } from "../ChartsGrid/index.js";
+import { type ChartsClipPathProps } from "../ChartsClipPath/index.js";
+import { type ChartsOverlayProps } from "../ChartsOverlay/index.js";
+import { type ChartsAxisProps } from "../ChartsAxis/index.js";
+import { type ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
+import { type ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
 import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
-import { BarChartPluginSignatures } from "./BarChart.plugins.js";
+import { type BarChartPluginSignatures } from "./BarChart.plugins.js";
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.

package/esm/BarChart/useBarPlotData.d.ts

@@ -1,23 +1,8 @@
-import { ChartsXAxisProps, ChartsYAxisProps, ComputedAxis, ScaleName } from "../models/axis.js";
-import { ChartDrawingArea } from "../hooks/index.js";
-import { MaskData, ProcessedBarSeriesData } from "./types.js";
-import { ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.js";
-import { ChartSeriesDefaultized } from "../models/seriesType/config.js";
+import { type ChartsXAxisProps, type ChartsYAxisProps } from "../models/axis.js";
+import { type ChartDrawingArea } from "../hooks/index.js";
+import { type MaskData, type ProcessedBarSeriesData } from "./types.js";
+import { type ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.js";
 export declare function useBarPlotData(drawingArea: ChartDrawingArea, xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>): {
   completedData: ProcessedBarSeriesData[];
   masksData: MaskData[];
-};
-export declare function getBarDimensions(params: {
-  verticalLayout: boolean;
-  xAxisConfig: ComputedAxis<ScaleName, any, ChartsXAxisProps>;
-  yAxisConfig: ComputedAxis<ScaleName, any, ChartsYAxisProps>;
-  series: ChartSeriesDefaultized<'bar'>;
-  dataIndex: number;
-  numberOfGroups: number;
-  groupIndex: number;
-}): {
-  x: number;
-  y: number;
-  height: number;
-  width: number;
-} | null;
+};

package/esm/BarChart/useBarPlotData.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import getColor from "./seriesConfig/bar/getColor.js";
 import { useChartId, useXAxes, useYAxes } from "../hooks/index.js";
-import { checkScaleErrors } from "./checkScaleErrors.js";
+import { checkBarChartScaleErrors } from "./checkBarChartScaleErrors.js";
 import { useBarSeriesContext } from "../hooks/useBarSeries.js";
+import { getBarDimensions } from "../internals/getBarDimensions.js";
 export function useBarPlotData(drawingArea, xAxes, yAxes) {
   const seriesData = useBarSeriesContext() ?? {
     series: {},
@@ -27,14 +28,17 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
     return seriesIds.map(seriesId => {
       const xAxisId = series[seriesId].xAxisId ?? defaultXAxisId;
       const yAxisId = series[seriesId].yAxisId ?? defaultYAxisId;
+      const layout = series[seriesId].layout;
       const xAxisConfig = xAxes[xAxisId];
       const yAxisConfig = yAxes[yAxisId];
       const verticalLayout = series[seriesId].layout === 'vertical';
       const reverse = (verticalLayout ? yAxisConfig.reverse : xAxisConfig.reverse) ?? false;
-      checkScaleErrors(verticalLayout, seriesId, series[seriesId], xAxisId, xAxes, yAxisId, yAxes);
+      checkBarChartScaleErrors(verticalLayout, seriesId, series[seriesId].stackedData.length, xAxisId, xAxes, yAxisId, yAxes);
       const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
       const xScale = xAxisConfig.scale;
       const yScale = yAxisConfig.scale;
+      const xOrigin = Math.round(xScale(0) ?? 0);
+      const yOrigin = Math.round(yScale(0) ?? 0);
       const colorGetter = getColor(series[seriesId], xAxes[xAxisId], yAxes[yAxisId]);
       const seriesDataPoints = [];
       for (let dataIndex = 0; dataIndex < baseScaleConfig.data.length; dataIndex += 1) {
@@ -53,10 +57,7 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
         const stackId = series[seriesId].stack;
         const result = _extends({
           seriesId,
-          dataIndex,
-          layout: series[seriesId].layout,
-          xOrigin: Math.round(xScale(0) ?? 0),
-          yOrigin: Math.round(yScale(0) ?? 0)
+          dataIndex
         }, barDimensions, {
           color: colorGetter(dataIndex),
           value: series[seriesId].data[dataIndex],
@@ -72,16 +73,16 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
             height: 0,
             hasNegative: false,
             hasPositive: false,
-            layout: result.layout,
-            xOrigin: xScale(0),
-            yOrigin: yScale(0),
+            layout,
+            xOrigin,
+            yOrigin,
             x: 0,
             y: 0
           };
         }
         const mask = masks[result.maskId];
-        mask.width = result.layout === 'vertical' ? result.width : mask.width + result.width;
-        mask.height = result.layout === 'vertical' ? mask.height + result.height : result.height;
+        mask.width = layout === 'vertical' ? result.width : mask.width + result.width;
+        mask.height = layout === 'vertical' ? mask.height + result.height : result.height;
         mask.x = Math.min(mask.x === 0 ? Infinity : mask.x, result.x);
         mask.y = Math.min(mask.y === 0 ? Infinity : mask.y, result.y);
         const value = result.value ?? 0;
@@ -93,7 +94,10 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
         seriesId,
         barLabel: series[seriesId].barLabel,
         barLabelPlacement: series[seriesId].barLabelPlacement,
-        data: seriesDataPoints
+        data: seriesDataPoints,
+        layout,
+        xOrigin,
+        yOrigin
       };
     });
   });
@@ -101,79 +105,4 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
     completedData: data,
     masksData: Object.values(masks)
   };
-}
-
-/**
- * Solution of the equations
- * W = barWidth * N + offset * (N-1)
- * offset / (offset + barWidth) = r
- * @param bandWidth The width available to place bars.
- * @param numberOfGroups The number of bars to place in that space.
- * @param gapRatio The ratio of the gap between bars over the bar width.
- * @returns The bar width and the offset between bars.
- */
-function getBandSize({
-  bandWidth: W,
-  numberOfGroups: N,
-  gapRatio: r
-}) {
-  if (r === 0) {
-    return {
-      barWidth: W / N,
-      offset: 0
-    };
-  }
-  const barWidth = W / (N + (N - 1) * r);
-  const offset = r * barWidth;
-  return {
-    barWidth,
-    offset
-  };
-}
-function shouldInvertStartCoordinate(verticalLayout, baseValue, reverse) {
-  const isVerticalAndPositive = verticalLayout && baseValue > 0;
-  const isHorizontalAndNegative = !verticalLayout && baseValue < 0;
-  const invertStartCoordinate = isVerticalAndPositive || isHorizontalAndNegative;
-  return reverse ? !invertStartCoordinate : invertStartCoordinate;
-}
-export function getBarDimensions(params) {
-  const {
-    verticalLayout,
-    xAxisConfig,
-    yAxisConfig,
-    series,
-    dataIndex,
-    numberOfGroups,
-    groupIndex
-  } = params;
-  const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
-  const reverse = (verticalLayout ? yAxisConfig.reverse : xAxisConfig.reverse) ?? false;
-  const {
-    barWidth,
-    offset
-  } = getBandSize({
-    bandWidth: baseScaleConfig.scale.bandwidth(),
-    numberOfGroups,
-    gapRatio: baseScaleConfig.barGapRatio
-  });
-  const barOffset = groupIndex * (barWidth + offset);
-  const xScale = xAxisConfig.scale;
-  const yScale = yAxisConfig.scale;
-  const baseValue = baseScaleConfig.data[dataIndex];
-  const seriesValue = series.data[dataIndex];
-  if (seriesValue == null) {
-    return null;
-  }
-  const values = series.stackedData[dataIndex];
-  const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
-  const minValueCoord = Math.round(Math.min(...valueCoordinates));
-  const maxValueCoord = Math.round(Math.max(...valueCoordinates));
-  const barSize = seriesValue === 0 ? 0 : Math.max(series.minBarSize, maxValueCoord - minValueCoord);
-  const startCoordinate = shouldInvertStartCoordinate(verticalLayout, seriesValue, reverse) ? maxValueCoord - barSize : minValueCoord;
-  return {
-    x: verticalLayout ? xScale(baseValue) + barOffset : startCoordinate,
-    y: verticalLayout ? startCoordinate : yScale(baseValue) + barOffset,
-    height: verticalLayout ? barSize : barWidth,
-    width: verticalLayout ? barWidth : barSize
-  };
 }

package/esm/ChartContainer/ChartContainer.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { ChartSeriesType } from "../models/seriesType/config.js";
-import { ChartDataProviderProps } from "../ChartDataProvider/index.js";
-import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
-import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
-import { ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
+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;
 /**
  * It sets up the data providers as well as the `<svg>` for the chart.