@mui/x-charts 7.2.0 → 7.3.1

package/modern/PieChart/PieChart.js

@@ -9,8 +9,7 @@ import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { PiePlot } from './PiePlot';
 import { useIsRTL } from '../internals/useIsRTL';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultMargin = {
   top: 5,
   bottom: 5,
@@ -124,30 +123,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
-  bottomAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    classes: PropTypes.object,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    fill: PropTypes.string,
-    label: PropTypes.string,
-    labelFontSize: PropTypes.number,
-    labelStyle: PropTypes.object,
-    position: PropTypes.oneOf(['bottom', 'top']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    stroke: PropTypes.string,
-    tickFontSize: PropTypes.number,
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: PropTypes.number
-  }), PropTypes.string]),
+  bottomAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   children: PropTypes.node,
   className: PropTypes.string,
   /**
@@ -175,30 +151,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default null
    */
-  leftAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    classes: PropTypes.object,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    fill: PropTypes.string,
-    label: PropTypes.string,
-    labelFontSize: PropTypes.number,
-    labelStyle: PropTypes.object,
-    position: PropTypes.oneOf(['left', 'right']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    stroke: PropTypes.string,
-    tickFontSize: PropTypes.number,
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: PropTypes.number
-  }), PropTypes.string]),
+  leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   /**
    * The props of the legend.
    * @default { direction: 'column', position: { vertical: 'middle', horizontal: 'right' } }
@@ -236,32 +189,10 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default null
    */
-  rightAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    classes: PropTypes.object,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    fill: PropTypes.string,
-    label: PropTypes.string,
-    labelFontSize: PropTypes.number,
-    labelStyle: PropTypes.object,
-    position: PropTypes.oneOf(['left', 'right']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    stroke: PropTypes.string,
-    tickFontSize: PropTypes.number,
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: PropTypes.number
-  }), PropTypes.string]),
+  rightAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   /**
    * The series to display in the pie chart.
+   * An array of [[PieSeriesType]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
@@ -299,30 +230,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
-  topAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    classes: PropTypes.object,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    fill: PropTypes.string,
-    label: PropTypes.string,
-    labelFontSize: PropTypes.number,
-    labelStyle: PropTypes.object,
-    position: PropTypes.oneOf(['bottom', 'top']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    stroke: PropTypes.string,
-    tickFontSize: PropTypes.number,
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: PropTypes.number
-  }), PropTypes.string]),
+  topAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   viewBox: PropTypes.shape({
     height: PropTypes.number,
     width: PropTypes.number,
@@ -335,11 +243,27 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   width: PropTypes.number,
   /**
    * The configuration of the x-axes.
-   * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
    */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,
     disableLine: PropTypes.bool,
@@ -372,11 +296,27 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   })),
   /**
    * The configuration of the y-axes.
-   * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
    */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,
     disableLine: PropTypes.bool,

package/modern/PieChart/PiePlot.js

@@ -5,8 +5,8 @@ import { DrawingContext } from '../context/DrawingProvider';
 import { PieArcPlot } from './PieArcPlot';
 import { PieArcLabelPlot } from './PieArcLabelPlot';
 import { getPercentageValue } from '../internals/utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { getPieCoordinates } from './getPieCoordinates';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
  *
