@mui/x-charts 8.20.0 → 8.22.0

package/esm/hooks/useLineSeries.d.ts

@@ -1,6 +1,6 @@
-import { ProcessedSeries } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.types.js";
-import { SeriesId } from "../models/seriesType/common.js";
-import { ChartSeriesDefaultized } from "../models/seriesType/config.js";
+import { type ProcessedSeries } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.types.js";
+import { type SeriesId } from "../models/seriesType/common.js";
+import { type ChartSeriesDefaultized } from "../models/seriesType/config.js";
 export type UseLineSeriesReturnValue = ChartSeriesDefaultized<'line'>;
 export type UseLineSeriesContextReturnValue = ProcessedSeries['line'];
 /**

package/esm/hooks/usePieSeries.d.ts

@@ -1,6 +1,7 @@
-import { ProcessedSeries } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.types.js";
-import { SeriesId } from "../models/seriesType/common.js";
-import { ChartSeriesDefaultized } from "../models/seriesType/config.js";
+import type { ProcessedSeries } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.types.js";
+import type { SeriesId } from "../models/seriesType/common.js";
+import type { ChartSeriesDefaultized } from "../models/seriesType/config.js";
+import type { PieSeriesLayout } from "../models/seriesType/pie.js";
 export type UsePieSeriesReturnValue = ChartSeriesDefaultized<'pie'>;
 export type UsePieSeriesContextReturnValue = ProcessedSeries['pie'];
 /**
@@ -32,4 +33,9 @@ export declare function usePieSeries(seriesIds: SeriesId[]): UsePieSeriesReturnV
  * - seriesOrder: the array of series ids.
  * @returns the pie series
  */
-export declare function usePieSeriesContext(): UsePieSeriesContextReturnValue;
+export declare function usePieSeriesContext(): UsePieSeriesContextReturnValue;
+/**
+ * Get access to the pie layout.
+ * @returns {Record<SeriesId, PieSeriesLayout>} the pie layout
+ */
+export declare function usePieSeriesLayout(): Record<SeriesId, PieSeriesLayout>;

package/esm/hooks/usePieSeries.js

@@ -1,6 +1,9 @@
 'use client';
 
 import { useSeriesOfType, useAllSeriesOfType } from "../internals/seriesSelectorOfType.js";
+import { useStore } from "../internals/store/useStore.js";
+import { selectorChartSeriesLayout } from "../internals/plugins/corePlugins/useChartSeries/index.js";
+import { useSelector } from "../internals/store/useSelector.js";
 
 /**
  * Get access to the internal state of pie series.
@@ -37,4 +40,14 @@ export function usePieSeries(seriesIds) {
  */
 export function usePieSeriesContext() {
   return useAllSeriesOfType('pie');
+}
+
+/**
+ * Get access to the pie layout.
+ * @returns {Record<SeriesId, PieSeriesLayout>} the pie layout
+ */
+export function usePieSeriesLayout() {
+  const store = useStore();
+  const seriesLayout = useSelector(store, selectorChartSeriesLayout);
+  return seriesLayout.pie ?? {};
 }

package/esm/hooks/useRadarSeries.d.ts

