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

package/modern/SparkLineChart/SparkLineChart.js

@@ -12,12 +12,7 @@ import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
 import { ChartsTooltip } from "../ChartsTooltip/index.js";
 import { ChartsAxisHighlight } from "../ChartsAxisHighlight/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SPARKLINE_DEFAULT_MARGIN = {
-  top: 5,
-  bottom: 5,
-  left: 5,
-  right: 5
-};
+const SPARK_LINE_DEFAULT_MARGIN = 5;
 
 /**
  * Demos:
@@ -34,7 +29,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
       yAxis,
       width,
       height,
-      margin = SPARKLINE_DEFAULT_MARGIN,
+      margin = SPARK_LINE_DEFAULT_MARGIN,
       color,
       sx,
       showTooltip,
@@ -86,10 +81,14 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
         length: data.length
       }, (_, index) => index),
       hideTooltip: xAxis === undefined
-    }, xAxis)],
+    }, xAxis, {
+      position: 'none'
+    })],
     yAxis: [_extends({
       id: DEFAULT_Y_AXIS_KEY
-    }, yAxis)],
+    }, yAxis, {
+      position: 'none'
+    })],
     colors: colors,
     sx: sx,
     disableAxisListener: (!showTooltip || slotProps?.tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
@@ -181,20 +180,16 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
-   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   * @default {
-   *   top: 5,
-   *   bottom: 5,
-   *   left: 5,
-   *   right: 5,
-   * }
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   * @default 5
    */
-  margin: PropTypes.shape({
+  margin: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
     bottom: PropTypes.number,
     left: PropTypes.number,
     right: PropTypes.number,
     top: PropTypes.number
-  }),
+  })]),
   /**
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
@@ -271,6 +266,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * Notice it is a single [[AxisConfig]] object, not an array of configuration.
    */
   xAxis: PropTypes.shape({
+    axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -293,13 +289,15 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
+    height: PropTypes.number,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'top']),
+    offset: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'none', 'top']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
@@ -308,6 +306,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelMinGap: PropTypes.number,
     tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
@@ -322,6 +321,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * Notice it is a single [[AxisConfig]] object, not an array of configuration.
    */
   yAxis: PropTypes.shape({
+    axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -350,7 +350,8 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['left', 'right']),
+    offset: PropTypes.number,
+    position: PropTypes.oneOf(['left', 'none', 'right']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
@@ -366,7 +367,8 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
-    valueFormatter: PropTypes.func
+    valueFormatter: PropTypes.func,
+    width: PropTypes.number
   })
 } : void 0;
 export { SparkLineChart };

package/modern/constants/index.d.ts

@@ -6,4 +6,11 @@ export declare const DEFAULT_MARGINS: {
   left: number;
   right: number;
 };
-export declare const DEFAULT_LEGEND_FACING_MARGIN = 20;
+export declare const DEFAULT_AXIS_SIZE_WIDTH = 30;
+export declare const DEFAULT_AXIS_SIZE_HEIGHT = 25;
+export declare const EMPTY_SIDES: {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+};

package/modern/constants/index.js

@@ -1,9 +1,16 @@
 export const DEFAULT_X_AXIS_KEY = 'DEFAULT_X_AXIS_KEY';
 export const DEFAULT_Y_AXIS_KEY = 'DEFAULT_Y_AXIS_KEY';
 export const DEFAULT_MARGINS = {
-  top: 50,
-  bottom: 50,
-  left: 50,
-  right: 50
+  top: 20,
+  bottom: 20,
+  left: 20,
+  right: 20
 };
-export const DEFAULT_LEGEND_FACING_MARGIN = 20;
+export const DEFAULT_AXIS_SIZE_WIDTH = 30;
+export const DEFAULT_AXIS_SIZE_HEIGHT = 25;
+export const EMPTY_SIDES = {
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0
+};

package/modern/context/AnimationProvider/useSkipAnimation.js

@@ -14,7 +14,7 @@ export function useSkipAnimation(skipAnimation) {
     data
   } = React.useContext(AnimationContext);
   if (!isInitialized) {
-    throw new Error(['MUI X: Could not find the animation 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 animation ref context.', 'It looks like you rendered your component outside of a ChartContainer parent component.'].join('\n'));
   }
   return skipAnimation || data.skipAnimation;
 }

