@galaxy-io/dls 1.6.1 → 2.0.1

package/dist/charts/pieChartGeometry.js

@@ -1,79 +1,109 @@
-import { AGGREGATED_SLICE_KEY, PIE_DONUT_INNER_RATIO, PIE_MAX_AUTO_INNER_RATIO, PIE_MAX_INSET_SHARE, PIE_PAD_ANGLE } from "./constants.js";
+import { RADIUS } from "../theme/tokens/scales.js";
+import { CHART_TOOLTIP_OFFSET, PIE_SLICE_GAP } from "./constants.js";
 import { sanitizeValue } from "./chartScales.js";
 import { arc, pie } from "d3-shape";
 //#region src/charts/pieChartGeometry.ts
-function buildPieChartGeometry({ slices, plotWidth, plotHeight, innerRadiusRatio = PIE_DONUT_INNER_RATIO, padAngle = PIE_PAD_ANGLE, cornerRadius = 2, minSliceShare = 0, aggregatedLabel = "Other", resolveColor, getSliceColor, getSliceLabel }) {
-	const outerRadius = Math.max(0, Math.min(plotWidth, plotHeight) / 2);
-	const gapWidth = outerRadius * Math.max(0, padAngle);
-	const requestedInnerRadius = outerRadius * Math.min(Math.max(innerRadiusRatio, 0), .95);
-	const centerX = plotWidth / 2;
-	const centerY = plotHeight / 2;
+/**
+* @internal Pie and donut geometry (PieChart), in two halves: `resolvePieChartSlices` (data only:
+* folding, labels, shares, colors) and `buildPieChartGeometry` (the measured plot: radii, paths,
+* anchors), so the component body is a `.map()`. Pure: no React, no theme
+* access; colors arrive through a resolver callback. The 1.x numeric props are constants here
+* (`piechart.md` Decision 2).
+*/
+/** @internal Key of the folded "Other" slice in events, selection and the legend. */
+var AGGREGATED_SLICE_KEY = "__other__";
+/** @internal Default share below which a slice folds into "Other" (1.x). */
+var PIE_MIN_SLICE_SHARE = .02;
+/** @internal Donut hole as a fraction of the outer radius (1.x). */
+var PIE_DONUT_INNER_RATIO = .62;
+/** @internal Slice corner radius: `radius.sm`. */
+var PIE_CORNER_RADIUS = Number.parseFloat(RADIUS.sm);
+/**
+* @internal Share of the narrowest slice its two inner pad insets may consume (1.x). A solid pie
+* keeps a tiny hole so every gap stays radial instead of collapsing at the center.
+*/
+var PIE_MAX_INSET_SHARE = .7;
+/** @internal Ceiling on that auto inner radius, as a share of the outer radius (1.x). */
+var PIE_MAX_AUTO_INNER_RATIO = .06;
+/**
+* @internal The size-free half: clamps negatives to 0, folds the tail under `minSliceShare` into
+* one slice (last), drops zero slices, and resolves labels, shares and colors. Runs from data
+* alone, so the server render already knows the slice count and the legend.
+*/
+function resolvePieChartSlices({ slices, minSliceShare, aggregatedLabel, resolveColor, getSliceLabel }) {
 	const sanitized = slices.map((slice) => ({
 		sliceKey: slice.key,
 		value: Math.max(0, sanitizeValue(slice.value))
 	}));
 	const total = sanitized.reduce((sum, slice) => sum + slice.value, 0);
-	const empty = {
-		arcs: [],
-		centerX,
-		centerY,
-		innerRadius: requestedInnerRadius
-	};
-	if (total <= 0 || outerRadius <= 0) return empty;
+	if (total <= 0) return [];
 	const kept = [];
 	let foldedValue = 0;
 	for (const slice of sanitized) {
-		const share = slice.value / total;
-		if (minSliceShare > 0 && share < minSliceShare) {
+		if (minSliceShare > 0 && slice.value / total < minSliceShare) {
 			foldedValue += slice.value;
 			continue;
 		}
+		if (slice.value === 0) continue;
 		kept.push({
-			sliceKey: slice.sliceKey,
+			id: slice.sliceKey,
 			label: getSliceLabel(slice.sliceKey),
 			value: slice.value,
-			explicit: getSliceColor?.(slice.sliceKey),
-			isAggregated: false
+			share: slice.value / total,
+			color: resolveColor(slice.sliceKey)
 		});
 	}
 	if (foldedValue > 0) kept.push({
-		sliceKey: null,
+		id: AGGREGATED_SLICE_KEY,
 		label: aggregatedLabel,
 		value: foldedValue,
-		isAggregated: true
+		share: foldedValue / total,
+		color: resolveColor(null)
 	});
-	const maxInset = kept.reduce((min, slice) => Math.min(min, slice.value), Infinity) / total * 2 * Math.PI * PIE_MAX_INSET_SHARE / 2;
+	return kept;
+}
+/** @internal The size-bound half: radii, center, arc paths and tooltip anchors. */
+function buildPieChartGeometry({ slices, plotWidth, plotHeight, isSolid }) {
+	const outerRadius = Math.max(0, Math.floor(Math.min(plotWidth, plotHeight) / 2));
+	const gapWidth = PIE_SLICE_GAP;
+	const requestedInnerRadius = isSolid ? 0 : Math.round(outerRadius * PIE_DONUT_INNER_RATIO);
+	const centerX = Math.round(plotWidth / 2);
+	const centerY = Math.round(plotHeight / 2);
+	const total = slices.reduce((sum, slice) => sum + slice.value, 0);
+	if (slices.length === 0 || total <= 0 || outerRadius <= 0) return {
+		arcs: [],
+		centerX,
+		centerY,
+		innerRadius: requestedInnerRadius,
+		outerRadius
+	};
+	const maxInset = slices.reduce((min, slice) => Math.min(min, slice.value), Number.POSITIVE_INFINITY) / total * 2 * Math.PI * PIE_MAX_INSET_SHARE / 2;
 	const solvedInnerRadius = gapWidth > 0 && maxInset > 0 ? gapWidth / 2 / Math.sin(maxInset) : 0;
 	const innerRadius = Math.max(requestedInnerRadius, Math.min(solvedInnerRadius, outerRadius * PIE_MAX_AUTO_INNER_RATIO));
+	const padRadius = Math.hypot(innerRadius, outerRadius);
+	const padAngle = padRadius > 0 ? gapWidth / padRadius : 0;
 	const layout = pie().sort(null).value((slice) => slice.value).padAngle(padAngle);
-	const arcGenerator = arc().innerRadius(innerRadius).outerRadius(outerRadius).cornerRadius(cornerRadius);
+	const arcPath = arc().innerRadius(innerRadius).outerRadius(outerRadius).cornerRadius(PIE_CORNER_RADIUS);
+	const anchorRadius = outerRadius + CHART_TOOLTIP_OFFSET;
 	return {
-		arcs: layout(kept).map((slot) => {
-			const slice = slot.data;
+		arcs: layout(slices).map((slot) => {
 			const midAngle = (slot.startAngle + slot.endAngle) / 2;
-			const anchorRadius = outerRadius + 8;
 			return {
-				id: slice.isAggregated ? AGGREGATED_SLICE_KEY : slice.sliceKey,
-				label: slice.label,
-				value: slice.value,
-				share: slice.value / total,
-				path: arcGenerator({
+				...slot.data,
+				path: arcPath({
 					startAngle: slot.startAngle,
 					endAngle: slot.endAngle,
 					padAngle: slot.padAngle
 				}) ?? "",
 				anchorX: centerX + Math.sin(midAngle) * anchorRadius,
-				anchorY: centerY - Math.cos(midAngle) * anchorRadius,
-				color: resolveColor({
-					sliceKey: slice.sliceKey,
-					explicit: slice.explicit
-				})
+				anchorY: centerY - Math.cos(midAngle) * anchorRadius
 			};
 		}),
 		centerX,
 		centerY,
-		innerRadius
+		innerRadius,
+		outerRadius
 	};
 }
 //#endregion
-export { buildPieChartGeometry };
+export { AGGREGATED_SLICE_KEY, PIE_CORNER_RADIUS, PIE_DONUT_INNER_RATIO, PIE_MAX_AUTO_INNER_RATIO, PIE_MAX_INSET_SHARE, PIE_MIN_SLICE_SHARE, buildPieChartGeometry, resolvePieChartSlices };