@mui/x-charts 7.0.0-alpha.2 → 7.0.0-alpha.4

package/PieChart/PieArcPlot.js

@@ -8,8 +8,9 @@ exports.PieArcPlot = PieArcPlot;
 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 _web = require("@react-spring/web");
-var _PieArc = _interopRequireDefault(require("./PieArc"));
+var _PieArc = require("./PieArc");
 var _transition = require("./dataTransform/transition");
 var _useTransformData = require("./dataTransform/useTransformData");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -53,7 +54,7 @@ function PieArcPlot(props) {
   if (data.length === 0) {
     return null;
   }
-  const Arc = slots?.pieArc ?? _PieArc.default;
+  const Arc = slots?.pieArc ?? _PieArc.PieArc;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
     children: transition((_ref, item, _, index) => {
       let {
@@ -89,4 +90,90 @@ function PieArcPlot(props) {
       }, slotProps?.pieArc));
     })
   }));
-}
+}
+process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius: _propTypes.default.number,
+  data: _propTypes.default.arrayOf(_propTypes.default.shape({
+    color: _propTypes.default.string.isRequired,
+    endAngle: _propTypes.default.number.isRequired,
+    formattedValue: _propTypes.default.string.isRequired,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    index: _propTypes.default.number.isRequired,
+    label: _propTypes.default.string,
+    padAngle: _propTypes.default.number.isRequired,
+    startAngle: _propTypes.default.number.isRequired,
+    value: _propTypes.default.number.isRequired
+  })).isRequired,
+  /**
+   * Override the arc attibutes when it is faded.
+   */
+  faded: _propTypes.default.shape({
+    additionalRadius: _propTypes.default.number,
+    color: _propTypes.default.string,
+    cornerRadius: _propTypes.default.number,
+    innerRadius: _propTypes.default.number,
+    outerRadius: _propTypes.default.number,
+    paddingAngle: _propTypes.default.number
+  }),
+  /**
+   * Override the arc attibutes when it is highlighted.
+   */
+  highlighted: _propTypes.default.shape({
+    additionalRadius: _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.isRequired,
+  /**
+   * The radius between circle center and the begining of the arc.
+   * @default 0
+   */
+  innerRadius: _propTypes.default.number,
+  /**
+   * Callback fired when a pie item is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
+   * @param {DefaultizedPieValueType} item The pie item.
+   */
+  onClick: _propTypes.default.func,
+  /**
+   * The radius between circle center and the end of the arc.
+   * @default R_max The maximal radius that fit into the drawing area.
+   */
+  outerRadius: _propTypes.default.number.isRequired,
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle: _propTypes.default.number,
+  /**
+   * If `true`, animations are skiped.
+   * @default false
+   */
+  skipAnimation: _propTypes.default.bool,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object
+} : void 0;

package/PieChart/index.d.ts

@@ -1,4 +1,6 @@
-export * from './PiePlot';
 export * from './PieChart';
+export * from './PiePlot';
+export * from './PieArcPlot';
+export * from './PieArcLabelPlot';
 export * from './PieArc';
 export * from './PieArcLabel';

package/PieChart/index.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _PieChart = require("./PieChart");
+Object.keys(_PieChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PieChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PieChart[key];
+    }
+  });
+});
 var _PiePlot = require("./PiePlot");
 Object.keys(_PiePlot).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -14,14 +25,25 @@ Object.keys(_PiePlot).forEach(function (key) {
     }
   });
 });
-var _PieChart = require("./PieChart");
-Object.keys(_PieChart).forEach(function (key) {
+var _PieArcPlot = require("./PieArcPlot");
+Object.keys(_PieArcPlot).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _PieChart[key]) return;
+  if (key in exports && exports[key] === _PieArcPlot[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _PieChart[key];
+      return _PieArcPlot[key];
+    }
+  });
+});
+var _PieArcLabelPlot = require("./PieArcLabelPlot");
+Object.keys(_PieArcLabelPlot).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PieArcLabelPlot[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PieArcLabelPlot[key];
     }
   });
 });

