@mui/x-charts 7.0.0-beta.3 → 7.0.0-beta.4

package/legacy/ChartsTooltip/DefaultChartsAxisTooltipContent.js

@@ -1,118 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import Typography from '@mui/material/Typography';
-import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipMark, ChartsTooltipRow } from './ChartsTooltipTable';
-import { isCartesianSeries, utcFormatter } from './utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-function DefaultChartsAxisTooltipContent(props) {
-  var _axis$valueFormatter;
-  var series = props.series,
-    axis = props.axis,
-    dataIndex = props.dataIndex,
-    axisValue = props.axisValue,
-    sx = props.sx,
-    classes = props.classes;
-  if (dataIndex == null) {
-    return null;
-  }
-  var axisFormatter = (_axis$valueFormatter = axis.valueFormatter) != null ? _axis$valueFormatter : function (v) {
-    return axis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString();
-  };
-  return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
-    sx: sx,
-    className: classes.root,
-    children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
-      className: classes.table,
-      children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx("thead", {
-        children: /*#__PURE__*/_jsx(ChartsTooltipRow, {
-          children: /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            colSpan: 3,
-            children: /*#__PURE__*/_jsx(Typography, {
-              children: axisFormatter(axisValue)
-            })
-          })
-        })
-      }), /*#__PURE__*/_jsx("tbody", {
-        children: series.filter(isCartesianSeries).map(function (_ref) {
-          var _data$dataIndex;
-          var color = _ref.color,
-            id = _ref.id,
-            label = _ref.label,
-            valueFormatter = _ref.valueFormatter,
-            data = _ref.data;
-          // @ts-ignore
-          var formattedValue = valueFormatter((_data$dataIndex = data[dataIndex]) != null ? _data$dataIndex : null);
-          if (formattedValue == null) {
-            return null;
-          }
-          return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
-            className: classes.row,
-            children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
-              className: clsx(classes.markCell, classes.cell),
-              children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
-                ownerState: {
-                  color: color
-                },
-                boxShadow: 1,
-                className: classes.mark
-              })
-            }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-              className: clsx(classes.labelCell, classes.cell),
-              children: label ? /*#__PURE__*/_jsx(Typography, {
-                children: label
-              }) : null
-            }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-              className: clsx(classes.valueCell, classes.cell),
-              children: /*#__PURE__*/_jsx(Typography, {
-                children: formattedValue
-              })
-            })]
-          }, id);
-        })
-      })]
-    })
-  });
-}
-process.env.NODE_ENV !== "production" ? DefaultChartsAxisTooltipContent.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * The properties of the triggered axis.
-   */
-  axis: PropTypes.object.isRequired,
-  /**
-   * Data identifying the triggered axis.
-   */
-  axisData: PropTypes.shape({
-    x: PropTypes.shape({
-      index: PropTypes.number,
-      value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired
-    }),
-    y: PropTypes.shape({
-      index: PropTypes.number,
-      value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired
-    })
-  }).isRequired,
-  /**
-   * The value associated to the current mouse position.
-   */
-  axisValue: PropTypes.any.isRequired,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object.isRequired,
-  /**
-   * The index of the data item triggered.
-   */
-  dataIndex: PropTypes.number,
-  /**
-   * The series linked to the triggered axis.
-   */
-  series: PropTypes.arrayOf(PropTypes.object).isRequired,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-} : void 0;
-export { DefaultChartsAxisTooltipContent };

package/legacy/ChartsTooltip/DefaultChartsItemTooltipContent.js

