@eocrm/design-system 0.6.24 → 0.8.0

package/dist/components/FunnelChart/FunnelChart.js

@@ -0,0 +1,462 @@
+'use client';
+import { EmptyState } from "../EmptyState/EmptyState.js";
+import { LiveRegion } from "../LiveRegion/LiveRegion.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { ChartTooltip } from "../Chart/ChartTooltip.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
+import { useLocale } from "../../i18n/useLocale.js";
+import { mergeRefs } from "../_internal/refs.js";
+import { useSize } from "../_internal/useSize.js";
+import { TAPER_HOLD, formatPercent, orientationFor, resolveStages, stageGeometry, stageIndexAt } from "./funnelModel.js";
+import FunnelChart_module_default from "./FunnelChart.module.js";
+import { forwardRef, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import clsx from "clsx";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// src/components/FunnelChart/FunnelChart.tsx
+/** Pill box height and text-width estimate (SVG text can't be measured before paint). */
+var PILL_HEIGHT = 20;
+var PILL_CHAR_WIDTH = 7;
+/** Hero (first stage's value and label inside its band): px estimates, as for the pill. */
+var HERO_PADDING = 8;
+var HERO_MIN_HEIGHT = 72;
+var HERO_VALUE_CHAR_WIDTH = 15;
+var HERO_LABEL_CHAR_WIDTH = 12;
+/** Stage colour: the `color` slot, else step `i` of `n` on the one-hue ramp (computed by CSS). */
+var stageColor = (s, i, n) => s.slot !== null ? `var(--chart-series-${s.slot})` : `color-mix(in oklab, var(--funnel-chart-ramp-color), var(--funnel-chart-ramp-target) calc(var(--funnel-chart-ramp-max-mix) * ${n > 1 ? Math.round(i / (n - 1) * 1e3) / 1e3 : 0}))`;
+var colorStyle = (color) => ({ "--chart-series-color": color });
+/**
+* Stage funnel (pipeline, campaign) showing drop-off by height and step conversion by pill.
+* @see docs/components/FunnelChart.md
+*/
+var FunnelChart = forwardRef(function FunnelChart({ label, stages, formatValue, shape = "taper", onStageClick, onActiveStageChange, emptyMessage, footnote, className, ...rest }, ref) {
+	const t = useTranslation();
+	const locale = useLocale();
+	const resolved = useMemo(() => resolveStages(stages), [stages]);
+	const empty = resolved.every((s) => s.value === 0);
+	const hintId = useId();
+	const footnoteId = useId();
+	const hasFootnote = footnote != null && footnote !== false && footnote !== "";
+	const footnoteEl = hasFootnote && /* @__PURE__ */ jsx("div", {
+		id: footnoteId,
+		className: FunnelChart_module_default.footnote,
+		children: footnote
+	});
+	const [plotEl, setPlotEl] = useState(null);
+	const [setShapesEl, size, shapesEl] = useSize();
+	const [setRootEl, rootSize] = useSize();
+	const figureRef = useMemo(() => mergeRefs(ref, (el) => setRootEl(el)), [ref, setRootEl]);
+	const n = resolved.length;
+	const orientation = rootSize.width > 0 ? orientationFor(rootSize.width, n) : "horizontal";
+	const vertical = orientation === "vertical";
+	const geometry = useMemo(() => !empty && !vertical && size.width > 0 && size.height > 0 ? stageGeometry({
+		stages: resolved,
+		width: size.width,
+		height: size.height,
+		shape
+	}) : null, [
+		empty,
+		vertical,
+		resolved,
+		size.width,
+		size.height,
+		shape
+	]);
+	const heroValue = n > 0 ? formatValue(resolved[0].value) : "";
+	const hero = (() => {
+		if (!geometry || resolved[0].slot !== null) return null;
+		const g = geometry[0];
+		const colW = g.x1 - g.x0;
+		const thick = (s) => Math.max(6, s.heightRatio * size.height);
+		const a = thick(resolved[0]);
+		const b = n > 1 ? thick(resolved[1]) : a;
+		const hold = shape === "taper" ? colW * TAPER_HOLD : 0;
+		const textW = Math.max(heroValue.length * HERO_VALUE_CHAR_WIDTH, resolved[0].label.length * HERO_LABEL_CHAR_WIDTH);
+		const edge = colW / 2 + textW / 2 + HERO_PADDING;
+		const f = Math.min(1, Math.max(0, (edge - hold) / (colW - hold || 1)));
+		return textW + 16 <= colW && a + (b - a) * f >= HERO_MIN_HEIGHT ? {
+			x: g.cx,
+			y: g.cy
+		} : null;
+	})();
+	const bands = useMemo(() => !empty && vertical ? stageGeometry({
+		stages: resolved,
+		width: 100 * n,
+		height: 100,
+		shape
+	}) : null, [
+		empty,
+		vertical,
+		resolved,
+		n,
+		shape
+	]);
+	const [active, setActive] = useState(null);
+	const [activeSource, setActiveSource] = useState(null);
+	if (active !== null && active >= n) {
+		setActive(null);
+		setActiveSource(null);
+	}
+	const current = active !== null && active < n ? active : null;
+	const clickable = onStageClick !== void 0;
+	const activeKey = current === null ? null : resolved[current].key;
+	const lastKey = useRef(null);
+	useEffect(() => {
+		if (activeKey === lastKey.current) return;
+		lastKey.current = activeKey;
+		onActiveStageChange?.(current === null ? null : stages[current]);
+	});
+	const inspect = (index, source) => {
+		setActive(index);
+		setActiveSource(index === null ? null : source);
+	};
+	const onKeyDown = (e) => {
+		if (clickable && e.key !== "Escape") return;
+		let next;
+		switch (e.key) {
+			case "ArrowDown":
+			case "ArrowUp":
+				if (!vertical) return;
+				next = e.key === "ArrowDown" ? current === null ? 0 : Math.min(n - 1, current + 1) : current === null ? n - 1 : Math.max(0, current - 1);
+				break;
+			case "ArrowRight":
+				next = current === null ? 0 : Math.min(n - 1, current + 1);
+				break;
+			case "ArrowLeft":
+				next = current === null ? n - 1 : Math.max(0, current - 1);
+				break;
+			case "Home":
+				next = 0;
+				break;
+			case "End":
+				next = n - 1;
+				break;
+			case "Escape":
+				if (current === null) return;
+				next = null;
+				break;
+			default: return;
+		}
+		e.preventDefault();
+		inspect(next, "keyboard");
+	};
+	const pointerActive = activeSource === "pointer" && current !== null;
+	useEffect(() => {
+		if (!pointerActive || !plotEl) return;
+		const dismiss = (e) => {
+			if (e.composedPath().includes(plotEl)) return;
+			setActive(null);
+			setActiveSource(null);
+		};
+		document.addEventListener("pointerdown", dismiss, true);
+		return () => document.removeEventListener("pointerdown", dismiss, true);
+	}, [pointerActive, plotEl]);
+	const onPointer = (e) => {
+		if (!geometry || !shapesEl) return;
+		const rect = shapesEl.getBoundingClientRect();
+		inspect(stageIndexAt(size.width, n, e.clientX - rect.left), "pointer");
+	};
+	const onStripClick = (e) => {
+		if (!onStageClick || !shapesEl) return;
+		const rect = shapesEl.getBoundingClientRect();
+		const i = stageIndexAt(size.width, n, e.clientX - rect.left);
+		if (i !== null) onStageClick(stages[i], i);
+	};
+	const onBlur = (e) => {
+		if (!(e.relatedTarget instanceof Node && plotEl?.contains(e.relatedTarget))) inspect(null, null);
+	};
+	const pct = (ratio) => ratio === null ? t("funnelChart.noData") : formatPercent(ratio, locale);
+	const ofStage = (ratio, i) => t("funnelChart.ofStage", {
+		percent: pct(ratio),
+		stage: resolved[i].label
+	});
+	const notesFor = (i) => i === 0 ? [ofStage(resolved[0].shareRatio, 0)] : [ofStage(resolved[i].stepRatio, i - 1), ofStage(resolved[i].shareRatio, 0)];
+	const buttonName = (i) => {
+		const s = resolved[i];
+		const parts = [`${s.label}: ${formatValue(s.value)}`];
+		if (i > 0 && s.stepRatio !== null) parts.push(ofStage(s.stepRatio, i - 1));
+		if (s.shareRatio !== null) parts.push(ofStage(s.shareRatio, 0));
+		return `${parts.join(". ")}.`;
+	};
+	const renderCell = (s, i) => {
+		const content = vertical ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: FunnelChart_module_default.bandTrack,
+				"data-band": "",
+				children: bands && /* @__PURE__ */ jsx("svg", {
+					className: FunnelChart_module_default.svg,
+					viewBox: `0 ${100 * i} 100 100`,
+					preserveAspectRatio: "none",
+					"aria-hidden": "true",
+					focusable: "false",
+					children: /* @__PURE__ */ jsx("path", {
+						className: FunnelChart_module_default.shape,
+						d: bands[i].d,
+						transform: "matrix(0 1 1 0 0 0)"
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: FunnelChart_module_default.swatch,
+				"data-swatch": ""
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: FunnelChart_module_default.label,
+				children: s.label
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: FunnelChart_module_default.value,
+				children: formatValue(s.value)
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: FunnelChart_module_default.step,
+				children: i > 0 && s.stepRatio !== null ? /* @__PURE__ */ jsx("span", {
+					className: FunnelChart_module_default.rowPill,
+					children: pct(s.stepRatio)
+				}) : t("funnelChart.noData")
+			})
+		] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			className: FunnelChart_module_default.value,
+			children: formatValue(s.value)
+		}), /* @__PURE__ */ jsx("span", {
+			className: FunnelChart_module_default.label,
+			children: s.label
+		})] });
+		const common = {
+			className: FunnelChart_module_default.cell,
+			style: colorStyle(stageColor(s, i, n)),
+			"data-stage-cell": s.key,
+			"data-dimmed": dimmed(i),
+			"data-hero-cell": i === 0 && hero ? "" : void 0,
+			onPointerEnter: vertical ? () => inspect(i, "pointer") : void 0
+		};
+		return onStageClick ? /* @__PURE__ */ jsx("button", {
+			...common,
+			type: "button",
+			"aria-label": buttonName(i),
+			onFocus: () => inspect(i, "focus"),
+			onClick: () => onStageClick(stages[i], i),
+			children: content
+		}, s.key) : /* @__PURE__ */ jsx("div", {
+			...common,
+			"aria-hidden": "true",
+			children: content
+		}, s.key);
+	};
+	const stage = current === null ? null : resolved[current];
+	const notes = current === null ? [] : notesFor(current);
+	const rows = stage ? [{
+		key: "value",
+		label: t("funnelChart.value"),
+		slot: 0,
+		color: stageColor(stage, current, n),
+		comparison: false,
+		value: formatValue(stage.value)
+	}] : [];
+	const anchorX = current !== null && geometry ? geometry[current].cx : void 0;
+	const anchorY = stage && geometry ? geometry[current].cy - Math.max(3, stage.heightRatio * size.height / 2) : void 0;
+	const horizontalPoint = useMemo(() => anchorX === void 0 || anchorY === void 0 ? null : {
+		x: anchorX,
+		y: anchorY
+	}, [anchorX, anchorY]);
+	const [verticalPoint, setVerticalPoint] = useState(null);
+	useLayoutEffect(() => {
+		const row = vertical && activeKey !== null && plotEl ? plotEl.querySelector(`[data-stage-cell="${CSS.escape(activeKey)}"]`) : null;
+		const band = row?.querySelector("[data-band]");
+		if (!row || !band || !plotEl) {
+			setVerticalPoint(null);
+			return;
+		}
+		const measure = () => {
+			const p = plotEl.getBoundingClientRect();
+			const b = band.getBoundingClientRect();
+			const x = b.left - p.left + b.width / 2;
+			const y = b.top - p.top;
+			setVerticalPoint((prev) => prev && prev.x === x && prev.y === y ? prev : {
+				x,
+				y
+			});
+		};
+		if (activeSource === "keyboard") row.scrollIntoView?.({ block: "nearest" });
+		measure();
+		plotEl.addEventListener("scroll", measure, { passive: true });
+		return () => plotEl.removeEventListener("scroll", measure);
+	}, [
+		vertical,
+		activeKey,
+		activeSource,
+		plotEl,
+		rootSize.width,
+		rootSize.height
+	]);
+	const point = vertical ? verticalPoint : horizontalPoint;
+	const liveText = activeSource === "keyboard" && stage ? `${stage.label}: ${formatValue(stage.value)}. ${notes.join(". ")}.` : "";
+	const dimmed = (i) => current !== null && i !== current ? "" : void 0;
+	if (empty) return /* @__PURE__ */ jsxs("figure", {
+		...rest,
+		ref,
+		role: "figure",
+		"aria-label": label,
+		"aria-labelledby": void 0,
+		"data-empty": "",
+		"data-footnote": hasFootnote || void 0,
+		className: clsx(FunnelChart_module_default.root, className),
+		children: [/* @__PURE__ */ jsx(EmptyState, {
+			title: emptyMessage || t("chart.empty"),
+			size: "sm"
+		}), footnoteEl]
+	});
+	return /* @__PURE__ */ jsxs("figure", {
+		...rest,
+		ref: figureRef,
+		role: "figure",
+		"aria-label": label,
+		"aria-labelledby": void 0,
+		"data-orientation": orientation,
+		"data-shape": shape,
+		"data-footnote": hasFootnote || void 0,
+		className: clsx(FunnelChart_module_default.root, className),
+		children: [
+			!clickable && /* @__PURE__ */ jsx(VisuallyHidden, {
+				id: hintId,
+				children: t("funnelChart.keyboardHint")
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: setPlotEl,
+				className: FunnelChart_module_default.plot,
+				role: "group",
+				"aria-label": label,
+				"aria-describedby": [!clickable && hintId, hasFootnote && footnoteId].filter(Boolean).join(" ") || void 0,
+				tabIndex: clickable ? void 0 : 0,
+				"data-clickable": clickable || void 0,
+				onKeyDown,
+				onPointerMove: onPointer,
+				onPointerDown: onPointer,
+				onPointerLeave: (e) => e.pointerType !== "touch" && activeSource === "pointer" && inspect(null, null),
+				onBlur,
+				children: vertical ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+					className: FunnelChart_module_default.header,
+					"aria-hidden": "true",
+					"data-funnel-header": "",
+					onPointerEnter: () => activeSource === "pointer" && inspect(null, null),
+					children: [
+						/* @__PURE__ */ jsx("span", {}),
+						/* @__PURE__ */ jsx("span", {}),
+						/* @__PURE__ */ jsx("span", { children: t("funnelChart.stage") }),
+						/* @__PURE__ */ jsx("span", {
+							className: FunnelChart_module_default.headerValue,
+							children: t("funnelChart.value")
+						}),
+						/* @__PURE__ */ jsx("span", { children: t("funnelChart.vsPrevious") })
+					]
+				}), resolved.map(renderCell)] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+					ref: setShapesEl,
+					className: FunnelChart_module_default.shapes,
+					onClick: onStripClick,
+					children: geometry && /* @__PURE__ */ jsx("svg", {
+						className: FunnelChart_module_default.svg,
+						width: size.width,
+						height: size.height,
+						"aria-hidden": "true",
+						focusable: "false",
+						children: resolved.map((s, i) => {
+							const g = geometry[i];
+							const pill = i > 0 && s.stepRatio !== null ? pct(s.stepRatio) : null;
+							const pillWidth = pill ? pill.length * PILL_CHAR_WIDTH + 16 : 0;
+							return /* @__PURE__ */ jsxs("g", {
+								className: FunnelChart_module_default.stage,
+								style: colorStyle(stageColor(s, i, n)),
+								"data-stage": s.key,
+								"data-dimmed": dimmed(i),
+								children: [
+									/* @__PURE__ */ jsx("path", {
+										className: FunnelChart_module_default.shape,
+										d: g.d
+									}),
+									i === 0 && hero && /* @__PURE__ */ jsxs("g", {
+										"data-hero": "",
+										children: [/* @__PURE__ */ jsx("text", {
+											className: FunnelChart_module_default.heroValue,
+											x: hero.x,
+											y: hero.y,
+											dy: "-0.15em",
+											textAnchor: "middle",
+											children: heroValue
+										}), /* @__PURE__ */ jsx("text", {
+											className: FunnelChart_module_default.heroLabel,
+											x: hero.x,
+											y: hero.y,
+											dy: "1.1em",
+											textAnchor: "middle",
+											children: s.label
+										})]
+									}),
+									pill && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("rect", {
+										className: FunnelChart_module_default.pill,
+										x: g.cx - pillWidth / 2,
+										y: g.cy - PILL_HEIGHT / 2,
+										width: pillWidth,
+										height: PILL_HEIGHT,
+										rx: PILL_HEIGHT / 2
+									}), /* @__PURE__ */ jsx("text", {
+										className: FunnelChart_module_default.pillText,
+										x: g.cx,
+										y: g.cy,
+										dy: "0.35em",
+										textAnchor: "middle",
+										children: pill
+									})] })
+								]
+							}, s.key);
+						})
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: FunnelChart_module_default.footer,
+					children: resolved.map(renderCell)
+				})] })
+			}),
+			footnoteEl,
+			/* @__PURE__ */ jsx(ChartTooltip, {
+				anchor: plotEl,
+				point,
+				title: stage?.label ?? "",
+				rows,
+				notes
+			}),
+			/* @__PURE__ */ jsx(LiveRegion, { children: liveText }),
+			/* @__PURE__ */ jsx(VisuallyHidden, {
+				as: "div",
+				children: /* @__PURE__ */ jsxs("table", { children: [
+					/* @__PURE__ */ jsx("caption", { children: label }),
+					/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: t("funnelChart.stage")
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: t("funnelChart.value")
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: t("funnelChart.stepConversion")
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: t("funnelChart.shareOfFirst")
+						})
+					] }) }),
+					/* @__PURE__ */ jsx("tbody", { children: resolved.map((s) => /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							scope: "row",
+							children: s.label
+						}),
+						/* @__PURE__ */ jsx("td", { children: formatValue(s.value) }),
+						/* @__PURE__ */ jsx("td", { children: pct(s.stepRatio) }),
+						/* @__PURE__ */ jsx("td", { children: pct(s.shareRatio) })
+					] }, s.key)) })
+				] })
+			})
+		]
+	});
+});
+export { FunnelChart };

