@mui/x-charts 8.0.0-alpha.0 → 8.0.0-alpha.10

package/node/PieChart/PieChart.js

@@ -11,25 +11,21 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _RtlProvider = require("@mui/system/RtlProvider");
 var _styles = require("@mui/material/styles");
-var _ChartContainer = require("../ChartContainer");
 var _ChartsTooltip = require("../ChartsTooltip");
 var _ChartsLegend = require("../ChartsLegend");
 var _PiePlot = require("./PiePlot");
 var _ChartsOverlay = require("../ChartsOverlay");
+var _ChartsSurface = require("../ChartsSurface");
+var _ChartDataProvider = require("../ChartDataProvider");
+var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
+var _ChartsWrapper = require("../internals/components/ChartsWrapper");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "sx", "tooltip", "skipAnimation", "hideLegend", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "sx", "skipAnimation", "hideLegend", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
 const defaultMargin = {
   top: 5,
   bottom: 5,
   left: 5,
-  right: 100
-};
-const defaultRTLMargin = {
-  top: 5,
-  bottom: 5,
-  left: 100,
   right: 5
 };
 
@@ -55,9 +51,6 @@ const PieChart = exports.PieChart = /*#__PURE__*/React.forwardRef(function PieCh
       margin: marginProps,
       colors,
       sx,
-      tooltip = {
-        trigger: 'item'
-      },
       skipAnimation,
       hideLegend,
       children,
@@ -70,43 +63,48 @@ const PieChart = exports.PieChart = /*#__PURE__*/React.forwardRef(function PieCh
       className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const isRtl = (0, _RtlProvider.useRtl)();
-  const margin = (0, _extends2.default)({}, isRtl ? defaultRTLMargin : defaultMargin, marginProps);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartContainer.ChartContainer, (0, _extends2.default)({}, other, {
-    ref: ref,
+  const margin = (0, _extends2.default)({}, defaultMargin, marginProps);
+  const {
+    chartDataProviderProps,
+    chartsSurfaceProps
+  } = (0, _useChartContainerProps.useChartContainerProps)((0, _extends2.default)({}, other, {
     series: series.map(s => (0, _extends2.default)({
       type: 'pie'
     }, s)),
-    width: width,
-    height: height,
-    margin: margin,
-    colors: colors,
-    sx: sx,
+    width,
+    height,
+    margin,
+    colors,
     disableAxisListener: true,
-    highlightedItem: highlightedItem,
-    onHighlightChange: onHighlightChange,
-    className: className,
-    skipAnimation: skipAnimation,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PiePlot.PiePlot, {
-      slots: slots,
-      slotProps: slotProps,
-      onItemClick: onItemClick
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
-      loading: loading,
-      slots: slots,
-      slotProps: slotProps
-    }), !hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, {
-      direction: "column",
-      position: {
-        vertical: 'middle',
-        horizontal: isRtl ? 'left' : 'right'
-      },
-      slots: slots,
-      slotProps: slotProps
-    }), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip, {
-      slots: slots,
-      slotProps: slotProps
-    })), children]
+    highlightedItem,
+    onHighlightChange,
+    className,
+    skipAnimation
+  }), ref);
+  const Tooltip = slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, {
+      legendPosition: props.slotProps?.legend?.position,
+      legendDirection: props?.slotProps?.legend?.direction ?? 'vertical',
+      sx: sx,
+      children: [!hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, {
+        direction: props?.slotProps?.legend?.direction ?? 'vertical',
+        slots: slots,
+        slotProps: slotProps
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PiePlot.PiePlot, {
+          slots: slots,
+          slotProps: slotProps,
+          onItemClick: onItemClick
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
+          loading: loading,
+          slots: slots,
+          slotProps: slotProps
+        }), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({
+          trigger: "item"
+        }, slotProps?.tooltip)), children]
+      }))]
+    })
   }));
 });
 process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
@@ -114,6 +112,9 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.object
+  }),
   children: _propTypes.default.node,
   className: _propTypes.default.string,
   /**
@@ -141,12 +142,18 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   hideLegend: _propTypes.default.bool,
   /**
-   * The item currently highlighted. Turns highlighting into a controlled prop.
+   * The highlighted item.
+   * Used when the highlight is controlled.
    */
   highlightedItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
   }),
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: _propTypes.default.string,
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -156,7 +163,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
    * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   * @default object Depends on the charts type.
    */
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,
@@ -174,16 +180,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * Callback fired when a pie arc is clicked.
    */
   onItemClick: _propTypes.default.func,
