@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
73 lines (72 loc) • 4.47 kB
JavaScript
import React, { useLayoutEffect, useMemo, useRef } from 'react';
import clsx from 'clsx';
import { arc } from 'd3-shape';
import styles from './styles.css.js';
import { dimensionsBySize, balanceLabelNodes } from './utils';
function LabelElement(_a) {
var x = _a.x, y = _a.y, hideTitles = _a.hideTitles, hideDescriptions = _a.hideDescriptions, rightSide = _a.rightSide, title = _a.title, description = _a.description;
return (React.createElement("g", { className: styles['label-text'], transform: "", "data-x": x, "data-y": y },
!hideTitles && (React.createElement("text", { x: x, y: y, style: { textAnchor: rightSide ? 'start' : 'end' } }, title)),
!hideDescriptions && description && (React.createElement("text", { x: x, y: y + (hideTitles ? 0 : 18), style: { textAnchor: rightSide ? 'start' : 'end' }, className: styles.label__description }, description))));
}
export default (function (_a) {
var pieData = _a.pieData, size = _a.size, highlightedSegment = _a.highlightedSegment, segmentDescription = _a.segmentDescription, visibleDataSum = _a.visibleDataSum, hideTitles = _a.hideTitles, hideDescriptions = _a.hideDescriptions;
var markers = useMemo(function () {
var _a = dimensionsBySize[size], radius = _a.outerRadius, innerLabelPadding = _a.innerLabelPadding;
var arcMarkerStart = arc()
.innerRadius(radius - 1)
.outerRadius(radius - 1);
var arcMarkerBreak = arc()
.innerRadius(radius + innerLabelPadding)
.outerRadius(radius + innerLabelPadding);
return pieData.map(function (datum, i) {
var labelDatum = pieData[i];
var midAngle = labelDatum.startAngle + (labelDatum.endAngle - labelDatum.startAngle) / 2;
arcMarkerBreak.outerRadius(radius + 20 * (0.5 * Math.cos(2 * midAngle) + 0.5));
arcMarkerBreak.innerRadius(radius + 20 * (0.5 * Math.cos(2 * midAngle) + 0.5));
var _a = arcMarkerStart.centroid(datum), startX = _a[0], startY = _a[1];
var _b = arcMarkerBreak.centroid(datum), breakX = _b[0], breakY = _b[1];
var rightSide = midAngle < Math.PI;
var endX = (radius + 20) * (rightSide ? 1 : -1);
var textX = endX + 5 * (rightSide ? 1 : -1);
return {
startX: startX,
startY: startY,
breakX: breakX,
breakY: breakY,
endX: endX,
endY: breakY,
textX: textX,
textY: breakY,
rightSide: rightSide,
datum: datum
};
});
}, [pieData, size]);
var rootRef = useRef(null);
useLayoutEffect(function () {
if (!rootRef.current) {
return;
}
var labelNodes = rootRef.current.querySelectorAll("." + styles['label-text']);
balanceLabelNodes(labelNodes, markers, false);
balanceLabelNodes(labelNodes, markers, true);
}, [pieData]);
return (React.createElement("g", { className: styles.markers, "aria-hidden": "true", ref: rootRef }, markers.map(function (_a) {
var _b;
var startX = _a.startX, startY = _a.startY, breakX = _a.breakX, breakY = _a.breakY, endX = _a.endX, endY = _a.endY, textX = _a.textX, textY = _a.textY, rightSide = _a.rightSide, datum = _a.datum;
var segment = datum.data.datum;
var description = segmentDescription === null || segmentDescription === void 0 ? void 0 : segmentDescription(segment, visibleDataSum);
if ((hideTitles && !description) || (hideDescriptions && !segment.title)) {
return null;
}
return (React.createElement("g", { key: datum.data.index, className: clsx(styles.label, (_b = {},
_b[styles['label--highlighted']] = highlightedSegment === segment,
_b[styles['label--dimmed']] = highlightedSegment !== null && highlightedSegment !== segment,
_b[styles['label--align-right']] = !rightSide,
_b)) },
React.createElement("line", { x1: startX, y1: startY, x2: breakX, y2: breakY }),
React.createElement("line", { x1: breakX, y1: breakY, x2: endX, y2: endY, className: styles['label-line'] }),
React.createElement(LabelElement, { x: textX, y: textY, rightSide: rightSide, title: segment.title, description: description, hideTitles: hideTitles, hideDescriptions: hideDescriptions })));
})));
});