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

package/modern/PieChart/PieChart.js

@@ -0,0 +1,285 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
+import { ChartsAxis } from '../ChartsAxis/ChartsAxis';
+import { DEFAULT_X_AXIS_KEY } from '../constants';
+import { ChartsTooltip } from '../ChartsTooltip';
+import { ChartsLegend } from '../ChartsLegend';
+import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
+import { PiePlot } from './PiePlot';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const defaultMargin = {
+  top: 5,
+  bottom: 5,
+  left: 5,
+  right: 100
+};
+function PieChart(props) {
+  const {
+    xAxis,
+    yAxis,
+    series,
+    width,
+    height,
+    margin: marginProps,
+    colors,
+    sx,
+    tooltip = {
+      trigger: 'item'
+    },
+    axisHighlight = {
+      x: 'none',
+      y: 'none'
+    },
+    legend = {
+      direction: 'column',
+      position: {
+        vertical: 'middle',
+        horizontal: 'right'
+      }
+    },
+    topAxis = null,
+    leftAxis = null,
+    rightAxis = null,
+    bottomAxis = null,
+    children
+  } = props;
+  const margin = _extends({}, defaultMargin, marginProps);
+  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
+    series: series.map(s => _extends({
+      type: 'pie'
+    }, s)),
+    width: width,
+    height: height,
+    margin: margin,
+    xAxis: xAxis ?? [{
+      id: DEFAULT_X_AXIS_KEY,
+      scaleType: 'point',
+      data: [...new Array(Math.max(...series.map(s => s.data.length)))].map((_, index) => index)
+    }],
+    yAxis: yAxis,
+    colors: colors,
+    sx: sx,
+    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
+    children: [/*#__PURE__*/_jsx(ChartsAxis, {
+      topAxis: topAxis,
+      leftAxis: leftAxis,
+      rightAxis: rightAxis,
+      bottomAxis: bottomAxis
+    }), /*#__PURE__*/_jsx(PiePlot, {}), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), children]
+  });
+}
+process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  axisHighlight: PropTypes.shape({
+    x: PropTypes.oneOf(['band', 'line', 'none']),
+    y: PropTypes.oneOf(['line', 'none'])
+  }),
+  /**
+   * 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.oneOfType([PropTypes.shape({
+    axisId: PropTypes.string.isRequired,
+    classes: PropTypes.object,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'top']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number
+  }), PropTypes.string]),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  /**
+   * Color palette used to colorize multiple series.
+   */
+  colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  desc: PropTypes.string,
+  disableAxisListener: PropTypes.bool,
+  height: PropTypes.number,
+  /**
+   * 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.oneOfType([PropTypes.shape({
+    axisId: PropTypes.string.isRequired,
+    classes: PropTypes.object,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    position: PropTypes.oneOf(['left', 'right']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number
+  }), PropTypes.string]),
+  legend: PropTypes.shape({
+    classes: PropTypes.object,
+    direction: PropTypes.oneOf(['column', 'row']),
+    hidden: PropTypes.bool,
+    itemWidth: PropTypes.number,
+    markSize: PropTypes.number,
+    offset: PropTypes.shape({
+      x: PropTypes.number,
+      y: PropTypes.number
+    }),
+    position: PropTypes.shape({
+      horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
+      vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
+    }),
+    spacing: PropTypes.number
+  }),
+  margin: PropTypes.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  }),
+  /**
+   * 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.oneOfType([PropTypes.shape({
+    axisId: PropTypes.string.isRequired,
+    classes: PropTypes.object,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    position: PropTypes.oneOf(['left', 'right']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number
+  }), PropTypes.string]),
+  series: PropTypes.arrayOf(PropTypes.shape({
+    arcLabel: PropTypes.oneOfType([PropTypes.oneOf(['formattedValue', 'label', 'value']), PropTypes.func]),
+    arcLabelMinAngle: PropTypes.number,
+    color: PropTypes.string,
+    cornerRadius: PropTypes.number,
+    cx: PropTypes.number,
+    cy: PropTypes.number,
+    data: PropTypes.arrayOf(PropTypes.shape({
+      color: PropTypes.string,
+      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      label: PropTypes.string,
+      value: PropTypes.number.isRequired
+    })).isRequired,
+    endAngle: PropTypes.number,
+    faded: PropTypes.shape({
+      additionalRadius: PropTypes.number,
+      cornerRadius: PropTypes.number,
+      innerRadius: PropTypes.number,
+      outerRadius: PropTypes.number
+    }),
+    highlighted: PropTypes.shape({
+      additionalRadius: PropTypes.number,
+      cornerRadius: PropTypes.number,
+      innerRadius: PropTypes.number,
+      outerRadius: PropTypes.number
+    }),
+    highlightScope: PropTypes.shape({
+      faded: PropTypes.oneOf(['global', 'none', 'series']),
+      highlighted: PropTypes.oneOf(['item', 'none', 'series'])
+    }),
+    id: PropTypes.string,
+    innerRadius: PropTypes.number,
+    outerRadius: PropTypes.number,
+    paddingAngle: PropTypes.number,
+    sortingValues: PropTypes.oneOfType([PropTypes.oneOf(['asc', 'desc', 'none']), PropTypes.func]),
+    startAngle: PropTypes.number,
+    type: PropTypes.oneOf(['pie']),
+    valueFormatter: PropTypes.func
+  })).isRequired,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  title: PropTypes.string,
+  tooltip: PropTypes.shape({
+    axisContent: PropTypes.elementType,
+    classes: PropTypes.object,
+    itemContent: PropTypes.elementType,
+    trigger: PropTypes.oneOf(['axis', 'item', 'none'])
+  }),
+  /**
+   * 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.oneOfType([PropTypes.shape({
+    axisId: PropTypes.string.isRequired,
+    classes: PropTypes.object,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'top']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number
+  }), PropTypes.string]),
+  viewBox: PropTypes.shape({
+    height: PropTypes.number,
+    width: PropTypes.number,
+    x: PropTypes.number,
+    y: PropTypes.number
+  }),
+  width: PropTypes.number,
+  xAxis: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.string,
+    classes: PropTypes.object,
+    data: PropTypes.array,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    id: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    max: PropTypes.number,
+    maxTicks: PropTypes.number,
+    min: PropTypes.number,
+    minTicks: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
+    valueFormatter: PropTypes.func
+  })),
+  yAxis: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.string,
+    classes: PropTypes.object,
+    data: PropTypes.array,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    id: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    max: PropTypes.number,
+    maxTicks: PropTypes.number,
+    min: PropTypes.number,
+    minTicks: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
+    valueFormatter: PropTypes.func
+  }))
+} : void 0;
+export { PieChart };

package/modern/PieChart/PiePlot.js

@@ -0,0 +1,91 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { SeriesContext } from '../context/SeriesContextProvider';
+import PieArc from './PieArc';
+import PieArcLabel from './PieArcLabel';
+import { DrawingContext } from '../context/DrawingProvider';
+import { createElement as _createElement } from "react";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+const RATIO = 180 / Math.PI;
+function getItemLabel(arcLabel, arcLabelMinAngle, item) {
+  if (!arcLabel) {
+    return null;
+  }
+  const angle = (item.endAngle - item.startAngle) * RATIO;
+  if (angle < arcLabelMinAngle) {
+    return null;
+  }
+  if (typeof arcLabel === 'string') {
+    return item[arcLabel]?.toString();
+  }
+  return arcLabel(item);
+}
+export function PiePlot() {
+  const seriesData = React.useContext(SeriesContext).pie;
+  const {
+    left,
+    top,
+    width,
+    height
+  } = React.useContext(DrawingContext);
+  if (seriesData === undefined) {
+    return null;
+  }
+  const availableRadius = Math.min(width, height) / 2;
+  const center = {
+    x: left + width / 2,
+    y: top + height / 2
+  };
+  const {
+    series,
+    seriesOrder
+  } = seriesData;
+  return /*#__PURE__*/_jsx("g", {
+    children: seriesOrder.map(seriesId => {
+      const {
+        innerRadius,
+        outerRadius,
+        cornerRadius,
+        arcLabel,
+        arcLabelMinAngle = 0,
+        data,
+        cx,
+        cy,
+        highlighted,
+        faded
+      } = series[seriesId];
+      return /*#__PURE__*/_jsx("g", {
+        transform: `translate(${cx === undefined ? center.x : left + cx}, ${cy === undefined ? center.y : top + cy})`,
+        children: /*#__PURE__*/_jsxs("g", {
+          children: [data.map((item, index) => {
+            return /*#__PURE__*/_createElement(PieArc, _extends({}, item, {
+              key: item.id,
+              innerRadius: innerRadius,
+              outerRadius: outerRadius ?? availableRadius,
+              cornerRadius: cornerRadius,
+              id: seriesId,
+              color: item.color,
+              dataIndex: index,
+              highlightScope: series[seriesId].highlightScope,
+              highlighted: highlighted,
+              faded: faded
+            }));
+          }), data.map((item, index) => {
+            return /*#__PURE__*/_createElement(PieArcLabel, _extends({}, item, {
+              key: item.id,
+              innerRadius: innerRadius,
+              outerRadius: outerRadius ?? availableRadius,
+              cornerRadius: cornerRadius,
+              id: seriesId,
+              color: item.color,
+              dataIndex: index,
+              highlightScope: series[seriesId].highlightScope,
+              formattedArcLabel: getItemLabel(arcLabel, arcLabelMinAngle, item)
+            }));
+          })]
+        })
+      }, seriesId);
+    })
+  });
+}

