78 lines
2.4 KiB
JavaScript
78 lines
2.4 KiB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
import * as React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { useTheme } from '@mui/material/styles';
|
|
import composeClasses from '@mui/utils/composeClasses';
|
|
import { useRadarAxisHighlight } from "./useRadarAxisHighlight.js";
|
|
import { getRadarAxisHighlightUtilityClass } from "./radarAxisHighlightClasses.js";
|
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
const useUtilityClasses = classes => {
|
|
const slots = {
|
|
root: ['root'],
|
|
line: ['line'],
|
|
dot: ['dot']
|
|
};
|
|
return composeClasses(slots, getRadarAxisHighlightUtilityClass, classes);
|
|
};
|
|
/**
|
|
* Attributes to display a shadow around a mark.
|
|
*/
|
|
const highlightMarkShadow = {
|
|
r: 7,
|
|
opacity: 0.3
|
|
};
|
|
|
|
/**
|
|
* Attributes to display a mark.
|
|
*/
|
|
const highlightMark = {
|
|
r: 3,
|
|
opacity: 1
|
|
};
|
|
function RadarAxisHighlight(props) {
|
|
const classes = useUtilityClasses(props.classes);
|
|
const theme = useTheme();
|
|
const data = useRadarAxisHighlight();
|
|
if (data === null) {
|
|
return null;
|
|
}
|
|
const {
|
|
center,
|
|
series,
|
|
points,
|
|
radius,
|
|
highlightedAngle,
|
|
instance
|
|
} = data;
|
|
const [x, y] = instance.polar2svg(radius, highlightedAngle);
|
|
return /*#__PURE__*/_jsxs("g", {
|
|
className: classes.root,
|
|
children: [/*#__PURE__*/_jsx("path", {
|
|
d: `M ${center.cx} ${center.cy} L ${x} ${y}`,
|
|
stroke: (theme.vars || theme).palette.text.primary,
|
|
strokeWidth: 1,
|
|
className: classes.line,
|
|
pointerEvents: "none",
|
|
strokeDasharray: "4 4"
|
|
}), points.map((point, seriesIndex) => {
|
|
return /*#__PURE__*/_jsx("circle", _extends({
|
|
fill: series[seriesIndex].color,
|
|
cx: point.x,
|
|
cy: point.y,
|
|
className: classes.dot,
|
|
pointerEvents: "none"
|
|
}, series[seriesIndex].hideMark ? highlightMark : highlightMarkShadow), series[seriesIndex].id);
|
|
})]
|
|
});
|
|
}
|
|
process.env.NODE_ENV !== "production" ? RadarAxisHighlight.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
|
|
} : void 0;
|
|
export { RadarAxisHighlight }; |