@mui/x-charts 6.0.0-alpha.9 → 6.18.0

package/hooks/useDrawingArea.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useDrawingArea = useDrawingArea;
 var React = _interopRequireWildcard(require("react"));
 var _DrawingProvider = require("../context/DrawingProvider");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function useDrawingArea() {
   const {
     left,

package/hooks/useInteractionItemProps.js

@@ -7,8 +7,8 @@ exports.useInteractionItemProps = exports.getIsHighlighted = exports.getIsFaded
 var React = _interopRequireWildcard(require("react"));
 var _InteractionProvider = require("../context/InteractionProvider");
 var _HighlightProvider = require("../context/HighlightProvider");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useInteractionItemProps = scope => {
   const {
     dispatch: dispatchInteraction

package/hooks/useMounted.d.ts

@@ -0,0 +1 @@
+export declare function useMounted(defer?: boolean): boolean;

package/hooks/useMounted.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMounted = useMounted;
+var React = _interopRequireWildcard(require("react"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function useMounted(defer = false) {
+  const [mountedState, setMountedState] = React.useState(false);
+  (0, _useEnhancedEffect.default)(() => {
+    if (!defer) {
+      setMountedState(true);
+    }
+  }, [defer]);
+  React.useEffect(() => {
+    if (defer) {
+      setMountedState(true);
+    }
+  }, [defer]);
+  return mountedState;
+}

package/hooks/useReducedMotion.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Returns `boolean` or `null`, used to automatically
+ * set skipAnimations to the value of the user's
+ * `prefers-reduced-motion` query.
+ *
+ * The return value, post-effect, is the value of their prefered setting
+ */
+export declare const useReducedMotion: () => void;

package/hooks/useReducedMotion.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useReducedMotion = void 0;
+var _web = require("@react-spring/web");
+/**
+ * Returns `boolean` or `null`, used to automatically
+ * set skipAnimations to the value of the user's
+ * `prefers-reduced-motion` query.
+ *
+ * The return value, post-effect, is the value of their prefered setting
+ */
+const useReducedMotion = () => {
+  // Taken from: https://github.com/pmndrs/react-spring/blob/02ec877bbfab0df46da0e4a47d5f68d3e731206a/packages/shared/src/hooks/useReducedMotion.ts#L13
+
+  (0, _web.useIsomorphicLayoutEffect)(() => {
+    const mql = window.matchMedia('(prefers-reduced-motion)');
+    const handleMediaChange = e => {
+      _web.Globals.assign({
+        // Modification such the react-spring implementation such that this hook can remove animation but never activate animation.
+        skipAnimation: e.matches || undefined
+      });
+    };
+    handleMediaChange(mql);
+    mql.addEventListener('change', handleMediaChange);
+    return () => {
+      mql.removeEventListener('change', handleMediaChange);
+    };
+  }, []);
+};
+exports.useReducedMotion = useReducedMotion;

package/hooks/useScale.d.ts

@@ -6,5 +6,5 @@ import { D3Scale } from '../models/axis';
  * @returns (value: any) => number
  */
 export declare function getValueToPositionMapper(scale: D3Scale): (value: any) => number;
-export declare function useXScale(identifier?: number | string): import("d3-scale").ScaleBand<any> | import("d3-scale").ScalePoint<any> | import("d3-scale").ScaleLogarithmic<any, any, never> | import("d3-scale").ScalePower<any, any, never> | import("d3-scale").ScaleTime<any, any, never> | import("d3-scale").ScaleLinear<any, any, never>;
-export declare function useYScale(identifier?: number | string): import("d3-scale").ScaleBand<any> | import("d3-scale").ScalePoint<any> | import("d3-scale").ScaleLogarithmic<any, any, never> | import("d3-scale").ScalePower<any, any, never> | import("d3-scale").ScaleTime<any, any, never> | import("d3-scale").ScaleLinear<any, any, never>;
+export declare function useXScale(identifier?: number | string): import("d3-scale").ScaleBand<any> | import("d3-scale").ScalePoint<any> | import("d3-scale").ScaleLinear<any, any, never> | import("d3-scale").ScaleTime<any, any, never> | import("d3-scale").ScaleLogarithmic<any, any, never> | import("d3-scale").ScalePower<any, any, never>;
+export declare function useYScale(identifier?: number | string): import("d3-scale").ScaleBand<any> | import("d3-scale").ScalePoint<any> | import("d3-scale").ScaleLinear<any, any, never> | import("d3-scale").ScaleTime<any, any, never> | import("d3-scale").ScaleLogarithmic<any, any, never> | import("d3-scale").ScalePower<any, any, never>;

package/hooks/useScale.js

@@ -9,8 +9,8 @@ exports.useYScale = useYScale;
 var React = _interopRequireWildcard(require("react"));
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _isBandScale = require("../internals/isBandScale");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * For a given scale return a function that map value to their position.
  * Usefull when dealing with specific scale such as band.

package/hooks/useTicks.d.ts

@@ -17,22 +17,30 @@ export interface TickParams {
      * Not supported by categorical axis (band, points).
      */
     tickNumber?: number;
+    /**
+     * Defines which ticks are displayed. Its value can be:
+     * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+     * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has a data property.
+     * - an array containing the values where ticks should be displayed.
+     * @default 'auto'
+     */
+    tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
 }
-export declare function getTicksNumber(params: TickParams & {
+export declare function getTickNumber(params: TickParams & {
     range: any[];
     domain: any[];
 }): number;
+export type TickItemType = {
+    /**
+     * This property is undefined only if it's the tick closing the last band
+     */
+    value?: any;
+    formattedValue?: string;
+    offset: number;
+    labelOffset: number;
+};
 declare function useTicks(options: {
     scale: D3Scale;
-    ticksNumber?: number;
     valueFormatter?: (value: any) => string;
-}): {
-    formattedValue: any;
-    offset: number;
-    labelOffset: number;
-}[] | {
-    formattedValue: string;
-    offset: any;
-    labelOffset: number;
-}[];
+} & Pick<TickParams, 'tickNumber' | 'tickInterval'>): TickItemType[];
 export default useTicks;

package/hooks/useTicks.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-exports.getTicksNumber = getTicksNumber;
+exports.getTickNumber = getTickNumber;
 var React = _interopRequireWildcard(require("react"));
 var _isBandScale = require("../internals/isBandScale");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function getTicksNumber(params) {
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function getTickNumber(params) {
   const {
     tickMaxStep,
     tickMinStep,
@@ -25,8 +25,9 @@ function getTicksNumber(params) {
 function useTicks(options) {
   const {
     scale,
-    ticksNumber,
-    valueFormatter
+    tickNumber,
+    valueFormatter,
+    tickInterval
   } = options;
   return React.useMemo(() => {
     // band scale
@@ -35,7 +36,8 @@ function useTicks(options) {
       if (scale.bandwidth() > 0) {
         // scale type = 'band'
         return [...domain.map(value => ({
-          formattedValue: valueFormatter?.(value) ?? value,
+          value,
+          formattedValue: valueFormatter?.(value) ?? `${value}`,
           offset: scale(value) - (scale.step() - scale.bandwidth()) / 2,
           labelOffset: scale.step() / 2
         })), {
@@ -46,18 +48,21 @@ function useTicks(options) {
       }
 
       // scale type = 'point'
-      return domain.map(value => ({
-        formattedValue: valueFormatter?.(value) ?? value,
+      const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
+      return filteredDomain.map(value => ({
+        value,
+        formattedValue: valueFormatter?.(value) ?? `${value}`,
         offset: scale(value),
         labelOffset: 0
       }));
     }
-    return scale.ticks(ticksNumber).map(value => ({
-      formattedValue: valueFormatter?.(value) ?? scale.tickFormat(ticksNumber)(value),
+    const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
+    return ticks.map(value => ({
+      value,
+      formattedValue: valueFormatter?.(value) ?? scale.tickFormat(tickNumber)(value),
       offset: scale(value),
       labelOffset: 0
     }));
-  }, [ticksNumber, scale, valueFormatter]);
+  }, [tickNumber, scale, valueFormatter, tickInterval]);
 }
-var _default = useTicks;
-exports.default = _default;
+var _default = exports.default = useTicks;

package/index.js

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

package/internals/components/AxisSharedComponents.d.ts

@@ -1,6 +1,2 @@
 /// <reference types="react" />
 export declare const AxisRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, {}>;
-export declare const ChartsLine: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGLineElementAttributes<SVGLineElement>, keyof import("react").SVGLineElementAttributes<SVGLineElement>>, {}>;
-export declare const ChartsTick: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGLineElementAttributes<SVGLineElement>, keyof import("react").SVGLineElementAttributes<SVGLineElement>>, {}>;
-export declare const ChartsTickLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGTextElementAttributes<SVGTextElement>, keyof import("react").SVGTextElementAttributes<SVGTextElement>>, {}>;
-export declare const ChartsLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGTextElementAttributes<SVGTextElement>, keyof import("react").SVGTextElementAttributes<SVGTextElement>>, {}>;

package/internals/components/AxisSharedComponents.js

@@ -4,90 +4,30 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ChartsTickLabel = exports.ChartsTick = exports.ChartsLine = exports.ChartsLabel = exports.AxisRoot = void 0;
+exports.AxisRoot = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _styles = require("@mui/material/styles");
 var _axisClasses = require("../../ChartsAxis/axisClasses");
-const AxisRoot = (0, _styles.styled)('g', {
+const AxisRoot = exports.AxisRoot = (0, _styles.styled)('g', {
   name: 'MuiChartsAxis',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
-})({
-  [`&.${_axisClasses.axisClasses.directionY}`]: {
-    [`.${_axisClasses.axisClasses.tickLabel}`]: {
-      dominantBaseline: 'middle'
-    },
-    [`.${_axisClasses.axisClasses.label}`]: {
-      dominantBaseline: 'auto',
-      textAnchor: 'middle'
-    }
-  },
-  [`&.${_axisClasses.axisClasses.left}`]: {
-    [`.${_axisClasses.axisClasses.tickLabel}`]: {
-      dominantBaseline: 'central',
-      textAnchor: 'end'
-    }
-  },
-  [`&.${_axisClasses.axisClasses.right}`]: {
-    [`.${_axisClasses.axisClasses.tickLabel}`]: {
-      dominantBaseline: 'central',
-      textAnchor: 'start'
-    }
-  },
-  [`&.${_axisClasses.axisClasses.bottom}`]: {
-    [`.${_axisClasses.axisClasses.tickLabel}, .${_axisClasses.axisClasses.label}`]: {
-      dominantBaseline: 'hanging',
-      textAnchor: 'middle'
-    }
-  },
-  [`&.${_axisClasses.axisClasses.top}`]: {
-    [`.${_axisClasses.axisClasses.tickLabel}, .${_axisClasses.axisClasses.label}`]: {
-      dominantBaseline: 'baseline',
-      textAnchor: 'middle'
-    }
-  }
-});
-exports.AxisRoot = AxisRoot;
-const ChartsLine = (0, _styles.styled)('line', {
-  name: 'MuiChartsAxis',
-  slot: 'Line',
-  overridesResolver: (props, styles) => styles.line
 })(({
   theme
 }) => ({
-  stroke: theme.palette.text.primary,
-  shapeRendering: 'crispEdges',
-  strokeWidth: 1
-}));
-exports.ChartsLine = ChartsLine;
-const ChartsTick = (0, _styles.styled)('line', {
-  name: 'MuiChartsAxis',
-  slot: 'Tick',
-  overridesResolver: (props, styles) => styles.tick
-})(({
-  theme
-}) => ({
-  stroke: theme.palette.text.primary,
-  shapeRendering: 'crispEdges'
-}));
-exports.ChartsTick = ChartsTick;
-const ChartsTickLabel = (0, _styles.styled)('text', {
-  name: 'MuiChartsAxis',
-  slot: 'TickLabel',
-  overridesResolver: (props, styles) => styles.tickLabel
-})(({
-  theme
-}) => (0, _extends2.default)({}, theme.typography.caption, {
-  fill: theme.palette.text.primary
-}));
-exports.ChartsTickLabel = ChartsTickLabel;
-const ChartsLabel = (0, _styles.styled)('text', {
-  name: 'MuiChartsAxis',
-  slot: 'Label',
-  overridesResolver: (props, styles) => styles.label
-})(({
-  theme
-}) => (0, _extends2.default)({}, theme.typography.body1, {
-  fill: theme.palette.text.primary
-}));
-exports.ChartsLabel = ChartsLabel;
+  [`& .${_axisClasses.axisClasses.tickLabel}`]: (0, _extends2.default)({}, theme.typography.caption, {
+    fill: (theme.vars || theme).palette.text.primary
+  }),
+  [`& .${_axisClasses.axisClasses.label}`]: (0, _extends2.default)({}, theme.typography.body1, {
+    fill: (theme.vars || theme).palette.text.primary
+  }),
+  [`& .${_axisClasses.axisClasses.line}`]: {
+    stroke: (theme.vars || theme).palette.text.primary,
+    shapeRendering: 'crispEdges',
+    strokeWidth: 1
+  },
+  [`& .${_axisClasses.axisClasses.tick}`]: {
+    stroke: (theme.vars || theme).palette.text.primary,
+    shapeRendering: 'crispEdges'
+  }
+}));

package/internals/components/ChartsText.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+export type ChartsTextBaseline = 'hanging' | 'central' | 'auto';
+export interface ChartsTextStyle extends React.CSSProperties {
+    angle?: number;
+    /**
+     * The text baseline
+     * @default 'central'
+     */
+    dominantBaseline?: ChartsTextBaseline;
+}
+interface GetWordsByLinesParams {
+    /**
+     * Text displayed.
+     */
+    text: string;
+    /**
+     * Style applied to text elements.
+     */
+    style?: ChartsTextStyle;
+    /**
+     * If true, the line width is computed.
+     * @default false
+     */
+    needsComputation?: boolean;
+}
+export interface ChartsTextProps extends Omit<React.SVGTextElementAttributes<SVGTextElement>, 'width' | 'ref' | 'style' | 'dominantBaseline'>, GetWordsByLinesParams {
+    /**
+     * Height of a text line (in `em`).
+     */
+    lineHeight?: number;
+    ownerState?: any;
+}
+export declare function getWordsByLines({ style, needsComputation, text }: GetWordsByLinesParams): any[];
+export declare function ChartsText(props: ChartsTextProps): React.JSX.Element;
+export {};

package/internals/components/ChartsText.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsText = ChartsText;
+exports.getWordsByLines = getWordsByLines;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _domUtils = require("../domUtils");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["x", "y", "style", "text", "ownerState"],
+  _excluded2 = ["angle", "textAnchor", "dominantBaseline"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function getWordsByLines({
+  style,
+  needsComputation,
+  text
+}) {
+  return text.split('\n').map(subText => (0, _extends2.default)({
+    text: subText
+  }, needsComputation ? (0, _domUtils.getStringSize)(subText, style) : {
+    width: 0,
+    height: 0
+  }));
+}
+function ChartsText(props) {
+  const {
+      x,
+      y,
+      style: styleProps,
+      text
+    } = props,
+    textProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const _ref = styleProps ?? {},
+    {
+      angle,
+      textAnchor,
+      dominantBaseline
+    } = _ref,
+    style = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded2);
+  const wordsByLines = React.useMemo(() => getWordsByLines({
+    style,
+    needsComputation: text.includes('\n'),
+    text
+  }), [style, text]);
+  let startDy;
+  switch (dominantBaseline) {
+    case 'hanging':
+      startDy = 0;
+      break;
+    case 'central':
+      startDy = (wordsByLines.length - 1) / 2 * -wordsByLines[0].height;
+      break;
+    default:
+      startDy = (wordsByLines.length - 1) * -wordsByLines[0].height;
+      break;
+  }
+  const transforms = [];
+  // if (scaleToFit) {
+  //   const lineWidth = wordsByLines[0].width;
+  //   transforms.push(`scale(${(isNumber(width as number) ? (width as number) / lineWidth : 1) / lineWidth})`);
+  // }
+  if (angle) {
+    transforms.push(`rotate(${angle}, ${x}, ${y})`);
+  }
+  if (transforms.length) {
+    textProps.transform = transforms.join(' ');
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("text", (0, _extends2.default)({}, textProps, {
+    x: x,
+    y: y,
+    textAnchor: textAnchor,
+    dominantBaseline: dominantBaseline,
+    style: style,
+    children: wordsByLines.map((line, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("tspan", {
+      x: x,
+      dy: `${index === 0 ? startDy : wordsByLines[0].height}px`,
+      dominantBaseline: dominantBaseline // Propagated to fix Safari issue: https://github.com/mui/mui-x/issues/10808
+      ,
+      children: line.text
+    }, index))
+  }));
+}

package/internals/defaultizeColor.d.ts

@@ -23,12 +23,16 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
         innerRadius?: number | undefined;
         outerRadius?: number | undefined;
         cornerRadius?: number | undefined;
+        paddingAngle?: number | undefined;
+        color?: string | undefined;
     } | undefined;
     faded?: {
         additionalRadius?: number | undefined;
         innerRadius?: number | undefined;
         outerRadius?: number | undefined;
         cornerRadius?: number | undefined;
+        paddingAngle?: number | undefined;
+        color?: string | undefined;
     } | undefined;
     id?: string | undefined;
     color?: string | undefined;
@@ -51,14 +55,15 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     stackOrder?: "reverse" | "none" | "appearance" | "ascending" | "descending" | "insideOut" | undefined;
 } | {
     type: "line";
-    data?: number[] | undefined;
+    data?: (number | null)[] | undefined;
     dataKey?: string | undefined;
     stack?: string | undefined;
     area?: boolean | undefined;
     label?: string | undefined;
     curve?: import("../models/seriesType").CurveType | undefined;
-    showMark?: boolean | ((params: import("../models/seriesType").ShowMarkParams) => boolean) | undefined;
+    showMark?: boolean | ((params: import("../models/seriesType").ShowMarkParams<number | Date>) => boolean) | undefined;
     disableHighlight?: boolean | undefined;
+    connectNulls?: boolean | undefined;
     id?: string | undefined;
     color: string;
     valueFormatter?: ((value: number) => string) | undefined;

package/internals/defaultizeValueFormatter.js

@@ -15,5 +15,4 @@ function defaultizeValueFormatter(series, defaultValueFormatter) {
   });
   return defaultizedSeries;
 }
-var _default = defaultizeValueFormatter;
-exports.default = _default;
+var _default = exports.default = defaultizeValueFormatter;

package/internals/domUtils.d.ts

@@ -0,0 +1,13 @@
+/**
+ *
+ * @param style React style object
+ * @returns CSS styling string
+ */
+export declare const getStyleString: (style: React.CSSProperties) => 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) => any;