package/README.md

@@ -16,7 +16,6 @@ This component has the following peer dependencies that you will need to install
 ```json
 "peerDependencies": {
   "@mui/material": "^5.4.1",
-  "@mui/system": "^5.4.1",
   "react": "^17.0.0 || ^18.0.0",
   "react-dom": "^17.0.0 || ^18.0.0"
 },

package/ScatterChart/Scatter.js

@@ -32,10 +32,16 @@ function Scatter(props) {
     color,
     markerSize
   } = props;
+  const highlightScope = React.useMemo(() => (0, _extends2.default)({
+    highlighted: 'item',
+    faded: 'global'
+  }, series.highlightScope), [series.highlightScope]);
   const {
-    item
+    item,
+    useVoronoiInteraction
   } = React.useContext(_InteractionProvider.InteractionContext);
-  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(series.highlightScope);
+  const skipInteractionHandlers = useVoronoiInteraction || series.disableHover;
+  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(highlightScope, skipInteractionHandlers);
   const cleanData = React.useMemo(() => {
     const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
     const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
@@ -57,22 +63,24 @@ function Scatter(props) {
         dataIndex: i
       };
       if (isInRange) {
+        const isHighlighted = (0, _useInteractionItemProps.getIsHighlighted)(item, pointCtx, highlightScope);
         temp.push({
           x,
           y,
-          isFaded: !(0, _useInteractionItemProps.getIsHighlighted)(item, pointCtx, series.highlightScope) && (0, _useInteractionItemProps.getIsFaded)(item, pointCtx, series.highlightScope),
+          isHighlighted,
+          isFaded: !isHighlighted && (0, _useInteractionItemProps.getIsFaded)(item, pointCtx, highlightScope),
           interactionProps: getInteractionItemProps(pointCtx),
           id: scatterPoint.id
         });
       }
     }
     return temp;
-  }, [yScale, xScale, getInteractionItemProps, item, series.data, series.highlightScope, series.id]);
+  }, [xScale, yScale, series.data, series.id, item, highlightScope, getInteractionItemProps]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
     children: cleanData.map(dataPoint => /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({
       cx: 0,
       cy: 0,
-      r: markerSize,
+      r: (dataPoint.isHighlighted ? 1.2 : 1) * markerSize,
       transform: `translate(${dataPoint.x}, ${dataPoint.y})`,
       fill: color,
       opacity: dataPoint.isFaded && 0.3 || 1
@@ -87,12 +95,13 @@ process.env.NODE_ENV !== "production" ? Scatter.propTypes = {
   color: _propTypes.default.string.isRequired,
   markerSize: _propTypes.default.number.isRequired,
   series: _propTypes.default.shape({
-    color: _propTypes.default.string,
+    color: _propTypes.default.string.isRequired,
     data: _propTypes.default.arrayOf(_propTypes.default.shape({
       id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
       x: _propTypes.default.number.isRequired,
       y: _propTypes.default.number.isRequired
     })).isRequired,
+    disableHover: _propTypes.default.bool,
     highlightScope: _propTypes.default.shape({
       faded: _propTypes.default.oneOf(['global', 'none', 'series']),
       highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])

package/ScatterChart/ScatterChart.d.ts

@@ -8,14 +8,20 @@ import { ChartsTooltipProps, ChartsTooltipSlotProps, ChartsTooltipSlots } from '
 import { ChartsLegendProps, ChartsLegendSlotProps, ChartsLegendSlots } from '../ChartsLegend';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsAxisSlots, ChartsAxisSlotProps } from '../models/axis';
+import { ChartsVoronoiHandlerProps } from '../ChartsVoronoiHandler/ChartsVoronoiHandler';
 export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsTooltipSlots {
 }
 export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps {
 }
-export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'> {
+export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, ChartsVoronoiHandlerProps {
     series: MakeOptional<ScatterSeriesType, 'type'>[];
     tooltip?: ChartsTooltipProps;
     axisHighlight?: ChartsAxisHighlightProps;
+    /**
+     * If true, the interaction will not use the Voronoi cell and fall back to hover events.
+     * @default false
+     */
+    disableVoronoi?: boolean;
     /**
      * @deprecated Consider using `slotProps.legend` instead.
      */

package/ScatterChart/ScatterChart.js

@@ -14,6 +14,7 @@ var _ChartsAxis = require("../ChartsAxis");
 var _ChartsTooltip = require("../ChartsTooltip");
 var _ChartsLegend = require("../ChartsLegend");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
+var _ChartsVoronoiHandler = require("../ChartsVoronoiHandler/ChartsVoronoiHandler");
 var _jsxRuntime = require("react/jsx-runtime");
 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; }
@@ -34,6 +35,8 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
     series,
     tooltip,
     axisHighlight,
+    voronoiMaxRadius,
+    disableVoronoi,
     legend,
     width,
     height,
@@ -60,7 +63,9 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
     xAxis: xAxis,
     yAxis: yAxis,
     sx: sx,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
+    children: [!disableVoronoi && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVoronoiHandler.ChartsVoronoiHandler, {
+      voronoiMaxRadius: voronoiMaxRadius
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
       rightAxis: rightAxis,
@@ -134,6 +139,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @default false
    */
   disableAxisListener: _propTypes.default.bool,
+  /**
+   * If true, the interaction will not use the Voronoi cell and fall back to hover events.
+   * @default false
+   */
+  disableVoronoi: _propTypes.default.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    * @default undefined
@@ -226,6 +236,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
       x: _propTypes.default.number.isRequired,
       y: _propTypes.default.number.isRequired
     })).isRequired,
+    disableHover: _propTypes.default.bool,
     highlightScope: _propTypes.default.shape({
       faded: _propTypes.default.oneOf(['global', 'none', 'series']),
       highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
@@ -291,6 +302,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     x: _propTypes.default.number,
     y: _propTypes.default.number
   }),
+  /**
+   * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+   * If `undefined`, the radius is assumed to be infinite.
+   * @default undefined
+   */
+  voronoiMaxRadius: _propTypes.default.number,
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    * @default undefined

package/ScatterChart/index.d.ts

@@ -1,3 +1,3 @@
-export * from './ScatterPlot';
 export * from './ScatterChart';
+export * from './ScatterPlot';
 export * from './Scatter';

package/ScatterChart/index.js

@@ -3,25 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _ScatterPlot = require("./ScatterPlot");
-Object.keys(_ScatterPlot).forEach(function (key) {
+var _ScatterChart = require("./ScatterChart");
+Object.keys(_ScatterChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ScatterPlot[key]) return;
+  if (key in exports && exports[key] === _ScatterChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _ScatterPlot[key];
+      return _ScatterChart[key];
     }
   });
 });
-var _ScatterChart = require("./ScatterChart");
-Object.keys(_ScatterChart).forEach(function (key) {
+var _ScatterPlot = require("./ScatterPlot");
+Object.keys(_ScatterPlot).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ScatterChart[key]) return;
+  if (key in exports && exports[key] === _ScatterPlot[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _ScatterChart[key];
+      return _ScatterPlot[key];
     }
   });
 });

package/SparkLineChart/SparkLineChart.js

@@ -86,6 +86,7 @@ const SparkLineChart = exports.SparkLineChart = /*#__PURE__*/React.forwardRef(fu
     sx: sx,
     disableAxisListener: (!showTooltip || tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     children: [plotType === 'bar' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarPlot, {
+      skipAnimation: true,
       slots: slots,
       slotProps: slotProps,
       sx: {

package/context/InteractionProvider.d.ts

@@ -20,6 +20,11 @@ type InteractionActions<T extends ChartSeriesType = ChartSeriesType> = {
 } | {
     type: 'leaveItem';
     data: ItemInteractionData<T>;
+} | {
+    type: 'exitChart';
+} | {
+    type: 'updateVoronoiUsage';
+    useVoronoiInteraction: boolean;
 } | {
     type: 'updateAxis';
     data: AxisInteractionData;
@@ -33,6 +38,11 @@ type InteractionState = {
      * The x- and y-axes currently interacting.
      */
     axis: AxisInteractionData;
+    /**
+     * Set to `true` when `VoronoiHandler` is active.
+     * Used to prevent collision with mouseEnter events.
+     */
+    useVoronoiInteraction: boolean;
     dispatch: React.Dispatch<InteractionActions>;
 };
 export declare const InteractionContext: React.Context<InteractionState>;

package/context/InteractionProvider.js

@@ -17,6 +17,7 @@ const InteractionContext = exports.InteractionContext = /*#__PURE__*/React.creat
     x: null,
     y: null
   },
+  useVoronoiInteraction: false,
   dispatch: () => null
 });
 const dataReducer = (prevState, action) => {
@@ -25,6 +26,21 @@ const dataReducer = (prevState, action) => {
       return (0, _extends2.default)({}, prevState, {
         item: action.data
       });
+    case 'exitChart':
+      if (prevState.item === null && prevState.axis.x === null && prevState.axis.y === null) {
+        return prevState;
+      }
+      return (0, _extends2.default)({}, prevState, {
+        axis: {
+          x: null,
+          y: null
+        },
+        item: null
+      });
+    case 'updateVoronoiUsage':
+      return (0, _extends2.default)({}, prevState, {
+        useVoronoiInteraction: action.useVoronoiInteraction
+      });
     case 'leaveItem':
       if (prevState.item === null || Object.keys(action.data).some(key => action.data[key] !== prevState.item[key])) {
         // The item is already something else
@@ -34,6 +50,9 @@ const dataReducer = (prevState, action) => {
         item: null
       });
     case 'updateAxis':
+      if (action.data.x === prevState.axis.x && action.data.y === prevState.axis.y) {
+        return prevState;
+      }
       return (0, _extends2.default)({}, prevState, {
         axis: action.data
       });
@@ -49,7 +68,8 @@ function InteractionProvider({
     axis: {
       x: null,
       y: null
-    }
+    },
+    useVoronoiInteraction: false
   });
   const value = React.useMemo(() => (0, _extends2.default)({}, data, {
     dispatch

package/esm/BarChart/BarElement.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "slots", "slotProps", "style"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { useSlotProps } from '@mui/base/utils';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
@@ -39,7 +40,7 @@ export const BarElementPath = styled(animated.rect, {
   transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
   opacity: ownerState.isFaded && 0.3 || 1
 }));
-export function BarElement(props) {
+function BarElement(props) {
   var _slots$bar;
   const {
       id,
@@ -90,4 +91,27 @@ export function BarElement(props) {
     ownerState
   });
   return /*#__PURE__*/_jsx(Bar, _extends({}, barProps));
-}
+}
+process.env.NODE_ENV !== "production" ? BarElement.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,
+  dataIndex: PropTypes.number.isRequired,
+  highlightScope: PropTypes.shape({
+    faded: PropTypes.oneOf(['global', 'none', 'series']),
+    highlighted: PropTypes.oneOf(['item', 'none', 'series'])
+  }),
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;
+export { BarElement };

package/esm/BarChart/index.js

@@ -1,2 +1,3 @@
+export * from './BarChart';
 export * from './BarPlot';
-export * from './BarChart';
+export * from './BarElement';

package/esm/ChartsLegend/index.js

@@ -1,2 +1,3 @@
 export * from './ChartsLegend';
-export * from './chartsLegendClasses';
+export * from './chartsLegendClasses';
+export * from './utils';