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

package/legacy/PieChart/dataTransform/transition.js

@@ -1,149 +0,0 @@
-export var defaultTransitionConfig = {
-  keys: function keys(item) {
-    return item.id;
-  },
-  from: function from(_ref) {
-    var innerRadius = _ref.innerRadius,
-      outerRadius = _ref.outerRadius,
-      cornerRadius = _ref.cornerRadius,
-      startAngle = _ref.startAngle,
-      endAngle = _ref.endAngle,
-      paddingAngle = _ref.paddingAngle,
-      color = _ref.color,
-      isFaded = _ref.isFaded;
-    return {
-      innerRadius: innerRadius,
-      outerRadius: (innerRadius + outerRadius) / 2,
-      cornerRadius: cornerRadius,
-      startAngle: (startAngle + endAngle) / 2,
-      endAngle: (startAngle + endAngle) / 2,
-      paddingAngle: paddingAngle,
-      fill: color,
-      opacity: isFaded ? 0.3 : 1
-    };
-  },
-  leave: function leave(_ref2) {
-    var innerRadius = _ref2.innerRadius,
-      startAngle = _ref2.startAngle,
-      endAngle = _ref2.endAngle;
-    return {
-      innerRadius: innerRadius,
-      outerRadius: innerRadius,
-      startAngle: (startAngle + endAngle) / 2,
-      endAngle: (startAngle + endAngle) / 2
-    };
-  },
-  enter: function enter(_ref3) {
-    var innerRadius = _ref3.innerRadius,
-      outerRadius = _ref3.outerRadius,
-      startAngle = _ref3.startAngle,
-      endAngle = _ref3.endAngle;
-    return {
-      innerRadius: innerRadius,
-      outerRadius: outerRadius,
-      startAngle: startAngle,
-      endAngle: endAngle
-    };
-  },
-  update: function update(_ref4) {
-    var innerRadius = _ref4.innerRadius,
-      outerRadius = _ref4.outerRadius,
-      cornerRadius = _ref4.cornerRadius,
-      startAngle = _ref4.startAngle,
-      endAngle = _ref4.endAngle,
-      paddingAngle = _ref4.paddingAngle,
-      color = _ref4.color,
-      isFaded = _ref4.isFaded;
-    return {
-      innerRadius: innerRadius,
-      outerRadius: outerRadius,
-      cornerRadius: cornerRadius,
-      startAngle: startAngle,
-      endAngle: endAngle,
-      paddingAngle: paddingAngle,
-      fill: color,
-      opacity: isFaded ? 0.3 : 1
-    };
-  },
-  config: {
-    tension: 120,
-    friction: 14,
-    clamp: true
-  }
-};
-export var defaultLabelTransitionConfig = {
-  keys: function keys(item) {
-    return item.id;
-  },
-  from: function from(_ref5) {
-    var innerRadius = _ref5.innerRadius,
-      outerRadius = _ref5.outerRadius,
-      arcLabelRadius = _ref5.arcLabelRadius,
-      cornerRadius = _ref5.cornerRadius,
-      startAngle = _ref5.startAngle,
-      endAngle = _ref5.endAngle,
-      paddingAngle = _ref5.paddingAngle;
-    return {
-      innerRadius: innerRadius,
-      outerRadius: (innerRadius + outerRadius) / 2,
-      cornerRadius: cornerRadius,
-      arcLabelRadius: arcLabelRadius,
-      startAngle: (startAngle + endAngle) / 2,
-      endAngle: (startAngle + endAngle) / 2,
-      paddingAngle: paddingAngle,
-      opacity: 0
-    };
-  },
-  leave: function leave(_ref6) {
-    var innerRadius = _ref6.innerRadius,
-      startAngle = _ref6.startAngle,
-      endAngle = _ref6.endAngle;
-    return {
-      innerRadius: innerRadius,
-      outerRadius: innerRadius,
-      arcLabelRadius: innerRadius,
-      startAngle: (startAngle + endAngle) / 2,
-      endAngle: (startAngle + endAngle) / 2,
-      opacity: 0
-    };
-  },
-  enter: function enter(_ref7) {
-    var innerRadius = _ref7.innerRadius,
-      outerRadius = _ref7.outerRadius,
-      startAngle = _ref7.startAngle,
-      endAngle = _ref7.endAngle,
-      arcLabelRadius = _ref7.arcLabelRadius;
-    return {
-      innerRadius: innerRadius,
-      outerRadius: outerRadius,
-      startAngle: startAngle,
-      endAngle: endAngle,
-      arcLabelRadius: arcLabelRadius,
-      opacity: 1
-    };
-  },
-  update: function update(_ref8) {
-    var innerRadius = _ref8.innerRadius,
-      outerRadius = _ref8.outerRadius,
-      cornerRadius = _ref8.cornerRadius,
-      startAngle = _ref8.startAngle,
-      endAngle = _ref8.endAngle,
-      paddingAngle = _ref8.paddingAngle,
-      arcLabelRadius = _ref8.arcLabelRadius;
-    return {
-      innerRadius: innerRadius,
-      outerRadius: outerRadius,
-      cornerRadius: cornerRadius,
-      startAngle: startAngle,
-      endAngle: endAngle,
-      paddingAngle: paddingAngle,
-      arcLabelRadius: arcLabelRadius,
-      opacity: 1
-    };
-  },
-  config: {
-    tension: 120,
-    friction: 14,
-    clamp: true
-  }
-};