@@ -1,78 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow } from './ChartsTooltipTable';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-function DefaultChartsItemTooltipContent(props) {
-  var _series$valueFormatte;
-  var series = props.series,
-    itemData = props.itemData,
-    sx = props.sx,
-    classes = props.classes;
-  if (itemData.dataIndex === undefined) {
-    return null;
-  }
-  var _ref = series.type === 'pie' ? {
-      color: series.data[itemData.dataIndex].color,
-      displayedLabel: series.data[itemData.dataIndex].label
-    } : {
-      color: series.color,
-      displayedLabel: series.label
-    },
-    displayedLabel = _ref.displayedLabel,
-    color = _ref.color;
-  var value = series.data[itemData.dataIndex];
-  var formattedValue = (_series$valueFormatte = series.valueFormatter) == null ? void 0 : _series$valueFormatte.call(series, value);
-  return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
-    sx: sx,
-    className: classes.root,
-    children: /*#__PURE__*/_jsx(ChartsTooltipTable, {
-      className: classes.table,
-      children: /*#__PURE__*/_jsx("tbody", {
-        children: /*#__PURE__*/_jsxs(ChartsTooltipRow, {
-          className: classes.row,
-          children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: clsx(classes.markCell, classes.cell),
-            children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
-              ownerState: {
-                color: color
-              },
-              className: classes.mark
-            })
-          }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: clsx(classes.labelCell, classes.cell),
-            children: displayedLabel
-          }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: clsx(classes.valueCell, classes.cell),
-            children: formattedValue
-          })]
-        })
-      })
-    })
-  });
-}
-process.env.NODE_ENV !== "production" ? DefaultChartsItemTooltipContent.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object.isRequired,
-  /**
-   * The data used to identify the triggered item.
-   */
-  itemData: PropTypes.shape({
-    dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    type: PropTypes.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired
-  }).isRequired,
-  /**
-   * The series linked to the triggered axis.
-   */
-  series: PropTypes.object.isRequired,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-} : void 0;
-export { DefaultChartsItemTooltipContent };

package/legacy/ChartsTooltip/chartsTooltipClasses.js

