@mui/x-charts
Version:
The community edition of the charts components (MUI X).
102 lines • 4.11 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
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;
var _React$useContext = React.useContext(InteractionContext),
item = _React$useContext.item;
var getInteractionItemProps = useInteractionItemProps(series.highlightScope);
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) {
temp.push({
x: x,
y: y,
isFaded: !getIsHighlighted(item, pointCtx, series.highlightScope) && getIsFaded(item, pointCtx, series.highlightScope),
interactionProps: getInteractionItemProps(pointCtx),
id: scatterPoint.id
});
}
}
return temp;
}, [yScale, xScale, getInteractionItemProps, item, series.data, series.highlightScope, series.id]);
return /*#__PURE__*/_jsx("g", {
children: cleanData.map(function (dataPoint) {
return /*#__PURE__*/_jsx("circle", _extends({
cx: 0,
cy: 0,
r: markerSize,
transform: "translate(".concat(dataPoint.x, ", ").concat(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,
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 };