package/legacy/PieChart/dataTransform/useTransformData.js

@@ -1,63 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { InteractionContext } from '../../context/InteractionProvider';
-import { getIsHighlighted, getIsFaded } from '../../hooks/useInteractionItemProps';
-export function useTransformData(series) {
-  var seriesId = series.id,
-    highlightScope = series.highlightScope,
-    data = series.data,
-    faded = series.faded,
-    highlighted = series.highlighted,
-    _series$paddingAngle = series.paddingAngle,
-    basePaddingAngle = _series$paddingAngle === void 0 ? 0 : _series$paddingAngle,
-    _series$innerRadius = series.innerRadius,
-    baseInnerRadius = _series$innerRadius === void 0 ? 0 : _series$innerRadius,
-    baseArcLabelRadius = series.arcLabelRadius,
-    baseOuterRadius = series.outerRadius,
-    _series$cornerRadius = series.cornerRadius,
-    baseCornerRadius = _series$cornerRadius === void 0 ? 0 : _series$cornerRadius;
-  var _React$useContext = React.useContext(InteractionContext),
-    highlightedItem = _React$useContext.item;
-  var getHighlightStatus = React.useCallback(function (dataIndex) {
-    var isHighlighted = getIsHighlighted(highlightedItem, {
-      type: 'pie',
-      seriesId: seriesId,
-      dataIndex: dataIndex
-    }, highlightScope);
-    var isFaded = !isHighlighted && getIsFaded(highlightedItem, {
-      type: 'pie',
-      seriesId: seriesId,
-      dataIndex: dataIndex
-    }, highlightScope);
-    return {
-      isHighlighted: isHighlighted,
-      isFaded: isFaded
-    };
-  }, [highlightScope, highlightedItem, seriesId]);
-  var dataWithHighlight = React.useMemo(function () {
-    return data.map(function (item, itemIndex) {
-      var _attributesOverride$p, _attributesOverride$i, _attributesOverride$o, _attributesOverride$c, _ref, _attributesOverride$a;
-      var _getHighlightStatus = getHighlightStatus(itemIndex),
-        isHighlighted = _getHighlightStatus.isHighlighted,
-        isFaded = _getHighlightStatus.isFaded;
-      var attributesOverride = _extends({
-        additionalRadius: 0
-      }, isFaded && faded || isHighlighted && highlighted || {});
-      var paddingAngle = Math.max(0, Math.PI * ((_attributesOverride$p = attributesOverride.paddingAngle) != null ? _attributesOverride$p : basePaddingAngle) / 180);
-      var innerRadius = Math.max(0, (_attributesOverride$i = attributesOverride.innerRadius) != null ? _attributesOverride$i : baseInnerRadius);
-      var outerRadius = Math.max(0, (_attributesOverride$o = attributesOverride.outerRadius) != null ? _attributesOverride$o : baseOuterRadius + attributesOverride.additionalRadius);
-      var cornerRadius = (_attributesOverride$c = attributesOverride.cornerRadius) != null ? _attributesOverride$c : baseCornerRadius;
-      var arcLabelRadius = (_ref = (_attributesOverride$a = attributesOverride.arcLabelRadius) != null ? _attributesOverride$a : baseArcLabelRadius) != null ? _ref : (innerRadius + outerRadius) / 2;
-      return _extends({}, item, attributesOverride, {
-        isFaded: isFaded,
-        isHighlighted: isHighlighted,
-        paddingAngle: paddingAngle,
-        innerRadius: innerRadius,
-        outerRadius: outerRadius,
-        cornerRadius: cornerRadius,
-        arcLabelRadius: arcLabelRadius
-      });
-    });
-  }, [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, baseArcLabelRadius, data, faded, getHighlightStatus, highlighted]);
-  return dataWithHighlight;
-}