package/dist/components/FunnelChart/FunnelChart.module.js

@@ -0,0 +1,47 @@
+import "./FunnelChart.css";
+// src/components/FunnelChart/FunnelChart.module.scss
+var root = "FunnelChart__root__HEQNn";
+var footnote = "FunnelChart__footnote__IZJld";
+var plot = "FunnelChart__plot__c_7SO";
+var shapes = "FunnelChart__shapes__zDOtJ";
+var svg = "FunnelChart__svg__jPsgF";
+var stage = "FunnelChart__stage__yU1Ol";
+var shape = "FunnelChart__shape__stBgT";
+var pill = "FunnelChart__pill__zMTLv";
+var heroValue = "FunnelChart__heroValue__LhYwD";
+var heroLabel = "FunnelChart__heroLabel__VtqKW";
+var pillText = "FunnelChart__pillText__8PK6t";
+var footer = "FunnelChart__footer__nVBte";
+var cell = "FunnelChart__cell__44vor";
+var value = "FunnelChart__value__knfsU";
+var label = "FunnelChart__label__OWPkh";
+var header = "FunnelChart__header__kzFJW";
+var headerValue = "FunnelChart__headerValue___ljia";
+var swatch = "FunnelChart__swatch__3ANBw";
+var step = "FunnelChart__step__Xz8NZ";
+var bandTrack = "FunnelChart__bandTrack__D8iC-";
+var rowPill = "FunnelChart__rowPill__Zjqy1";
+var FunnelChart_module_default = {
+	root,
+	footnote,
+	plot,
+	shapes,
+	svg,
+	stage,
+	shape,
+	pill,
+	heroValue,
+	heroLabel,
+	pillText,
+	footer,
+	cell,
+	value,
+	label,
+	header,
+	headerValue,
+	swatch,
+	step,
+	bandTrack,
+	rowPill
+};
+export { bandTrack, cell, FunnelChart_module_default as default, footer, footnote, header, headerValue, heroLabel, heroValue, label, pill, pillText, plot, root, rowPill, shape, shapes, stage, step, svg, swatch, value };

