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

package/ChartsTooltip/DefaultChartsAxisTooltipContent.js

@@ -10,6 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _ChartsTooltipTable = require("./ChartsTooltipTable");
+var _utils = require("./utils");
 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; }
@@ -41,14 +42,15 @@ function DefaultChartsAxisTooltipContent(props) {
           })
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
-        children: series.map(({
+        children: series.filter(_utils.isCartesianSeries).map(({
           color,
           id,
           label,
           valueFormatter,
           data
         }) => {
-          const formattedValue = valueFormatter(data[dataIndex]);
+          // @ts-ignore
+          const formattedValue = valueFormatter(data[dataIndex] ?? null);
           if (formattedValue == null) {
             return null;
           }
@@ -88,48 +90,18 @@ process.env.NODE_ENV !== "production" ? DefaultChartsAxisTooltipContent.propType
   /**
    * The properties of the triggered axis.
    */
-  axis: _propTypes.default.shape({
-    axisId: _propTypes.default.string,
-    classes: _propTypes.default.object,
-    data: _propTypes.default.array,
-    dataKey: _propTypes.default.string,
-    disableLine: _propTypes.default.bool,
-    disableTicks: _propTypes.default.bool,
-    fill: _propTypes.default.string,
-    hideTooltip: _propTypes.default.bool,
-    id: _propTypes.default.string.isRequired,
-    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]),
-    position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
-    scale: _propTypes.default.func.isRequired,
-    scaleType: _propTypes.default.oneOf(['time']).isRequired,
-    slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    stroke: _propTypes.default.string,
-    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]),
-    tickLabelStyle: _propTypes.default.object,
-    tickMaxStep: _propTypes.default.number,
-    tickMinStep: _propTypes.default.number,
-    tickNumber: _propTypes.default.number.isRequired,
-    tickSize: _propTypes.default.number,
-    valueFormatter: _propTypes.default.func
-  }).isRequired,
+  axis: _propTypes.default.object.isRequired,
   /**
    * Data identifying the triggered axis.
    */
   axisData: _propTypes.default.shape({
     x: _propTypes.default.shape({
       index: _propTypes.default.number,
-      value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired
+      value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired
     }),
     y: _propTypes.default.shape({
       index: _propTypes.default.number,
-      value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired
+      value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired
     })
   }).isRequired,
   /**
@@ -147,28 +119,6 @@ process.env.NODE_ENV !== "production" ? DefaultChartsAxisTooltipContent.propType
   /**
    * The series linked to the triggered axis.
    */
-  series: _propTypes.default.arrayOf(_propTypes.default.shape({
-    area: _propTypes.default.bool,
-    color: _propTypes.default.string.isRequired,
-    connectNulls: _propTypes.default.bool,
-    curve: _propTypes.default.oneOf(['catmullRom', 'linear', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepAfter', 'stepBefore']),
-    data: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
-    dataKey: _propTypes.default.string,
-    disableHighlight: _propTypes.default.bool,
-    highlightScope: _propTypes.default.shape({
-      faded: _propTypes.default.oneOf(['global', 'none', 'series']),
-      highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
-    }),
-    id: _propTypes.default.string.isRequired,
-    label: _propTypes.default.string,
-    showMark: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
-    stack: _propTypes.default.string,
-    stackOffset: _propTypes.default.oneOf(['diverging', 'expand', 'none', 'silhouette', 'wiggle']),
-    stackOrder: _propTypes.default.oneOf(['appearance', 'ascending', 'descending', 'insideOut', 'none', 'reverse']),
-    type: _propTypes.default.oneOf(['line']).isRequired,
-    valueFormatter: _propTypes.default.func.isRequired,
-    xAxisKey: _propTypes.default.string,
-    yAxisKey: _propTypes.default.string
-  })).isRequired,
+  series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   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])
 } : void 0;

package/ChartsTooltip/DefaultChartsItemTooltipContent.js

@@ -82,16 +82,6 @@ process.env.NODE_ENV !== "production" ? DefaultChartsItemTooltipContent.propType
   /**
    * The series linked to the triggered axis.
    */
-  series: _propTypes.default.shape({
-    color: _propTypes.default.string,
-    data: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
-    highlightScope: _propTypes.default.shape({
-      faded: _propTypes.default.oneOf(['global', 'none', 'series']),
-      highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
-    }),
-    id: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired,
-    valueFormatter: _propTypes.default.func.isRequired
-  }).isRequired,
+  series: _propTypes.default.object.isRequired,
   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])
 } : void 0;

package/ChartsTooltip/utils.d.ts