package/legacy/PieChart/formatter.js

@@ -1,55 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { pie as d3Pie } from 'd3-shape';
-var getSortingComparator = function getSortingComparator() {
-  var comparator = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'none';
-  if (typeof comparator === 'function') {
-    return comparator;
-  }
-  switch (comparator) {
-    case 'none':
-      return null;
-    case 'desc':
-      return function (a, b) {
-        return b - a;
-      };
-    case 'asc':
-      return function (a, b) {
-        return a - b;
-      };
-    default:
-      return null;
-  }
-};
-var formatter = function formatter(params) {
-  var seriesOrder = params.seriesOrder,
-    series = params.series;
-  var defaultizedSeries = {};
-  seriesOrder.forEach(function (seriesId) {
-    var _series$seriesId$star, _series$seriesId$endA, _series$seriesId$padd, _series$seriesId$sort;
-    var arcs = d3Pie().startAngle(2 * Math.PI * ((_series$seriesId$star = series[seriesId].startAngle) != null ? _series$seriesId$star : 0) / 360).endAngle(2 * Math.PI * ((_series$seriesId$endA = series[seriesId].endAngle) != null ? _series$seriesId$endA : 360) / 360).padAngle(2 * Math.PI * ((_series$seriesId$padd = series[seriesId].paddingAngle) != null ? _series$seriesId$padd : 0) / 360).sortValues(getSortingComparator((_series$seriesId$sort = series[seriesId].sortingValues) != null ? _series$seriesId$sort : 'none'))(series[seriesId].data.map(function (piePoint) {
-      return piePoint.value;
-    }));
-    defaultizedSeries[seriesId] = _extends({
-      valueFormatter: function valueFormatter(item) {
-        return item.value.toLocaleString();
-      }
-    }, series[seriesId], {
-      data: series[seriesId].data.map(function (item, index) {
-        var _item$id;
-        return _extends({}, item, {
-          id: (_item$id = item.id) != null ? _item$id : "auto-generated-pie-id-".concat(seriesId, "-").concat(index)
-        }, arcs[index]);
-      }).map(function (item) {
-        var _series$seriesId$valu, _series$seriesId$valu2, _series$seriesId;
-        return _extends({}, item, {
-          formattedValue: (_series$seriesId$valu = (_series$seriesId$valu2 = (_series$seriesId = series[seriesId]).valueFormatter) == null ? void 0 : _series$seriesId$valu2.call(_series$seriesId, item)) != null ? _series$seriesId$valu : item.value.toLocaleString()
-        });
-      })
-    });
-  });
-  return {
-    seriesOrder: seriesOrder,
-    series: defaultizedSeries
-  };
-};
-export default formatter;

package/legacy/PieChart/index.js

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

package/legacy/PieChart/legend.js