package/modern/context/ChartProvider/ChartProvider.types.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { ChartAnyPluginSignature, ChartInstance, ChartPublicAPI, ConvertSignaturesIntoPlugins, MergeSignaturesProperty } from "../../internals/plugins/models/index.js";
-import { ChartStore } from "../../internals/plugins/utils/ChartStore.js";
-import { ChartCorePluginSignatures } from "../../internals/plugins/corePlugins/index.js";
-import { ChartSeriesConfig } from "../../internals/plugins/models/seriesConfig/index.js";
-import { UseChartBaseProps } from "../../internals/store/useCharts.types.js";
-import { ChartSeriesType } from "../../models/seriesType/config.js";
+import type { ChartAnyPluginSignature, ChartInstance, ChartPublicAPI, ConvertSignaturesIntoPlugins, MergeSignaturesProperty } from '../../internals/plugins/models';
+import type { ChartStore } from '../../internals/plugins/utils/ChartStore';
+import type { ChartCorePluginSignatures } from '../../internals/plugins/corePlugins';
+import type { ChartSeriesConfig } from '../../internals/plugins/models/seriesConfig';
+import type { UseChartBaseProps } from '../../internals/store/useCharts.types';
+import type { ChartSeriesType } from '../../models/seriesType/config';
 export type ChartContextValue<TSignatures extends readonly ChartAnyPluginSignature[], TOptionalSignatures extends readonly ChartAnyPluginSignature[] = []> = {
   /**
    * And object with all the methods needed to interact with the chart.

package/modern/context/PolarProvider/Polar.types.d.ts

@@ -1,5 +1,6 @@
 import { DatasetType } from "../../models/seriesType/config.js";
 import { AxisDefaultized, ScaleName, AxisId, AxisConfig, ChartsRotationAxisProps, ChartsRadiusAxisProps } from "../../models/axis.js";
+import { ChartsAxisProps } from "../../ChartsAxis/index.js";
 export type PolarProviderProps = {
   /**
    * The configuration of the rotation-axes.
@@ -16,10 +17,10 @@ export type PolarProviderProps = {
   /**
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
-  dataset?: DatasetType;
+  dataset?: Readonly<DatasetType>;
   children: React.ReactNode;
 };
-export type DefaultizedAxisConfig<Axis> = {
+export type DefaultizedAxisConfig<Axis extends ChartsAxisProps> = {
   [axisId: AxisId]: AxisDefaultized<ScaleName, any, Axis>;
 };
 export type PolarContextState = {

package/modern/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/modern/hooks/useAxis.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { selectorChartXAxis, selectorChartYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors.js";
+import { selectorChartXAxis, selectorChartYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 /**

package/modern/hooks/useSvgRef.js

@@ -9,7 +9,7 @@ import { useChartContext } from "../context/ChartProvider/index.js";
 export function useSvgRef() {
   const context = 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/modern/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/modern/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/modern/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/modern/internals/defaultizeMargin.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+export function defaultizeMargin(input, defaultMargin) {
+  if (typeof input === 'number') {
+    return {
+      top: input,
+      bottom: input,
+      left: input,
+      right: input
+    };
+  }
+  if (defaultMargin) {
+    return _extends({}, defaultMargin, input);
+  }
+  return input;
+}

package/modern/internals/domUtils.js

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

package/modern/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/modern/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.js

@@ -6,7 +6,8 @@ import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ownerWindow from '@mui/utils/ownerWindow';
 import { DEFAULT_MARGINS } from "../../../../constants/index.js";
-import { selectorChartDimensionsState } from "./useChartDimensions.selectors.js";
+import { selectorChartDrawingArea } from "./useChartDimensions.selectors.js";
+import { defaultizeMargin } from "../../../defaultizeMargin.js";
 const MAX_COMPUTE_RUN = 10;
 export const useChartDimensions = ({
   params,
@@ -32,36 +33,53 @@ export 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 _extends({}, prev, {
-        dimensions: _extends({}, 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 _extends({}, prev, {
-      dimensions: _extends({}, 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 _extends({}, 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;
@@ -134,7 +152,7 @@ export const useChartDimensions = ({
     if (options?.targetElement && options?.targetElement.closest('[data-drawing-container]')) {
       return true;
     }
-    const drawingArea = selectorChartDimensionsState(store.value);
+    const drawingArea = 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') {
@@ -159,17 +177,20 @@ useChartDimensions.params = {
 useChartDimensions.getDefaultizedParams = ({
   params
 }) => _extends({}, params, {
-  margin: params.margin ? _extends({}, DEFAULT_MARGINS, params.margin) : DEFAULT_MARGINS
+  margin: defaultizeMargin(params.margin, DEFAULT_MARGINS)
 });
 useChartDimensions.getInitialState = ({
   width,
   height,
   margin
-}) => ({
-  dimensions: _extends({}, 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
+    }
+  };
+};