package/modern/PieChart/formatter.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { pie as d3Pie } from 'd3-shape';
+const getSortingComparator = (comparator = 'none') => {
+  if (typeof comparator === 'function') {
+    return comparator;
+  }
+  switch (comparator) {
+    case 'none':
+      return null;
+    case 'desc':
+      return (a, b) => b - a;
+    case 'asc':
+      return (a, b) => a - b;
+    default:
+      return null;
+  }
+};
+const formatter = params => {
+  const {
+    seriesOrder,
+    series
+  } = params;
+  const defaultizedSeries = {};
+  seriesOrder.forEach(seriesId => {
+    const arcs = d3Pie().startAngle(2 * Math.PI * (series[seriesId].startAngle ?? 0) / 360).endAngle(2 * Math.PI * (series[seriesId].endAngle ?? 360) / 360).padAngle(2 * Math.PI * (series[seriesId].paddingAngle ?? 0) / 360).sortValues(getSortingComparator(series[seriesId].sortingValues ?? 'none'))(series[seriesId].data.map(piePoint => piePoint.value));
+    defaultizedSeries[seriesId] = _extends({
+      valueFormatter: item => item.value.toLocaleString()
+    }, series[seriesId], {
+      data: series[seriesId].data.map((item, index) => _extends({}, item, {
+        id: item.id ?? `auto-generated-pie-id-${seriesId}-${index}`
+      }, arcs[index])).map(item => _extends({}, item, {
+        formattedValue: series[seriesId].valueFormatter?.(item) ?? item.value.toLocaleString()
+      }))
+    });
+  });
+  return {
+    seriesOrder,
+    series: defaultizedSeries
+  };
+};
+export default formatter;