@@ -1,16 +0,0 @@
-var legendGetter = function legendGetter(params) {
-  var seriesOrder = params.seriesOrder,
-    series = params.series;
-  return seriesOrder.flatMap(function (seriesId) {
-    return series[seriesId].data.map(function (item) {
-      return {
-        color: item.color,
-        label: item.label,
-        id: item.id
-      };
-    }).filter(function (item) {
-      return item.label !== undefined;
-    });
-  });
-};
-export default legendGetter;

package/legacy/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -1,255 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-var _excluded = ["width", "height"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import ownerWindow from '@mui/utils/ownerWindow';
-import { styled } from '@mui/material/styles';
-import { ChartContainer } from '../ChartContainer';
-import { jsx as _jsx } from "react/jsx-runtime";
-var useChartDimensions = function useChartDimensions(inWidth, inHeight) {
-  var rootRef = React.useRef(null);
-  var displayError = React.useRef(false);
-  var _React$useState = React.useState(0),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    width = _React$useState2[0],
-    setWidth = _React$useState2[1];
-  var _React$useState3 = React.useState(0),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    height = _React$useState4[0],
-    setHeight = _React$useState4[1];
-
-  // Adaptation of the `computeSizeAndPublishResizeEvent` from the grid.
-  var computeSize = React.useCallback(function () {
-    var mainEl = rootRef == null ? void 0 : rootRef.current;
-    if (!mainEl) {
-      return;
-    }
-    var win = ownerWindow(mainEl);
-    var computedStyle = win.getComputedStyle(mainEl);
-    var newHeight = Math.floor(parseFloat(computedStyle.height)) || 0;
-    var newWidth = Math.floor(parseFloat(computedStyle.width)) || 0;
-    setWidth(newWidth);
-    setHeight(newHeight);
-  }, []);
-  React.useEffect(function () {
-    // Ensure the error detection occurs after the first rendering.
-    displayError.current = true;
-  }, []);
-  useEnhancedEffect(function () {
-    if (inWidth !== undefined && inHeight !== undefined) {
-      return function () {};
-    }
-    computeSize();
-    var elementToObserve = rootRef.current;
-    if (typeof ResizeObserver === 'undefined') {
-      return function () {};
-    }
-    var animationFrame;
-    var observer = new ResizeObserver(function () {
-      // See https://github.com/mui/mui-x/issues/8733
-      animationFrame = requestAnimationFrame(function () {
-        computeSize();
-      });
-    });
-    if (elementToObserve) {
-      observer.observe(elementToObserve);
-    }
-    return function () {
-      if (animationFrame) {
-        window.cancelAnimationFrame(animationFrame);
-      }
-      if (elementToObserve) {
-        observer.unobserve(elementToObserve);
-      }
-    };
-  }, [computeSize, inHeight, inWidth]);
-  if (process.env.NODE_ENV !== 'production') {
-    if (displayError.current && inWidth === undefined && width === 0) {
-      console.error("MUI X Charts: ChartContainer does not have `width` prop, and its container has no `width` defined.");
-      displayError.current = false;
-    }
-    if (displayError.current && inHeight === undefined && height === 0) {
-      console.error("MUI X Charts: ChartContainer does not have `height` prop, and its container has no `height` defined.");
-      displayError.current = false;
-    }
-  }
-  return [rootRef, inWidth != null ? inWidth : width, inHeight != null ? inHeight : height];
-};
-var ResizableContainer = styled('div', {
-  name: 'MuiResponsiveChart',
-  slot: 'Container'
-})(function (_ref) {
-  var _ownerState$width, _ownerState$height;
-  var ownerState = _ref.ownerState;
-  return {
-    width: (_ownerState$width = ownerState.width) != null ? _ownerState$width : '100%',
-    height: (_ownerState$height = ownerState.height) != null ? _ownerState$height : '100%',
-    display: 'flex',
-    position: 'relative',
-    flexGrow: 1,
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden',
-    '&>svg': {
-      width: '100%',
-      height: '100%'
-    }
-  };
-});
-var ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function ResponsiveChartContainer(props, ref) {
-  var inWidth = props.width,
-    inHeight = props.height,
-    other = _objectWithoutProperties(props, _excluded);
-  var _useChartDimensions = useChartDimensions(inWidth, inHeight),
-    _useChartDimensions2 = _slicedToArray(_useChartDimensions, 3),
-    containerRef = _useChartDimensions2[0],
-    width = _useChartDimensions2[1],
-    height = _useChartDimensions2[2];
-  return /*#__PURE__*/_jsx(ResizableContainer, {
-    ref: containerRef,
-    ownerState: {
-      width: inWidth,
-      height: inHeight
-    },
-    children: width && height ? /*#__PURE__*/_jsx(ChartContainer, _extends({}, other, {
-      width: width,
-      height: height,
-      ref: ref
-    })) : null
-  });
-});
-process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  children: PropTypes.node,
-  className: PropTypes.string,
-  /**
-   * Color palette used to colorize multiple series.
-   * @default blueberryTwilightPalette
-   */
-  colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
-  /**
-   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
-   */
-  dataset: PropTypes.arrayOf(PropTypes.object),
-  desc: PropTypes.string,
-  /**
-   * If `true`, the charts will not listen to the mouse move event.
-   * It might break interactive features, but will improve performance.
-   * @default false
-   */
-  disableAxisListener: PropTypes.bool,
-  /**
-   * The height of the chart in px. If not defined, it takes the height of the parent element.
-   * @default undefined
-   */
-  height: PropTypes.number,
-  /**
-   * 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.shape({
-    bottom: PropTypes.number,
-    left: PropTypes.number,
-    right: PropTypes.number,
-    top: PropTypes.number
-  }),
-  /**
-   * The array of series to display.
-   * Each type of series has its own specificity.
-   * Please refer to the appropriate docs page to learn more about it.
-   */
-  series: PropTypes.arrayOf(PropTypes.object).isRequired,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  title: PropTypes.string,
-  viewBox: PropTypes.shape({
-    height: PropTypes.number,
-    width: PropTypes.number,
-    x: PropTypes.number,
-    y: PropTypes.number
-  }),
-  /**
-   * The width of the chart in px. If not defined, it takes the width of the parent element.
-   * @default undefined
-   */
-  width: PropTypes.number,
-  /**
-   * The configuration of the x-axes.
-   * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
-   */
-  xAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    classes: PropTypes.object,
-    data: PropTypes.array,
-    dataKey: PropTypes.string,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    fill: PropTypes.string,
-    hideTooltip: PropTypes.bool,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    label: PropTypes.string,
-    labelFontSize: PropTypes.number,
-    labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
-    reverse: PropTypes.bool,
-    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    stroke: PropTypes.string,
-    tickFontSize: PropTypes.number,
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickSize: PropTypes.number,
-    valueFormatter: PropTypes.func
-  })),
-  /**
-   * The configuration of the y-axes.
-   * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
-   */
-  yAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    classes: PropTypes.object,
-    data: PropTypes.array,
-    dataKey: PropTypes.string,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    fill: PropTypes.string,
-    hideTooltip: PropTypes.bool,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    label: PropTypes.string,
-    labelFontSize: PropTypes.number,
-    labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
-    reverse: PropTypes.bool,
-    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    stroke: PropTypes.string,
-    tickFontSize: PropTypes.number,
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickSize: PropTypes.number,
-    valueFormatter: PropTypes.func
-  }))
-} : void 0;
-export { ResponsiveChartContainer };

