@mui/x-charts 7.0.0-alpha.9 → 7.0.0-beta.1

package/LineChart/MarkPlot.js

@@ -14,8 +14,10 @@ var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _MarkElement = require("./MarkElement");
 var _useScale = require("../hooks/useScale");
 var _constants = require("../constants");
+var _DrawingProvider = require("../context/DrawingProvider");
+var _utils = require("../internals/utils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps"];
+const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 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; }
 /**
@@ -31,11 +33,16 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function MarkPlot(props) {
   const {
       slots,
-      slotProps
+      slotProps,
+      skipAnimation,
+      onItemClick
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).line;
   const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
+  const {
+    chartId
+  } = React.useContext(_DrawingProvider.DrawingContext);
   const Mark = slots?.mark ?? _MarkElement.MarkElement;
   if (seriesData === undefined) {
     return null;
@@ -56,7 +63,7 @@ function MarkPlot(props) {
     children: stackingGroups.flatMap(({
       ids: groupIds
     }) => {
-      return groupIds.flatMap(seriesId => {
+      return groupIds.map(seriesId => {
         const {
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
@@ -87,59 +94,70 @@ function MarkPlot(props) {
         if (xData === undefined) {
           throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
         }
-        return xData?.map((x, index) => {
-          const value = data[index] == null ? null : stackedData[index][1];
-          return {
-            x: xScale(x),
-            y: value === null ? null : yScale(value),
-            position: x,
-            value,
-            index
-          };
-        }).filter(({
-          x,
-          y,
-          index,
-          position,
-          value
-        }) => {
-          if (value === null || y === null) {
-            // Remove missing data point
-            return false;
-          }
-          if (!isInRange({
-            x,
-            y
-          })) {
-            // Remove out of range
-            return false;
-          }
-          if (showMark === true) {
-            return true;
-          }
-          return showMark({
+        const clipId = (0, _utils.cleanId)(`${chartId}-${seriesId}-line-clip`); // We assume that if displaying line mark, the line will also be rendered
+
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+          clipPath: `url(#${clipId})`,
+          children: xData?.map((x, index) => {
+            const value = data[index] == null ? null : stackedData[index][1];
+            return {
+              x: xScale(x),
+              y: value === null ? null : yScale(value),
+              position: x,
+              value,
+              index
+            };
+          }).filter(({
             x,
             y,
             index,
             position,
             value
-          });
-        }).map(({
-          x,
-          y,
-          index
-        }) => {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(Mark, (0, _extends2.default)({
-            id: seriesId,
-            dataIndex: index,
-            shape: "circle",
-            color: series[seriesId].color,
-            x: x,
-            y: y // Don't knwo why TS don't get from the filter that y can't be null
-            ,
-            highlightScope: series[seriesId].highlightScope
-          }, slotProps?.mark), `${seriesId}-${index}`);
-        });
+          }) => {
+            if (value === null || y === null) {
+              // Remove missing data point
+              return false;
+            }
+            if (!isInRange({
+              x,
+              y
+            })) {
+              // Remove out of range
+              return false;
+            }
+            if (showMark === true) {
+              return true;
+            }
+            return showMark({
+              x,
+              y,
+              index,
+              position,
+              value
+            });
+          }).map(({
+            x,
+            y,
+            index
+          }) => {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Mark, (0, _extends2.default)({
+              id: seriesId,
+              dataIndex: index,
+              shape: "circle",
+              color: series[seriesId].color,
+              x: x,
+              y: y // Don't know why TS doesn't get from the filter that y can't be null
+              ,
+              highlightScope: series[seriesId].highlightScope,
+              skipAnimation: skipAnimation,
+              onClick: onItemClick && (event => onItemClick(event, {
+                type: 'line',
+                seriesId,
+                dataIndex: index
+              }))
+            }, slotProps?.mark), `${seriesId}-${index}`);
+          })
+        }, seriesId);
       });
     })
   }));
@@ -149,6 +167,17 @@ process.env.NODE_ENV !== "production" ? MarkPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Callback fired when a line mark item is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {LineItemIdentifier} lineItemIdentifier The line mark item identifier.
+   */
+  onItemClick: _propTypes.default.func,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: _propTypes.default.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/LineChart/formatter.js

@@ -76,7 +76,7 @@ const formatter = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v === null ? '' : v.toLocaleString())
+    series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v == null ? '' : v.toLocaleString())
   };
 };
 var _default = exports.default = formatter;

package/LineChart/index.d.ts

@@ -4,6 +4,8 @@ export * from './AreaPlot';
 export * from './MarkPlot';
 export * from './LineHighlightPlot';
 export * from './AreaElement';
+export * from './AnimatedArea';
 export * from './LineElement';
+export * from './AnimatedLine';
 export * from './MarkElement';
 export * from './LineHighlightElement';

