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

package/ChartContainer/useChartContainerProps.js

@@ -9,7 +9,7 @@ exports.useChartContainerProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _allPlugins = require("../internals/plugins/allPlugins");
-const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "skipAnimation", "seriesConfig", "plugins"];
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins"];
 const useChartContainerProps = (props, ref) => {
   const _ref = props,
     {
@@ -33,6 +33,8 @@ const useChartContainerProps = (props, ref) => {
       xAxis,
       yAxis,
       zAxis,
+      rotationAxis,
+      radiusAxis,
       skipAnimation,
       seriesConfig,
       plugins
@@ -49,6 +51,7 @@ const useChartContainerProps = (props, ref) => {
     series,
     colors,
     dataset,
+    disableAxisListener,
     highlightedItem,
     onHighlightChange,
     onAxisClick,
@@ -58,10 +61,11 @@ const useChartContainerProps = (props, ref) => {
     xAxis,
     yAxis,
     zAxis,
+    rotationAxis,
+    radiusAxis,
     skipAnimation,
     width,
     height,
-    disableAxisListener,
     seriesConfig,
     plugins: plugins ?? _allPlugins.ALL_PLUGINS
   };

package/ChartDataProvider/ChartDataProvider.d.ts

@@ -14,7 +14,7 @@ export type ChartDataProviderProps<TSeries extends ChartSeriesType = ChartSeries
  *
  * Demos:
  *
- * - [Composition](https://mui.com/x/api/charts/composition/)
+ * - [Composition](https://mui.com/x/react-charts/composition/)
  *
  * API:
  *
@@ -28,7 +28,7 @@ export type ChartDataProviderProps<TSeries extends ChartSeriesType = ChartSeries
  * >
  *   <ChartsSurface>
  *      <BarPlot />
- *      <ChartsXAxis position="bottom" axisId="x-axis" />
+ *      <ChartsXAxis axisId="x-axis" />
  *   </ChartsSurface>
  *   {'Custom Legend Component'}
  * </ChartDataProvider>

package/ChartDataProvider/ChartDataProvider.js

@@ -21,7 +21,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  * Demos:
  *
- * - [Composition](https://mui.com/x/api/charts/composition/)
+ * - [Composition](https://mui.com/x/react-charts/composition/)
  *
  * API:
  *
@@ -35,7 +35,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  * >
  *   <ChartsSurface>
  *      <BarPlot />
- *      <ChartsXAxis position="bottom" axisId="x-axis" />
+ *      <ChartsXAxis axisId="x-axis" />
  *   </ChartsSurface>
  *   {'Custom Legend Component'}
  * </ChartDataProvider>
@@ -81,7 +81,8 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.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`.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
    */
   margin: _propTypes.default.any,
   /**

package/ChartDataProvider/useChartDataProviderProps.d.ts

@@ -4,7 +4,7 @@ import { ChartProviderProps } from "../context/ChartProvider/index.js";
 import { ChartAnyPluginSignature } from "../internals/plugins/models/index.js";
 import { ChartSeriesType } from "../models/seriesType/config.js";
 import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
-export declare const useChartDataProviderProps: <TSeries extends ChartSeriesType = keyof import("../internals").ChartsSeriesConfig, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartDataProviderProps<TSeries, TSignatures>) => {
+export declare const useChartDataProviderProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartDataProviderProps<TSeries, TSignatures>) => {
   children: import("react").ReactNode;
   animationProviderProps: Omit<AnimationProviderProps, "children">;
   chartProviderProps: Omit<ChartProviderProps<TSeries, TSignatures>, "children">;

package/ChartsAxis/ChartsAxis.d.ts

@@ -1,30 +1,6 @@
 import * as React from 'react';
-import { ChartsAxisSlotProps, ChartsAxisSlots, ChartsXAxisProps, ChartsYAxisProps } from "../models/axis.js";
+import { ChartsAxisSlotProps, ChartsAxisSlots } from "../models/axis.js";
 export interface ChartsAxisProps {
-  /**
-   * Indicate which axis to display the top of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
-   * @default null
-   */
-  topAxis?: null | string | ChartsXAxisProps;
-  /**
-   * Indicate which axis to display the bottom of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
-   * @default xAxisIds[0] The id of the first provided axis
-   */
-  bottomAxis?: null | string | ChartsXAxisProps;
-  /**
-   * Indicate which axis to display the left of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
-   * @default yAxisIds[0] The id of the first provided axis
-   */
-  leftAxis?: null | string | ChartsYAxisProps;
-  /**
-   * Indicate which axis to display the right of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
-   * @default null
-   */
-  rightAxis?: null | string | ChartsYAxisProps;
   /**
    * Overridable component slots.
    * @default {}

package/ChartsAxis/ChartsAxis.js

@@ -1,38 +1,18 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsAxis = ChartsAxis;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ChartsXAxis = require("../ChartsXAxis");
 var _ChartsYAxis = require("../ChartsYAxis");
 var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
-const getAxisId = (propsValue, defaultAxisId) => {
-  if (propsValue == null) {
-    return null;
-  }
-  if (typeof propsValue === 'object') {
-    return propsValue.axisId ?? defaultAxisId ?? null;
-  }
-  return propsValue;
-};
-const mergeProps = (axisConfig, slots, slotProps) => {
-  return typeof axisConfig === 'object' ? (0, _extends2.default)({}, axisConfig, {
-    slots: (0, _extends2.default)({}, slots, axisConfig?.slots),
-    slotProps: (0, _extends2.default)({}, slotProps, axisConfig?.slotProps)
-  }) : {
-    slots,
-    slotProps
-  };
-};
-
 /**
  * Demos:
  *
@@ -44,55 +24,37 @@ const mergeProps = (axisConfig, slots, slotProps) => {
  */
 function ChartsAxis(props) {
   const {
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
     slots,
     slotProps
   } = props;
   const {
-    xAxis,
-    xAxisIds
+    xAxisIds,
+    xAxis
   } = (0, _hooks.useXAxes)();
   const {
-    yAxis,
-    yAxisIds
+    yAxisIds,
+    yAxis
   } = (0, _hooks.useYAxes)();
-  const leftId = getAxisId(leftAxis === undefined ? yAxisIds[0] : leftAxis, yAxisIds[0]);
-  const bottomId = getAxisId(bottomAxis === undefined ? xAxisIds[0] : bottomAxis, xAxisIds[0]);
-  const topId = getAxisId(topAxis, xAxisIds[0]);
-  const rightId = getAxisId(rightAxis, yAxisIds[0]);
-  if (topId !== null && !xAxis[topId]) {
-    throw new Error([`MUI X: id used for top axis "${topId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
-  }
-  if (leftId !== null && !yAxis[leftId]) {
-    throw new Error([`MUI X: id used for left axis "${leftId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
-  }
-  if (rightId !== null && !yAxis[rightId]) {
-    throw new Error([`MUI X: id used for right axis "${rightId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
-  }
-  if (bottomId !== null && !xAxis[bottomId]) {
-    throw new Error([`MUI X: id used for bottom axis "${bottomId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
-  }
-  const topAxisProps = mergeProps(topAxis, slots, slotProps);
-  const bottomAxisProps = mergeProps(bottomAxis, slots, slotProps);
-  const leftAxisProps = mergeProps(leftAxis, slots, slotProps);
-  const rightAxisProps = mergeProps(rightAxis, slots, slotProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [topId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsXAxis.ChartsXAxis, (0, _extends2.default)({}, topAxisProps, {
-      position: "top",
-      axisId: topId
-    })), bottomId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsXAxis.ChartsXAxis, (0, _extends2.default)({}, bottomAxisProps, {
-      position: "bottom",
-      axisId: bottomId
-    })), leftId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsYAxis.ChartsYAxis, (0, _extends2.default)({}, leftAxisProps, {
-      position: "left",
-      axisId: leftId
-    })), rightId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsYAxis.ChartsYAxis, (0, _extends2.default)({}, rightAxisProps, {
-      position: "right",
-      axisId: rightId
-    }))]
+    children: [xAxisIds.map(axisId => {
+      if (!xAxis[axisId].position || xAxis[axisId].position === 'none') {
+        return null;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsXAxis.ChartsXAxis, {
+        slots: slots,
+        slotProps: slotProps,
+        axisId: axisId
+      }, axisId);
+    }), yAxisIds.map(axisId => {
+      if (!yAxis[axisId].position || yAxis[axisId].position === 'none') {
+        return null;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsYAxis.ChartsYAxis, {
+        slots: slots,
+        slotProps: slotProps,
+        axisId: axisId
+      }, axisId);
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
@@ -100,24 +62,6 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  /**
-   * Indicate which axis to display the bottom of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
-   * @default xAxisIds[0] The id of the first provided axis
-   */
-  bottomAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
-  /**
-   * Indicate which axis to display the left of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
-   * @default yAxisIds[0] The id of the first provided axis
-   */
-  leftAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
-  /**
-   * Indicate which axis to display the right of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
-   * @default null
-   */
-  rightAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   /**
    * The props used for each component slot.
    * @default {}
@@ -127,11 +71,5 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
    * Overridable component slots.
    * @default {}
    */
-  slots: _propTypes.default.object,
-  /**
-   * Indicate which axis to display the top of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
-   * @default null
-   */
-  topAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string])
+  slots: _propTypes.default.object
 } : void 0;

package/ChartsAxis/axisClasses.d.ts

@@ -7,7 +7,11 @@ export interface ChartsAxisClasses {
   tickContainer: string;
   /** Styles applied to ticks. */
   tick: string;
-  /** Styles applied to ticks label. */
+  /** Styles applied to ticks label.
+   *
+   * ⚠️ For performance reasons, only the inline styles get considered for bounding box computation.
+   * Modifying text size by adding properties like `font-size` or `letter-spacing` to this class might cause labels to overlap.
+   */
   tickLabel: string;
   /** Styles applied to the group containing the axis label. */
   label: string;

package/ChartsLabel/ChartsLabelMark.d.ts

@@ -1,12 +1,17 @@
 import * as React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
 import { ChartsLabelMarkClasses } from "./labelMarkClasses.js";
+export interface ChartsLabelCustomMarkProps {
+  className?: string;
+  /** Color of the series this mark refers to. */
+  color?: string;
+}
 export interface ChartsLabelMarkProps {
   /**
    * The type of the mark.
    * @default 'square'
    */
-  type?: 'square' | 'circle' | 'line';
+  type?: 'square' | 'circle' | 'line' | React.ComponentType<ChartsLabelCustomMarkProps>;
   /**
    * The color of the mark.
    */

package/ChartsLabel/ChartsLabelMark.js

@@ -27,8 +27,11 @@ const Root = (0, _styles.styled)('div', {
     alignItems: 'center',
     justifyContent: 'center',
     flexShrink: 0,
+    width: 14,
+    height: 14,
     [`&.${_labelMarkClasses.labelMarkClasses.line}`]: {
       width: 16,
+      height: 'unset',
       display: 'flex',
       alignItems: 'center',
       [`.${_labelMarkClasses.labelMarkClasses.mask}`]: {
@@ -51,7 +54,13 @@ const Root = (0, _styles.styled)('div', {
       overflow: 'hidden'
     },
     svg: {
-      display: 'block',
+      display: 'block'
+    },
+    [`& .${_labelMarkClasses.labelMarkClasses.mask} > *`]: {
+      height: '100%',
+      width: '100%'
+    },
+    [`& .${_labelMarkClasses.labelMarkClasses.mask}`]: {
       height: '100%',
       width: '100%'
     }
@@ -75,6 +84,7 @@ const ChartsLabelMark = exports.ChartsLabelMark = (0, _consumeThemeProps.consume
       classes
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const Component = type;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({
     className: (0, _clsx.default)(classes?.root, className),
     ownerState: props,
@@ -83,7 +93,10 @@ const ChartsLabelMark = exports.ChartsLabelMark = (0, _consumeThemeProps.consume
   }, other, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classes?.mask,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+      children: typeof Component === 'function' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+        className: classes?.fill,
+        color: color
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
         viewBox: "0 0 24 24",
         preserveAspectRatio: type === 'line' ? 'none' : undefined,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {

package/ChartsLabel/index.d.ts

@@ -1,4 +1,4 @@
-export type { ChartsLabelMarkProps } from './ChartsLabelMark';
+export type { ChartsLabelMarkProps, ChartsLabelCustomMarkProps } from './ChartsLabelMark';
 export { labelClasses } from "./labelClasses.js";
 export type { ChartsLabelClasses } from './labelClasses';
 export { labelMarkClasses } from "./labelMarkClasses.js";

package/ChartsLabel/labelGradientClasses.d.ts

@@ -13,4 +13,4 @@ export interface ChartsLabelGradientClasses {
 }
 export declare function getLabelGradientUtilityClass(slot: string): string;
 export declare const labelGradientClasses: ChartsLabelGradientClasses;
-export declare const useUtilityClasses: (props: ChartsLabelGradientProps) => Record<"fill" | "mask" | "root", string>;
+export declare const useUtilityClasses: (props: ChartsLabelGradientProps) => Record<"root" | "mask" | "fill", string>;

package/ChartsLabel/labelMarkClasses.d.ts

@@ -15,4 +15,4 @@ export interface ChartsLabelMarkClasses {
 }
 export declare function getLabelMarkUtilityClass(slot: string): string;
 export declare const labelMarkClasses: ChartsLabelMarkClasses;
-export declare const useUtilityClasses: (props: ChartsLabelMarkProps) => Record<"fill" | "mask" | "root", string>;
+export declare const useUtilityClasses: (props: ChartsLabelMarkProps) => Record<"root" | "mask" | "fill", string>;

package/ChartsLabel/labelMarkClasses.js

@@ -18,7 +18,7 @@ const useUtilityClasses = props => {
     type
   } = props;
   const slots = {
-    root: ['root', type],
+    root: typeof type === 'function' ? ['root'] : ['root', type],
     mask: ['mask'],
     fill: ['fill']
   };

package/ChartsLegend/chartsLegendClasses.d.ts

@@ -14,5 +14,5 @@ export interface ChartsLegendClasses {
   /** Styles applied to the legend in row layout. */
   horizontal: string;
 }
-export declare const useUtilityClasses: (props: ChartsLegendProps & ChartsLegendSlotExtension) => Record<"label" | "mark" | "root" | "series", string>;
+export declare const useUtilityClasses: (props: ChartsLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "series", string>;
 export declare const legendClasses: ChartsLegendClasses;

package/ChartsLegend/continuousColorLegendClasses.d.ts

@@ -22,5 +22,5 @@ export interface ContinuousColorLegendClasses {
   /** Styles applied to the series label. */
   label: string;
 }
-export declare const useUtilityClasses: (props: ContinuousColorLegendProps & ChartsLegendSlotExtension) => Record<"label" | "mark" | "root" | "minLabel" | "maxLabel" | "gradient", string>;
+export declare const useUtilityClasses: (props: ContinuousColorLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "minLabel" | "maxLabel" | "gradient", string>;
 export declare const continuousColorLegendClasses: ContinuousColorLegendClasses;

package/ChartsLegend/piecewiseColorLegendClasses.d.ts

@@ -24,5 +24,5 @@ export interface PiecewiseColorLegendClasses {
   /** Styles applied to the series label. */
   label: string;
 }
-export declare const useUtilityClasses: (props: PiecewiseColorLegendProps & ChartsLegendSlotExtension) => Record<"label" | "mark" | "root" | "item" | "minLabel" | "maxLabel", string>;
+export declare const useUtilityClasses: (props: PiecewiseColorLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "item" | "minLabel" | "maxLabel", string>;
 export declare const piecewiseColorLegendClasses: PiecewiseColorLegendClasses;

package/ChartsReferenceLine/ChartsXReferenceLine.d.ts

@@ -8,6 +8,6 @@ export type ChartsXReferenceLineProps<TValue extends string | number | Date = st
    */
   x: TValue;
 };
-export declare function getXReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"line" | "label" | "root", string>;
+export declare function getXReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"root" | "line" | "label", string>;
 declare function ChartsXReferenceLine(props: ChartsXReferenceLineProps): React.JSX.Element | null;
 export { ChartsXReferenceLine };

package/ChartsReferenceLine/ChartsYReferenceLine.d.ts

@@ -8,6 +8,6 @@ export type ChartsYReferenceLineProps<TValue extends string | number | Date = st
    */
   y: TValue;
 };
-export declare function getYReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"line" | "label" | "root", string>;
+export declare function getYReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"root" | "line" | "label", string>;
 declare function ChartsYReferenceLine(props: ChartsYReferenceLineProps): React.JSX.Element | null;
 export { ChartsYReferenceLine };

package/ChartsTooltip/ChartsTooltipTable.js

@@ -18,7 +18,7 @@ const ChartsTooltipPaper = exports.ChartsTooltipPaper = (0, _styles.styled)('div
 }) => ({
   backgroundColor: (theme.vars || theme).palette.background.paper,
   color: (theme.vars || theme).palette.text.primary,
-  borderRadius: theme.shape.borderRadius,
+  borderRadius: (theme.vars || theme).shape?.borderRadius,
   border: `solid ${(theme.vars || theme).palette.divider} 1px`
 }));
 

package/ChartsTooltip/chartsTooltipClasses.d.ts

@@ -23,4 +23,4 @@ export interface ChartsTooltipClasses {
 export type ChartsTooltipClassKey = keyof Omit<ChartsTooltipClasses, 'markCell' | 'labelCell' | 'valueCell'>;
 export declare function getChartsTooltipUtilityClass(slot: string): string;
 export declare const chartsTooltipClasses: ChartsTooltipClasses;
-export declare const useUtilityClasses: (classes?: Partial<ChartsTooltipClasses>) => Record<"mark" | "table" | "root" | "cell" | "row" | "markCell" | "labelCell" | "valueCell" | "paper" | "axisValueCell", string>;
+export declare const useUtilityClasses: (classes?: Partial<ChartsTooltipClasses>) => Record<"root" | "mark" | "table" | "cell" | "row" | "markCell" | "labelCell" | "valueCell" | "paper" | "axisValueCell", string>;