@mui/x-charts 8.0.0-alpha.12 → 8.0.0-alpha.13

package/esm/models/axis.d.ts

@@ -1,5 +1,6 @@
 import type { ScaleBand, ScaleLogarithmic, ScalePower, ScaleTime, ScaleLinear, ScalePoint, ScaleOrdinal, ScaleSequential, ScaleThreshold } from '@mui/x-charts-vendor/d3-scale';
 import { SxProps } from '@mui/system/styleFunctionSx';
+import { MakeRequired } from '@mui/x-internals/types';
 import { ChartsAxisClasses } from "../ChartsAxis/axisClasses.js";
 import type { TickParams } from '../hooks/useTicks';
 import { ChartsTextProps } from "../ChartsText/index.js";
@@ -104,17 +105,54 @@ export interface ChartsAxisProps extends TickParams {
   sx?: SxProps;
 }
 export interface ChartsYAxisProps extends ChartsAxisProps {
+  axis?: 'y';
+}
+export interface ChartsXAxisProps extends ChartsAxisProps {
+  axis?: 'x';
   /**
-   * Position of the axis.
+   * The minimum gap in pixels between two tick labels.
+   * If two tick labels are closer than this minimum gap, one of them will be hidden.
+   * @default 4
    */
-  position?: 'left' | 'right';
+  tickLabelMinGap?: number;
 }
-export interface ChartsXAxisProps extends ChartsAxisProps {
+type AxisSideConfig<AxisProps extends ChartsAxisProps> = AxisProps extends ChartsXAxisProps ? {
   /**
    * Position of the axis.
+   *
+   * When set, the space for the axis is reserved, even if the axis is not displayed due to missing data.
+   *
+   * Set to 'none' to hide the axis.
+   *
+   * The first axis in the list will always have a default position.
    */
-  position?: 'top' | 'bottom';
-}
+  position?: 'top' | 'bottom' | 'none';
+  /**
+   * The height of the axis.
+   * @default 30
+   */
+  height?: number;
+} : AxisProps extends ChartsYAxisProps ? {
+  /**
+   * Position of the axis.
+   *
+   * When set, the space for the axis is reserved, even if the axis is not displayed due to missing data.
+   *
+   * Set to 'none' to hide the axis.
+   *
+   * The first axis in the list will always have a default position.
+   */
+  position?: 'left' | 'right' | 'none';
+  /**
+   * The width of the axis.
+   * @default 30
+   */
+  width?: number;
+} : {
+  position?: 'top' | 'bottom' | 'left' | 'right' | 'none';
+  height?: number;
+  width?: number;
+};
 export interface ChartsRotationAxisProps extends ChartsAxisProps {
   /**
    * The start angle (in deg).
@@ -242,7 +280,7 @@ export type AxisValueFormatterContext<S extends ScaleName = ScaleName> = {
    */
   scale: AxisScaleConfig[S]['scale'];
 };
