85 lines
2.9 KiB
JavaScript
85 lines
2.9 KiB
JavaScript
"use strict";
|
|
|
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.RadarAxisHighlight = RadarAxisHighlight;
|
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
var React = _interopRequireWildcard(require("react"));
|
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
var _styles = require("@mui/material/styles");
|
|
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
|
|
var _useRadarAxisHighlight = require("./useRadarAxisHighlight");
|
|
var _radarAxisHighlightClasses = require("./radarAxisHighlightClasses");
|
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
const useUtilityClasses = classes => {
|
|
const slots = {
|
|
root: ['root'],
|
|
line: ['line'],
|
|
dot: ['dot']
|
|
};
|
|
return (0, _composeClasses.default)(slots, _radarAxisHighlightClasses.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 = (0, _styles.useTheme)();
|
|
const data = (0, _useRadarAxisHighlight.useRadarAxisHighlight)();
|
|
if (data === null) {
|
|
return null;
|
|
}
|
|
const {
|
|
center,
|
|
series,
|
|
points,
|
|
radius,
|
|
highlightedAngle,
|
|
instance
|
|
} = data;
|
|
const [x, y] = instance.polar2svg(radius, highlightedAngle);
|
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
|
|
className: classes.root,
|
|
children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({
|
|
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.default.object
|
|
} : void 0; |