package/legacy/ResponsiveChartContainer/index.js

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

package/legacy/ScatterChart/Scatter.js

@@ -1,110 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { getValueToPositionMapper } from '../hooks/useScale';
-import { getIsFaded, getIsHighlighted, useInteractionItemProps } from '../hooks/useInteractionItemProps';
-import { InteractionContext } from '../context/InteractionProvider';
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Demos:
- *
- * - [Scatter](https://mui.com/x/react-charts/scatter/)
- * - [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
- *
- * API:
- *
- * - [Scatter API](https://mui.com/x/api/charts/scatter/)
- */
-function Scatter(props) {
-  var series = props.series,
-    xScale = props.xScale,
-    yScale = props.yScale,
-    color = props.color,
-    markerSize = props.markerSize,
-    onItemClick = props.onItemClick;
-  var highlightScope = React.useMemo(function () {
-    return _extends({
-      highlighted: 'item',
-      faded: 'global'
-    }, series.highlightScope);
-  }, [series.highlightScope]);
-  var _React$useContext = React.useContext(InteractionContext),
-    item = _React$useContext.item,
-    useVoronoiInteraction = _React$useContext.useVoronoiInteraction;
-  var skipInteractionHandlers = useVoronoiInteraction || series.disableHover;
-  var getInteractionItemProps = useInteractionItemProps(highlightScope, skipInteractionHandlers);
-  var cleanData = React.useMemo(function () {
-    var getXPosition = getValueToPositionMapper(xScale);
-    var getYPosition = getValueToPositionMapper(yScale);
-    var xRange = xScale.range();
-    var yRange = yScale.range();
-    var minXRange = Math.min.apply(Math, _toConsumableArray(xRange));
-    var maxXRange = Math.max.apply(Math, _toConsumableArray(xRange));
-    var minYRange = Math.min.apply(Math, _toConsumableArray(yRange));
-    var maxYRange = Math.max.apply(Math, _toConsumableArray(yRange));
-    var temp = [];
-    for (var i = 0; i < series.data.length; i += 1) {
-      var scatterPoint = series.data[i];
-      var x = getXPosition(scatterPoint.x);
-      var y = getYPosition(scatterPoint.y);
-      var isInRange = x >= minXRange && x <= maxXRange && y >= minYRange && y <= maxYRange;
-      var pointCtx = {
-        type: 'scatter',
-        seriesId: series.id,
-        dataIndex: i
-      };
-      if (isInRange) {
-        var isHighlighted = getIsHighlighted(item, pointCtx, highlightScope);
-        temp.push({
-          x: x,
-          y: y,
-          isHighlighted: isHighlighted,
-          isFaded: !isHighlighted && getIsFaded(item, pointCtx, highlightScope),
-          interactionProps: getInteractionItemProps(pointCtx),
-          id: scatterPoint.id,
-          dataIndex: i
-        });
-      }
-    }
-    return temp;
-  }, [xScale, yScale, series.data, series.id, item, highlightScope, getInteractionItemProps]);
-  return /*#__PURE__*/_jsx("g", {
-    children: cleanData.map(function (dataPoint) {
-      return /*#__PURE__*/_jsx("circle", _extends({
-        cx: 0,
-        cy: 0,
-        r: (dataPoint.isHighlighted ? 1.2 : 1) * markerSize,
-        transform: "translate(".concat(dataPoint.x, ", ").concat(dataPoint.y, ")"),
-        fill: color,
-        opacity: dataPoint.isFaded && 0.3 || 1,
-        onClick: onItemClick && function (event) {
-          return onItemClick(event, {
-            type: 'scatter',
-            seriesId: series.id,
-            dataIndex: dataPoint.dataIndex
-          });
-        },
-        cursor: onItemClick ? 'pointer' : 'unset'
-      }, dataPoint.interactionProps), dataPoint.id);
-    })
-  });
-}
-process.env.NODE_ENV !== "production" ? Scatter.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  color: PropTypes.string.isRequired,
-  markerSize: PropTypes.number.isRequired,
-  /**
-   * Callback fired when clicking on a scatter item.
-   * @param {MouseEvent} event Mouse event recorded on the `<svg/>` element.
-   * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
-   */
-  onItemClick: PropTypes.func,
-  series: PropTypes.object.isRequired,
-  xScale: PropTypes.func.isRequired,
-  yScale: PropTypes.func.isRequired
-} : void 0;
-export { Scatter };