package/modern/PieChart/index.js

@@ -0,0 +1,4 @@
+export { PiePlot } from './PiePlot';
+export { PieChart } from './PieChart';
+export * from './PieArc';
+export * from './PieArcLabel';

package/modern/PieChart/legend.js

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

package/modern/ResponsiveChartContainer/index.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["width", "height"];
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ownerWindow from '@mui/utils/ownerWindow';
@@ -82,17 +84,26 @@ const ResizableContainer = styled('div', {
   flexDirection: 'column',
   alignItems: 'center',
   justifyContent: 'center',
-  overflow: 'hidden'
+  overflow: 'hidden',
+  '&>svg': {
+    width: '100%',
+    height: '100%'
+  }
 }));
 export function ResponsiveChartContainer(props) {
-  const [containerRef, width, height] = useChartDimensions(props.width, props.height);
+  const {
+      width: propsWidth,
+      height: propsHeight
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const [containerRef, width, height] = useChartDimensions(propsWidth, propsHeight);
   return /*#__PURE__*/_jsx(ResizableContainer, {
     ref: containerRef,
     ownerState: {
       width: props.width,
       height: props.height
     },
-    children: /*#__PURE__*/_jsx(ChartContainer, _extends({}, props, {
+    children: /*#__PURE__*/_jsx(ChartContainer, _extends({}, other, {
       width: width,
       height: height
     }))

package/modern/ScatterChart/Scatter.js

@@ -82,7 +82,7 @@ process.env.NODE_ENV !== "production" ? Scatter.propTypes = {
   color: PropTypes.string.isRequired,
   markerSize: PropTypes.number.isRequired,
   series: PropTypes.shape({
-    color: PropTypes.string.isRequired,
+    color: PropTypes.string,
     data: PropTypes.arrayOf(PropTypes.shape({
       id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
       x: PropTypes.number.isRequired,

package/modern/ScatterChart/ScatterChart.js

@@ -109,6 +109,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   legend: PropTypes.shape({
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
+    hidden: PropTypes.bool,
     itemWidth: PropTypes.number,
     markSize: PropTypes.number,
     offset: PropTypes.shape({

package/modern/ScatterChart/legend.js

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

package/modern/context/SeriesContextProvider.js

@@ -4,6 +4,7 @@ import { useTheme } from '@mui/material/styles';
 import barSeriesFormatter from '../BarChart/formatter';
 import scatterSeriesFormatter from '../ScatterChart/formatter';
 import lineSeriesFormatter from '../LineChart/formatter';
+import pieSeriesFormatter from '../PieChart/formatter';
 import { defaultizeColor } from '../internals/defaultizeColor';
 import { blueberryTwilightPalette } from '../colorPalettes';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -11,8 +12,17 @@ export const SeriesContext = /*#__PURE__*/React.createContext({});
 const seriesTypeFormatter = {
   bar: barSeriesFormatter,
   scatter: scatterSeriesFormatter,
-  line: lineSeriesFormatter
+  line: lineSeriesFormatter,
+  pie: pieSeriesFormatter
 };
+/**
+ * This methods is the interface between what the developper is providing and what compoenents receives
+ * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if soe line data are modified
+ * It also add defaultized values such as the ids, colors
+ * @param series The array of series provided by devs
+ * @param colors The color palette used to defaultize series colors
+ * @returns An object structuring all the series by type.
+ */
 const formatSeries = (series, colors) => {
   // Group series by type
   const seriesGroups = {};

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.0.0-alpha.1
+ * @mui/x-charts v6.0.0-alpha.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -17,6 +17,7 @@ export * from './ChartsTooltip';
 export * from './ChartsAxisHighlight';
 export * from './BarChart';
 export * from './LineChart';
+export * from './PieChart';
 export * from './ScatterChart';
 export * from './ChartContainer';
 export * from './ResponsiveChartContainer';

package/modern/internals/defaultizeColor.js

@@ -1,6 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 const DEFAULT_COLORS = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'];
 export function defaultizeColor(series, seriesIndex, colors = DEFAULT_COLORS) {
+  if (series.type === 'pie') {
+    return _extends({}, series, {
+      data: series.data.map((d, index) => _extends({
+        color: colors[index % colors.length]
+      }, d))
+    });
+  }
   return _extends({
     color: colors[seriesIndex % colors.length]
   }, series);

package/modern/models/seriesType/index.js

@@ -1,12 +1,5 @@
-// import { PieSeriesType } from './pie';
-
-// | PieSeriesType;
-
-// | PieSeriesType;
-
-// | PieSeriesType
-
 export * from './line';
 export * from './bar';
 export * from './scatter';
+export * from './pie';
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "6.0.0-alpha.1",
+  "version": "6.0.0-alpha.2",
   "description": "The community edition of the charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",