@@ -1,6 +1,6 @@
-import { ProcessedSeries } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.types.js";
-import { SeriesId } from "../models/seriesType/common.js";
-import { ChartSeriesDefaultized } from "../models/seriesType/config.js";
+import { type ProcessedSeries } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.types.js";
+import { type SeriesId } from "../models/seriesType/common.js";
+import { type ChartSeriesDefaultized } from "../models/seriesType/config.js";
 export type UseRadarSeriesReturnValue = ChartSeriesDefaultized<'radar'>;
 export type UseRadarSeriesContextReturnValue = ProcessedSeries['radar'];
 /**

package/esm/hooks/useScale.d.ts

@@ -1,4 +1,4 @@
-import { AxisId, AxisScaleConfig, D3Scale, ScaleName } from "../models/axis.js";
+import { type AxisId, type AxisScaleConfig, type D3Scale, type ScaleName } from "../models/axis.js";
 /**
  * For a given scale return a function that map value to their position.
  * Useful when dealing with specific scale such as band.

package/esm/hooks/useScatterSeries.d.ts

@@ -1,6 +1,6 @@
-import { ProcessedSeries } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.types.js";
-import { SeriesId } from "../models/seriesType/common.js";
-import { ChartSeriesDefaultized } from "../models/seriesType/config.js";
+import { type ProcessedSeries } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.types.js";
+import { type SeriesId } from "../models/seriesType/common.js";
+import { type ChartSeriesDefaultized } from "../models/seriesType/config.js";
 export type UseScatterSeriesReturnValue = ChartSeriesDefaultized<'scatter'>;
 export type UseScatterSeriesContextReturnValue = ProcessedSeries['scatter'];
 /**

package/esm/hooks/useSvgRef.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 /**
  * Get the ref for the SVG element.
  * @returns The SVG ref.

package/esm/hooks/useTicks.d.ts

@@ -1,4 +1,5 @@
-import { AxisConfig, D3Scale } from "../models/axis.js";
+import type { AxisConfig, D3Scale } from "../models/axis.js";
+import type { OrdinalTimeTicks } from "../models/timeTicks.js";
 export interface TickParams {
   /**
    * Maximal step between two ticks.
@@ -39,6 +40,11 @@ export interface TickParams {
    * @default 'middle'
    */
   tickLabelPlacement?: 'middle' | 'tick';
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
 }
 export type TickItemType = {
   /**
@@ -49,13 +55,22 @@ export type TickItemType = {
   offset: number;
   labelOffset: number;
 };
-export declare function getTicks(options: {
+/**
+ * Returns a new domain where each tick is at least {@link tickSpacing}px from the next one.
+ * Assumes tick spacing is greater than 0.
+ * @param domain Domain of the scale.
+ * @param range Range of the scale.
+ * @param tickSpacing Spacing in pixels.
+ */
+export declare function applyTickSpacing<T>(domain: T[], range: [number, number], tickSpacing: number): T[];
+interface GetTicksOptions extends Pick<TickParams, 'tickInterval' | 'tickPlacement' | 'tickLabelPlacement' | 'tickSpacing'>, Required<Pick<TickParams, 'tickNumber'>> {
   scale: D3Scale;
   valueFormatter?: AxisConfig['valueFormatter'];
   isInside: (offset: number) => boolean;
-} & Pick<TickParams, 'tickInterval' | 'tickPlacement' | 'tickLabelPlacement'> & Required<Pick<TickParams, 'tickNumber'>>): TickItemType[];
-export declare function useTicks(options: {
-  scale: D3Scale;
-  valueFormatter?: AxisConfig['valueFormatter'];
+  ordinalTimeTicks?: OrdinalTimeTicks;
+}
+export declare function getTicks(options: GetTicksOptions): TickItemType[];
+export declare function useTicks(options: Omit<GetTicksOptions, 'isInside'> & {
   direction: 'x' | 'y';
-} & Pick<TickParams, 'tickInterval' | 'tickPlacement' | 'tickLabelPlacement'> & Required<Pick<TickParams, 'tickNumber'>>): TickItemType[];
+}): TickItemType[];
+export {};

package/esm/hooks/useTicks.js

@@ -1,9 +1,11 @@
 'use client';
 
 import * as React from 'react';
-import { useChartContext } from "../context/ChartProvider/index.js";
 import { isOrdinalScale } from "../internals/scaleGuards.js";
 import { isInfinity } from "../internals/isInfinity.js";