@@ -1,5 +1,5 @@
 import { AxisInteractionData, ItemInteractionData } from '../context/InteractionProvider';
-import { ChartSeriesType } from '../models/seriesType/config';
+import { CartesianChartSeriesType, ChartSeriesDefaultized, ChartSeriesType } from '../models/seriesType/config';
 export declare function generateVirtualElement(mousePosition: {
     x: number;
     y: number;
@@ -22,3 +22,5 @@ export declare function useMouseTracker(): {
 } | null;
 export type TriggerOptions = 'item' | 'axis' | 'none';
 export declare function getTooltipHasData(trigger: TriggerOptions, displayedData: null | AxisInteractionData | ItemInteractionData<ChartSeriesType>): boolean;
+export declare function isCartesianSeriesType(seriesType: string): seriesType is CartesianChartSeriesType;
+export declare function isCartesianSeries(series: ChartSeriesDefaultized<ChartSeriesType>): series is ChartSeriesDefaultized<CartesianChartSeriesType>;

package/ChartsTooltip/utils.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.generateVirtualElement = generateVirtualElement;
 exports.getTooltipHasData = getTooltipHasData;
+exports.isCartesianSeries = isCartesianSeries;
+exports.isCartesianSeriesType = isCartesianSeriesType;
 exports.useMouseTracker = useMouseTracker;
 var React = _interopRequireWildcard(require("react"));
 var _DrawingProvider = require("../context/DrawingProvider");
@@ -88,4 +90,10 @@ function getTooltipHasData(trigger, displayedData) {
   const hasAxisXData = displayedData.x !== null;
   const hasAxisYData = displayedData.y !== null;
   return hasAxisXData || hasAxisYData;
+}
+function isCartesianSeriesType(seriesType) {
+  return ['bar', 'line', 'scatter'].includes(seriesType);
+}
+function isCartesianSeries(series) {
+  return isCartesianSeriesType(series.type);
 }

package/ChartsVoronoiHandler/ChartsVoronoiHandler.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ScatterItemIdentifier } from '../models';
 export type ChartsVoronoiHandlerProps = {
     /**
      * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
@@ -6,6 +7,12 @@ export type ChartsVoronoiHandlerProps = {
      * @default undefined
      */
     voronoiMaxRadius?: number | undefined;
+    /**
+     * Callback fired when clicking on a scatter item.
+     * @param {MouseEvent} event Mouse event catched at the svg level
+     * @param {ScatterItemIdentifier} scatterItemIdentifier Identify whihc item got clicked
+     */
+    onItemClick?: (event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void;
 };
 declare function ChartsVoronoiHandler(props: ChartsVoronoiHandlerProps): React.JSX.Element;
 declare namespace ChartsVoronoiHandler {

package/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -20,7 +20,8 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 function ChartsVoronoiHandler(props) {
   const {
-    voronoiMaxRadius
+    voronoiMaxRadius,
+    onItemClick
   } = props;
   const svgRef = React.useContext(_DrawingProvider.SVGContext);
   const {
@@ -58,6 +59,8 @@ function ChartsVoronoiHandler(props) {
     };
   }, [dispatch]);
   (0, _useEnhancedEffect.default)(() => {
+    // This effect generate and store the Delaunay object that's used to map coordinate to closest point.
+
     if (seriesOrder === undefined || series === undefined) {
       // If there is no scatter chart series
       return;
@@ -91,80 +94,125 @@ function ChartsVoronoiHandler(props) {
     if (element === null) {
       return undefined;
     }
-    const handleMouseOut = () => {
-      dispatch({
-        type: 'exitChart'
-      });
-    };
 
     // TODO: A perf optimisation of voronoi could be to use the last point as the intial point for the next search.
-    const handleMouseMove = event => {
+    function getClosestPoint(event) {
       // Get mouse coordinate in global SVG space
       const svgPoint = (0, _utils.getSVGPoint)(svgRef.current, event);
       const outsideX = svgPoint.x < left || svgPoint.x > left + width;
       const outsideY = svgPoint.y < top || svgPoint.y > top + height;
       if (outsideX || outsideY) {
-        dispatch({
-          type: 'exitChart'
-        });
-        return;
+        return 'outside-chart';
       }
       if (!voronoiRef.current.delauney) {
-        return;
+        return 'no-point-found';
       }
       const closestPointIndex = voronoiRef.current.delauney?.find(svgPoint.x, svgPoint.y);
-      if (closestPointIndex !== undefined) {
-        const seriesId = Object.keys(voronoiRef.current).find(id => {
-          if (id === 'delauney') {
-            return false;
-          }
-          return 2 * closestPointIndex >= voronoiRef.current[id].startIndex && 2 * closestPointIndex < voronoiRef.current[id].endIndex;
-        });
-        if (seriesId === undefined) {
-          return;
+      if (closestPointIndex === undefined) {
+        return 'no-point-found';
+      }
+      const seriesId = Object.keys(voronoiRef.current).find(id => {
+        if (id === 'delauney') {
+          return false;
         }
-        const dataIndex = (2 * closestPointIndex - voronoiRef.current[seriesId].startIndex) / 2;
-        if (voronoiMaxRadius !== undefined) {
-          const pointX = voronoiRef.current.delauney.points[2 * closestPointIndex];
-          const pointY = voronoiRef.current.delauney.points[2 * closestPointIndex + 1];
-          const dist2 = (pointX - svgPoint.x) ** 2 + (pointY - svgPoint.y) ** 2;
-          if (dist2 > voronoiMaxRadius ** 2) {
-            // The closest point is too far to be considered.
-            dispatch({
-              type: 'leaveItem',
-              data: {
-                type: 'scatter',
-                seriesId,
-                dataIndex
-              }
-            });
-            return;
-          }
+        return 2 * closestPointIndex >= voronoiRef.current[id].startIndex && 2 * closestPointIndex < voronoiRef.current[id].endIndex;
+      });
+      if (seriesId === undefined) {
+        return 'no-point-found';
+      }
+      const dataIndex = (2 * closestPointIndex - voronoiRef.current[seriesId].startIndex) / 2;
+      if (voronoiMaxRadius !== undefined) {
+        const pointX = voronoiRef.current.delauney.points[2 * closestPointIndex];
+        const pointY = voronoiRef.current.delauney.points[2 * closestPointIndex + 1];
+        const dist2 = (pointX - svgPoint.x) ** 2 + (pointY - svgPoint.y) ** 2;
+        if (dist2 > voronoiMaxRadius ** 2) {
+          // The closest point is too far to be considered.
+          return 'outside-voronoi-max-radius';
         }
+      }
+      return {
+        seriesId,
+        dataIndex
+      };
+    }
+    const handleMouseOut = () => {
+      dispatch({
+        type: 'exitChart'
+      });
+    };
+    const handleMouseMove = event => {
+      const closestPoint = getClosestPoint(event);
+      if (closestPoint === 'outside-chart') {
+        dispatch({
+          type: 'exitChart'
+        });
+        return;
+      }
+      if (closestPoint === 'outside-voronoi-max-radius' || closestPoint === 'no-point-found') {
         dispatch({
-          type: 'enterItem',
+          type: 'leaveItem',
           data: {
-            type: 'scatter',
-            seriesId,
-            dataIndex
+            type: 'scatter'
           }
         });
+        return;
       }
+      const {
+        seriesId,
+        dataIndex
+      } = closestPoint;
+      dispatch({
+        type: 'enterItem',
+        data: {
+          type: 'scatter',
+          seriesId,
+          dataIndex
+        }
+      });
+    };
+    const handleMouseClick = event => {
+      if (!onItemClick) {
+        return;
+      }
+      const closestPoint = getClosestPoint(event);
+      if (typeof closestPoint === 'string') {
+        // No point fond for any reason
+        return;
+      }
+      const {
+        seriesId,
+        dataIndex
+      } = closestPoint;
+      onItemClick(event, {
+        type: 'scatter',
+        seriesId,
+        dataIndex
+      });
     };
     element.addEventListener('mouseout', handleMouseOut);
     element.addEventListener('mousemove', handleMouseMove);
+    element.addEventListener('click', handleMouseClick);
     return () => {
       element.removeEventListener('mouseout', handleMouseOut);
       element.removeEventListener('mousemove', handleMouseMove);
+      element.removeEventListener('click', handleMouseClick);
     };
-  }, [svgRef, dispatch, left, width, top, height, yAxis, xAxis, voronoiMaxRadius]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {}); // Workaround to fix docs scripts
+  }, [svgRef, dispatch, left, width, top, height, yAxis, xAxis, voronoiMaxRadius, onItemClick]);
+
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {});
 }
 process.env.NODE_ENV !== "production" ? ChartsVoronoiHandler.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Callback fired when clicking on a scatter item.
+   * @param {MouseEvent} event Mouse event catched at the svg level
+   * @param {ScatterItemIdentifier} scatterItemIdentifier Identify whihc item got clicked
+   */
+  onItemClick: _propTypes.default.func,
   /**
    * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
    * If `undefined`, the radius is assumed to be infinite.