@mui/x-charts 6.0.0-alpha.5 → 6.0.0-alpha.7

package/legacy/ChartsLegend/ChartsLegend.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useThemeProps, useTheme, styled } from '@mui/material/styles';
 import { DrawingContext } from '../context/DrawingProvider';
@@ -123,7 +124,7 @@ export var ChartsLegendLabel = styled('text', {
     color: 'inherit',
     transform: "translate(\n      calc(var(--ChartsLegend-itemMarkSize) + var(--ChartsLegend-labelSpacing)),\n      calc(0.5 * var(--ChartsLegend-itemMarkSize))\n      )",
     fill: theme.palette.text.primary,
-    alignmentBaseline: 'central'
+    dominantBaseline: 'central'
   });
 });
 var defaultProps = {
@@ -136,25 +137,18 @@ var defaultProps = {
   itemWidth: 100,
   spacing: 2
 };
-export function ChartsLegend(inProps) {
-  var props = useThemeProps({
-    props: _extends({}, defaultProps, inProps),
-    name: 'MuiChartsLegend'
-  });
-  var position = props.position,
+function DefaultChartsLegend(props) {
+  var hidden = props.hidden,
+    position = props.position,
     direction = props.direction,
     offset = props.offset,
-    hidden = props.hidden;
-  var theme = useTheme();
-  var classes = useUtilityClasses(_extends({}, props, {
-    theme: theme
-  }));
-  var drawingArea = React.useContext(DrawingContext);
-  var series = React.useContext(SeriesContext);
+    series = props.series,
+    seriesToDisplay = props.seriesToDisplay,
+    drawingArea = props.drawingArea,
+    classes = props.classes;
   if (hidden) {
     return null;
   }
-  var seriesToDisplay = getSeriesToDisplay(series);
   return /*#__PURE__*/_jsx(ChartsLegendRoot, {
     ownerState: {
       direction: direction,
@@ -187,4 +181,41 @@ export function ChartsLegend(inProps) {
       }, id);
     })
   });
+}
+export function ChartsLegend(inProps) {
+  var _slots$legend;
+  var props = useThemeProps({
+    props: _extends({}, defaultProps, inProps),
+    name: 'MuiChartsLegend'
+  });
+  var position = props.position,
+    direction = props.direction,
+    offset = props.offset,
+    hidden = props.hidden,
+    slots = props.slots,
+    slotProps = props.slotProps;
+  var theme = useTheme();
+  var classes = useUtilityClasses(_extends({}, props, {
+    theme: theme
+  }));
+  var drawingArea = React.useContext(DrawingContext);
+  var series = React.useContext(SeriesContext);
+  var seriesToDisplay = getSeriesToDisplay(series);
+  var ChartLegendRender = (_slots$legend = slots == null ? void 0 : slots.legend) != null ? _slots$legend : DefaultChartsLegend;
+  var chartLegendRenderProps = useSlotProps({
+    elementType: ChartLegendRender,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.legend,
+    additionalProps: {
+      position: position,
+      direction: direction,
+      offset: offset,
+      classes: classes,
+      drawingArea: drawingArea,
+      series: series,
+      hidden: hidden,
+      seriesToDisplay: seriesToDisplay
+    },
+    ownerState: {}
+  });
+  return /*#__PURE__*/_jsx(ChartLegendRender, _extends({}, chartLegendRenderProps));
 }

