@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
555 lines • 31.7 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from "react";
import { useState, useEffect, useRef } from "react";
import { motion, AnimatePresence } from "framer-motion";
function HUDPie(_ref) {
var _ref$pieChartNoDataCo = _ref.pieChartNoDataContainerAnimationTransitionConfigurationSettings,
pieChartNoDataContainerAnimationTransitionConfigurationSettings = _ref$pieChartNoDataCo === void 0 ? {} : _ref$pieChartNoDataCo,
_ref$pieChartNoDataCo2 = _ref.pieChartNoDataContainerInitialAnimationConfigurationSettings,
pieChartNoDataContainerInitialAnimationConfigurationSettings = _ref$pieChartNoDataCo2 === void 0 ? {} : _ref$pieChartNoDataCo2,
_ref$pieChartSliceAni = _ref.pieChartSliceAnimationTransitionConfigurationSettings,
pieChartSliceAnimationTransitionConfigurationSettings = _ref$pieChartSliceAni === void 0 ? {} : _ref$pieChartSliceAni,
_ref$pieChartNoDataCo3 = _ref.pieChartNoDataContainerAnimationConfigurationSettings,
pieChartNoDataContainerAnimationConfigurationSettings = _ref$pieChartNoDataCo3 === void 0 ? {} : _ref$pieChartNoDataCo3,
_ref$sliceToolTipAnim = _ref.sliceToolTipAnimationTransitionConfigurationSettings,
sliceToolTipAnimationTransitionConfigurationSettings = _ref$sliceToolTipAnim === void 0 ? {} : _ref$sliceToolTipAnim,
_ref$pieChartSliceIni = _ref.pieChartSliceInitialAnimationConfigurationSettings,
pieChartSliceInitialAnimationConfigurationSettings = _ref$pieChartSliceIni === void 0 ? {} : _ref$pieChartSliceIni,
_ref$sliceToolTipInit = _ref.sliceToolTipInitialAnimationConfigurationSettings,
sliceToolTipInitialAnimationConfigurationSettings = _ref$sliceToolTipInit === void 0 ? {} : _ref$sliceToolTipInit,
_ref$pieChartSliceExi = _ref.pieChartSliceExitAnimationConfigurationSettings,
pieChartSliceExitAnimationConfigurationSettings = _ref$pieChartSliceExi === void 0 ? {} : _ref$pieChartSliceExi,
_ref$sliceToolTipExit = _ref.sliceToolTipExitAnimationConfigurationSettings,
sliceToolTipExitAnimationConfigurationSettings = _ref$sliceToolTipExit === void 0 ? {} : _ref$sliceToolTipExit,
_ref$pieChartLegendSe = _ref.pieChartLegendSeriesColorConfigurationSettings,
pieChartLegendSeriesColorConfigurationSettings = _ref$pieChartLegendSe === void 0 ? {} : _ref$pieChartLegendSe,
_ref$pieChartSliceAni2 = _ref.pieChartSliceAnimationConfigurationSettings,
pieChartSliceAnimationConfigurationSettings = _ref$pieChartSliceAni2 === void 0 ? {} : _ref$pieChartSliceAni2,
_ref$pieChartCenterCo = _ref.pieChartCenterContentConfigurationSettings,
pieChartCenterContentConfigurationSettings = _ref$pieChartCenterCo === void 0 ? {} : _ref$pieChartCenterCo,
_ref$sliceToolTipAnim2 = _ref.sliceToolTipAnimationConfigurationSettings,
sliceToolTipAnimationConfigurationSettings = _ref$sliceToolTipAnim2 === void 0 ? {} : _ref$sliceToolTipAnim2,
_ref$pieChartLegendSe2 = _ref.pieChartLegendSeriesConfigurationSettings,
pieChartLegendSeriesConfigurationSettings = _ref$pieChartLegendSe2 === void 0 ? {} : _ref$pieChartLegendSe2,
_ref$rightLegendConta = _ref.rightLegendContainerConfigurationSettings,
rightLegendContainerConfigurationSettings = _ref$rightLegendConta === void 0 ? {} : _ref$rightLegendConta,
_ref$leftLegendContai = _ref.leftLegendContainerConfigurationSettings,
leftLegendContainerConfigurationSettings = _ref$leftLegendContai === void 0 ? {} : _ref$leftLegendContai,
_ref$pieChartNoDataLa = _ref.pieChartNoDataLabelConfigurationSettings,
pieChartNoDataLabelConfigurationSettings = _ref$pieChartNoDataLa === void 0 ? {} : _ref$pieChartNoDataLa,
_ref$sliceLabelContai = _ref.sliceLabelContainerConfigurationSettings,
sliceLabelContainerConfigurationSettings = _ref$sliceLabelContai === void 0 ? {} : _ref$sliceLabelContai,
_ref$pieChartContentC = _ref.pieChartContentConfigurationSettings,
pieChartContentConfigurationSettings = _ref$pieChartContentC === void 0 ? {} : _ref$pieChartContentC,
_ref$pieChartLegendCo = _ref.pieChartLegendConfigurationSettings,
pieChartLegendConfigurationSettings = _ref$pieChartLegendCo === void 0 ? {} : _ref$pieChartLegendCo,
_ref$pieChartSliceCon = _ref.pieChartSliceConfigurationSettings,
pieChartSliceConfigurationSettings = _ref$pieChartSliceCon === void 0 ? {} : _ref$pieChartSliceCon,
_ref$sliceToolTipConf = _ref.sliceToolTipConfigurationSettings,
sliceToolTipConfigurationSettings = _ref$sliceToolTipConf === void 0 ? {} : _ref$sliceToolTipConf,
_ref$pieChartConfigur = _ref.pieChartConfigurationSettings,
pieChartConfigurationSettings = _ref$pieChartConfigur === void 0 ? {} : _ref$pieChartConfigur,
_ref$externalLabelLin = _ref.externalLabelLineTrailingSegmentConfigurations,
externalLabelLineTrailingSegmentConfigurations = _ref$externalLabelLin === void 0 ? {} : _ref$externalLabelLin,
_ref$externalLabelLin2 = _ref.externalLabelLineCenterSegmentConfigurations,
externalLabelLineCenterSegmentConfigurations = _ref$externalLabelLin2 === void 0 ? {} : _ref$externalLabelLin2,
_ref$externalLabelLin3 = _ref.externalLabelLineOriginSegmentConfigurations,
externalLabelLineOriginSegmentConfigurations = _ref$externalLabelLin3 === void 0 ? {} : _ref$externalLabelLin3,
_ref$externalLabelLin4 = _ref.externalLabelLineGradientConfigurations,
externalLabelLineGradientConfigurations = _ref$externalLabelLin4 === void 0 ? {} : _ref$externalLabelLin4,
_ref$pieChartLegendSe3 = _ref.pieChartLegendSeriesColorConfigurations,
pieChartLegendSeriesColorConfigurations = _ref$pieChartLegendSe3 === void 0 ? {} : _ref$pieChartLegendSe3,
_ref$pieChartSlicesCo = _ref.pieChartSlicesContainerConfigurations,
pieChartSlicesContainerConfigurations = _ref$pieChartSlicesCo === void 0 ? {} : _ref$pieChartSlicesCo,
_ref$pieChartNoDataCo4 = _ref.pieChartNoDataContainerConfigurations,
pieChartNoDataContainerConfigurations = _ref$pieChartNoDataCo4 === void 0 ? {} : _ref$pieChartNoDataCo4,
_ref$pieChartCenterCo2 = _ref.pieChartCenterContentConfigurations,
pieChartCenterContentConfigurations = _ref$pieChartCenterCo2 === void 0 ? {} : _ref$pieChartCenterCo2,
_ref$pieChartLegendSe4 = _ref.pieChartLegendSeriesConfigurations,
pieChartLegendSeriesConfigurations = _ref$pieChartLegendSe4 === void 0 ? {} : _ref$pieChartLegendSe4,
_ref$rightLegendConta2 = _ref.rightLegendContainerConfigurations,
rightLegendContainerConfigurations = _ref$rightLegendConta2 === void 0 ? {} : _ref$rightLegendConta2,
_ref$leftLegendContai2 = _ref.leftLegendContainerConfigurations,
leftLegendContainerConfigurations = _ref$leftLegendContai2 === void 0 ? {} : _ref$leftLegendContai2,
_ref$pieChartNoDataLa2 = _ref.pieChartNoDataLabelConfigurations,
pieChartNoDataLabelConfigurations = _ref$pieChartNoDataLa2 === void 0 ? {} : _ref$pieChartNoDataLa2,
_ref$sliceLabelContai2 = _ref.sliceLabelContainerConfigurations,
sliceLabelContainerConfigurations = _ref$sliceLabelContai2 === void 0 ? {} : _ref$sliceLabelContai2,
_ref$externalLabelLin5 = _ref.externalLabelLineConfigurations,
externalLabelLineConfigurations = _ref$externalLabelLin5 === void 0 ? {} : _ref$externalLabelLin5,
_ref$pieChartContentC2 = _ref.pieChartContentConfigurations,
pieChartContentConfigurations = _ref$pieChartContentC2 === void 0 ? {} : _ref$pieChartContentC2,
_ref$pieChartLegendCo2 = _ref.pieChartLegendConfigurations,
pieChartLegendConfigurations = _ref$pieChartLegendCo2 === void 0 ? {} : _ref$pieChartLegendCo2,
_ref$pieChartSliceCon2 = _ref.pieChartSliceConfigurations,
pieChartSliceConfigurations = _ref$pieChartSliceCon2 === void 0 ? {} : _ref$pieChartSliceCon2,
_ref$sliceToolTipConf2 = _ref.sliceToolTipConfigurations,
sliceToolTipConfigurations = _ref$sliceToolTipConf2 === void 0 ? {} : _ref$sliceToolTipConf2,
_ref$pieChartConfigur2 = _ref.pieChartConfigurations,
pieChartConfigurations = _ref$pieChartConfigur2 === void 0 ? {} : _ref$pieChartConfigur2,
_ref$sliceConfigurati = _ref.sliceConfigurations,
sliceConfigurations = _ref$sliceConfigurati === void 0 ? {} : _ref$sliceConfigurati,
_ref$renderTooltip = _ref.renderTooltip,
renderTooltip = _ref$renderTooltip === void 0 ? function (datum) {
return /*#__PURE__*/React.createElement("div", null, datum.label, ": ", datum.value);
} : _ref$renderTooltip,
_ref$renderLabel = _ref.renderLabel,
renderLabel = _ref$renderLabel === void 0 ? function (datum, index) {
return /*#__PURE__*/React.createElement("text", null, datum.label);
} : _ref$renderLabel,
_ref$renderSliceOverl = _ref.renderSliceOverlay,
renderSliceOverlay = _ref$renderSliceOverl === void 0 ? undefined : _ref$renderSliceOverl,
_ref$centerContent = _ref.centerContent,
centerContent = _ref$centerContent === void 0 ? undefined : _ref$centerContent,
_ref$noDataContent = _ref.noDataContent,
noDataContent = _ref$noDataContent === void 0 ? undefined : _ref$noDataContent,
_ref$getColor = _ref.getColor,
getColor = _ref$getColor === void 0 ? function (index) {
return "hsl(".concat(index * 50, ", 70%, 60%)");
} : _ref$getColor,
_ref$getFill = _ref.getFill,
getFill = _ref$getFill === void 0 ? function (index, datum) {
return getColor(index);
} : _ref$getFill,
_ref$onPieChartLegend = _ref.onPieChartLegendSeriesClicked,
onPieChartLegendSeriesClicked = _ref$onPieChartLegend === void 0 ? null : _ref$onPieChartLegend,
_ref$onSliceClick = _ref.onSliceClick,
onSliceClick = _ref$onSliceClick === void 0 ? function (datum, index) {} : _ref$onSliceClick,
_ref$onSliceHover = _ref.onSliceHover,
onSliceHover = _ref$onSliceHover === void 0 ? function (datum, index) {} : _ref$onSliceHover,
_ref$externalLabelPad = _ref.externalLabelPaddingFactor,
externalLabelPaddingFactor = _ref$externalLabelPad === void 0 ? 5 : _ref$externalLabelPad,
_ref$externalLabelBas = _ref.externalLabelBasePadding,
externalLabelBasePadding = _ref$externalLabelBas === void 0 ? 30 : _ref$externalLabelBas,
_ref$minExternalLabel = _ref.minExternalLabelPadding,
minExternalLabelPadding = _ref$minExternalLabel === void 0 ? 100 : _ref$minExternalLabel,
_ref$adjustedLabelXPa = _ref.adjustedLabelXPadding,
adjustedLabelXPadding = _ref$adjustedLabelXPa === void 0 ? 18 : _ref$adjustedLabelXPa,
_ref$minLabelSpreadFa = _ref.minLabelSpreadFactor,
minLabelSpreadFactor = _ref$minLabelSpreadFa === void 0 ? 12 : _ref$minLabelSpreadFa,
_ref$baseSpreadFactor = _ref.baseSpreadFactor,
baseSpreadFactor = _ref$baseSpreadFactor === void 0 ? 200 : _ref$baseSpreadFactor,
_ref$toolTipEntranceT = _ref.toolTipEntranceThreshold,
toolTipEntranceThreshold = _ref$toolTipEntranceT === void 0 ? 12 : _ref$toolTipEntranceT,
_ref$hoverInnerRadius = _ref.hoverInnerRadiusFactor,
hoverInnerRadiusFactor = _ref$hoverInnerRadius === void 0 ? 0.9 : _ref$hoverInnerRadius,
_ref$strokeWidth = _ref.strokeWidth,
strokeWidth = _ref$strokeWidth === void 0 ? 1 : _ref$strokeWidth,
_ref$innerRadius = _ref.innerRadius,
innerRadius = _ref$innerRadius === void 0 ? 0 : _ref$innerRadius,
_ref$radius = _ref.radius,
radius = _ref$radius === void 0 ? 100 : _ref$radius,
_ref$stayVisibleWhenF = _ref.stayVisibleWhenFiltered,
stayVisibleWhenFiltered = _ref$stayVisibleWhenF === void 0 ? false : _ref$stayVisibleWhenF,
_ref$rightLegendExter = _ref.rightLegendExternalMarginLeft,
rightLegendExternalMarginLeft = _ref$rightLegendExter === void 0 ? 227.69 : _ref$rightLegendExter,
_ref$leftLegendExtern = _ref.leftLegendExternalMarginRight,
leftLegendExternalMarginRight = _ref$leftLegendExtern === void 0 ? 227.69 : _ref$leftLegendExtern,
_ref$rightLegendMargi = _ref.rightLegendMarginLeft,
rightLegendMarginLeft = _ref$rightLegendMargi === void 0 ? 20 : _ref$rightLegendMargi,
_ref$leftLegendMargin = _ref.leftLegendMarginRight,
leftLegendMarginRight = _ref$leftLegendMargin === void 0 ? 20 : _ref$leftLegendMargin,
_ref$legendPosition = _ref.legendPosition,
legendPosition = _ref$legendPosition === void 0 ? "right" : _ref$legendPosition,
_ref$externalLabels = _ref.externalLabels,
externalLabels = _ref$externalLabels === void 0 ? true : _ref$externalLabels,
_ref$smartTooltip = _ref.smartTooltip,
smartTooltip = _ref$smartTooltip === void 0 ? true : _ref$smartTooltip,
_ref$rotationOffset = _ref.rotationOffset,
rotationOffset = _ref$rotationOffset === void 0 ? 0 : _ref$rotationOffset,
_ref$showLegend = _ref.showLegend,
showLegend = _ref$showLegend === void 0 ? true : _ref$showLegend,
_ref$data = _ref.data,
data = _ref$data === void 0 ? [] : _ref$data;
var _useState = useState(data.map(function (_, i) {
return i;
})),
_useState2 = _slicedToArray(_useState, 2),
visibleIndexes = _useState2[0],
setVisibleIndexes = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
forceShowTooltip = _useState4[0],
setForceShowTooltip = _useState4[1];
var _useState5 = useState({
x: 0,
y: 0
}),
_useState6 = _slicedToArray(_useState5, 2),
tooltipPos = _useState6[0],
setTooltipPos = _useState6[1];
var _useState7 = useState(null),
_useState8 = _slicedToArray(_useState7, 2),
hoveredIndex = _useState8[0],
setHoveredIndex = _useState8[1];
var _useState9 = useState(null),
_useState10 = _slicedToArray(_useState9, 2),
clickedIndex = _useState10[0],
setClickedIndex = _useState10[1];
var sliceHoveredIndex = useRef(null);
var tooltipHovered = useRef(false);
var tooltipRef = useRef(null);
var total = (stayVisibleWhenFiltered ? data : data.filter(function (_, i) {
return visibleIndexes.includes(i);
})).reduce(function (acc, item) {
return acc + item.value;
}, 0);
var renderSlices = function renderSlices() {
if (total === 0) {
return null;
}
var cumulative = 0;
var slices = data.map(function (item, index) {
var visible = visibleIndexes.includes(index);
var sliceDisabled = stayVisibleWhenFiltered && !visible;
if (!stayVisibleWhenFiltered && !visible) {
return null;
}
var valuePercent = item.value / total;
var startAngle = cumulative * 360;
var endAngle = (cumulative + valuePercent) * 360;
cumulative += valuePercent;
var startRadians = Math.PI * 2 * startAngle / 360;
var endRadians = Math.PI * 2 * endAngle / 360;
var midAngle = (startAngle + endAngle) / 2;
var midRadians = Math.PI * 2 * midAngle / 360;
var largeArc = endAngle - startAngle > 180 ? 1 : 0;
var effectiveInnerRadius = hoveredIndex === index ? innerRadius * hoverInnerRadiusFactor : innerRadius;
var outerStartX = radius + radius * Math.cos(startRadians);
var outerStartY = radius + radius * Math.sin(startRadians);
var outerEndX = radius + radius * Math.cos(endRadians);
var outerEndY = radius + radius * Math.sin(endRadians);
var innerStartX = radius + effectiveInnerRadius * Math.cos(endRadians);
var innerStartY = radius + effectiveInnerRadius * Math.sin(endRadians);
var innerEndX = radius + effectiveInnerRadius * Math.cos(startRadians);
var innerEndY = radius + effectiveInnerRadius * Math.sin(startRadians);
var externalLabelPadding = externalLabelBasePadding + Math.min(minExternalLabelPadding, data.length * externalLabelPaddingFactor);
var labelRadius = externalLabels ? radius + externalLabelPadding : effectiveInnerRadius + (radius - effectiveInnerRadius) * 0.5;
var labelX = radius + labelRadius * Math.cos(midRadians);
var labelY = radius + labelRadius * Math.sin(midRadians);
var spreadIndex = index;
var spreadFactor = Math.max(minLabelSpreadFactor, baseSpreadFactor / Math.max(1, data.length));
var spreadOffset = (spreadIndex - data.length / 2) * spreadFactor;
var rightSide = labelX > radius;
var adjustedLabelY = externalLabels ? labelY + spreadOffset : labelY;
var adjustedLabelX = externalLabels ? labelX + (rightSide ? adjustedLabelXPadding : -adjustedLabelXPadding) : labelX;
var fullCircle = endAngle - startAngle >= 360 || valuePercent >= 1;
var sliceContext = {
innerRadius: effectiveInnerRadius,
hovered: hoveredIndex === index,
clicked: clickedIndex === index,
centerX: radius,
centerY: radius,
startAngle: startAngle,
endAngle: endAngle,
labelX: adjustedLabelX,
labelY: adjustedLabelY,
radius: radius
};
var commonProps = _objectSpread({
fill: getFill(index, item),
stroke: "#fff",
strokeWidth: strokeWidth,
onMouseLeave: function onMouseLeave(e) {
if (sliceDisabled) {
return;
}
sliceHoveredIndex.current = null;
if (tooltipRef.current) {
var rect = tooltipRef.current.getBoundingClientRect();
var insideTooltip = e.clientX >= rect.left - toolTipEntranceThreshold && e.clientX <= rect.right + toolTipEntranceThreshold && e.clientY >= rect.top - toolTipEntranceThreshold && e.clientY <= rect.bottom + toolTipEntranceThreshold;
if (!insideTooltip) {
setHoveredIndex(null);
onSliceHover(null, null);
}
return;
}
var timer = setTimeout(function () {
clearTimeout(timer);
if (!tooltipHovered.current) {
setHoveredIndex(null);
onSliceHover(null, null);
}
}, 50);
},
onMouseEnter: function onMouseEnter(e) {
if (sliceDisabled) {
return;
}
sliceHoveredIndex.current = index;
setHoveredIndex(index);
onSliceHover(item, index);
var bounds = e.currentTarget.getBoundingClientRect();
setTooltipPos({
x: bounds.left + bounds.width / 2,
y: bounds.top + bounds.height / 2
});
},
onMouseMove: function onMouseMove(e) {
if (sliceDisabled || tooltipHovered.current) {
return;
}
setTooltipPos({
x: e.clientX,
y: e.clientY
});
},
onClick: function onClick() {
if (!sliceDisabled) {
setClickedIndex(index);
onSliceClick(item, index);
}
}
}, sliceConfigurations);
return /*#__PURE__*/React.createElement(motion.g, _extends({
key: index,
initial: _objectSpread({
scale: 0,
opacity: 0
}, pieChartSliceInitialAnimationConfigurationSettings),
animate: _objectSpread({
scale: hoveredIndex === index ? 1.05 : 1,
opacity: sliceDisabled ? 0.269 : 1
}, pieChartSliceAnimationConfigurationSettings),
exit: _objectSpread({
scale: 0,
opacity: 0
}, pieChartSliceExitAnimationConfigurationSettings),
transition: _objectSpread({
type: "spring",
stiffness: 300,
damping: 25
}, pieChartSliceAnimationTransitionConfigurationSettings),
style: _objectSpread({
pointerEvents: sliceDisabled ? "none" : "auto"
}, pieChartSliceConfigurationSettings)
}, pieChartSliceConfigurations), fullCircle ? /*#__PURE__*/React.createElement("circle", _extends({
cx: radius,
cy: radius,
r: radius
}, commonProps)) : innerRadius > 0 ? /*#__PURE__*/React.createElement(motion.path, _extends({
d: "\n M ".concat(radius + radius * Math.cos(startRadians), " ").concat(radius + radius * Math.sin(startRadians), "\n A ").concat(radius, " ").concat(radius, " 0 ").concat(largeArc, " 1 ").concat(radius + radius * Math.cos(endRadians), " ").concat(radius + radius * Math.sin(endRadians), "\n L ").concat(radius + effectiveInnerRadius * Math.cos(endRadians), " ").concat(radius + effectiveInnerRadius * Math.sin(endRadians), "\n A ").concat(effectiveInnerRadius, " ").concat(effectiveInnerRadius, " 0 ").concat(largeArc, " 0 ").concat(radius + effectiveInnerRadius * Math.cos(startRadians), " ").concat(radius + effectiveInnerRadius * Math.sin(startRadians), "\n Z\n ")
}, commonProps)) : /*#__PURE__*/React.createElement(motion.path, _extends({
d: "\n M ".concat(radius, " ").concat(radius, "\n L ").concat(radius + radius * Math.cos(startRadians), " ").concat(radius + radius * Math.sin(startRadians), "\n A ").concat(radius, " ").concat(radius, " 0 ").concat(largeArc, " 1 ").concat(radius + radius * Math.cos(endRadians), " ").concat(radius + radius * Math.sin(endRadians), "\n Z\n ")
}, commonProps)), externalLabels && /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", _extends({
id: "leaderLineGradient-".concat(index),
x1: rightSide ? "0%" : "100%",
y1: "0%",
x2: rightSide ? "100%" : "0%",
y2: "0%"
}, externalLabelLineGradientConfigurations), /*#__PURE__*/React.createElement("stop", _extends({
offset: "0%",
stopColor: "#ccc"
}, externalLabelLineOriginSegmentConfigurations)), /*#__PURE__*/React.createElement("stop", _extends({
offset: "70%",
stopColor: "#ccc"
}, externalLabelLineCenterSegmentConfigurations)), /*#__PURE__*/React.createElement("stop", _extends({
offset: "100%",
stopColor: "transparent"
}, externalLabelLineTrailingSegmentConfigurations)))), /*#__PURE__*/React.createElement("path", _extends({
d: "\n M ".concat(radius + radius * Math.cos(midRadians), " ").concat(radius + radius * Math.sin(midRadians), "\n C ").concat(radius + (radius + 30) * Math.cos(midRadians), " ").concat(radius + (radius + 30) * Math.sin(midRadians), ",\n ").concat(labelX, " ").concat(adjustedLabelY, ",\n ").concat(labelX, " ").concat(adjustedLabelY, "\n "),
stroke: "url(#leaderLineGradient-".concat(index, ")"),
strokeLinecap: "round",
strokeWidth: "1.5",
fill: "none"
}, externalLabelLineConfigurations))), /*#__PURE__*/React.createElement("g", _extends({
transform: "translate(".concat(adjustedLabelX, ", ").concat(adjustedLabelY, ")"),
style: _objectSpread({
pointerEvents: "none",
userSelect: "none",
zIndex: 69
}, sliceLabelContainerConfigurationSettings)
}, sliceLabelContainerConfigurations), renderLabel(item, index)));
});
var normalSlices = slices.filter(function (_, i) {
return i !== hoveredIndex;
});
var hoveredSlice = slices.find(function (_, i) {
return i === hoveredIndex;
});
return [].concat(_toConsumableArray(normalSlices), [hoveredSlice]).filter(Boolean);
};
var renderLegend = function renderLegend() {
return /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
display: "flex",
flexDirection: "column",
gap: "6px"
}, pieChartLegendConfigurationSettings)
}, pieChartLegendConfigurations), data.map(function (item, index) {
return /*#__PURE__*/React.createElement("div", _extends({
key: index,
style: _objectSpread({
display: "flex",
alignItems: "center",
cursor: "pointer",
opacity: visibleIndexes.includes(index) ? 1 : 0.4
}, pieChartLegendSeriesConfigurationSettings),
onClick: function onClick() {
setVisibleIndexes(function (prev) {
return prev.includes(index) ? prev.filter(function (i) {
return i !== index;
}) : [].concat(_toConsumableArray(prev), [index]);
});
if (onPieChartLegendSeriesClicked) {
onPieChartLegendSeriesClicked(item, index);
}
}
}, pieChartLegendSeriesConfigurations), /*#__PURE__*/React.createElement(motion.div, _extends({
style: _objectSpread({
backgroundColor: getColor(index),
height: 12,
width: 12,
marginRight: 8
}, pieChartLegendSeriesColorConfigurationSettings)
}, pieChartLegendSeriesColorConfigurations)), item.label);
}));
};
var calculateTooltipPosition = function calculateTooltipPosition() {
var tooltipX = tooltipPos.x + 12;
var tooltipY = tooltipPos.y + 12;
var tooltipWidth = 150;
var tooltipHeight = 80;
if (smartTooltip) {
var windowHeight = window.innerHeight;
var windowWidth = window.innerWidth;
if (tooltipX + tooltipWidth > windowWidth) {
tooltipX = tooltipPos.x - tooltipWidth - 12;
}
if (tooltipY + tooltipHeight > windowHeight) {
tooltipY = tooltipPos.y - tooltipHeight - 12;
}
}
return {
tooltipX: tooltipX,
tooltipY: tooltipY
};
};
var _calculateTooltipPosi = calculateTooltipPosition(),
tooltipX = _calculateTooltipPosi.tooltipX,
tooltipY = _calculateTooltipPosi.tooltipY;
useEffect(function () {
function handleMouseMove(e) {
if (!tooltipRef.current) {
return;
}
var rect = tooltipRef.current.getBoundingClientRect();
var inside = e.clientX >= rect.left - toolTipEntranceThreshold && e.clientX <= rect.right + toolTipEntranceThreshold && e.clientY >= rect.top - toolTipEntranceThreshold && e.clientY <= rect.bottom + toolTipEntranceThreshold;
if (inside) {
tooltipHovered.current = true;
setForceShowTooltip(true);
} else {
tooltipHovered.current = false;
setForceShowTooltip(false);
if (sliceHoveredIndex.current === null) {
setHoveredIndex(null);
onSliceHover(null, null);
}
}
}
window.addEventListener("mousemove", handleMouseMove);
return function () {
window.removeEventListener("mousemove", handleMouseMove);
};
}, [toolTipEntranceThreshold]);
return /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
position: "relative",
display: "flex",
alignItems: "center",
width: "100%"
}, pieChartConfigurationSettings)
}, pieChartConfigurations), showLegend && legendPosition === "left" && /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
marginRight: externalLabels ? leftLegendExternalMarginRight : leftLegendMarginRight
}, leftLegendContainerConfigurationSettings)
}, leftLegendContainerConfigurations), renderLegend()), /*#__PURE__*/React.createElement("svg", _extends({
style: _objectSpread({
overflow: "visible"
}, pieChartContentConfigurationSettings),
viewBox: "0 0 ".concat(radius * 2, " ").concat(radius * 2),
height: "auto",
width: "100%",
preserveAspectRatio: "xMidYMid meet"
}, pieChartContentConfigurations), /*#__PURE__*/React.createElement(AnimatePresence, null, total > 0 ? /*#__PURE__*/React.createElement("g", _extends({
transform: "rotate(".concat(rotationOffset, " ").concat(radius, " ").concat(radius, ")")
}, pieChartSlicesContainerConfigurations), renderSlices()) : /*#__PURE__*/React.createElement(motion.g, _extends({
initial: _objectSpread({
opacity: 0,
scale: 0.8
}, pieChartNoDataContainerInitialAnimationConfigurationSettings),
animate: _objectSpread({
opacity: 1,
scale: 1
}, pieChartNoDataContainerAnimationConfigurationSettings),
transition: _objectSpread({
type: "spring",
stiffness: 200,
damping: 20
}, pieChartNoDataContainerAnimationTransitionConfigurationSettings)
}, pieChartNoDataContainerConfigurations), noDataContent !== null && noDataContent !== void 0 ? noDataContent : /*#__PURE__*/React.createElement("text", _extends({
style: _objectSpread({
userSelect: "none"
}, pieChartNoDataLabelConfigurationSettings),
dominantBaseline: "middle",
textAnchor: "middle",
fontSize: "16",
fill: "#888",
x: "50%",
y: "50%"
}, pieChartNoDataLabelConfigurations), "No Data")))), centerContent && /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
position: "absolute",
display: "flex",
alignItems: "center",
justifyContent: "center",
pointerEvents: "none",
transform: "translate(-50%, -50%)",
textAlign: "center",
left: "50%",
top: "50%"
}, pieChartCenterContentConfigurationSettings)
}, pieChartCenterContentConfigurations), centerContent), showLegend && legendPosition === "right" && /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
marginLeft: externalLabels ? rightLegendExternalMarginLeft : rightLegendMarginLeft
}, rightLegendContainerConfigurationSettings)
}, rightLegendContainerConfigurations), renderLegend()), /*#__PURE__*/React.createElement(AnimatePresence, null, (hoveredIndex !== null || forceShowTooltip) && data[hoveredIndex] && /*#__PURE__*/React.createElement(motion.div, _extends({
ref: tooltipRef,
initial: _objectSpread({
opacity: 0,
scale: 0.95
}, sliceToolTipInitialAnimationConfigurationSettings),
animate: _objectSpread({
opacity: 1,
scale: 1
}, sliceToolTipAnimationConfigurationSettings),
exit: _objectSpread({
opacity: 0,
scale: 0.95
}, sliceToolTipExitAnimationConfigurationSettings),
transition: _objectSpread({
type: "spring",
stiffness: 300,
damping: 20
}, sliceToolTipAnimationTransitionConfigurationSettings),
style: _objectSpread({
position: "fixed",
whiteSpace: "nowrap",
transform: "translate(-50%, -50%)",
borderRadius: "8px",
boxShadow: "0 4px 10px rgba(0, 0, 0, 0.1)",
backgroundColor: "#fff",
zIndex: 1000,
padding: "10px",
left: tooltipX,
top: tooltipY
}, sliceToolTipConfigurationSettings)
}, sliceToolTipConfigurations), renderTooltip(data[hoveredIndex]))));
}
;
export default HUDPie;