@mui/x-charts
Version:
The community edition of MUI X Charts components.
99 lines • 3.58 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { useRadarSeriesData } from "./useRadarSeriesData.mjs";
import { useInteractionAllItemProps } from "./useInteractionAllItemProps.mjs";
import { useUtilityClasses } from "../radarClasses.mjs";
import { useItemHighlightStateGetter } from "../../hooks/useItemHighlightStateGetter.mjs";
import { getPathProps } from "./RadarSeriesArea.mjs";
import { getCircleProps } from "./RadarSeriesMarks.mjs";
import { useRadarRotationIndex } from "./useRadarRotationIndex.mjs";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function RadarSeriesPlot(props) {
const {
seriesId: inSeriesId,
className,
classes: inClasses,
onAreaClick,
onMarkClick
} = props;
const seriesCoordinates = useRadarSeriesData(inSeriesId);
const getRotationIndex = useRadarRotationIndex();
const interactionProps = useInteractionAllItemProps(seriesCoordinates);
const getHighlightState = useItemHighlightStateGetter();
const classes = useUtilityClasses(inClasses);
return /*#__PURE__*/_jsx("g", {
className: clsx(classes.seriesRoot, className),
children: seriesCoordinates?.map(({
seriesId,
points,
color,
hideMark,
fillArea,
hidden
}, seriesIndex) => {
if (hidden) {
return null;
}
return /*#__PURE__*/_jsxs("g", {
children: [/*#__PURE__*/_jsx("path", _extends({}, getPathProps({
seriesId,
points,
color,
fillArea,
getHighlightState,
classes
}), {
onClick: event => onAreaClick?.(event, {
type: 'radar',
seriesId,
dataIndex: getRotationIndex(event)
}),
cursor: onAreaClick ? 'pointer' : 'unset'
}, interactionProps[seriesIndex]), seriesId), !hideMark && points.map((point, index) => /*#__PURE__*/_jsx("circle", _extends({}, getCircleProps({
seriesId,
point,
color: point.color,
fillArea,
getHighlightState,
classes
}), {
onClick: event => onMarkClick?.(event, {
type: 'radar',
seriesId,
dataIndex: index
}),
cursor: onMarkClick ? 'pointer' : 'unset'
}), index))]
}, seriesId);
})
});
}
process.env.NODE_ENV !== "production" ? RadarSeriesPlot.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "pnpm proptypes" |
// ----------------------------------------------------------------------
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
/**
* Callback fired when an area is clicked.
* @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
* @param {RadarItemIdentifier} radarItemIdentifier The radar item identifier.
*/
onAreaClick: PropTypes.func,
/**
* Callback fired when a mark is clicked.
* @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
* @param {RadarItemIdentifier} radarItemIdentifier The radar item identifier.
*/
onMarkClick: PropTypes.func,
/**
* The id of the series to display.
* If undefined all series are displayed.
*/
seriesId: PropTypes.string
} : void 0;
export { RadarSeriesPlot };