-  /**
-   * The chart will try to wait for the parent container to resolve its size
-   * before it renders for the first time.
-   *
-   * This can be useful in some scenarios where the chart appear to grow after
-   * the first render, like when used inside a grid.
-   *
-   * @default false
-   */
-  resolveSizeBeforeRender: _propTypes.default.bool,
   /**
    * The series to display in the pie chart.
    * An array of [[PieSeriesType]] objects.
@@ -205,26 +201,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   slots: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  theme: _propTypes.default.oneOf(['dark', 'light']),
   title: _propTypes.default.string,
-  /**
-   * The configuration of the tooltip.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
-   * @default { trigger: 'item' }
-   */
-  tooltip: _propTypes.default.shape({
-    axisContent: _propTypes.default.elementType,
-    classes: _propTypes.default.object,
-    itemContent: _propTypes.default.elementType,
-    slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    trigger: _propTypes.default.oneOf(['axis', 'item', 'none'])
-  }),
-  viewBox: _propTypes.default.shape({
-    height: _propTypes.default.number,
-    width: _propTypes.default.number,
-    x: _propTypes.default.number,
-    y: _propTypes.default.number
-  }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
@@ -260,7 +238,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -271,7 +248,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
@@ -314,7 +290,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -325,7 +300,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),

package/node/PieChart/PiePlot.js