-export type AxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps = ChartsXAxisProps | ChartsYAxisProps> = {
+export type AxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsAxisProps = ChartsXAxisProps | ChartsYAxisProps> = {
   /**
    * Id used to identify the axis.
    */
@@ -260,7 +298,7 @@ export type AxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps = Cha
   /**
    * The data used by `'band'` and `'point'` scales.
    */
-  data?: V[];
+  data?: readonly V[];
   /**
    * The key used to retrieve `data` from the `dataset` prop.
    */
@@ -280,6 +318,13 @@ export type AxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps = Cha
    * If `true`, Reverse the axis scaleBand.
    */
   reverse?: boolean;
+  /**
+   * The offset of the axis in pixels. It can be used to move the axis from its default position.
+   * X-axis: A top axis will move up, and a bottom axis will move down.
+   * Y-axis: A left axis will move left, and a right axis will move right.
+   * @default 0
+   */
+  offset?: number;
   /**
    * Defines the axis scale domain based on the min/max values of series linked to it.
    * - 'nice': Rounds the domain at human friendly values.
@@ -290,9 +335,9 @@ export type AxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps = Cha
     min: number;
     max: number;
   });
-} & Omit<Partial<AxisProps>, 'axisId'> & Partial<Omit<AxisScaleConfig[S], 'scale'>> & TickParams & AxisConfigExtension;
+} & Omit<Partial<AxisProps>, 'axisId'> & Partial<Omit<AxisScaleConfig[S], 'scale'>> & AxisSideConfig<AxisProps> & TickParams & AxisConfigExtension;
 export interface AxisConfigExtension {}
-export type AxisDefaultized<S extends ScaleName = ScaleName, V = any, AxisProps = ChartsXAxisProps | ChartsYAxisProps> = Omit<AxisConfig<S, V, AxisProps>, 'scaleType'> & AxisScaleConfig[S] & AxisScaleComputedConfig[S] & {
+export type AxisDefaultized<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsAxisProps = ChartsXAxisProps | ChartsYAxisProps> = MakeRequired<Omit<AxisConfig<S, V, AxisProps>, 'scaleType'>, 'offset'> & AxisScaleConfig[S] & AxisSideConfig<AxisProps> & AxisScaleComputedConfig[S] & {
   /**
    * An indication of the expected number of ticks.
    */
@@ -320,4 +365,5 @@ export interface ChartsAxisData {
    * The mapping of series ids to their value for this particular axis index.
    */
   seriesValues: Record<string, number | null | undefined>;
-}
+}
+export {};

package/esm/models/colorMapping.d.ts

@@ -33,7 +33,7 @@ export interface OrdinalColorConfig<Value = number | Date | string> {
    * The value to map.
    * If undefined, it will be integers from 0 to the number of colors.
    */
-  values?: Value[];
+  values?: readonly Value[];
   /**
    * The color palette.
    * Items equal to `values[k]` will get the color of `colors[k]`.

package/esm/models/index.d.ts

@@ -1,5 +1,4 @@
 export * from "./seriesType/index.js";
-export * from "./layout.js";
 export * from "./stacking.js";
 export type { AxisConfig, ChartsYAxisProps, ChartsXAxisProps, ScaleName, ContinuousScaleName, ChartsAxisData } from './axis';
 export type { PropsFromSlot } from '@mui/x-internals/slots';

package/esm/models/index.js

@@ -1,5 +1,4 @@
 export * from "./seriesType/index.js";
-export * from "./layout.js";
 export * from "./stacking.js";
 
 // Utils shared across the X packages

package/esm/models/seriesType/bar.d.ts

@@ -6,7 +6,7 @@ export interface BarSeriesType extends CommonSeriesType<number | null>, Cartesia
   /**
    * Data associated to each bar.
    */
-  data?: (number | null)[];
+  data?: readonly (number | null)[];
   /**
    * The key used to retrieve data from the dataset.
    */

package/esm/models/seriesType/config.d.ts

@@ -76,6 +76,6 @@ export type ChartSeriesDefaultized<T extends ChartSeriesType> = ChartsSeriesConf
 } : ChartsSeriesConfig[T]['series'];
 export type ChartItemIdentifier<T extends ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifier'];
 export type DatasetElementType<T> = {
-  [key: string]: T;
+  [key: string]: Readonly<T>;
 };
 export type DatasetType<T = number | string | Date | null | undefined> = DatasetElementType<T>[];

package/esm/models/seriesType/line.d.ts

@@ -29,7 +29,7 @@ export interface LineSeriesType extends CommonSeriesType<number | null>, Cartesi
   /**
    * Data associated to the line.
    */
-  data?: (number | null)[];
+  data?: readonly (number | null)[];
   /**
    * The key used to retrieve data from the dataset.
    */

package/esm/models/seriesType/pie.d.ts

@@ -27,7 +27,7 @@ export type DefaultizedPieValueType = PieValueType & Omit<D3PieArcDatum<any>, 'd
 export type ChartsPieSorting = 'none' | 'asc' | 'desc' | ((a: number, b: number) => number);
 export interface PieSeriesType<TData = PieValueType> extends CommonSeriesType<TData> {
   type: 'pie';
-  data: TData[];
+  data: Readonly<TData[]>;
   /**
    * The radius between circle center and the beginning of the arc.
    * Can be a number (in px) or a string with a percentage such as '50%'.

package/esm/models/seriesType/scatter.d.ts

@@ -11,7 +11,7 @@ export type ScatterValueType = {
 };
 export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType | null>, CartesianSeriesType {
   type: 'scatter';
-  data?: ScatterValueType[];
+  data?: readonly ScatterValueType[];
   markerSize?: number;
   /**
    * The label to display on the tooltip or the legend. It can be a string or a function.

package/esm/models/z-axis.d.ts

@@ -2,7 +2,7 @@ import type { ScaleOrdinal, ScaleSequential, ScaleThreshold } from '@mui/x-chart
 import { ContinuousColorConfig, OrdinalColorConfig, PiecewiseColorConfig } from "./colorMapping.js";
 export interface ZAxisConfig<V = any> {
   id: string;
-  data?: V[];
+  data?: readonly V[];
   /**
    * The key used to retrieve `data` from the `dataset` prop.
    */

package/hooks/useAxis.d.ts

@@ -10,7 +10,7 @@ import { AxisId } from "../models/axis.js";
  * @returns `{ xAxis, xAxisIds }` - The x-axes and their IDs.
  */
 export declare function useXAxes(): {
-  xAxis: import("../internals").DefaultizedAxisConfig<import("../internals").ChartsAxisProps>;
+  xAxis: import("../internals").DefaultizedAxisConfig<import("..").ChartsXAxisProps>;
   xAxisIds: string[];
 };
 /**
@@ -32,7 +32,7 @@ export declare function useYAxes(): {
  * @param {AxisId | undefined} axisId - If provided returns the x axis with axisId, else returns the values for the default x axis.
  * @returns The X axis.
  */
-export declare function useXAxis(axisId?: AxisId): import("../internals").AxisDefaultized<keyof import("../internals").AxisScaleConfig, any, import("../internals").ChartsAxisProps>;
+export declare function useXAxis(axisId?: AxisId): import("../internals").AxisDefaultized<keyof import("../internals").AxisScaleConfig, any, import("..").ChartsXAxisProps>;
 /**
  * Get the Y axis.
  * @param {AxisId | undefined} axisId - If provided returns the y axis with axisId, else returns the values for the default y axis.

package/hooks/useAxis.js

@@ -8,7 +8,7 @@ exports.useXAxes = useXAxes;
 exports.useXAxis = useXAxis;
 exports.useYAxes = useYAxes;
 exports.useYAxis = useYAxis;
-var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors");
+var _useChartCartesianAxisRendering = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors");
 var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
 /**
@@ -26,7 +26,7 @@ function useXAxes() {
   const {
     axis: xAxis,
     axisIds: xAxisIds
-  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartXAxis);
+  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxisRendering.selectorChartXAxis);
   return {
     xAxis,
     xAxisIds
@@ -48,7 +48,7 @@ function useYAxes() {
   const {
     axis: yAxis,
     axisIds: yAxisIds
-  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartYAxis);
+  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxisRendering.selectorChartYAxis);
   return {
     yAxis,
     yAxisIds
@@ -65,7 +65,7 @@ function useXAxis(axisId) {
   const {
     axis: xAxis,
     axisIds: xAxisIds
-  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartXAxis);
+  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxisRendering.selectorChartXAxis);
   const id = axisId ?? xAxisIds[0];
   return xAxis[id];
 }
@@ -80,7 +80,7 @@ function useYAxis(axisId) {
   const {
     axis: yAxis,
     axisIds: yAxisIds
-  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartYAxis);
+  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxisRendering.selectorChartYAxis);
   const id = axisId ?? yAxisIds[0];
   return yAxis[id];
 }

package/hooks/useSvgRef.js

@@ -13,7 +13,7 @@ var _ChartProvider = require("../context/ChartProvider");
 function useSvgRef() {
   const context = (0, _ChartProvider.useChartContext)();
   if (!context) {
-    throw new Error(['MUI X: Could not find the svg ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+    throw new Error(['MUI X: Could not find the svg ref context.', 'It looks like you rendered your component outside of a ChartContainer parent component.'].join('\n'));
   }
   return context.svgRef;
 }

package/index.js

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

package/internals/defaultizeColor.d.ts

@@ -1,10 +1,10 @@
 import { AllSeriesType } from "../models/seriesType/index.js";
 export declare function defaultizeColor(series: AllSeriesType, seriesIndex: number, colors: string[]): {
   data: {
-    value: number;
     label?: string | ((location: "tooltip" | "legend" | "arc") => string) | undefined;
     color: string;
-    labelMarkType?: "line" | "circle" | "square" | undefined;
+    labelMarkType?: "line" | "square" | "circle" | import("react").ComponentType<import("..").ChartsLabelCustomMarkProps> | undefined;
+    value: number;
     id?: import("..").PieItemId | undefined;
   }[];
   type: "pie";
@@ -46,24 +46,28 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
   highlightScope?: Partial<import("..").HighlightScope>;
   labelMarkType?: import("..").ChartsLabelMarkProps["type"];
 } | {
-  type: "bar";
-  data?: (number | null)[];
-  dataKey?: string;
+  type: "scatter";
+  data?: readonly import("..").ScatterValueType[];
+  markerSize?: number;
   label?: string | ((location: "tooltip" | "legend") => string);
-  layout?: "horizontal" | "vertical";
-  stackOffset?: import("..").StackOffsetType;
+  disableHover?: boolean;
+  zAxisId?: string;
+  datasetKeys?: {
+    x: string;
+    y: string;
+    z?: string;
+    id?: string;
+  };
   id?: import(".").SeriesId;
   color: string;
-  valueFormatter?: import(".").SeriesValueFormatter<number | null> | undefined;
+  valueFormatter?: import(".").SeriesValueFormatter<import("..").ScatterValueType | null> | undefined;
   highlightScope?: Partial<import("..").HighlightScope>;
   labelMarkType?: import("..").ChartsLabelMarkProps["type"];
   xAxisId?: string;
   yAxisId?: string;
-  stack?: string;
-  stackOrder?: import("..").StackOrderType;
 } | {
   type: "line";
-  data?: (number | null)[];
+  data?: readonly (number | null)[];
   dataKey?: string;
   stack?: string;
   area?: boolean;
@@ -85,23 +89,19 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
   yAxisId?: string;
   stackOrder?: import("..").StackOrderType;
 } | {
-  type: "scatter";
-  data?: import("..").ScatterValueType[];
-  markerSize?: number;
+  type: "bar";
+  data?: readonly (number | null)[];
+  dataKey?: string;
   label?: string | ((location: "tooltip" | "legend") => string);
-  disableHover?: boolean;
-  zAxisId?: string;
-  datasetKeys?: {
-    x: string;
-    y: string;
-    z?: string;
-    id?: string;
-  };
+  layout?: "horizontal" | "vertical";
+  stackOffset?: import("..").StackOffsetType;
   id?: import(".").SeriesId;
   color: string;
-  valueFormatter?: import(".").SeriesValueFormatter<import("..").ScatterValueType | null> | undefined;
+  valueFormatter?: import(".").SeriesValueFormatter<number | null> | undefined;
   highlightScope?: Partial<import("..").HighlightScope>;
   labelMarkType?: import("..").ChartsLabelMarkProps["type"];
   xAxisId?: string;
   yAxisId?: string;
+  stack?: string;
+  stackOrder?: import("..").StackOrderType;
 };

package/internals/defaultizeMargin.d.ts

@@ -0,0 +1,3 @@
+import type { ChartMargin, UseChartDimensionsParameters } from './plugins/corePlugins/useChartDimensions/useChartDimensions.types';
+export declare function defaultizeMargin(input: UseChartDimensionsParameters['margin'], defaultMargin: ChartMargin): ChartMargin;
+export declare function defaultizeMargin(input: UseChartDimensionsParameters['margin'], defaultMargin?: ChartMargin): Partial<ChartMargin> | undefined;

package/internals/defaultizeMargin.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultizeMargin = defaultizeMargin;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+function defaultizeMargin(input, defaultMargin) {
+  if (typeof input === 'number') {
+    return {
+      top: input,
+      bottom: input,
+      left: input,
+      right: input
+    };
+  }
+  if (defaultMargin) {
+    return (0, _extends2.default)({}, defaultMargin, input);
+  }
+  return input;
+}

package/internals/domUtils.js

@@ -67,6 +67,7 @@ function camelToMiddleLine(text) {
 const getStyleString = style => Object.keys(style).sort().reduce((result, s) => `${result}${camelToMiddleLine(s)}:${autoCompleteStyle(s, style[s])};`, '');
 exports.getStyleString = getStyleString;
 let domCleanTimeout;
+
 /**
  *
  * @param text The string to estimate

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.d.ts

@@ -1,3 +1,3 @@
 import { ChartPlugin } from "../../models/index.js";
-import { UseChartDimensionsSignature } from "./useChartDimensions.types.js";
+import type { UseChartDimensionsSignature } from './useChartDimensions.types';
 export declare const useChartDimensions: ChartPlugin<UseChartDimensionsSignature>;

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.js

@@ -14,6 +14,7 @@ var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedE
 var _ownerWindow = _interopRequireDefault(require("@mui/utils/ownerWindow"));
 var _constants = require("../../../../constants");
 var _useChartDimensions = require("./useChartDimensions.selectors");
+var _defaultizeMargin = require("../../../defaultizeMargin");
 const MAX_COMPUTE_RUN = 10;
 const useChartDimensions = ({
   params,
@@ -39,36 +40,53 @@ const useChartDimensions = ({
     const newHeight = Math.floor(parseFloat(computedStyle.height)) || 0;
     const newWidth = Math.floor(parseFloat(computedStyle.width)) || 0;
     store.update(prev => {
-      const prevWidth = prev.dimensions.width + prev.dimensions.left + prev.dimensions.right;
-      const prevHeight = prev.dimensions.height + prev.dimensions.top + prev.dimensions.bottom;
-      if (prevWidth === newWidth && prevHeight === newHeight) {
+      if (prev.dimensions.width === newWidth && prev.dimensions.height === newHeight) {
         return prev;
       }
       return (0, _extends2.default)({}, prev, {
-        dimensions: (0, _extends2.default)({}, prev.dimensions, {
-          width: newWidth - prev.dimensions.left - prev.dimensions.right,
-          height: newHeight - prev.dimensions.top - prev.dimensions.bottom
-        })
+        dimensions: {
+          margin: {
+            top: params.margin.top,
+            right: params.margin.right,
+            bottom: params.margin.bottom,
+            left: params.margin.left
+          },
+          width: params.width ?? newWidth,
+          height: params.height ?? newHeight,
+          propsWidth: params.width,
+          propsHeight: params.height
+        }
       });
     });
     return {
       height: newHeight,
       width: newWidth
     };
-  }, [store, svgRef]);
-  store.update(prev => {
-    if ((params.width === undefined || prev.dimensions.propsWidth === params.width) && (params.height === undefined || prev.dimensions.propsHeight === params.height)) {
-      return prev;
-    }
-    return (0, _extends2.default)({}, prev, {
-      dimensions: (0, _extends2.default)({}, prev.dimensions, {
-        width: params.width === undefined ? prev.dimensions.width : params.width - prev.dimensions.left - prev.dimensions.right,
-        height: params.height === undefined ? prev.dimensions.height : params.height - prev.dimensions.top - prev.dimensions.bottom,
-        propsWidth: params.width,
-        propsHeight: params.height
-      })
+  }, [store, svgRef, params.height, params.width,
+  // Margin is an object, so we need to include all the properties to prevent infinite loops.
+  params.margin.left, params.margin.right, params.margin.top, params.margin.bottom]);
+  React.useEffect(() => {
+    store.update(prev => {
+      const width = params.width ?? prev.dimensions.width;
+      const height = params.height ?? prev.dimensions.height;
+      return (0, _extends2.default)({}, prev, {
+        dimensions: {
+          margin: {
+            top: params.margin.top,
+            right: params.margin.right,
+            bottom: params.margin.bottom,
+            left: params.margin.left
+          },
+          width,
+          height,
+          propsHeight: params.height,
+          propsWidth: params.width
+        }
+      });
     });
-  });
+  }, [store, params.height, params.width,
+  // Margin is an object, so we need to include all the properties to prevent infinite loops.
+  params.margin.left, params.margin.right, params.margin.top, params.margin.bottom]);
   React.useEffect(() => {
     // Ensure the error detection occurs after the first rendering.
     stateRef.current.displayError = true;
@@ -141,7 +159,7 @@ const useChartDimensions = ({
     if (options?.targetElement && options?.targetElement.closest('[data-drawing-container]')) {
       return true;
     }
-    const drawingArea = (0, _useChartDimensions.selectorChartDimensionsState)(store.value);
+    const drawingArea = (0, _useChartDimensions.selectorChartDrawingArea)(store.value);
     const isInsideX = x >= drawingArea.left - 1 && x <= drawingArea.left + drawingArea.width;
     const isInsideY = y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height;
     if (options?.direction === 'x') {
@@ -167,17 +185,20 @@ useChartDimensions.params = {
 useChartDimensions.getDefaultizedParams = ({
   params
 }) => (0, _extends2.default)({}, params, {
-  margin: params.margin ? (0, _extends2.default)({}, _constants.DEFAULT_MARGINS, params.margin) : _constants.DEFAULT_MARGINS
+  margin: (0, _defaultizeMargin.defaultizeMargin)(params.margin, _constants.DEFAULT_MARGINS)
 });
 useChartDimensions.getInitialState = ({
   width,
   height,
   margin
-}) => ({
-  dimensions: (0, _extends2.default)({}, margin, {
-    width: (width ?? 0) - margin.left - margin.right,
-    height: (height ?? 0) - margin.top - margin.bottom,
-    propsWidth: width,
-    propsHeight: height
-  })
-});
+}) => {
+  return {
+    dimensions: {
+      margin,
+      width: width ?? 0,
+      height: height ?? 0,
+      propsWidth: width,
+      propsHeight: height
+    }
+  };
+};