package/LineChart/index.js

@@ -69,6 +69,17 @@ Object.keys(_AreaElement).forEach(function (key) {
     }
   });
 });
+var _AnimatedArea = require("./AnimatedArea");
+Object.keys(_AnimatedArea).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AnimatedArea[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AnimatedArea[key];
+    }
+  });
+});
 var _LineElement = require("./LineElement");
 Object.keys(_LineElement).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -80,6 +91,17 @@ Object.keys(_LineElement).forEach(function (key) {
     }
   });
 });
+var _AnimatedLine = require("./AnimatedLine");
+Object.keys(_AnimatedLine).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AnimatedLine[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AnimatedLine[key];
+    }
+  });
+});
 var _MarkElement = require("./MarkElement");
 Object.keys(_MarkElement).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/PieChart/PieArcLabelPlot.d.ts

@@ -24,7 +24,7 @@ export interface PieArcLabelPlotProps extends Pick<DefaultizedPieSeriesType, 'da
      */
     slotProps?: PieArcLabelPlotSlotProps;
     /**
-     * If `true`, animations are skiped.
+     * If `true`, animations are skipped.
      * @default false
      */
     skipAnimation?: boolean;

package/PieChart/PieArcLabelPlot.js

@@ -182,7 +182,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
    */
   paddingAngle: _propTypes.default.number,
   /**
-   * If `true`, animations are skiped.
+   * If `true`, animations are skipped.
    * @default false
    */
   skipAnimation: _propTypes.default.bool,

package/PieChart/PieArcPlot.d.ts

@@ -29,9 +29,9 @@ export interface PieArcPlotProps extends Pick<DefaultizedPieSeriesType, 'data' |
      * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
      * @param {DefaultizedPieValueType} item The pie item.
      */
-    onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void;
+    onItemClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void;
     /**
-     * If `true`, animations are skiped.
+     * If `true`, animations are skipped.
      * @default false
      */
     skipAnimation?: boolean;

package/PieChart/PieArcPlot.js

@@ -14,7 +14,7 @@ var _PieArc = require("./PieArc");
 var _transition = require("./dataTransform/transition");
 var _useTransformData = require("./dataTransform/useTransformData");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "onClick", "skipAnimation"],
+const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "onItemClick", "skipAnimation"],
   _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "arcLabelRadius", "outerRadius", "cornerRadius"];
 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; }
@@ -33,7 +33,7 @@ function PieArcPlot(props) {
         additionalRadius: -5
       },
       data,