@@ -9,13 +9,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.PiePlot = PiePlot;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _DrawingProvider = require("../context/DrawingProvider");
 var _PieArcPlot = require("./PieArcPlot");
 var _PieArcLabelPlot = require("./PieArcLabelPlot");
 var _getPercentageValue = require("../internals/getPercentageValue");
 var _getPieCoordinates = require("./getPieCoordinates");
 var _useSeries = require("../hooks/useSeries");
 var _AnimationProvider = require("../context/AnimationProvider");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -40,7 +40,7 @@ function PiePlot(props) {
     top,
     width,
     height
-  } = React.useContext(_DrawingProvider.DrawingContext);
+  } = (0, _hooks.useDrawingArea)();
   const skipAnimation = (0, _AnimationProvider.useSkipAnimation)(inSkipAnimation);
   if (seriesData === undefined) {
     return null;

package/node/PieChart/dataTransform/transition.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultTransitionConfig = exports.defaultLabelTransitionConfig = void 0;
-const defaultTransitionConfig = exports.defaultTransitionConfig = {
-  keys: item => item.id,
-  from: ({
+exports.getDefaultTransitionConfig = exports.getDefaultLabelTransitionConfig = void 0;
+const getDefaultTransitionConfig = skipAnimation => ({
+  keys: item => item.id ?? item.dataIndex,
+  from: skipAnimation ? undefined : ({
     innerRadius,
     outerRadius,
     cornerRadius,
@@ -70,10 +70,11 @@ const defaultTransitionConfig = exports.defaultTransitionConfig = {
     friction: 14,
     clamp: true
   }
-};
-const defaultLabelTransitionConfig = exports.defaultLabelTransitionConfig = {
-  keys: item => item.id,
-  from: ({
+});
+exports.getDefaultTransitionConfig = getDefaultTransitionConfig;
+const getDefaultLabelTransitionConfig = skipAnimation => ({
+  keys: item => item.id ?? item.dataIndex,
+  from: skipAnimation ? undefined : ({
     innerRadius,
     outerRadius,
     arcLabelRadius,
@@ -140,4 +141,5 @@ const defaultLabelTransitionConfig = exports.defaultLabelTransitionConfig = {
     friction: 14,
     clamp: true
   }
-};
+});
+exports.getDefaultLabelTransitionConfig = getDefaultLabelTransitionConfig;

package/node/PieChart/dataTransform/useTransformData.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTransformData = useTransformData;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _context = require("../../context");
+var _useItemHighlightedGetter = require("../../hooks/useItemHighlightedGetter");
 function useTransformData(series) {
   const {
     id: seriesId,
@@ -25,7 +25,7 @@ function useTransformData(series) {
   const {
     isFaded: isItemFaded,
     isHighlighted: isItemHighlighted
-  } = (0, _context.useHighlighted)();
+  } = (0, _useItemHighlightedGetter.useItemHighlightedGetter)();
   const dataWithHighlight = React.useMemo(() => data.map((item, itemIndex) => {
     const currentItem = {
       seriesId,
@@ -42,6 +42,7 @@ function useTransformData(series) {
     const cornerRadius = attributesOverride.cornerRadius ?? baseCornerRadius;
     const arcLabelRadius = attributesOverride.arcLabelRadius ?? baseArcLabelRadius ?? (innerRadius + outerRadius) / 2;
     return (0, _extends2.default)({}, item, attributesOverride, {
+      dataIndex: itemIndex,
       isFaded,
       isHighlighted,
       paddingAngle,

package/node/PieChart/formatter.js

@@ -32,11 +32,14 @@ const formatter = params => {
   seriesOrder.forEach(seriesId => {
     const arcs = (0, _d3Shape.pie)().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] = (0, _extends2.default)({
+      labelMarkType: 'circle',
       valueFormatter: item => item.value.toLocaleString()
     }, series[seriesId], {
       data: series[seriesId].data.map((item, index) => (0, _extends2.default)({}, item, {
         id: item.id ?? `auto-generated-pie-id-${seriesId}-${index}`
-      }, arcs[index])).map((item, index) => (0, _extends2.default)({}, item, {
+      }, arcs[index])).map((item, index) => (0, _extends2.default)({
+        labelMarkType: 'circle'
+      }, item, {
         formattedValue: series[seriesId].valueFormatter?.((0, _extends2.default)({}, item, {
           label: (0, _getLabel.getLabel)(item.label, 'arc')
         }), {

package/node/PieChart/legend.js

@@ -11,17 +11,18 @@ const legendGetter = params => {
     series
   } = params;
   return seriesOrder.reduce((acc, seriesId) => {
-    series[seriesId].data.forEach(item => {
+    series[seriesId].data.forEach((item, dataIndex) => {
       const formattedLabel = (0, _getLabel.getLabel)(item.label, 'legend');
       if (formattedLabel === undefined) {
         return;
       }
       acc.push({
-        id: item.id,
+        markType: item.labelMarkType ?? series[seriesId].labelMarkType,
+        id: item.id ?? dataIndex,
         seriesId,
         color: item.color,
         label: formattedLabel,
-        itemId: item.id
+        itemId: item.id ?? dataIndex
       });
     });
     return acc;

package/node/PieChart/plugin.js

@@ -7,8 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.plugin = void 0;
 var _formatter = _interopRequireDefault(require("./formatter"));
 var _getColor = _interopRequireDefault(require("./getColor"));
+var _legend = _interopRequireDefault(require("./legend"));
+var _tooltip = _interopRequireDefault(require("./tooltip"));
 const plugin = exports.plugin = {
-  seriesType: 'pie',
   colorProcessor: _getColor.default,
-  seriesFormatter: _formatter.default
+  seriesProcessor: _formatter.default,
+  legendGetter: _legend.default,
+  tooltipGetter: _tooltip.default
 };

package/node/PieChart/tooltip.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _getLabel = require("../internals/getLabel");
+const tooltipGetter = params => {
+  const {
+    series,
+    getColor,
+    identifier
+  } = params;
+  if (!identifier || identifier.dataIndex === undefined) {
+    return null;
+  }
+  const point = series.data[identifier.dataIndex];
+  const label = (0, _getLabel.getLabel)(point.label, 'tooltip');
+  const value = (0, _extends2.default)({}, point, {
+    label
+  });
+  const formattedValue = series.valueFormatter(value, {
+    dataIndex: identifier.dataIndex
+  });
+  return {
+    identifier,
+    color: getColor(identifier.dataIndex),
+    label,
+    value,
+    formattedValue,
+    markType: point.labelMarkType ?? series.labelMarkType
+  };
+};
+var _default = exports.default = tooltipGetter;

package/node/ScatterChart/Scatter.js

@@ -12,9 +12,11 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useScale = require("../hooks/useScale");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
-var _InteractionProvider = require("../context/InteractionProvider");
-var _context = require("../context");
-var _useDrawingArea = require("../hooks/useDrawingArea");
+var _useStore = require("../internals/store/useStore");
+var _useSelector = require("../internals/store/useSelector");
+var _useItemHighlightedGetter = require("../hooks/useItemHighlightedGetter");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _ChartProvider = require("../context/ChartProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -36,16 +38,17 @@ function Scatter(props) {
     markerSize,
     onItemClick
   } = props;
-  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const {
-    useVoronoiInteraction
-  } = React.useContext(_InteractionProvider.InteractionContext);
-  const skipInteractionHandlers = useVoronoiInteraction || series.disableHover;
+    instance
+  } = (0, _ChartProvider.useChartContext)();
+  const store = (0, _useStore.useStore)();
+  const isVoronoiEnabled = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionIsVoronoiEnabled);
+  const skipInteractionHandlers = isVoronoiEnabled || series.disableHover;
   const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(skipInteractionHandlers);
   const {
     isFaded,
     isHighlighted
-  } = (0, _context.useHighlighted)();
+  } = (0, _useItemHighlightedGetter.useItemHighlightedGetter)();
   const cleanData = React.useMemo(() => {
     const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
     const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
@@ -54,7 +57,7 @@ function Scatter(props) {
       const scatterPoint = series.data[i];
       const x = getXPosition(scatterPoint.x);
       const y = getYPosition(scatterPoint.y);
-      const isInRange = drawingArea.isPointInside({
+      const isInRange = instance.isPointInside({
         x,
         y
       });
@@ -82,7 +85,7 @@ function Scatter(props) {
       }
     }
     return temp;
-  }, [xScale, yScale, drawingArea, series.data, series.id, isHighlighted, isFaded, getInteractionItemProps, colorGetter, color]);
+  }, [xScale, yScale, series.data, series.id, isHighlighted, isFaded, getInteractionItemProps, colorGetter, color, instance]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
     children: cleanData.map(dataPoint => /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({
       cx: 0,
@@ -97,7 +100,7 @@ function Scatter(props) {
         dataIndex: dataPoint.dataIndex
       })),
       cursor: onItemClick ? 'pointer' : 'unset'
-    }, dataPoint.interactionProps), dataPoint.id))
+    }, dataPoint.interactionProps), dataPoint.id ?? dataPoint.dataIndex))
   });
 }
 process.env.NODE_ENV !== "production" ? Scatter.propTypes = {