package/dist/components/FunnelChart/funnelModel.d.ts

@@ -0,0 +1,64 @@
+/** Chart-palette slot (`--chart-series-N`). */
+export type FunnelSlot = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+/** Silhouette between stages: hold then a short straight taper, or a full-column trapezoid. */
+export type FunnelShape = 'taper' | 'sharp';
+/** One funnel stage as supplied by the consumer. */
+export interface FunnelStage {
+    /** Stable identity (React key). */
+    key: string;
+    /** Human name shown in labels, tooltip and data table. */
+    label: string;
+    /** Count for this stage. Non-finite or negative values are treated as 0. */
+    value: number;
+    /** Palette slot to highlight this stage with. Slot hues follow `data-accent` and carry no meaning, so choose for contrast: slot 2 always contrasts with the ramp. Omit to follow the one-hue ramp. */
+    color?: FunnelSlot;
+}
+/** A stage with sanitised value, resolved colour slot and derived ratios. */
+export interface ResolvedStage {
+    key: string;
+    label: string;
+    /** Sanitised: non-finite or negative becomes 0. */
+    value: number;
+    /** The explicit `color` slot, or null for the ramp colour. */
+    slot: FunnelSlot | null;
+    /** `value / max(values)`; 0 when the max is 0. */
+    heightRatio: number;
+    /** `value / previous value`; null for the first stage or when the previous is <= 0. */
+    stepRatio: number | null;
+    /** `value / first value`; null when the first is <= 0. */
+    shareRatio: number | null;
+}
+/** Per-stage width in px below which the layout goes vertical. */
+export declare const MIN_STAGE_WIDTH = 96;
+/** Minimum drawn height in px of a stage, so zero values stay hoverable. */
+export declare const MIN_THICKNESS = 6;
+/** Taper shape: fraction of the column held at the stage's height before the diagonal starts. */
+export declare const TAPER_HOLD = 0.75;
+/** Sanitise values and compute ratios. */
+export declare function resolveStages(stages: readonly FunnelStage[]): ResolvedStage[];
+/** Horizontal while each stage gets at least `MIN_STAGE_WIDTH` px, otherwise vertical. */
+export declare function orientationFor(width: number, count: number): 'horizontal' | 'vertical';
+/** Path and anchor points of one stage, in SVG user units. */
+export interface StageGeometry {
+    /** SVG path of the stage's closed outline. */
+    d: string;
+    /** Column centre x. */
+    cx: number;
+    /** Vertical centre (shared by all stages). */
+    cy: number;
+    /** Column left edge. */
+    x0: number;
+    /** Column right edge. */
+    x1: number;
+}
+/** Outline of each stage, vertically centred; each stage tapers into the next one's height. */
+export declare function stageGeometry(args: {
+    stages: readonly ResolvedStage[];
+    width: number;
+    height: number;
+    shape: FunnelShape;
+}): StageGeometry[];
+/** Column index under `x`, or null outside `[0, width)`. */
+export declare function stageIndexAt(width: number, count: number, x: number): number | null;
+/** Percent string; one decimal for ratios under 1%, otherwise whole percent. */
+export declare function formatPercent(ratio: number, locale: string): string;