@@ -34,7 +34,6 @@ function PiePlot(props) {
   if (seriesData === undefined) {
     return null;
   }
-  const availableRadius = Math.min(width, height) / 2;
   const {
     series,
     seriesOrder
@@ -53,10 +52,19 @@ function PiePlot(props) {
         faded,
         highlightScope
       } = series[seriesId];
+      const {
+        cx,
+        cy,
+        availableRadius
+      } = getPieCoordinates({
+        cx: cxParam,
+        cy: cyParam
+      }, {
+        width,
+        height
+      });
       const outerRadius = getPercentageValue(outerRadiusParam ?? availableRadius, availableRadius);
       const innerRadius = getPercentageValue(innerRadiusParam ?? 0, availableRadius);
-      const cx = getPercentageValue(cxParam ?? '50%', width);
-      const cy = getPercentageValue(cyParam ?? '50%', height);
       return /*#__PURE__*/_jsx("g", {
         transform: `translate(${left + cx}, ${top + cy})`,
         children: /*#__PURE__*/_jsx(PieArcPlot, {
@@ -89,11 +97,20 @@ function PiePlot(props) {
         cy: cyParam,
         highlightScope
       } = series[seriesId];
+      const {
+        cx,
+        cy,
+        availableRadius
+      } = getPieCoordinates({
+        cx: cxParam,
+        cy: cyParam
+      }, {
+        width,
+        height
+      });
       const outerRadius = getPercentageValue(outerRadiusParam ?? availableRadius, availableRadius);
       const innerRadius = getPercentageValue(innerRadiusParam ?? 0, availableRadius);
       const arcLabelRadius = arcLabelRadiusParam === undefined ? (outerRadius + innerRadius) / 2 : getPercentageValue(arcLabelRadiusParam, availableRadius);
-      const cx = getPercentageValue(cxParam ?? '50%', width);
-      const cy = getPercentageValue(cyParam ?? '50%', height);
       return /*#__PURE__*/_jsx("g", {
         transform: `translate(${left + cx}, ${top + cy})`,
         children: /*#__PURE__*/_jsx(PieArcLabelPlot, {
@@ -107,7 +124,9 @@ function PiePlot(props) {
           skipAnimation: skipAnimation,
           arcLabel: arcLabel,
           arcLabelMinAngle: arcLabelMinAngle,
-          highlightScope: highlightScope
+          highlightScope: highlightScope,
+          slots: slots,
+          slotProps: slotProps
         })
       }, seriesId);
     })]

package/modern/PieChart/formatter.js

@@ -28,8 +28,10 @@ const formatter = params => {
     }, 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()
+      }, arcs[index])).map((item, index) => _extends({}, item, {
+        formattedValue: series[seriesId].valueFormatter?.(item, {
+          dataIndex: index
+        }) ?? item.value.toLocaleString()
       }))
     });
   });

package/modern/PieChart/getColor.js

@@ -0,0 +1,5 @@
+export default function getColor(series) {
+  return dataIndex => {
+    return series.data[dataIndex].color;
+  };
+}

package/modern/PieChart/getPieCoordinates.js

@@ -0,0 +1,19 @@
+import { getPercentageValue } from '../internals/utils';
+export function getPieCoordinates(series, drawing) {
+  const {
+    height,
+    width
+  } = drawing;
+  const {
+    cx: cxParam,
+    cy: cyParam
+  } = series;
+  const availableRadius = Math.min(width, height) / 2;
+  const cx = getPercentageValue(cxParam ?? '50%', width);
+  const cy = getPercentageValue(cyParam ?? '50%', height);
+  return {
+    cx,
+    cy,
+    availableRadius
+  };
+}

package/modern/PieChart/index.js

@@ -3,4 +3,5 @@ export * from './PiePlot';
 export * from './PieArcPlot';
 export * from './PieArcLabelPlot';
 export * from './PieArc';
-export * from './PieArcLabel';
+export * from './PieArcLabel';
+export * from './getPieCoordinates';

package/modern/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -106,11 +106,27 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
   width: PropTypes.number,
   /**
    * The configuration of the x-axes.
-   * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
    */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,
     disableLine: PropTypes.bool,
@@ -143,11 +159,27 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
   })),
   /**
    * The configuration of the y-axes.
-   * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
    */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,
     disableLine: PropTypes.bool,

package/modern/ScatterChart/Scatter.js

@@ -21,6 +21,7 @@ function Scatter(props) {
     xScale,
     yScale,
     color,
+    colorGetter,
     markerSize,
     onItemClick
   } = props;
@@ -63,19 +64,20 @@ function Scatter(props) {
           isFaded: !isHighlighted && getIsFaded(item, pointCtx, highlightScope),
           interactionProps: getInteractionItemProps(pointCtx),
           id: scatterPoint.id,
-          dataIndex: i
+          dataIndex: i,
+          color: colorGetter ? colorGetter(i) : color
         });
       }
     }
     return temp;
-  }, [xScale, yScale, series.data, series.id, item, highlightScope, getInteractionItemProps]);
+  }, [xScale, yScale, series.data, series.id, item, highlightScope, getInteractionItemProps, color, colorGetter]);
   return /*#__PURE__*/_jsx("g", {
     children: cleanData.map(dataPoint => /*#__PURE__*/_jsx("circle", _extends({
       cx: 0,
       cy: 0,
       r: (dataPoint.isHighlighted ? 1.2 : 1) * markerSize,
       transform: `translate(${dataPoint.x}, ${dataPoint.y})`,
-      fill: color,
+      fill: dataPoint.color,
       opacity: dataPoint.isFaded && 0.3 || 1,
       onClick: onItemClick && (event => onItemClick(event, {
         type: 'scatter',
@@ -92,6 +94,7 @@ process.env.NODE_ENV !== "production" ? Scatter.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   color: PropTypes.string.isRequired,
+  colorGetter: PropTypes.func,
   markerSize: PropTypes.number.isRequired,
   /**
    * Callback fired when clicking on a scatter item.