@@ -1,5 +0,0 @@
-import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-export function getChartsTooltipUtilityClass(slot) {
-  return generateUtilityClass('MuiChartsTooltip', slot);
-}
-export var chartsTooltipClasses = generateUtilityClasses('MuiChartsTooltip', ['root', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell']);

package/legacy/ChartsTooltip/index.js

@@ -1,6 +0,0 @@
-export * from './ChartsTooltip';
-export * from './chartsTooltipClasses';
-export * from './ChartsAxisTooltipContent';
-export * from './ChartsItemTooltipContent';
-export * from './DefaultChartsAxisTooltipContent';
-export * from './DefaultChartsItemTooltipContent';

package/legacy/ChartsTooltip/utils.js

@@ -1,103 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import * as React from 'react';
-import { SVGContext } from '../context/DrawingProvider';
-export function generateVirtualElement(mousePosition) {
-  if (mousePosition === null) {
-    return {
-      getBoundingClientRect: function getBoundingClientRect() {
-        return {
-          width: 0,
-          height: 0,
-          x: 0,
-          y: 0,
-          top: 0,
-          right: 0,
-          bottom: 0,
-          left: 0,
-          toJSON: function toJSON() {
-            return '';
-          }
-        };
-      }
-    };
-  }
-  var x = mousePosition.x,
-    y = mousePosition.y;
-  return {
-    getBoundingClientRect: function getBoundingClientRect() {
-      return {
-        width: 0,
-        height: 0,
-        x: x,
-        y: y,
-        top: y,
-        right: x,
-        bottom: y,
-        left: x,
-        toJSON: function toJSON() {
-          return JSON.stringify({
-            width: 0,
-            height: 0,
-            x: x,
-            y: y,
-            top: y,
-            right: x,
-            bottom: y,
-            left: x
-          });
-        }
-      };
-    }
-  };
-}
-export function useMouseTracker() {
-  var svgRef = React.useContext(SVGContext);
-
-  // Use a ref to avoid rerendering on every mousemove event.
-  var _React$useState = React.useState(null),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    mousePosition = _React$useState2[0],
-    setMousePosition = _React$useState2[1];
-  React.useEffect(function () {
-    var element = svgRef.current;
-    if (element === null) {
-      return function () {};
-    }
-    var handleMouseOut = function handleMouseOut() {
-      setMousePosition(null);
-    };
-    var handleMouseMove = function handleMouseMove(event) {
-      setMousePosition({
-        x: event.clientX,
-        y: event.clientY
-      });
-    };
-    element.addEventListener('mouseout', handleMouseOut);
-    element.addEventListener('mousemove', handleMouseMove);
-    return function () {
-      element.removeEventListener('mouseout', handleMouseOut);
-      element.removeEventListener('mousemove', handleMouseMove);
-    };
-  }, [svgRef]);
-  return mousePosition;
-}
-export function getTooltipHasData(trigger, displayedData) {
-  if (trigger === 'item') {
-    return displayedData !== null;
-  }
-  var hasAxisXData = displayedData.x !== null;
-  var hasAxisYData = displayedData.y !== null;
-  return hasAxisXData || hasAxisYData;
-}
-export function isCartesianSeriesType(seriesType) {
-  return ['bar', 'line', 'scatter'].includes(seriesType);
-}
-export function isCartesianSeries(series) {
-  return isCartesianSeriesType(series.type);
-}
-export function utcFormatter(v) {
-  if (v instanceof Date) {
-    return v.toUTCString();
-  }
-  return v.toLocaleString();
-}

package/legacy/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -1,206 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { Delaunay } from 'd3-delaunay';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import { InteractionContext } from '../context/InteractionProvider';
-import { CartesianContext } from '../context/CartesianContextProvider';
-import { SVGContext, DrawingContext } from '../context/DrawingProvider';
-import { SeriesContext } from '../context/SeriesContextProvider';
-import { getValueToPositionMapper } from '../hooks/useScale';
-import { getSVGPoint } from '../internals/utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-function ChartsVoronoiHandler(props) {
-  var _React$useContext$sca;
-  var voronoiMaxRadius = props.voronoiMaxRadius,
-    onItemClick = props.onItemClick;
-  var svgRef = React.useContext(SVGContext);
-  var _React$useContext = React.useContext(DrawingContext),
-    width = _React$useContext.width,
-    height = _React$useContext.height,
-    top = _React$useContext.top,
-    left = _React$useContext.left;
-  var _React$useContext2 = React.useContext(CartesianContext),
-    xAxis = _React$useContext2.xAxis,
-    yAxis = _React$useContext2.yAxis,
-    xAxisIds = _React$useContext2.xAxisIds,
-    yAxisIds = _React$useContext2.yAxisIds;
-  var _React$useContext3 = React.useContext(InteractionContext),
-    dispatch = _React$useContext3.dispatch;
-  var _ref = (_React$useContext$sca = React.useContext(SeriesContext).scatter) != null ? _React$useContext$sca : {},
-    series = _ref.series,
-    seriesOrder = _ref.seriesOrder;
-  var voronoiRef = React.useRef({});
-  var defaultXAxisId = xAxisIds[0];
-  var defaultYAxisId = yAxisIds[0];
-  useEnhancedEffect(function () {
-    dispatch({
-      type: 'updateVoronoiUsage',
-      useVoronoiInteraction: true
-    });
-    return function () {
-      dispatch({
-        type: 'updateVoronoiUsage',
-        useVoronoiInteraction: false
-      });
-    };
-  }, [dispatch]);
-  useEnhancedEffect(function () {
-    // 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;
-    }
-    voronoiRef.current = {};
-    var points = [];
-    seriesOrder.forEach(function (seriesId) {
-      var _series$seriesId = series[seriesId],
-        data = _series$seriesId.data,
-        xAxisKey = _series$seriesId.xAxisKey,
-        yAxisKey = _series$seriesId.yAxisKey;
-      var xScale = xAxis[xAxisKey != null ? xAxisKey : defaultXAxisId].scale;
-      var yScale = yAxis[yAxisKey != null ? yAxisKey : defaultYAxisId].scale;
-      var getXPosition = getValueToPositionMapper(xScale);
-      var getYPosition = getValueToPositionMapper(yScale);
-      var seriesPoints = data.flatMap(function (_ref2) {
-        var x = _ref2.x,
-          y = _ref2.y;
-        return [getXPosition(x), getYPosition(y)];
-      });
-      voronoiRef.current[seriesId] = {
-        startIndex: points.length,
-        endIndex: points.length + seriesPoints.length
-      };
-      points = points.concat(seriesPoints);
-    });
-    voronoiRef.current.delauney = new Delaunay(points);
-  }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis]);
-  React.useEffect(function () {
-    var element = svgRef.current;
-    if (element === null) {
-      return undefined;
-    }
-
-    // TODO: A perf optimisation of voronoi could be to use the last point as the intial point for the next search.
-    function getClosestPoint(event) {
-      var _voronoiRef$current$d;
-      // Get mouse coordinate in global SVG space
-      var svgPoint = getSVGPoint(svgRef.current, event);
-      var outsideX = svgPoint.x < left || svgPoint.x > left + width;
-      var outsideY = svgPoint.y < top || svgPoint.y > top + height;
-      if (outsideX || outsideY) {
-        return 'outside-chart';
-      }
-      if (!voronoiRef.current.delauney) {
-        return 'no-point-found';
-      }
-      var closestPointIndex = (_voronoiRef$current$d = voronoiRef.current.delauney) == null ? void 0 : _voronoiRef$current$d.find(svgPoint.x, svgPoint.y);
-      if (closestPointIndex === undefined) {
-        return 'no-point-found';
-      }
-      var seriesId = Object.keys(voronoiRef.current).find(function (id) {
-        if (id === 'delauney') {
-          return false;
-        }
-        return 2 * closestPointIndex >= voronoiRef.current[id].startIndex && 2 * closestPointIndex < voronoiRef.current[id].endIndex;
-      });
-      if (seriesId === undefined) {
-        return 'no-point-found';
-      }
-      var dataIndex = (2 * closestPointIndex - voronoiRef.current[seriesId].startIndex) / 2;
-      if (voronoiMaxRadius !== undefined) {
-        var pointX = voronoiRef.current.delauney.points[2 * closestPointIndex];
-        var pointY = voronoiRef.current.delauney.points[2 * closestPointIndex + 1];
-        var dist2 = Math.pow(pointX - svgPoint.x, 2) + Math.pow(pointY - svgPoint.y, 2);
-        if (dist2 > Math.pow(voronoiMaxRadius, 2)) {
-          // The closest point is too far to be considered.
-          return 'outside-voronoi-max-radius';
-        }
-      }
-      return {
-        seriesId: seriesId,
-        dataIndex: dataIndex
-      };
-    }
-    var handleMouseOut = function handleMouseOut() {
-      dispatch({
-        type: 'exitChart'
-      });
-    };
-    var handleMouseMove = function handleMouseMove(event) {
-      var closestPoint = getClosestPoint(event);
-      if (closestPoint === 'outside-chart') {
-        dispatch({
-          type: 'exitChart'
-        });
-        return;
-      }
-      if (closestPoint === 'outside-voronoi-max-radius' || closestPoint === 'no-point-found') {
-        dispatch({
-          type: 'leaveItem',
-          data: {
-            type: 'scatter'
-          }
-        });
-        return;
-      }
-      var seriesId = closestPoint.seriesId,
-        dataIndex = closestPoint.dataIndex;
-      dispatch({
-        type: 'enterItem',
-        data: {
-          type: 'scatter',
-          seriesId: seriesId,
-          dataIndex: dataIndex
-        }
-      });
-    };
-    var handleMouseClick = function handleMouseClick(event) {
-      if (!onItemClick) {
-        return;
-      }
-      var closestPoint = getClosestPoint(event);
-      if (typeof closestPoint === 'string') {
-        // No point fond for any reason
-        return;
-      }
-      var seriesId = closestPoint.seriesId,
-        dataIndex = closestPoint.dataIndex;
-      onItemClick(event, {
-        type: 'scatter',
-        seriesId: seriesId,
-        dataIndex: dataIndex
-      });
-    };
-    element.addEventListener('mouseout', handleMouseOut);
-    element.addEventListener('mousemove', handleMouseMove);
-    element.addEventListener('click', handleMouseClick);
-    return function () {
-      element.removeEventListener('mouseout', handleMouseOut);
-      element.removeEventListener('mousemove', handleMouseMove);
-      element.removeEventListener('click', handleMouseClick);
-    };
-  }, [svgRef, dispatch, left, width, top, height, yAxis, xAxis, voronoiMaxRadius, onItemClick]);
-
-  // eslint-disable-next-line react/jsx-no-useless-fragment
-  return /*#__PURE__*/_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.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.
-   * @default undefined
-   */
-  voronoiMaxRadius: PropTypes.number
-} : void 0;
-export { ChartsVoronoiHandler };

package/legacy/ChartsVoronoiHandler/index.js

@@ -1 +0,0 @@
-export * from './ChartsVoronoiHandler';