+import { tickFrequencies } from "../utils/timeTicks.js";
+import { isDateData } from "../internals/dateHelpers.js";
+import { useChartContext } from "../context/ChartProvider/useChartContext.js";
 const offsetRatio = {
   start: 0,
   extremities: 0,
@@ -13,24 +15,135 @@ const offsetRatio = {
 function getTickPosition(scale, value, placement) {
   return scale(value) - (scale.step() - scale.bandwidth()) / 2 + offsetRatio[placement] * scale.step();
 }
+
+/**
+ * Returns a new domain where each tick is at least {@link tickSpacing}px from the next one.
+ * Assumes tick spacing is greater than 0.
+ * @param domain Domain of the scale.
+ * @param range Range of the scale.
+ * @param tickSpacing Spacing in pixels.
+ */
+export function applyTickSpacing(domain, range, tickSpacing) {
+  const rangeSpan = Math.abs(range[1] - range[0]);
+  const every = Math.ceil(domain.length / (rangeSpan / tickSpacing));
+  if (Number.isNaN(every) || every <= 1) {
+    return domain;
+  }
+  return domain.filter((_, index) => index % every === 0);
+}
+function getTimeTicks(domain, tickNumber, ticksFrequencies, scale, isInside) {
+  if (ticksFrequencies.length === 0) {
+    return [];
+  }
+  const isReversed = scale.range()[0] > scale.range()[1];
+  // Indexes are inclusive regarding the entire band.
+  const startIndex = domain.findIndex(value => {
+    return isInside(getTickPosition(scale, value, isReversed ? 'start' : 'end'));
+  });
+  const endIndex = domain.findLastIndex(value => isInside(getTickPosition(scale, value, isReversed ? 'end' : 'start')));
+  const start = domain[0];
+  const end = domain[domain.length - 1];
+  if (!(start instanceof Date) || !(end instanceof Date)) {
+    return [];
+  }
+  let startFrequencyIndex = 0;
+  for (let i = 0; i < ticksFrequencies.length; i += 1) {
+    if (ticksFrequencies[i].getTickNumber(start, end) !== 0) {
+      startFrequencyIndex = i;
+      break;
+    }
+  }
+  let endFrequencyIndex = startFrequencyIndex;
+  for (let i = startFrequencyIndex; i < ticksFrequencies.length; i += 1) {
+    if (i === ticksFrequencies.length - 1) {
+      // If we reached the end, use the last tick frequency
+      endFrequencyIndex = i;
+      break;
+    }
+    const prevTickCount = ticksFrequencies[i].getTickNumber(start, end);
+    const nextTickCount = ticksFrequencies[i + 1].getTickNumber(start, end);
+
+    // Smooth ratio between ticks steps: ticksNumber[i]*ticksNumber[i+1] <= targetTickNumber^2
+    if (nextTickCount > tickNumber || tickNumber / prevTickCount < nextTickCount / tickNumber) {
+      endFrequencyIndex = i;
+      break;
+    }
+  }
+  const ticks = [];
+  for (let tickIndex = Math.max(1, startIndex); tickIndex <= endIndex; tickIndex += 1) {
+    for (let i = startFrequencyIndex; i <= endFrequencyIndex; i += 1) {
+      const prevDate = domain[tickIndex - 1];
+      const currentDate = domain[tickIndex];
+      if (prevDate instanceof Date && currentDate instanceof Date && ticksFrequencies[i].isTick(prevDate, currentDate)) {
+        ticks.push({
+          index: tickIndex,
+          formatter: ticksFrequencies[i].format
+        });
+
+        // once we found a matching tick space, we can break the inner loop
+        break;
+      }
+    }
+  }
+  return ticks;
+}
 export function getTicks(options) {
   const {
     scale,
     tickNumber,
     valueFormatter,
     tickInterval,
-    tickPlacement = 'extremities',
+    tickPlacement: tickPlacementProp,
     tickLabelPlacement: tickLabelPlacementProp,
-    isInside
+    tickSpacing,
+    isInside,
+    ordinalTimeTicks
   } = options;
+  if (ordinalTimeTicks !== undefined && isDateData(scale.domain()) && isOrdinalScale(scale)) {
+    // ordinal scale with spaced ticks.
+    const domain = scale.domain();
+    if (domain.length === 0 || domain.length === 1) {
+      return [];
+    }
+    const tickPlacement = 'middle';
+    const ticksIndexes = getTimeTicks(domain, tickNumber, ordinalTimeTicks.map(tickDef => typeof tickDef === 'string' ? tickFrequencies[tickDef] : tickDef), scale, isInside);
+    return ticksIndexes.map(({
+      index,
+      formatter
+    }) => {
+      const value = domain[index];
+      const formattedValue = formatter(value);
+      return {
+        value,
+        formattedValue,
+        offset: getTickPosition(scale, value, tickPlacement),
+        labelOffset: 0
+      };
+    });
+  }
+  const tickPlacement = tickPlacementProp ?? 'extremities';
 
-  // band scale
+  // Standard ordinal scale: 1 item =1 tick
   if (isOrdinalScale(scale)) {
     const domain = scale.domain();
     const tickLabelPlacement = tickLabelPlacementProp ?? 'middle';
+    let filteredDomain = domain;
+    if (typeof tickInterval === 'object' && tickInterval != null) {
+      filteredDomain = tickInterval;
+    } else {
+      if (typeof tickInterval === 'function') {
+        filteredDomain = filteredDomain.filter(tickInterval);
+      }
+      if (tickSpacing !== undefined && tickSpacing > 0) {
+        filteredDomain = applyTickSpacing(filteredDomain, scale.range(), tickSpacing);
+      }
+    }
+    if (filteredDomain.length === 0) {
+      return [];
+    }
     if (scale.bandwidth() > 0) {
       // scale type = 'band'
-      const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
+
       const isReversed = scale.range()[0] > scale.range()[1];
       // Indexes are inclusive regarding the entire band.
       const startIndex = filteredDomain.findIndex(value => {
@@ -58,7 +171,6 @@ export function getTicks(options) {
     }
 
     // scale type = 'point'
-    const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
     return filteredDomain.map(value => {
       const defaultTickLabel = `${value}`;
       return {
@@ -126,7 +238,9 @@ export function useTicks(options) {
     tickInterval,
     tickPlacement = 'extremities',
     tickLabelPlacement,
-    direction
+    tickSpacing,
+    direction,
+    ordinalTimeTicks
   } = options;
   const {
     instance
@@ -138,7 +252,9 @@ export function useTicks(options) {
     tickPlacement,
     tickInterval,
     tickLabelPlacement,
+    tickSpacing,
     valueFormatter,
-    isInside
-  }), [scale, tickNumber, tickPlacement, tickInterval, tickLabelPlacement, valueFormatter, isInside]);
+    isInside,
+    ordinalTimeTicks
+  }), [scale, tickNumber, tickPlacement, tickInterval, tickLabelPlacement, tickSpacing, valueFormatter, isInside, ordinalTimeTicks]);
 }

package/esm/hooks/useTicksGrouped.d.ts

@@ -1,5 +1,5 @@
 import type { ScaleBand, ScalePoint } from '@mui/x-charts-vendor/d3-scale';
-import { AxisConfig, type AxisGroup } from "../models/axis.js";
+import { type AxisConfig, type AxisGroup } from "../models/axis.js";
 import type { TickParams } from "./useTicks.js";
 export type GroupedTickItemType = {
   /**

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.20.0
+ * @mui/x-charts v8.22.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/Flatbush.d.ts

@@ -1,4 +1,3 @@
-import FlatQueue from 'flatqueue';
 type TypedArrayConstructor = Int8ArrayConstructor | Uint8ArrayConstructor | Uint8ClampedArrayConstructor | Int16ArrayConstructor | Uint16ArrayConstructor | Int32ArrayConstructor | Uint32ArrayConstructor | Float32ArrayConstructor | Float64ArrayConstructor;
 export declare class Flatbush {
   _queue: FlatQueue<number>;

package/esm/internals/Flatbush.js

@@ -1,6 +1,6 @@
 // @ts-nocheck
 /* eslint-disable */
-import FlatQueue from 'flatqueue';
+import FlatQueue from '@mui/x-charts-vendor/flatqueue';
 const ARRAY_TYPES = [Int8Array, Uint8Array, Uint8ClampedArray, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array, Float64Array];
 const VERSION = 3; // serialized format version
 

package/esm/internals/colorScale.d.ts

@@ -1,5 +1,5 @@
-import { ScaleOrdinal } from '@mui/x-charts-vendor/d3-scale';
-import { ContinuousColorConfig, PiecewiseColorConfig, OrdinalColorConfig } from "../models/colorMapping.js";
+import { type ScaleOrdinal } from '@mui/x-charts-vendor/d3-scale';
+import { type ContinuousColorConfig, type PiecewiseColorConfig, type OrdinalColorConfig } from "../models/colorMapping.js";
 export declare function getSequentialColorScale<Value extends number | Date>(config: ContinuousColorConfig<Value> | PiecewiseColorConfig<Value>): import("@mui/x-charts-vendor/d3-scale").ScaleThreshold<Value, string, never> | import("@mui/x-charts-vendor/d3-scale").ScaleSequential<string, never>;
 export declare function getOrdinalColorScale<Value extends number | Date | string>(config: OrdinalColorConfig<Value>): ScaleOrdinal<Value, string, null | string> | ScaleOrdinal<number, string, null | string>;
-export declare function getColorScale(config: ContinuousColorConfig | PiecewiseColorConfig | OrdinalColorConfig): import("@mui/x-charts-vendor/d3-scale").ScaleSequential<string, never> | ScaleOrdinal<number, string, string | null> | ScaleOrdinal<string | number | Date, string, string | null> | import("@mui/x-charts-vendor/d3-scale").ScaleThreshold<number | Date, string, never>;
+export declare function getColorScale(config: ContinuousColorConfig | PiecewiseColorConfig | OrdinalColorConfig): ScaleOrdinal<string | number | Date, string, string | null> | ScaleOrdinal<number, string, string | null> | import("@mui/x-charts-vendor/d3-scale").ScaleSequential<string, never> | import("@mui/x-charts-vendor/d3-scale").ScaleThreshold<number | Date, string, never>;

package/esm/internals/components/ChartsAxesGradients/ChartsContinuousGradient.d.ts

@@ -1,4 +1,4 @@
-import { ContinuousColorConfig } from "../../../models/colorMapping.js";
+import { type ContinuousColorConfig } from "../../../models/colorMapping.js";
 type ChartsContinuousGradientProps = {
   isReversed?: boolean;
   gradientId: string;

package/esm/internals/components/ChartsAxesGradients/ChartsContinuousGradientObjectBound.d.ts

@@ -1,4 +1,4 @@
-import { ContinuousColorConfig } from "../../../models/colorMapping.js";
+import { type ContinuousColorConfig } from "../../../models/colorMapping.js";
 type ChartsContinuousGradientObjectBoundProps = {
   isReversed?: boolean;
   gradientId: string;

package/esm/internals/components/ChartsAxesGradients/ChartsPiecewiseGradient.d.ts

@@ -1,4 +1,4 @@
-import { PiecewiseColorConfig } from "../../../models/colorMapping.js";
+import { type PiecewiseColorConfig } from "../../../models/colorMapping.js";
 type ChartsPiecewiseGradientProps = {
   isReversed?: boolean;
   gradientId: string;

package/esm/internals/components/NotRendered.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 /**
  * This component is used to assert that a certain component should not be rendered.
  * It is used in cases where we want to apply styles to a component that is not rendered because we use the `as` prop (introduced by `styled`) to replace the rendered component.

package/esm/internals/configInit.d.ts

@@ -1,4 +1,4 @@
-import { CartesianChartSeriesType, PolarChartSeriesType } from "../models/seriesType/config.js";
+import { type CartesianChartSeriesType, type PolarChartSeriesType } from "../models/seriesType/config.js";
 declare class CartesianSeriesTypes {
   types: Set<CartesianChartSeriesType>;
   constructor();

package/esm/internals/createSvgIcon.d.ts

@@ -1,3 +1,3 @@
-import * as React from 'react';
-import { ChartBaseIconProps } from "../models/slots/chartsBaseSlotProps.js";
+import type * as React from 'react';
+import { type ChartBaseIconProps } from "../models/slots/chartsBaseSlotProps.js";
 export declare const createSvgIcon: (path: React.ReactNode, displayName?: string) => (props: ChartBaseIconProps) => React.ReactNode;

package/esm/internals/dateHelpers.d.ts

@@ -1,6 +1,6 @@
-import { NumberValue } from '@mui/x-charts-vendor/d3-scale';
-import { AxisConfig } from "../models/index.js";
-import { ChartsAxisProps } from "../models/axis.js";
+import { type NumberValue } from '@mui/x-charts-vendor/d3-scale';
+import { type AxisConfig } from "../models/index.js";
+import { type ChartsAxisProps } from "../models/axis.js";
 /**
  * Checks if the provided data array contains Date objects.
  * @param data The data array to check.

package/esm/internals/defaultValueFormatters.d.ts

@@ -1,4 +1,4 @@
-import { AxisValueFormatterContext, ContinuousScaleName, D3ContinuousScale } from "../models/axis.js";
+import { type AxisValueFormatterContext, type ContinuousScaleName, type D3ContinuousScale } from "../models/axis.js";
 /**
  * Creates a default formatter function for continuous scales (e.g., linear, sqrt, log).
  * @returns A formatter function for continuous values.

package/esm/internals/domUtils.d.ts

@@ -1,22 +1,25 @@
-import * as React from 'react';
+import type * as React from 'react';
+export interface SVGCSSProperties extends Omit<React.CSSProperties, 'dominantBaseline'> {
+  dominantBaseline?: React.SVGAttributes<SVGTextElement>['dominantBaseline'];
+}
 export declare function clearStringMeasurementCache(): void;
 /**
  * Converts a style object into a string to be used as a cache key
  * @param style React style object
  * @returns CSS styling string
  */
-export declare function getStyleString(style: React.CSSProperties): string;
+export declare function getStyleString(style: SVGCSSProperties): string;
 /**
  *
  * @param text The string to estimate
  * @param style The style applied
  * @returns width and height of the text
  */
-export declare const getStringSize: (text: string | number, style?: React.CSSProperties) => {
+export declare const getStringSize: (text: string | number, style?: SVGCSSProperties) => {
   width: number;
   height: number;
 };
-export declare function batchMeasureStrings(texts: Iterable<string | number>, style?: React.CSSProperties): Map<string | number, {
+export declare function batchMeasureStrings(texts: Iterable<string | number>, style?: SVGCSSProperties): Map<string | number, {
   width: number;
   height: number;
 }>;

package/esm/internals/findMinMax.d.ts

@@ -1 +1,8 @@
+/**
+ * Efficiently finds the minimum and maximum values in an array of numbers.
+ * This functions helps preventing maximum call stack errors when dealing with large datasets.
+ *
+ * @param data The array of numbers to evaluate
+ * @returns [min, max] as numbers
+ */
 export declare function findMinMax(data: readonly number[]): [number, number];

package/esm/internals/findMinMax.js

@@ -1,3 +1,10 @@
+/**
+ * Efficiently finds the minimum and maximum values in an array of numbers.
+ * This functions helps preventing maximum call stack errors when dealing with large datasets.
+ *
+ * @param data The array of numbers to evaluate
+ * @returns [min, max] as numbers
+ */
 export function findMinMax(data) {
   let min = Infinity;
   let max = -Infinity;

package/esm/internals/getBandSize.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Solution of the equations
+ * W = barWidth * N + offset * (N-1)
+ * offset / (offset + barWidth) = r
+ * @param bandWidth (W) The width available to place bars.
+ * @param groupCount (N) The number of bars to place in that space.
+ * @param gapRatio (r) The ratio of the gap between bars over the bar width.
+ * @returns The bar width and the offset between bars.
+ */
+export declare function getBandSize(bandWidth: number, groupCount: number, gapRatio: number): {
+  barWidth: number;
+  offset: number;
+};

package/esm/internals/getBandSize.js

@@ -0,0 +1,23 @@
+/**
+ * Solution of the equations
+ * W = barWidth * N + offset * (N-1)
+ * offset / (offset + barWidth) = r
+ * @param bandWidth (W) The width available to place bars.
+ * @param groupCount (N) The number of bars to place in that space.
+ * @param gapRatio (r) The ratio of the gap between bars over the bar width.
+ * @returns The bar width and the offset between bars.
+ */
+export function getBandSize(bandWidth, groupCount, gapRatio) {
+  if (gapRatio === 0) {
+    return {
+      barWidth: bandWidth / groupCount,
+      offset: 0
+    };
+  }
+  const barWidth = bandWidth / (groupCount + (groupCount - 1) * gapRatio);
+  const offset = gapRatio * barWidth;
+  return {
+    barWidth,
+    offset
+  };
+}

package/esm/internals/getBarDimensions.d.ts

@@ -0,0 +1,17 @@
+import type { ScaleName, ChartsXAxisProps, ChartsYAxisProps } from "../models/index.js";
+import type { ComputedAxis } from "../models/axis.js";
+import type { ChartSeriesDefaultized } from "../models/seriesType/config.js";
+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/internals/getBarDimensions.js

@@ -0,0 +1,44 @@
+import { getBandSize } from "./getBandSize.js";
+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(baseScaleConfig.scale.bandwidth(), numberOfGroups, 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/internals/getCurve.d.ts

@@ -1,2 +1,2 @@
-import { CurveType } from "../models/curve.js";
+import { type CurveType } from "../models/curve.js";
 export declare function getCurveFactory(curveType?: CurveType): import("@mui/x-charts-vendor/d3-shape").CurveFactory;

package/esm/internals/getScale.d.ts

@@ -1,3 +1,3 @@
-import { NumberValue } from '@mui/x-charts-vendor/d3-scale';
-import { ContinuousScaleName, D3ContinuousScale } from "../models/axis.js";
+import { type NumberValue } from '@mui/x-charts-vendor/d3-scale';
+import { type ContinuousScaleName, type D3ContinuousScale } from "../models/axis.js";
 export declare function getScale<Domain extends NumberValue = any, Range = any>(scaleType: ContinuousScaleName, domain: Iterable<Domain>, range: readonly Range[]): D3ContinuousScale<Range, Range>;

package/esm/internals/getSeriesColorFn.d.ts

@@ -1,4 +1,4 @@
-import { CommonSeriesType, ColorCallbackValue } from "../models/seriesType/common.js";
+import { type CommonSeriesType, type ColorCallbackValue } from "../models/seriesType/common.js";
 export declare function getSeriesColorFn<TValue>(series: {
   color: NonNullable<CommonSeriesType<TValue>['color']>;
   colorGetter?: CommonSeriesType<TValue>['colorGetter'];

package/esm/internals/getWordsByLines.d.ts

@@ -1,6 +1,7 @@
+import type * as React from 'react';
 export type ChartsTextBaseline = 'hanging' | 'central' | 'auto' | 'text-after-edge' | 'text-before-edge';
 export type ChartsTextAnchor = 'start' | 'middle' | 'end';
-export interface ChartsTextStyle extends React.CSSProperties {
+export interface ChartsTextStyle extends Omit<React.CSSProperties, 'dominantBaseline'> {
   angle?: number;
   /**
    * The text baseline