@mui/x-charts 6.0.0-alpha.0 → 6.0.0-alpha.2

package/legacy/ChartsLegend/utils.js

@@ -1,9 +1,15 @@
+import getBarLegend from '../BarChart/legend';
+import getScatterLegend from '../ScatterChart/legend';
+import getLineLegend from '../LineChart/legend';
+import getPieLegend from '../PieChart/legend';
+var legendGetter = {
+  bar: getBarLegend,
+  scatter: getScatterLegend,
+  line: getLineLegend,
+  pie: getPieLegend
+};
 export function getSeriesToDisplay(series) {
-  return Object.values(series).flatMap(function (s) {
-    return s.seriesOrder.map(function (seriesId) {
-      return s.series[seriesId];
-    });
-  }).filter(function (s) {
-    return s.label !== undefined;
+  return Object.keys(series).flatMap(function (seriesType) {
+    return legendGetter[seriesType](series[seriesType]);
   });
 }

package/legacy/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -80,7 +80,9 @@ export function ChartsAxisTooltipContent(props) {
   var USED_X_AXIS_ID = xAxisIds[0];
   var relevantSeries = React.useMemo(function () {
     var rep = [];
-    Object.keys(series).forEach(function (seriesType) {
+    Object.keys(series).filter(function (seriesType) {
+      return ['bar', 'line', 'scatter'].includes(seriesType);
+    }).forEach(function (seriesType) {
       series[seriesType].seriesOrder.forEach(function (seriesId) {
         var axisKey = series[seriesType].series[seriesId].xAxisKey;
         if (axisKey === undefined || axisKey === USED_X_AXIS_ID) {

package/legacy/ChartsTooltip/ChartsItemTooltipContent.js

@@ -4,7 +4,6 @@ import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltip
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export function DefaultChartsItemContent(props) {
-  var _series$label;
   var series = props.series,
     itemData = props.itemData,
     sx = props.sx,
@@ -12,8 +11,16 @@ export function DefaultChartsItemContent(props) {
   if (itemData.dataIndex === undefined) {
     return null;
   }
-  var displayedLabel = (_series$label = series.label) != null ? _series$label : null;
-  var color = series.color;
+  var _ref = series.type === 'pie' ? {
+      color: series.data[itemData.dataIndex].color,
+      displayedLabel: series.data[itemData.dataIndex].label
+    } : {
+      color: series.color,
+      displayedLabel: series.label
+    },
+    displayedLabel = _ref.displayedLabel,
+    color = _ref.color;
+
   // TODO: Manage to let TS understand series.data and series.valueFormatter are coherent
   // @ts-ignore
   var formattedValue = series.valueFormatter(series.data[itemData.dataIndex]);

package/legacy/ChartsTooltip/ChartsTooltipTable.js

@@ -25,10 +25,10 @@ export var ChartsTooltipRow = styled('tr', {
 })(function (_ref2) {
   var theme = _ref2.theme;
   return {
-    '&:first-child td': {
+    'tr:first-of-type& td': {
       paddingTop: theme.spacing(1)
     },
-    '&:last-child td': {
+    'tr:last-of-type& td': {
       paddingBottom: theme.spacing(1)
     }
   };
@@ -41,18 +41,16 @@ export var ChartsTooltipCell = styled('td', {
   var theme = _ref3.theme;
   return _ref4 = {
     verticalAlign: 'middle',
-    color: theme.palette.text.secondary,
-    '&:first-child': {
-      paddingLeft: theme.spacing(2)
-    },
-    '&:last-child': {
-      paddingRight: theme.spacing(2)
-    }
+    color: theme.palette.text.secondary
   }, _defineProperty(_ref4, "&.".concat(tooltipClasses.labelCell), {
     paddingLeft: theme.spacing(1)
   }), _defineProperty(_ref4, "&.".concat(tooltipClasses.valueCell), {
     paddingLeft: theme.spacing(4),
     color: theme.palette.text.primary
+  }), _defineProperty(_ref4, 'td:first-of-type&', {
+    paddingLeft: theme.spacing(2)
+  }), _defineProperty(_ref4, 'td:last-of-type&', {
+    paddingRight: theme.spacing(2)
   }), _ref4;
 });
 export var ChartsTooltipMark = styled(Box, {

package/legacy/LineChart/LineChart.js

@@ -49,9 +49,11 @@ function LineChart(props) {
     xAxis: xAxis != null ? xAxis : [{
       id: DEFAULT_X_AXIS_KEY,
       scaleType: 'point',
-      data: _toConsumableArray(new Array(Math.max.apply(Math, _toConsumableArray(series.map(function (s) {
-        return s.data.length;
-      }))))).map(function (_, index) {
+      data: Array.from({
+        length: Math.max.apply(Math, _toConsumableArray(series.map(function (s) {
+          return s.data.length;
+        })))
+      }, function (_, index) {
         return index;
       })
     }],
@@ -82,7 +84,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     y: PropTypes.oneOf(['line', 'none'])
   }),
   /**
-   * Indicate which axis to display the the bottom of the charts.
+   * 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
    */
@@ -109,7 +111,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   disableAxisListener: PropTypes.bool,
   height: PropTypes.number,
   /**
-   * Indicate which axis to display the the left of the charts.
+   * 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
    */
@@ -129,6 +131,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   legend: PropTypes.shape({
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
+    hidden: PropTypes.bool,
     itemWidth: PropTypes.number,
     markSize: PropTypes.number,
     offset: PropTypes.shape({
@@ -148,7 +151,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     top: PropTypes.number
   }),
   /**
-   * Indicate which axis to display the the right of the charts.
+   * 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
    */
@@ -193,7 +196,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     trigger: PropTypes.oneOf(['axis', 'item', 'none'])
   }),
   /**
-   * Indicate which axis to display the the top of the charts.
+   * 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
    */

package/legacy/LineChart/legend.js

@@ -0,0 +1,15 @@
+var legendGetter = function legendGetter(params) {
+  var seriesOrder = params.seriesOrder,
+    series = params.series;
+  var data = seriesOrder.map(function (seriesId) {
+    return {
+      color: series[seriesId].color,
+      label: series[seriesId].label,
+      id: seriesId
+    };
+  });
+  return data.filter(function (item) {
+    return item.label !== undefined;
+  });
+};
+export default legendGetter;

package/legacy/PieChart/PieArc.js

@@ -0,0 +1,118 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "innerRadius", "outerRadius", "cornerRadius", "highlighted", "faded"];
+import * as React from 'react';
+import { arc as d3Arc } from 'd3-shape';
+import PropTypes from 'prop-types';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import { styled } from '@mui/material/styles';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import { InteractionContext } from '../context/InteractionProvider';
+import { getIsFaded, getIsHighlighted, useInteractionItemProps } from '../hooks/useInteractionItemProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function getPieArcUtilityClass(slot) {
+  return generateUtilityClass('MuiPieArc', slot);
+}
+export var pieArcClasses = generateUtilityClasses('MuiPieArc', ['root', 'highlighted', 'faded']);
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes,
+    id = ownerState.id,
+    isFaded = ownerState.isFaded,
+    isHighlighted = ownerState.isHighlighted;
+  var slots = {
+    root: ['root', "series-".concat(id), isHighlighted && 'highlighted', isFaded && 'faded']
+  };
+  return composeClasses(slots, getPieArcUtilityClass, classes);
+};
+var PieArcRoot = styled('path', {
+  name: 'MuiPieArc',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.arc;
+  }
+})(function (_ref) {
+  var ownerState = _ref.ownerState,
+    theme = _ref.theme;
+  return {
+    stroke: theme.palette.background.paper,
+    strokeWidth: 1,
+    strokeLinejoin: 'round',
+    fill: ownerState.color,
+    opacity: ownerState.isFaded ? 0.3 : 1
+  };
+});
+export default function PieArc(props) {
+  var _attibuesOverride$inn, _attibuesOverride$out, _attibuesOverride$cor;
+  var id = props.id,
+    dataIndex = props.dataIndex,
+    innerClasses = props.classes,
+    color = props.color,
+    highlightScope = props.highlightScope,
+    _props$innerRadius = props.innerRadius,
+    baseInnerRadius = _props$innerRadius === void 0 ? 0 : _props$innerRadius,
+    baseOuterRadius = props.outerRadius,
+    _props$cornerRadius = props.cornerRadius,
+    baseCornerRadius = _props$cornerRadius === void 0 ? 0 : _props$cornerRadius,
+    highlighted = props.highlighted,
+    _props$faded = props.faded,
+    faded = _props$faded === void 0 ? {
+      additionalRadius: -5
+    } : _props$faded,
+    other = _objectWithoutProperties(props, _excluded);
+  var getInteractionItemProps = useInteractionItemProps(highlightScope);
+  var _React$useContext = React.useContext(InteractionContext),
+    item = _React$useContext.item;
+  var isHighlighted = getIsHighlighted(item, {
+    type: 'pie',
+    seriesId: id,
+    dataIndex: dataIndex
+  }, highlightScope);
+  var isFaded = !isHighlighted && getIsFaded(item, {
+    type: 'pie',
+    seriesId: id,
+    dataIndex: dataIndex
+  }, highlightScope);
+  var ownerState = {
+    id: id,
+    dataIndex: dataIndex,
+    classes: innerClasses,
+    color: color,
+    isFaded: isFaded,
+    isHighlighted: isHighlighted
+  };
+  var classes = useUtilityClasses(ownerState);
+  var attibuesOverride = _extends({
+    additionalRadius: 0
+  }, isFaded && faded || isHighlighted && highlighted || {});
+  var innerRadius = Math.max(0, (_attibuesOverride$inn = attibuesOverride.innerRadius) != null ? _attibuesOverride$inn : baseInnerRadius);
+  var outerRadius = Math.max(0, (_attibuesOverride$out = attibuesOverride.outerRadius) != null ? _attibuesOverride$out : baseOuterRadius + attibuesOverride.additionalRadius);
+  var cornerRadius = (_attibuesOverride$cor = attibuesOverride.cornerRadius) != null ? _attibuesOverride$cor : baseCornerRadius;
+  return /*#__PURE__*/_jsx(PieArcRoot, _extends({
+    d: d3Arc().cornerRadius(cornerRadius)(_extends({}, other, {
+      innerRadius: innerRadius,
+      outerRadius: outerRadius
+    })),
+    ownerState: ownerState,
+    className: classes.root
+  }, getInteractionItemProps({
+    type: 'pie',
+    seriesId: id,
+    dataIndex: dataIndex
+  })));
+}
+process.env.NODE_ENV !== "production" ? PieArc.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  classes: PropTypes.object,
+  cornerRadius: PropTypes.number,
+  dataIndex: PropTypes.number.isRequired,
+  highlightScope: PropTypes.shape({
+    faded: PropTypes.oneOf(['global', 'none', 'series']),
+    highlighted: PropTypes.oneOf(['item', 'none', 'series'])
+  }),
+  innerRadius: PropTypes.number,
+  outerRadius: PropTypes.number.isRequired
+} : void 0;

package/legacy/PieChart/PieArcLabel.js

@@ -0,0 +1,101 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel"];
+import * as React from 'react';
+import { arc as d3Arc } from 'd3-shape';
+import PropTypes from 'prop-types';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import { styled } from '@mui/material/styles';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import { InteractionContext } from '../context/InteractionProvider';
+import { getIsFaded, getIsHighlighted } from '../hooks/useInteractionItemProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function getPieArcLabelUtilityClass(slot) {
+  return generateUtilityClass('MuiPieArcLabel', slot);
+}
+export var pieArcLabelClasses = generateUtilityClasses('MuiPieArcLabel', ['root', 'highlighted', 'faded']);
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes,
+    id = ownerState.id,
+    isFaded = ownerState.isFaded,
+    isHighlighted = ownerState.isHighlighted;
+  var slots = {
+    root: ['root', "series-".concat(id), isHighlighted && 'highlighted', isFaded && 'faded']
+  };
+  return composeClasses(slots, getPieArcLabelUtilityClass, classes);
+};
+var PieArcLabelRoot = styled('text', {
+  name: 'MuiPieArcLabel',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.root;
+  }
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    fill: theme.palette.text.primary,
+    alignmentBaseline: 'baseline',
+    textAnchor: 'middle'
+  };
+});
+export default function PieArcLabel(props) {
+  var id = props.id,
+    dataIndex = props.dataIndex,
+    innerClasses = props.classes,
+    color = props.color,
+    highlightScope = props.highlightScope,
+    _props$innerRadius = props.innerRadius,
+    innerRadius = _props$innerRadius === void 0 ? 0 : _props$innerRadius,
+    outerRadius = props.outerRadius,
+    _props$cornerRadius = props.cornerRadius,
+    cornerRadius = _props$cornerRadius === void 0 ? 0 : _props$cornerRadius,
+    formattedArcLabel = props.formattedArcLabel,
+    other = _objectWithoutProperties(props, _excluded);
+  var _React$useContext = React.useContext(InteractionContext),
+    item = _React$useContext.item;
+  var isHighlighted = getIsHighlighted(item, {
+    type: 'pie',
+    seriesId: id,
+    dataIndex: dataIndex
+  }, highlightScope);
+  var isFaded = !isHighlighted && getIsFaded(item, {
+    type: 'pie',
+    seriesId: id,
+    dataIndex: dataIndex
+  }, highlightScope);
+  var ownerState = {
+    id: id,
+    dataIndex: dataIndex,
+    classes: innerClasses,
+    color: color,
+    isFaded: isFaded,
+    isHighlighted: isHighlighted
+  };
+  var classes = useUtilityClasses(ownerState);
+  var arcLabelPosition = formattedArcLabel ? d3Arc().cornerRadius(cornerRadius).centroid(_extends({}, other, {
+    innerRadius: innerRadius,
+    outerRadius: outerRadius
+  })) : [0, 0];
+  return /*#__PURE__*/_jsx(PieArcLabelRoot, {
+    className: classes.root,
+    x: arcLabelPosition[0],
+    y: arcLabelPosition[1],
+    children: formattedArcLabel
+  });
+}
+process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  classes: PropTypes.object,
+  cornerRadius: PropTypes.number,
+  dataIndex: PropTypes.number.isRequired,
+  highlightScope: PropTypes.shape({
+    faded: PropTypes.oneOf(['global', 'none', 'series']),
+    highlighted: PropTypes.oneOf(['item', 'none', 'series'])
+  }),
+  innerRadius: PropTypes.number,
+  outerRadius: PropTypes.number.isRequired
+} : void 0;