-      onClick,
+      onItemClick,
       skipAnimation
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
@@ -80,8 +80,8 @@ function PieArcPlot(props) {
         highlightScope: highlightScope,
         isFaded: item.isFaded,
         isHighlighted: item.isHighlighted,
-        onClick: onClick && (event => {
-          onClick(event, {
+        onClick: onItemClick && (event => {
+          onItemClick(event, {
             type: 'pie',
             seriesId: id,
             dataIndex: index
@@ -158,7 +158,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
    * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
    * @param {DefaultizedPieValueType} item The pie item.
    */
-  onClick: _propTypes.default.func,
+  onItemClick: _propTypes.default.func,
   /**
    * The radius between circle center and the end of the arc.
    */
@@ -169,7 +169,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
    */
   paddingAngle: _propTypes.default.number,
   /**
-   * If `true`, animations are skiped.
+   * If `true`, animations are skipped.
    * @default false
    */
   skipAnimation: _propTypes.default.bool,

package/PieChart/PieChart.d.ts

@@ -33,7 +33,7 @@ export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'seri
      * @deprecated Consider using `slotProps.legend` instead.
      */
     legend?: ChartsLegendProps;
-    onClick?: PiePlotProps['onClick'];
+    onItemClick?: PiePlotProps['onItemClick'];
     slots?: PieChartSlots;
     /**
      * The props used for each component slot.

package/PieChart/PieChart.js

@@ -67,7 +67,7 @@ function PieChart(props) {
     children,
     slots,
     slotProps,
-    onClick
+    onItemClick
   } = props;
   const margin = (0, _extends2.default)({}, defaultMargin, marginProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, {
@@ -96,7 +96,7 @@ function PieChart(props) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PiePlot.PiePlot, {
       slots: slots,
       slotProps: slotProps,
-      onClick: onClick,
+      onItemClick: onItemClick,
       skipAnimation: skipAnimation
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend, {
       slots: slots,
@@ -216,7 +216,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     right: _propTypes.default.number,
     top: _propTypes.default.number
   }),
-  onClick: _propTypes.default.func,
+  onItemClick: _propTypes.default.func,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -244,54 +244,9 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
-  series: _propTypes.default.arrayOf(_propTypes.default.shape({
-    arcLabel: _propTypes.default.oneOfType([_propTypes.default.oneOf(['formattedValue', 'label', 'value']), _propTypes.default.func]),
-    arcLabelMinAngle: _propTypes.default.number,
-    arcLabelRadius: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    color: _propTypes.default.string,
-    cornerRadius: _propTypes.default.number,
-    cx: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    cy: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    data: _propTypes.default.arrayOf(_propTypes.default.shape({
-      color: _propTypes.default.string,
-      id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-      label: _propTypes.default.string,
-      value: _propTypes.default.number.isRequired
-    })).isRequired,
-    endAngle: _propTypes.default.number,
-    faded: _propTypes.default.shape({
-      additionalRadius: _propTypes.default.number,
-      arcLabelRadius: _propTypes.default.number,
-      color: _propTypes.default.string,
-      cornerRadius: _propTypes.default.number,
-      innerRadius: _propTypes.default.number,
-      outerRadius: _propTypes.default.number,
-      paddingAngle: _propTypes.default.number
-    }),
-    highlighted: _propTypes.default.shape({
-      additionalRadius: _propTypes.default.number,
-      arcLabelRadius: _propTypes.default.number,
-      color: _propTypes.default.string,
-      cornerRadius: _propTypes.default.number,
-      innerRadius: _propTypes.default.number,
-      outerRadius: _propTypes.default.number,
-      paddingAngle: _propTypes.default.number
-    }),
-    highlightScope: _propTypes.default.shape({
-      faded: _propTypes.default.oneOf(['global', 'none', 'series']),
-      highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
-    }),
-    id: _propTypes.default.string,
-    innerRadius: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    outerRadius: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    paddingAngle: _propTypes.default.number,
-    sortingValues: _propTypes.default.oneOfType([_propTypes.default.oneOf(['asc', 'desc', 'none']), _propTypes.default.func]),
-    startAngle: _propTypes.default.number,
-    type: _propTypes.default.oneOf(['pie']),
-    valueFormatter: _propTypes.default.func
-  })).isRequired,
+  series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   /**
-   * If `true`, animations are skiped.
+   * If `true`, animations are skipped.
    * @default false
    */
   skipAnimation: _propTypes.default.bool,

package/PieChart/PiePlot.d.ts

@@ -5,7 +5,7 @@ export interface PiePlotSlots extends PieArcPlotSlots, PieArcLabelPlotSlots {
 }
 export interface PiePlotSlotProps extends PieArcPlotSlotProps, PieArcLabelPlotSlotProps {
 }
-export interface PiePlotProps extends Pick<PieArcPlotProps, 'skipAnimation' | 'onClick'> {
+export interface PiePlotProps extends Pick<PieArcPlotProps, 'skipAnimation' | 'onItemClick'> {
     /**
      * Overridable component slots.
      * @default {}

package/PieChart/PiePlot.js

@@ -30,7 +30,7 @@ function PiePlot(props) {
     skipAnimation,
     slots,
     slotProps,
-    onClick
+    onItemClick
   } = props;
   const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).pie;
   const {
@@ -78,7 +78,7 @@ function PiePlot(props) {
           highlightScope: highlightScope,
           highlighted: highlighted,
           faded: faded,
-          onClick: onClick,
+          onItemClick: onItemClick,
           slots: slots,
           slotProps: slotProps
         })
@@ -132,9 +132,9 @@ process.env.NODE_ENV !== "production" ? PiePlot.propTypes = {
    * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
    * @param {DefaultizedPieValueType} item The pie item.
    */
-  onClick: _propTypes.default.func,
+  onItemClick: _propTypes.default.func,
   /**
-   * If `true`, animations are skiped.
+   * If `true`, animations are skipped.
    * @default false
    */
   skipAnimation: _propTypes.default.bool,

package/README.md

@@ -1,7 +1,7 @@
-# MUI X Charts
+# MUI X Charts
 
 This package is the community edition of the chart components.
-It's part of [MUI X](https://mui.com/x/), an open-core extension of MUI Core, with advanced components.
+It's part of [MUI X](https://mui.com/x/), an open-core extension of MUI Core, with advanced components.
 
 ## Installation
 

package/ResponsiveChartContainer/ResponsiveChartContainer.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ChartContainerProps } from '../ChartContainer';
+export interface ResponsiveChartContainerProps extends Omit<ChartContainerProps, 'width' | 'height'> {
+    /**
+     * The width of the chart in px. If not defined, it takes the width of the parent element.
+     * @default undefined
+     */
+    width?: number;
+    /**
+     * The height of the chart in px. If not defined, it takes the height of the parent element.
+     * @default undefined
+     */
+    height?: number;
+}
+declare const ResponsiveChartContainer: React.ForwardRefExoticComponent<ResponsiveChartContainerProps & React.RefAttributes<unknown>>;
+export { ResponsiveChartContainer };