@mui/x-charts/modern/ScatterChart/Scatter.js

The community edition of the charts components (MUI X).

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) {
  const {
    series,
    xScale,
    yScale,
    color,
    markerSize
  } = props;
  const highlightScope = React.useMemo(() => _extends({
    highlighted: 'item',
    faded: 'global'
  }, series.highlightScope), [series.highlightScope]);
  const {
    item,
    useVoronoiInteraction
  } = React.useContext(InteractionContext);
  const skipInteractionHandlers = useVoronoiInteraction || series.disableHover;
  const getInteractionItemProps = useInteractionItemProps(highlightScope, skipInteractionHandlers);
  const cleanData = React.useMemo(() => {
    const getXPosition = getValueToPositionMapper(xScale);
    const getYPosition = getValueToPositionMapper(yScale);
    const xRange = xScale.range();
    const yRange = yScale.range();
    const minXRange = Math.min(...xRange);
    const maxXRange = Math.max(...xRange);
    const minYRange = Math.min(...yRange);
    const maxYRange = Math.max(...yRange);
    const temp = [];
    for (let i = 0; i < series.data.length; i += 1) {
      const scatterPoint = series.data[i];
      const x = getXPosition(scatterPoint.x);
      const y = getYPosition(scatterPoint.y);
      const isInRange = x >= minXRange && x <= maxXRange && y >= minYRange && y <= maxYRange;
      const pointCtx = {
        type: 'scatter',
        seriesId: series.id,
        dataIndex: i
      };
      if (isInRange) {
        const isHighlighted = getIsHighlighted(item, pointCtx, highlightScope);
        temp.push({
          x,
          y,
          isHighlighted,
          isFaded: !isHighlighted && getIsFaded(item, pointCtx, highlightScope),
          interactionProps: getInteractionItemProps(pointCtx),
          id: scatterPoint.id
        });
      }
    }
    return temp;
  }, [xScale, yScale, series.data, series.id, item, highlightScope, getInteractionItemProps]);
  return /*#__PURE__*/_jsx("g", {
    children: cleanData.map(dataPoint => /*#__PURE__*/_jsx("circle", _extends({
      cx: 0,
      cy: 0,
      r: (dataPoint.isHighlighted ? 1.2 : 1) * markerSize,
      transform: `translate(${dataPoint.x}, ${dataPoint.y})`,
      fill: color,
      opacity: dataPoint.isFaded && 0.3 || 1
    }, 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,
  series: PropTypes.shape({
    color: PropTypes.string.isRequired,
    data: PropTypes.arrayOf(PropTypes.shape({
      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
      x: PropTypes.number.isRequired,
      y: PropTypes.number.isRequired
    })).isRequired,
    disableHover: PropTypes.bool,
    highlightScope: PropTypes.shape({
      faded: PropTypes.oneOf(['global', 'none', 'series']),
      highlighted: PropTypes.oneOf(['item', 'none', 'series'])
    }),
    id: PropTypes.string.isRequired,
    label: PropTypes.string,
    markerSize: PropTypes.number,
    type: PropTypes.oneOf(['scatter']).isRequired,
    valueFormatter: PropTypes.func.isRequired,
    xAxisKey: PropTypes.string,
    yAxisKey: PropTypes.string
  }).isRequired,
  xScale: PropTypes.func.isRequired,
  yScale: PropTypes.func.isRequired
} : void 0;
export { Scatter };