package/legacy/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -24,7 +24,7 @@ export function DefaultChartsAxisContent(props) {
     variant: "outlined",
     className: classes.root,
     children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
-      children: [axisValue != null && /*#__PURE__*/_jsx("thead", {
+      children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx("thead", {
         children: /*#__PURE__*/_jsx(ChartsTooltipRow, {
           children: /*#__PURE__*/_jsx(ChartsTooltipCell, {
             colSpan: 3,

package/legacy/ChartsXAxis/ChartsXAxis.js

@@ -9,7 +9,7 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { DrawingContext } from '../context/DrawingProvider';
 import useTicks from '../hooks/useTicks';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
-import { Line, Tick, TickLabel, Label, AxisRoot } from '../internals/components/AxisSharedComponents';
+import { ChartsLine, ChartsTick, ChartsTickLabel, ChartsLabel, AxisRoot } from '../internals/components/AxisSharedComponents';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -34,6 +34,7 @@ var defaultProps = {
   tickSize: 6
 };
 function ChartsXAxis(inProps) {
+  var _slots$axisLine, _slots$axisTick, _slots$axisTickLabel, _slots$axisLabel;
   var props = useThemeProps({
     props: _extends({}, defaultProps, inProps),
     name: 'MuiChartsXAxis'
@@ -51,7 +52,9 @@ function ChartsXAxis(inProps) {
     label = defaultizedProps.label,
     labelFontSize = defaultizedProps.labelFontSize,
     tickSizeProp = defaultizedProps.tickSize,
-    valueFormatter = defaultizedProps.valueFormatter;
+    valueFormatter = defaultizedProps.valueFormatter,
+    slots = defaultizedProps.slots,
+    slotProps = defaultizedProps.slotProps;
   var theme = useTheme();
   var classes = useUtilityClasses(_extends({}, defaultizedProps, {
     theme: theme
@@ -72,14 +75,18 @@ function ChartsXAxis(inProps) {
     x: left + width / 2,
     y: positionSigne * (tickFontSize + tickSize + 10)
   };
+  var Line = (_slots$axisLine = slots == null ? void 0 : slots.axisLine) != null ? _slots$axisLine : ChartsLine;
+  var Tick = (_slots$axisTick = slots == null ? void 0 : slots.axisTick) != null ? _slots$axisTick : ChartsTick;
+  var TickLabel = (_slots$axisTickLabel = slots == null ? void 0 : slots.axisTickLabel) != null ? _slots$axisTickLabel : ChartsTickLabel;
+  var Label = (_slots$axisLabel = slots == null ? void 0 : slots.axisLabel) != null ? _slots$axisLabel : ChartsLabel;
   return /*#__PURE__*/_jsxs(AxisRoot, {
     transform: "translate(0, ".concat(position === 'bottom' ? top + height : top, ")"),
     className: classes.root,
-    children: [!disableLine && /*#__PURE__*/_jsx(Line, {
+    children: [!disableLine && /*#__PURE__*/_jsx(Line, _extends({
       x1: xScale.range()[0],
       x2: xScale.range()[1],
       className: classes.line
-    }), xTicks.map(function (_ref, index) {
+    }, slotProps == null ? void 0 : slotProps.axisLine)), xTicks.map(function (_ref, index) {
       var formattedValue = _ref.formattedValue,
         offset = _ref.offset,
         labelOffset = _ref.labelOffset;
@@ -88,26 +95,28 @@ function ChartsXAxis(inProps) {
       return /*#__PURE__*/_jsxs("g", {
         transform: "translate(".concat(offset, ", 0)"),
         className: classes.tickContainer,
-        children: [!disableTicks && /*#__PURE__*/_jsx(Tick, {
+        children: [!disableTicks && /*#__PURE__*/_jsx(Tick, _extends({
           y2: positionSigne * tickSize,
           className: classes.tick
-        }), formattedValue !== undefined && /*#__PURE__*/_jsx(TickLabel, {
+        }, slotProps == null ? void 0 : slotProps.axisTick)), formattedValue !== undefined && /*#__PURE__*/_jsx(TickLabel, _extends({
           x: xTickLabel,
           y: yTickLabel,
           "transform-origin": "".concat(xTickLabel, "px ").concat(yTickLabel, "px"),
           sx: {
             fontSize: tickFontSize
           },
-          className: classes.tickLabel,
+          className: classes.tickLabel
+        }, slotProps == null ? void 0 : slotProps.axisTickLabel, {
           children: formattedValue
-        })]
+        }))]
       }, index);
     }), label && /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, {
       sx: {
         fontSize: labelFontSize,
         transformOrigin: "".concat(labelRefPoint.x, "px ").concat(labelRefPoint.y, "px")
       },
-      className: classes.label,
+      className: classes.label
+    }, slotProps == null ? void 0 : slotProps.axisLabel, {
       children: label
     }))]
   });
@@ -153,6 +162,16 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * Position of the axis.
    */
   position: PropTypes.oneOf(['bottom', 'top']),
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   /**
    * The stroke color of the axis line.
    * @default 'currentColor'
@@ -163,6 +182,23 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * @default 12
    */
   tickFontSize: PropTypes.number,
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep: PropTypes.number,
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep: PropTypes.number,
+  /**
+   * The number of ticks. This number is not guaranted.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber: PropTypes.number,
   /**
    * The size of the ticks.
    * @default 6

package/legacy/ChartsYAxis/ChartsYAxis.js

@@ -8,7 +8,7 @@ import { useThemeProps, useTheme } from '@mui/material/styles';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { DrawingContext } from '../context/DrawingProvider';
 import useTicks from '../hooks/useTicks';
-import { Line, Tick, TickLabel, Label, AxisRoot } from '../internals/components/AxisSharedComponents';
+import { ChartsLine, ChartsTick, ChartsTickLabel, ChartsLabel, AxisRoot } from '../internals/components/AxisSharedComponents';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -34,6 +34,7 @@ var defaultProps = {
   tickSize: 6
 };
 function ChartsYAxis(inProps) {
+  var _slots$axisLine, _slots$axisTick, _slots$axisTickLabel, _slots$axisLabel;
   var props = useThemeProps({
     props: _extends({}, defaultProps, inProps),
     name: 'MuiChartsYAxis'
@@ -51,7 +52,9 @@ function ChartsYAxis(inProps) {
     label = defaultizedProps.label,
     labelFontSize = defaultizedProps.labelFontSize,
     tickSizeProp = defaultizedProps.tickSize,
-    valueFormatter = defaultizedProps.valueFormatter;
+    valueFormatter = defaultizedProps.valueFormatter,
+    slots = defaultizedProps.slots,
+    slotProps = defaultizedProps.slotProps;
   var theme = useTheme();
   var classes = useUtilityClasses(_extends({}, defaultizedProps, {
     theme: theme
@@ -72,14 +75,18 @@ function ChartsYAxis(inProps) {
     x: positionSigne * (tickFontSize + tickSize + 10),
     y: top + height / 2
   };
+  var Line = (_slots$axisLine = slots == null ? void 0 : slots.axisLine) != null ? _slots$axisLine : ChartsLine;
+  var Tick = (_slots$axisTick = slots == null ? void 0 : slots.axisTick) != null ? _slots$axisTick : ChartsTick;
+  var TickLabel = (_slots$axisTickLabel = slots == null ? void 0 : slots.axisTickLabel) != null ? _slots$axisTickLabel : ChartsTickLabel;
+  var Label = (_slots$axisLabel = slots == null ? void 0 : slots.axisLabel) != null ? _slots$axisLabel : ChartsLabel;
   return /*#__PURE__*/_jsxs(AxisRoot, {
     transform: "translate(".concat(position === 'right' ? left + width : left, ", 0)"),
     className: classes.root,
-    children: [!disableLine && /*#__PURE__*/_jsx(Line, {
+    children: [!disableLine && /*#__PURE__*/_jsx(Line, _extends({
       y1: yScale.range()[0],
       y2: yScale.range()[1],
       className: classes.line
-    }), yTicks.map(function (_ref, index) {
+    }, slotProps == null ? void 0 : slotProps.axisLine)), yTicks.map(function (_ref, index) {
       var formattedValue = _ref.formattedValue,
         offset = _ref.offset,
         labelOffset = _ref.labelOffset;
@@ -88,19 +95,20 @@ function ChartsYAxis(inProps) {
       return /*#__PURE__*/_jsxs("g", {
         transform: "translate(0, ".concat(offset, ")"),
         className: classes.tickContainer,
-        children: [!disableTicks && /*#__PURE__*/_jsx(Tick, {
+        children: [!disableTicks && /*#__PURE__*/_jsx(Tick, _extends({
           x2: positionSigne * tickSize,
           className: classes.tick
-        }), formattedValue !== undefined && /*#__PURE__*/_jsx(TickLabel, {
+        }, slotProps == null ? void 0 : slotProps.axisTick)), formattedValue !== undefined && /*#__PURE__*/_jsx(TickLabel, _extends({
           x: xTickLabel,
           y: yTickLabel,
           "transform-origin": "".concat(xTickLabel, "px ").concat(yTickLabel, "px"),
           sx: {
             fontSize: tickFontSize
           },
-          className: classes.tickLabel,
+          className: classes.tickLabel
+        }, slotProps == null ? void 0 : slotProps.axisTickLabel, {
           children: formattedValue.toLocaleString()
-        })]
+        }))]
       }, index);
     }), label && /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, {
       sx: {
@@ -108,7 +116,8 @@ function ChartsYAxis(inProps) {
         transform: "rotate(".concat(positionSigne * 90, "deg)"),
         transformOrigin: "".concat(labelRefPoint.x, "px ").concat(labelRefPoint.y, "px")
       },
-      className: classes.label,
+      className: classes.label
+    }, slotProps == null ? void 0 : slotProps.axisLabel, {
       children: label
     }))]
   });
@@ -154,6 +163,16 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    * Position of the axis.
    */
   position: PropTypes.oneOf(['left', 'right']),
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   /**
    * The stroke color of the axis line.
    * @default 'currentColor'
@@ -164,6 +183,23 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    * @default 12
    */
   tickFontSize: PropTypes.number,
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep: PropTypes.number,
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep: PropTypes.number,
+  /**
+   * The number of ticks. This number is not guaranted.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber: PropTypes.number,
   /**
    * The size of the ticks.
    * @default 6

package/legacy/LineChart/AreaElement.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "classes", "color", "highlightScope"];
+var _excluded = ["id", "classes", "color", "highlightScope", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
+import { useSlotProps } from '@mui/base/utils';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
@@ -25,7 +26,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   };
   return composeClasses(slots, getAreaElementUtilityClass, classes);
 };
-var AreaElementPath = styled('path', {
+export var AreaElementPath = styled('path', {
   name: 'MuiAreaElement',
   slot: 'Root',
   overridesResolver: function overridesResolver(_, styles) {
@@ -56,10 +57,13 @@ AreaElementPath.propTypes = {
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 };
 function AreaElement(props) {
+  var _slots$area;
   var id = props.id,
     innerClasses = props.classes,
     color = props.color,
     highlightScope = props.highlightScope,
+    slots = props.slots,
+    slotProps = props.slotProps,
     other = _objectWithoutProperties(props, _excluded);
   var getInteractionItemProps = useInteractionItemProps(highlightScope);
   var _React$useContext = React.useContext(InteractionContext),
@@ -80,13 +84,19 @@ function AreaElement(props) {
     isHighlighted: isHighlighted
   };
   var classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(AreaElementPath, _extends({}, other, {
-    ownerState: ownerState,
-    className: classes.root
-  }, getInteractionItemProps({
-    type: 'line',
-    seriesId: id
-  })));
+  var Area = (_slots$area = slots == null ? void 0 : slots.area) != null ? _slots$area : AreaElementPath;
+  var areaProps = useSlotProps({
+    elementType: Area,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.area,
+    additionalProps: _extends({}, other, getInteractionItemProps({
+      type: 'line',
+      seriesId: id
+    }), {
+      className: classes.root
+    }),
+    ownerState: ownerState
+  });
+  return /*#__PURE__*/_jsx(Area, _extends({}, areaProps));
 }
 process.env.NODE_ENV !== "production" ? AreaElement.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -97,6 +107,16 @@ process.env.NODE_ENV !== "production" ? AreaElement.propTypes = {
   highlightScope: PropTypes.shape({
     faded: PropTypes.oneOf(['global', 'none', 'series']),
     highlighted: PropTypes.oneOf(['item', 'none', 'series'])
-  })
+  }),
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
 } : void 0;
 export { AreaElement };

package/legacy/LineChart/AreaPlot.js

@@ -1,4 +1,8 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["slots", "slotProps"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { area as d3Area } from 'd3-shape';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
@@ -6,7 +10,10 @@ import { AreaElement } from './AreaElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import getCurveFactory from '../internals/getCurve';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function AreaPlot() {
+function AreaPlot(props) {
+  var slots = props.slots,
+    slotProps = props.slotProps,
+    other = _objectWithoutProperties(props, _excluded);
   var seriesData = React.useContext(SeriesContext).line;
   var axisData = React.useContext(CartesianContext);
   if (seriesData === undefined) {
@@ -20,7 +27,7 @@ export function AreaPlot() {
     yAxisIds = axisData.yAxisIds;
   var defaultXAxisId = xAxisIds[0];
   var defaultYAxisId = yAxisIds[0];
-  return /*#__PURE__*/_jsx("g", {
+  return /*#__PURE__*/_jsx("g", _extends({}, other, {
     children: stackingGroups.flatMap(function (_ref) {
       var groupIds = _ref.ids;
       return groupIds.flatMap(function (seriesId) {
@@ -54,9 +61,28 @@ export function AreaPlot() {
           id: seriesId,
           d: areaPath.curve(curve)(d3Data) || undefined,
           color: series[seriesId].color,
-          highlightScope: series[seriesId].highlightScope
+          highlightScope: series[seriesId].highlightScope,
+          slots: slots,
+          slotProps: slotProps
         }, seriesId);
       });
     })
-  });
-}
+  }));
+}
+process.env.NODE_ENV !== "production" ? AreaPlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;
+export { AreaPlot };