package/dist/components/FunnelChart/funnelModel.js

@@ -0,0 +1,69 @@
+/** Taper shape: fraction of the column held at the stage's height before the diagonal starts. */
+var TAPER_HOLD = .75;
+/** Sanitise values and compute ratios. */
+function resolveStages(stages) {
+	const values = stages.map((s) => Number.isFinite(s.value) && s.value > 0 ? s.value : 0);
+	const max = Math.max(0, ...values);
+	const first = values[0] ?? 0;
+	return stages.map((s, i) => ({
+		key: s.key,
+		label: s.label,
+		value: values[i],
+		slot: s.color ?? null,
+		heightRatio: max > 0 ? values[i] / max : 0,
+		stepRatio: i > 0 && values[i - 1] > 0 ? values[i] / values[i - 1] : null,
+		shareRatio: first > 0 ? values[i] / first : null
+	}));
+}
+/** Horizontal while each stage gets at least `MIN_STAGE_WIDTH` px, otherwise vertical. */
+function orientationFor(width, count) {
+	return width / Math.max(count, 1) >= 96 ? "horizontal" : "vertical";
+}
+var r2 = (n) => Math.round(n * 100) / 100;
+/** Outline of each stage, vertically centred; each stage tapers into the next one's height. */
+function stageGeometry(args) {
+	const { stages, width, height, shape } = args;
+	const colW = width / stages.length;
+	const mid = height / 2;
+	const half = (s) => Math.max(3, s.heightRatio * height / 2);
+	return stages.map((s, i) => {
+		const x0 = i * colW;
+		const x1 = (i + 1) * colW;
+		const a = half(s);
+		const last = i === stages.length - 1;
+		const b = last ? a : half(stages[i + 1]);
+		const [t0, t1, b0, b1] = [
+			mid - a,
+			mid - b,
+			mid + b,
+			mid + a
+		].map(r2);
+		const p = (x, y) => `${r2(x)},${y}`;
+		let d;
+		if (shape === "sharp" || last) d = `M ${p(x0, t0)} L ${p(x1, t1)} L ${p(x1, b0)} L ${p(x0, b1)} Z`;
+		else {
+			const xh = x0 + colW * TAPER_HOLD;
+			d = `M ${p(x0, t0)} L ${p(xh, t0)} L ${p(x1, t1)} L ${p(x1, b0)} L ${p(xh, b1)} L ${p(x0, b1)} Z`;
+		}
+		return {
+			d,
+			cx: r2(x0 + colW / 2),
+			cy: mid,
+			x0: r2(x0),
+			x1: r2(x1)
+		};
+	});
+}
+/** Column index under `x`, or null outside `[0, width)`. */
+function stageIndexAt(width, count, x) {
+	if (!(x >= 0 && x < width) || count <= 0) return null;
+	return Math.min(count - 1, Math.floor(x / width * count));
+}
+/** Percent string; one decimal for ratios under 1%, otherwise whole percent. */
+function formatPercent(ratio, locale) {
+	return new Intl.NumberFormat(locale, {
+		style: "percent",
+		maximumFractionDigits: ratio > 0 && ratio < .01 ? 1 : 0
+	}).format(ratio);
+}
+export { TAPER_HOLD, formatPercent, orientationFor, resolveStages, stageGeometry, stageIndexAt };

package/dist/components/FunnelChart/index.d.ts

@@ -0,0 +1,2 @@
+export { FunnelChart } from './FunnelChart.js';
+export type { FunnelChartProps, FunnelShape, FunnelSlot, FunnelStage } from './FunnelChart.js';