@star-ng/ui 0.0.0-stage → 0.2.0

package/fesm2022/star-ng-ui-chart.mjs

@@ -0,0 +1,1904 @@
+import { _IdGenerator } from "@angular/cdk/a11y";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, computed, inject, input, linkedSignal, signal } from "@angular/core";
+import { STAR_UI_TEXT } from "@star-ng/ui/core";
+const LIMIT = 1e300;
+const TWO_PI = Math.PI * 2;
+function toFinite(value, fallback = 0) {
+	if (typeof value !== "number" || !Number.isFinite(value)) return fallback;
+	return Math.max(-1e300, Math.min(LIMIT, value));
+}
+function clean(value, step) {
+	const decimals = Math.min(100, Math.max(0, 2 - Math.floor(Math.log10(Math.abs(step) || 1))));
+	const rounded = +value.toFixed(decimals);
+	return rounded === 0 ? 0 : rounded;
+}
+function niceScale(min, max, options = {}) {
+	let lo = toFinite(min);
+	let hi = toFinite(max);
+	if (lo > hi) [lo, hi] = [hi, lo];
+	if (options.includeZero) {
+		lo = Math.min(lo, 0);
+		hi = Math.max(hi, 0);
+	}
+	if (lo === hi) {
+		if (lo === 0) hi = 1;
+		else {
+			const pad = Math.abs(lo) * .1;
+			lo -= pad;
+			hi += pad;
+		}
+	}
+	const intervals = Math.max(1, Math.round(options.intervals ?? 4));
+	const rough = (hi - lo) / intervals;
+	if (!(rough > 0) || !Number.isFinite(rough)) return fallbackScale(lo, hi);
+	const power = 10 ** Math.floor(Math.log10(rough));
+	const step = [
+		1,
+		2,
+		2.5,
+		5,
+		10
+	].map((m) => m * power).find((s) => s >= rough * (1 - 1e-12));
+	const first = Math.floor(lo / step + 1e-9) * step;
+	const last = Math.ceil(hi / step - 1e-9) * step;
+	const count = Math.round((last - first) / step);
+	if (!Number.isFinite(count) || count < 1 || count > 24) return fallbackScale(lo, hi);
+	const ticks = Array.from({ length: count + 1 }, (_, i) => clean(first + i * step, step));
+	return {
+		min: ticks[0],
+		max: ticks[count],
+		step,
+		ticks
+	};
+}
+function fallbackScale(lo, hi) {
+	return {
+		min: lo,
+		max: hi,
+		step: hi - lo,
+		ticks: lo === hi ? [lo] : [lo, hi]
+	};
+}
+function scalePosition(value, scale, from, to) {
+	const span = scale.max - scale.min;
+	if (!(span > 0)) return from;
+	return from + (toFinite(value) - scale.min) / span * (to - from);
+}
+function tickDecimals(ticks) {
+	for (let digits = 0; digits <= 10; digits++) {
+		const factor = 10 ** digits;
+		if (ticks.every((t) => Math.abs(t * factor - Math.round(t * factor)) < 1e-6)) return digits;
+	}
+	return 10;
+}
+function stackColumns(series, categories, percent = false) {
+	return Array.from({ length: Math.max(0, categories) }, (_, i) => {
+		const values = series.map((s) => toFinite(s[i]));
+		const absolute = values.reduce((sum, v) => sum + Math.abs(v), 0);
+		const factor = percent ? absolute > 0 ? 100 / absolute : 0 : 1;
+		let up = 0;
+		let down = 0;
+		const segments = values.map((value, s) => {
+			const size = value * factor;
+			if (value >= 0) {
+				const start = up;
+				up += size;
+				return {
+					series: s,
+					value,
+					start,
+					end: up
+				};
+			}
+			const start = down;
+			down += size;
+			return {
+				series: s,
+				value,
+				start,
+				end: down
+			};
+		});
+		const positive = values.filter((v) => v > 0).reduce((a, b) => a + b, 0);
+		const negative = values.filter((v) => v < 0).reduce((a, b) => a + b, 0);
+		return {
+			segments,
+			positive,
+			negative,
+			total: positive + negative
+		};
+	});
+}
+function stackExtent(columns) {
+	let min = 0;
+	let max = 0;
+	for (const column of columns) for (const segment of column.segments) {
+		min = Math.min(min, segment.start, segment.end);
+		max = Math.max(max, segment.start, segment.end);
+	}
+	return {
+		min,
+		max
+	};
+}
+function n(value) {
+	return +value.toFixed(2);
+}
+function polarPoint(radius, angle, cx = 0, cy = 0) {
+	return {
+		x: cx + radius * Math.cos(angle),
+		y: cy + radius * Math.sin(angle)
+	};
+}
+function axisAngles(count, start = -Math.PI / 2) {
+	const total = Math.max(0, Math.floor(count));
+	return Array.from({ length: total }, (_, i) => start + i * TWO_PI / total);
+}
+function polygonPath(points) {
+	if (!points.length) return "";
+	return points.map((p, i) => `${i ? "L" : "M"}${n(p.x)},${n(p.y)}`).join("") + "Z";
+}
+function circlePath(radius) {
+	const r = n(Math.max(0, radius));
+	return r ? `M${-r},0A${r},${r} 0 1 1 ${r},0A${r},${r} 0 1 1 ${-r},0Z` : "";
+}
+function ringPath(angles, radius) {
+	if (!(radius > 0)) return "";
+	return angles.length >= 3 ? polygonPath(angles.map((a) => polarPoint(radius, a))) : circlePath(radius);
+}
+function sectorPath(inner, outer, a0, a1) {
+	const sweep = a1 - a0;
+	const ro = Math.max(0, outer);
+	const ri = Math.max(0, Math.min(inner, ro));
+	if (!(ro > 0) || !(sweep > 0) || ro === ri) return "";
+	if (sweep >= TWO_PI - 1e-6) {
+		const disc = `M0,${-n(ro)}A${n(ro)},${n(ro)} 0 1 1 -0.01,${-n(ro)}Z`;
+		return ri > 0 ? `${disc}M0,${-n(ri)}A${n(ri)},${n(ri)} 0 1 0 0.01,${-n(ri)}Z` : disc;
+	}
+	const large = sweep > Math.PI ? 1 : 0;
+	const p = (r, a) => {
+		const { x, y } = polarPoint(r, a);
+		return `${n(x)},${n(y)}`;
+	};
+	return ri > 0 ? `M${p(ro, a0)}A${n(ro)},${n(ro)} 0 ${large} 1 ${p(ro, a1)}L${p(ri, a1)}A${n(ri)},${n(ri)} 0 ${large} 0 ${p(ri, a0)}Z` : `M0,0L${p(ro, a0)}A${n(ro)},${n(ro)} 0 ${large} 1 ${p(ro, a1)}Z`;
+}
+function linearRadius(value, scale, radius) {
+	const span = scale.max - scale.min;
+	if (!(span > 0)) return 0;
+	return Math.max(0, Math.min(radius, (toFinite(value) - scale.min) / span * radius));
+}
+function areaRadius(value, max, radius) {
+	const v = Math.max(0, toFinite(value));
+	if (!(max > 0) || v === 0) return 0;
+	return radius * Math.sqrt(Math.min(1, v / max));
+}
+function polarSectors(values, max, radius) {
+	const angles = axisAngles(values.length);
+	const half = values.length ? Math.PI / values.length : 0;
+	return values.map((raw, index) => {
+		const value = Math.max(0, toFinite(raw));
+		const mid = angles[index];
+		return {
+			index,
+			value,
+			radius: areaRadius(value, max, radius),
+			start: mid - half,
+			end: mid + half,
+			mid
+		};
+	});
+}
+function truncateLabel(label, max) {
+	const chars = Array.from(String(label ?? ""));
+	const limit = Math.floor(max);
+	if (chars.length <= limit) return chars.join("");
+	if (limit < 1) return "";
+	return chars.slice(0, limit - 1).join("").trimEnd() + "…";
+}
+function labelAnchor(angle) {
+	const cos = Math.cos(angle);
+	return cos > .3 ? "start" : cos < -.3 ? "end" : "middle";
+}
+function labelOffset(angle) {
+	const sin = Math.sin(angle);
+	return sin < -.3 ? "0" : sin > .3 ? "0.9em" : "0.35em";
+}
+function cleanPoints(points) {
+	const result = [];
+	points.forEach((point, index) => {
+		if (!point) return;
+		const { x, y } = point;
+		if (typeof x === "number" && Number.isFinite(x) && typeof y === "number" && Number.isFinite(y)) result.push({
+			x: toFinite(x),
+			y: toFinite(y),
+			index
+		});
+	});
+	return result;
+}
+function scatterScales(points) {
+	if (!points.length) return {
+		x: niceScale(0, 1),
+		y: niceScale(0, 1)
+	};
+	const xs = points.map((p) => p.x);
+	const ys = points.map((p) => p.y);
+	return {
+		x: niceScale(Math.min(...xs), Math.max(...xs)),
+		y: niceScale(Math.min(...ys), Math.max(...ys))
+	};
+}
+function markerPath(index, cx, cy, radius) {
+	const r = Math.max(0, radius);
+	const at = (dx, dy) => ({
+		x: cx + dx * r,
+		y: cy + dy * r
+	});
+	switch ((Math.floor(index) % 8 + 8) % 8) {
+		case 0: return `M${n(cx - r)},${n(cy)}A${n(r)},${n(r)} 0 1 0 ${n(cx + r)},${n(cy)}A${n(r)},${n(r)} 0 1 0 ${n(cx - r)},${n(cy)}Z`;
+		case 1: return polygonPath([
+			at(-.88, -.88),
+			at(.88, -.88),
+			at(.88, .88),
+			at(-.88, .88)
+		]);
+		case 2: return polygonPath([
+			at(0, -1.25),
+			at(1.25, 0),
+			at(0, 1.25),
+			at(-1.25, 0)
+		]);
+		case 3: return polygonPath([
+			at(0, -1.2),
+			at(1.1, .85),
+			at(-1.1, .85)
+		]);
+		case 4: return polygonPath([
+			at(0, 1.2),
+			at(1.1, -.85),
+			at(-1.1, -.85)
+		]);
+		case 5: return polygonPath(plus(at, 0));
+		case 6: return polygonPath(plus(at, Math.PI / 4));
+		default: return polygonPath(axisAngles(5).map((a) => polarPoint(1.15 * r, a, cx, cy)));
+	}
+}
+function plus(at, turn) {
+	const a = 1.2;
+	const b = .4;
+	const outline = [
+		[-.4, -1.2],
+		[b, -1.2],
+		[b, -.4],
+		[a, -.4],
+		[a, b],
+		[b, b],
+		[b, a],
+		[-.4, a],
+		[-.4, b],
+		[-1.2, b],
+		[-1.2, -.4],
+		[-.4, -.4]
+	];
+	const cos = Math.cos(turn);
+	const sin = Math.sin(turn);
+	return outline.map(([x, y]) => at(x * cos - y * sin, x * sin + y * cos));
+}
+const STAR_CHART_SLOTS = 8;
+const DOUGHNUT_SLOTS = 4;
+const W = 640;
+const H = 280;
+const PAD = {
+	top: 16,
+	right: 16,
+	bottom: 36,
+	left: 48
+};
+const SCATTER_PAD = {
+	top: 24,
+	right: 20,
+	bottom: 44,
+	left: 56
+};
+const RADIAL_W = 520;
+const RADIAL_H = 300;
+const RADIAL = 105;
+const RADIAL_LABEL_CHARS = 18;
+const MARKER_RADIUS = 5;
+function valueOf(element) {
+	return element !== null && typeof element === "object" ? element.y : element;
+}
+function extentOf(values) {
+	let min = 1e400;
+	let max = -1e400;
+	for (const raw of values) {
+		const v = toFinite(raw, NaN);
+		if (v < min) min = v;
+		if (v > max) max = v;
+	}
+	return min <= max ? {
+		min,
+		max
+	} : {
+		min: 0,
+		max: 0
+	};
+}
+var StarChart = class StarChart {
+	text = inject(STAR_UI_TEXT);
+	W = W;
+	H = H;
+	RW = RADIAL_W;
+	RH = RADIAL_H;
+	PAD = PAD;
+	SP = SCATTER_PAD;
+	ids = inject(_IdGenerator);
+	titleId = this.ids.getId("star-chart-");
+	descriptionId = this.ids.getId("star-chart-description-");
+	type = input("bar", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+	percent = input(false, {
+		...ngDevMode ? { debugName: "percent" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	round = computed(() => this.type() === "doughnut" || this.type() === "pie", ...ngDevMode ? [{ debugName: "round" }] : /* istanbul ignore next */ []);
+	kind = computed(() => {
+		switch (this.type()) {
+			case "doughnut":
+			case "pie": return "round";
+			case "radar": return "radar";
+			case "polar-area": return "polar";
+			case "scatter": return "scatter";
+			default: return "axis";
+		}
+	}, ...ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []);
+	title = input.required(...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	labels = input([], ...ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []);
+	series = input([], ...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
+	categoryLabel = input(null, ...ngDevMode ? [{ debugName: "categoryLabel" }] : /* istanbul ignore next */ []);
+	valueLabel = input(null, ...ngDevMode ? [{ debugName: "valueLabel" }] : /* istanbul ignore next */ []);
+	locale = input(void 0, ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	table = input(false, {
+		...ngDevMode ? { debugName: "table" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	showTable = linkedSignal(() => this.table(), ...ngDevMode ? [{ debugName: "showTable" }] : /* istanbul ignore next */ []);
+	hover = signal(null, ...ngDevMode ? [{ debugName: "hover" }] : /* istanbul ignore next */ []);
+	numberFormat = computed(() => new Intl.NumberFormat(this.locale(), { maximumFractionDigits: 1 }), ...ngDevMode ? [{ debugName: "numberFormat" }] : /* istanbul ignore next */ []);
+	preciseFormat = computed(() => new Intl.NumberFormat(this.locale(), { maximumFractionDigits: 3 }), ...ngDevMode ? [{ debugName: "preciseFormat" }] : /* istanbul ignore next */ []);
+	format(value) {
+		return this.numberFormat().format(value);
+	}
+	precise(value) {
+		return this.preciseFormat().format(value);
+	}
+	tickFormatter(ticks, suffix = "") {
+		const digits = tickDecimals(ticks);
+		const formatter = new Intl.NumberFormat(this.locale(), { maximumFractionDigits: digits });
+		return (value) => formatter.format(value) + suffix;
+	}
+	color(index) {
+		return `var(--star-chart-${index % 8 + 1})`;
+	}
+	numeric = computed(() => this.series().map((s) => ({
+		label: s.label,
+		data: s.data.map(valueOf)
+	})), ...ngDevMode ? [{ debugName: "numeric" }] : /* istanbul ignore next */ []);
+	drawn = computed(() => this.numeric().slice(0, 8), ...ngDevMode ? [{ debugName: "drawn" }] : /* istanbul ignore next */ []);
+	cell(series, index) {
+		return this.format(toFinite(series?.data[index]));
+	}
+	firstHeader = computed(() => this.round() ? this.text.chartCategory : this.kind() === "scatter" ? this.text.chartSeries : this.categoryLabel() ?? this.text.chartCategory, ...ngDevMode ? [{ debugName: "firstHeader" }] : /* istanbul ignore next */ []);
+	xName = computed(() => this.categoryLabel() ?? this.text.chartX, ...ngDevMode ? [{ debugName: "xName" }] : /* istanbul ignore next */ []);
+	yName = computed(() => this.valueLabel() ?? this.text.chartY, ...ngDevMode ? [{ debugName: "yName" }] : /* istanbul ignore next */ []);
+	valueName = computed(() => this.valueLabel() ?? this.series()[0]?.label ?? this.text.chartValue, ...ngDevMode ? [{ debugName: "valueName" }] : /* istanbul ignore next */ []);
+	legend = computed(() => {
+		if (this.round()) return this.slices().map((s) => ({
+			label: s.label,
+			color: s.color,
+			shape: ""
+		}));
+		if (this.kind() === "polar") return [];
+		const marked = this.kind() === "radar" || this.kind() === "scatter";
+		return this.drawn().map((s, i) => ({
+			label: s.label,
+			color: this.color(i),
+			shape: marked ? markerPath(i, 0, 0, MARKER_RADIUS) : ""
+		}));
+	}, ...ngDevMode ? [{ debugName: "legend" }] : /* istanbul ignore next */ []);
+	description = computed(() => {
+		const kind = this.kind();
+		const kinds = {
+			bar: this.text.chartTypeBar,
+			"stacked-bar": this.text.chartTypeStackedBar,
+			line: this.text.chartTypeLine,
+			area: this.text.chartTypeArea,
+			doughnut: this.text.chartTypeDoughnut,
+			pie: this.text.chartTypePie,
+			radar: this.text.chartTypeRadar,
+			"polar-area": this.text.chartTypePolarArea,
+			scatter: this.text.chartTypeScatter
+		};
+		let seriesCount = this.drawn().length;
+		let items = this.labels().length;
+		let values;
+		if (kind === "scatter") {
+			const points = this.scatterRows();
+			items = points.length;
+			values = points.map((p) => p.y);
+		} else if (kind === "round" || kind === "polar") {
+			seriesCount = Math.min(1, seriesCount);
+			values = this.numeric()[0]?.data ?? [];
+		} else values = this.drawn().flatMap((s) => s.data);
+		const { min, max } = extentOf(values);
+		return this.text.chartDescription(kinds[this.type()], seriesCount, items, this.format(min), this.format(max));
+	}, ...ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []);
+	stack = computed(() => stackColumns(this.drawn().map((s) => s.data), this.labels().length, this.percent()), ...ngDevMode ? [{ debugName: "stack" }] : /* istanbul ignore next */ []);
+	yScale = computed(() => {
+		if (this.type() === "stacked-bar") {
+			const { min, max } = stackExtent(this.stack());
+			return niceScale(min, max, { includeZero: true });
+		}
+		return niceScale(0, extentOf(this.numeric().flatMap((s) => s.data)).max, { includeZero: true });
+	}, ...ngDevMode ? [{ debugName: "yScale" }] : /* istanbul ignore next */ []);
+	ticks = computed(() => this.yScale().ticks, ...ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []);
+	yTick = computed(() => this.tickFormatter(this.ticks(), this.type() === "stacked-bar" && this.percent() ? "%" : ""), ...ngDevMode ? [{ debugName: "yTick" }] : /* istanbul ignore next */ []);
+	band = computed(() => (W - PAD.left - PAD.right) / Math.max(1, this.labels().length), ...ngDevMode ? [{ debugName: "band" }] : /* istanbul ignore next */ []);
+	axisLabels = computed(() => {
+		const max = Math.max(3, Math.floor(this.band() / 6.5));
+		return this.labels().map((label) => ({
+			text: truncateLabel(label, max),
+			full: label
+		}));
+	}, ...ngDevMode ? [{ debugName: "axisLabels" }] : /* istanbul ignore next */ []);
+	x(index) {
+		return PAD.left + this.band() * (index + .5);
+	}
+	y(value) {
+		const { min, max } = this.yScale();
+		return PAD.top + (1 - (value - min) / (max - min || 1)) * (H - PAD.top - PAD.bottom);
+	}
+	bars = computed(() => {
+		const series = this.drawn();
+		const groupWidth = Math.min(this.band() * .7, 28 * series.length + 2 * (series.length - 1));
+		const barWidth = (groupWidth - 2 * (series.length - 1)) / Math.max(1, series.length);
+		const base = this.y(0);
+		return this.labels().flatMap((_, i) => series.map((s, si) => {
+			const left = this.x(i) - groupWidth / 2 + si * (barWidth + 2);
+			const top = this.y(toFinite(s.data[i]));
+			const r = Math.min(4, barWidth / 2, Math.max(0, base - top));
+			const path = `M${left},${base}V${top + r}Q${left},${top} ${left + r},${top}H${left + barWidth - r}Q${left + barWidth},${top} ${left + barWidth},${top + r}V${base}Z`;
+			return {
+				key: `${i}-${si}`,
+				index: i,
+				path,
+				color: this.color(si)
+			};
+		}));
+	}, ...ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []);
+	segments = computed(() => {
+		const width = Math.min(this.band() * .6, 64);
+		return this.stack().flatMap((column, i) => column.segments.filter((segment) => segment.start !== segment.end).map((segment) => {
+			const a = this.y(segment.start);
+			const b = this.y(segment.end);
+			return {
+				key: `${i}-${segment.series}`,
+				index: i,
+				x: this.x(i) - width / 2,
+				y: Math.min(a, b),
+				width,
+				height: Math.abs(a - b),
+				color: this.color(segment.series)
+			};
+		}));
+	}, ...ngDevMode ? [{ debugName: "segments" }] : /* istanbul ignore next */ []);
+	share(segment) {
+		return segment ? Math.round(Math.abs(segment.end - segment.start) * 10) / 10 : 0;
+	}
+	lines = computed(() => this.drawn().map((s, si) => ({
+		label: s.label,
+		data: s.data,
+		color: this.color(si),
+		path: s.data.map((v, i) => `${i ? "L" : "M"}${this.x(i)},${this.y(v)}`).join(""),
+		area: s.data.length ? s.data.map((v, i) => `${i ? "L" : "M"}${this.x(i)},${this.y(v)}`).join("") + `L${this.x(s.data.length - 1)},${this.y(0)}L${this.x(0)},${this.y(0)}Z` : ""
+	})), ...ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []);
+	total = computed(() => (this.numeric()[0]?.data ?? []).reduce((a, b) => a + b, 0), ...ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []);
+	slices = computed(() => {
+		const data = this.numeric()[0]?.data ?? [];
+		let items = this.labels().map((label, i) => ({
+			label,
+			value: data[i] ?? 0
+		}));
+		if (items.length > DOUGHNUT_SLOTS) {
+			const sorted = [...items].sort((a, b) => b.value - a.value);
+			const rest = sorted.slice(3).reduce((sum, item) => sum + item.value, 0);
+			items = [...sorted.slice(0, 3), {
+				label: this.text.chartOther,
+				value: rest
+			}];
+		}
+		const total = items.reduce((sum, item) => sum + item.value, 0) || 1;
+		const outer = 110;
+		const inner = this.type() === "pie" ? 0 : 70;
+		let angle = -Math.PI / 2;
+		return items.map((item, i) => {
+			const sweep = item.value / total * Math.PI * 2;
+			const gap = items.length > 1 ? .02 : 0;
+			const a0 = angle + gap / 2;
+			const a1 = angle + sweep - gap / 2;
+			angle += sweep;
+			const large = a1 - a0 > Math.PI ? 1 : 0;
+			const p = (r, a) => `${(r * Math.cos(a)).toFixed(2)},${(r * Math.sin(a)).toFixed(2)}`;
+			const full = sweep >= Math.PI * 2 - .001;
+			const ring = full ? `M0,-${outer}A${outer},${outer} 0 1 1 -0.01,-${outer}ZM0,-${inner}A${inner},${inner} 0 1 0 0.01,-${inner}Z` : `M${p(outer, a0)}A${outer},${outer} 0 ${large} 1 ${p(outer, a1)}L${p(inner, a1)}A${inner},${inner} 0 ${large} 0 ${p(inner, a0)}Z`;
+			const wedge = full ? `M0,-${outer}A${outer},${outer} 0 1 1 -0.01,-${outer}Z` : `M0,0L${p(outer, a0)}A${outer},${outer} 0 ${large} 1 ${p(outer, a1)}Z`;
+			const path = inner ? ring : wedge;
+			return {
+				label: item.label,
+				value: item.value,
+				percent: Math.round(item.value / total * 1e3) / 10,
+				color: this.color(i),
+				path
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "slices" }] : /* istanbul ignore next */ []);
+	axisLabel(label, angle) {
+		const point = polarPoint(117, angle);
+		return {
+			x: point.x,
+			y: point.y,
+			anchor: labelAnchor(angle),
+			dy: labelOffset(angle),
+			text: truncateLabel(label, RADIAL_LABEL_CHARS),
+			full: label
+		};
+	}
+	radar = computed(() => {
+		const count = this.labels().length;
+		const angles = axisAngles(count);
+		const half = count ? Math.PI / count : 0;
+		const { min, max } = extentOf(this.drawn().flatMap((s) => s.data.slice(0, count)));
+		const scale = niceScale(min, max, { includeZero: true });
+		const tick = this.tickFormatter(scale.ticks);
+		return {
+			scale,
+			rings: scale.ticks.filter((t) => t > scale.min).map((t) => {
+				const radius = linearRadius(t, scale, RADIAL);
+				return {
+					value: t,
+					radius,
+					path: ringPath(angles, radius),
+					text: tick(t)
+				};
+			}),
+			spokes: angles.map((a) => polarPoint(RADIAL, a)),
+			labels: this.labels().map((label, i) => this.axisLabel(label, angles[i])),
+			hits: angles.map((a) => sectorPath(0, 117, a - half, a + half)),
+			polygons: this.drawn().map((s, si) => {
+				const points = angles.map((a, i) => polarPoint(linearRadius(toFinite(s.data[i]), scale, RADIAL), a));
+				return {
+					label: s.label,
+					color: this.color(si),
+					path: polygonPath(points),
+					vertices: points.map((p, index) => ({
+						index,
+						shape: markerPath(si, p.x, p.y, 4)
+					}))
+				};
+			})
+		};
+	}, ...ngDevMode ? [{ debugName: "radar" }] : /* istanbul ignore next */ []);
+	polar = computed(() => {
+		const count = this.labels().length;
+		const data = this.labels().map((_, i) => Math.max(0, toFinite(this.numeric()[0]?.data[i])));
+		const scale = niceScale(0, extentOf(data).max, { includeZero: true });
+		const tick = this.tickFormatter(scale.ticks);
+		const ringAngle = -Math.PI / 2 + (count ? Math.PI / count : 0);
+		return {
+			scale,
+			rings: scale.ticks.filter((t) => t > 0).map((t) => {
+				const radius = areaRadius(t, scale.max, RADIAL);
+				const at = polarPoint(radius, ringAngle);
+				return {
+					value: t,
+					radius,
+					text: tick(t),
+					x: at.x + 3,
+					y: at.y - 2
+				};
+			}),
+			sectors: polarSectors(data, scale.max, RADIAL).map((s) => ({
+				...s,
+				path: sectorPath(0, s.radius, s.start, s.end),
+				hit: sectorPath(0, RADIAL, s.start, s.end),
+				label: this.axisLabel(this.labels()[s.index], s.mid)
+			}))
+		};
+	}, ...ngDevMode ? [{ debugName: "polar" }] : /* istanbul ignore next */ []);
+	scatterData = computed(() => this.series().map((s) => {
+		const points = s.data.map((element, i) => typeof element === "number" ? {
+			x: i,
+			y: element
+		} : element);
+		return {
+			label: s.label,
+			points: cleanPoints(points)
+		};
+	}), ...ngDevMode ? [{ debugName: "scatterData" }] : /* istanbul ignore next */ []);
+	scatterRows = computed(() => this.scatterData().flatMap((s) => s.points.map((p) => ({
+		series: s.label,
+		x: p.x,
+		y: p.y
+	}))), ...ngDevMode ? [{ debugName: "scatterRows" }] : /* istanbul ignore next */ []);
+	scatter = computed(() => {
+		const drawn = this.scatterData().slice(0, 8);
+		const scales = scatterScales(drawn.flatMap((s) => s.points));
+		const left = SCATTER_PAD.left;
+		const right = W - SCATTER_PAD.right;
+		const top = SCATTER_PAD.top;
+		const bottom = H - SCATTER_PAD.bottom;
+		const xText = this.tickFormatter(scales.x.ticks);
+		const yText = this.tickFormatter(scales.y.ticks);
+		let index = 0;
+		return {
+			xTicks: scales.x.ticks.map((value) => ({
+				value,
+				position: scalePosition(value, scales.x, left, right),
+				text: xText(value)
+			})),
+			yTicks: scales.y.ticks.map((value) => ({
+				value,
+				position: scalePosition(value, scales.y, bottom, top),
+				text: yText(value)
+			})),
+			points: drawn.flatMap((s, si) => s.points.map((p) => {
+				const px = scalePosition(p.x, scales.x, left, right);
+				const py = scalePosition(p.y, scales.y, bottom, top);
+				return {
+					index: index++,
+					seriesLabel: s.label,
+					color: this.color(si),
+					x: p.x,
+					y: p.y,
+					px,
+					py,
+					shape: markerPath(si, px, py, MARKER_RADIUS),
+					legendShape: markerPath(si, 0, 0, MARKER_RADIUS)
+				};
+			}))
+		};
+	}, ...ngDevMode ? [{ debugName: "scatter" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarChart,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarChart,
+		isStandalone: true,
+		selector: "star-chart",
+		inputs: {
+			type: {
+				classPropertyName: "type",
+				publicName: "type",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			percent: {
+				classPropertyName: "percent",
+				publicName: "percent",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			labels: {
+				classPropertyName: "labels",
+				publicName: "labels",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			series: {
+				classPropertyName: "series",
+				publicName: "series",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			categoryLabel: {
+				classPropertyName: "categoryLabel",
+				publicName: "categoryLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			valueLabel: {
+				classPropertyName: "valueLabel",
+				publicName: "valueLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			table: {
+				classPropertyName: "table",
+				publicName: "table",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "star-chart" },
+		ngImport: i0,
+		template: `
+    <figure
+      class="star-chart__figure"
+      [attr.aria-labelledby]="titleId"
+      [attr.aria-describedby]="descriptionId"
+    >
+      <figcaption class="star-chart__head">
+        <span class="star-chart__title" [id]="titleId">{{ title() }}</span>
+        <button
+          type="button"
+          class="star-btn star-btn--ghost star-btn--sm"
+          [attr.aria-pressed]="showTable()"
+          (click)="showTable.set(!showTable())"
+        >
+          <i
+            class="ph-bold"
+            [class.ph-table]="!showTable()"
+            [class.ph-chart-bar]="showTable()"
+            aria-hidden="true"
+          ></i>
+          {{ showTable() ? text.chartView : text.tableView }}
+        </button>
+      </figcaption>
+      <p class="star-sr-only" [id]="descriptionId">{{ description() }}</p>
+
+      @if (legend().length > 1 && !showTable()) {
+        <ul class="star-chart__legend" aria-hidden="true">
+          @for (item of legend(); track item.label) {
+            <li>
+              @if (item.shape) {
+                <svg class="star-chart__swatch-shape" viewBox="-6 -6 12 12">
+                  <path
+                    class="star-chart__mark star-chart__marker"
+                    [attr.d]="item.shape"
+                    [style.--mark]="item.color"
+                  />
+                </svg>
+              } @else {
+                <span class="star-chart__swatch" [style.background]="item.color"></span>
+              }
+              {{ item.label }}
+            </li>
+          }
+        </ul>
+      }
+
+      <div
+        class="star-chart__plot"
+        [hidden]="showTable()"
+        aria-hidden="true"
+        (mouseleave)="hover.set(null)"
+      >
+        @switch (kind()) {
+          @case ('round') {
+            <svg [attr.viewBox]="'0 0 ' + W + ' ' + H" class="star-chart__svg">
+              <g [attr.transform]="'translate(' + W / 2 + ',' + H / 2 + ')'">
+                @for (slice of slices(); track slice.label; let i = $index) {
+                  <path
+                    class="star-chart__slice"
+                    [attr.d]="slice.path"
+                    [style.fill]="slice.color"
+                    [class.star-chart__mark--dim]="hover() !== null && hover() !== i"
+                    (mouseenter)="hover.set(i)"
+                  />
+                }
+                @if (type() === 'doughnut') {
+                  <text class="star-chart__total" y="-2" text-anchor="middle">
+                    {{ format(total()) }}
+                  </text>
+                  <text class="star-chart__total-label" y="18" text-anchor="middle">
+                    {{ text.chartTotal }}
+                  </text>
+                }
+              </g>
+            </svg>
+            @if (hover() !== null) {
+              @let slice = slices()[hover()!];
+              @if (slice) {
+                <div class="star-chart__tip" [style.left.%]="50" [style.top.%]="8">
+                  <span class="star-chart__swatch" [style.background]="slice.color"></span>
+                  {{ slice.label }}: <strong>{{ format(slice.value) }}</strong> ({{
+                    slice.percent
+                  }}%)
+                </div>
+              }
+            }
+          }
+          @case ('radar') {
+            @let plot = radar();
+            <svg [attr.viewBox]="'0 0 ' + RW + ' ' + RH" class="star-chart__svg">
+              <g [attr.transform]="'translate(' + RW / 2 + ',' + RH / 2 + ')'">
+                @for (ring of plot.rings; track ring.value) {
+                  <path class="star-chart__ring" [attr.d]="ring.path" />
+                }
+                @for (spoke of plot.spokes; track $index) {
+                  <line
+                    class="star-chart__grid"
+                    x1="0"
+                    y1="0"
+                    [attr.x2]="spoke.x"
+                    [attr.y2]="spoke.y"
+                  />
+                }
+                @if (hover() !== null && plot.spokes[hover()!]) {
+                  <line
+                    class="star-chart__crosshair"
+                    x1="0"
+                    y1="0"
+                    [attr.x2]="plot.spokes[hover()!].x"
+                    [attr.y2]="plot.spokes[hover()!].y"
+                  />
+                }
+                @for (polygon of plot.polygons; track polygon.label) {
+                  <path
+                    class="star-chart__mark star-chart__polygon"
+                    [attr.d]="polygon.path"
+                    [style.--mark]="polygon.color"
+                  />
+                }
+                @for (polygon of plot.polygons; track polygon.label) {
+                  @for (vertex of polygon.vertices; track vertex.index) {
+                    <path
+                      class="star-chart__mark star-chart__vertex"
+                      [attr.d]="vertex.shape"
+                      [style.--mark]="polygon.color"
+                    />
+                  }
+                }
+                @for (ring of plot.rings; track ring.value) {
+                  <text
+                    class="star-chart__ring-label"
+                    [attr.x]="4"
+                    [attr.y]="-ring.radius + 11"
+                    text-anchor="start"
+                  >
+                    {{ ring.text }}
+                  </text>
+                }
+                @for (label of plot.labels; track $index) {
+                  <text
+                    class="star-chart__axis"
+                    [attr.x]="label.x"
+                    [attr.y]="label.y"
+                    [attr.dy]="label.dy"
+                    [attr.text-anchor]="label.anchor"
+                  >
+                    {{ label.text }}
+                    @if (label.text !== label.full) {
+                      <title>{{ label.full }}</title>
+                    }
+                  </text>
+                }
+                @for (hit of plot.hits; track $index; let i = $index) {
+                  <path class="star-chart__hit" [attr.d]="hit" (mouseenter)="hover.set(i)" />
+                }
+              </g>
+            </svg>
+            @if (hover() !== null && labels()[hover()!] !== undefined) {
+              <div class="star-chart__tip star-chart__tip--corner">
+                <span class="star-chart__tip-title">{{ labels()[hover()!] }}</span>
+                @for (s of drawn(); track s.label; let si = $index) {
+                  <span class="star-chart__tip-row">
+                    <span class="star-chart__swatch" [style.background]="color(si)"></span>
+                    {{ s.label }}: <strong>{{ cell(s, hover()!) }}</strong>
+                  </span>
+                }
+              </div>
+            }
+          }
+          @case ('polar') {
+            @let plot = polar();
+            <svg [attr.viewBox]="'0 0 ' + RW + ' ' + RH" class="star-chart__svg">
+              <g [attr.transform]="'translate(' + RW / 2 + ',' + RH / 2 + ')'">
+                @for (ring of plot.rings; track ring.value) {
+                  <circle class="star-chart__ring" [attr.r]="ring.radius" />
+                }
+                @for (sector of plot.sectors; track sector.index) {
+                  @if (sector.path) {
+                    <path
+                      class="star-chart__mark star-chart__sector"
+                      [attr.d]="sector.path"
+                      [style.--mark]="color(0)"
+                      [class.star-chart__mark--dim]="hover() !== null && hover() !== sector.index"
+                    />
+                  }
+                }
+                @for (ring of plot.rings; track ring.value) {
+                  <text
+                    class="star-chart__ring-label"
+                    [attr.x]="ring.x"
+                    [attr.y]="ring.y"
+                    text-anchor="start"
+                  >
+                    {{ ring.text }}
+                  </text>
+                }
+                @for (sector of plot.sectors; track sector.index) {
+                  <text
+                    class="star-chart__axis"
+                    [attr.x]="sector.label.x"
+                    [attr.y]="sector.label.y"
+                    [attr.dy]="sector.label.dy"
+                    [attr.text-anchor]="sector.label.anchor"
+                  >
+                    {{ sector.label.text }}
+                    @if (sector.label.text !== sector.label.full) {
+                      <title>{{ sector.label.full }}</title>
+                    }
+                  </text>
+                }
+                @for (sector of plot.sectors; track sector.index) {
+                  <path
+                    class="star-chart__hit"
+                    [attr.d]="sector.hit"
+                    (mouseenter)="hover.set(sector.index)"
+                  />
+                }
+              </g>
+            </svg>
+            @if (hover() !== null) {
+              @let sector = plot.sectors[hover()!];
+              @if (sector) {
+                <div class="star-chart__tip star-chart__tip--corner">
+                  <span class="star-chart__tip-title">{{ sector.label.full }}</span>
+                  <span class="star-chart__tip-row">
+                    <span class="star-chart__swatch" [style.background]="color(0)"></span>
+                    {{ valueName() }}: <strong>{{ format(sector.value) }}</strong>
+                  </span>
+                </div>
+              }
+            }
+          }
+          @case ('scatter') {
+            @let plot = scatter();
+            <svg [attr.viewBox]="'0 0 ' + W + ' ' + H" class="star-chart__svg">
+              @for (tick of plot.yTicks; track tick.value) {
+                <line
+                  class="star-chart__grid"
+                  [attr.x1]="SP.left"
+                  [attr.x2]="W - SP.right"
+                  [attr.y1]="tick.position"
+                  [attr.y2]="tick.position"
+                />
+                <text
+                  class="star-chart__axis"
+                  [attr.x]="SP.left - 8"
+                  [attr.y]="tick.position + 4"
+                  text-anchor="end"
+                >
+                  {{ tick.text }}
+                </text>
+              }
+              @for (tick of plot.xTicks; track tick.value) {
+                <line
+                  class="star-chart__grid"
+                  [attr.x1]="tick.position"
+                  [attr.x2]="tick.position"
+                  [attr.y1]="SP.top"
+                  [attr.y2]="H - SP.bottom"
+                />
+                <text
+                  class="star-chart__axis"
+                  [attr.x]="tick.position"
+                  [attr.y]="H - SP.bottom + 16"
+                  text-anchor="middle"
+                >
+                  {{ tick.text }}
+                </text>
+              }
+              @if (categoryLabel()) {
+                <text
+                  class="star-chart__axis-title"
+                  [attr.x]="W - SP.right"
+                  [attr.y]="H - 4"
+                  text-anchor="end"
+                >
+                  {{ categoryLabel() }}
+                </text>
+              }
+              @if (valueLabel()) {
+                <text class="star-chart__axis-title" x="4" y="12" text-anchor="start">
+                  {{ valueLabel() }}
+                </text>
+              }
+              @for (point of plot.points; track point.index) {
+                <path
+                  class="star-chart__mark star-chart__point"
+                  [attr.d]="point.shape"
+                  [style.--mark]="point.color"
+                  [class.star-chart__mark--dim]="hover() !== null && hover() !== point.index"
+                />
+              }
+              @for (point of plot.points; track point.index) {
+                <circle
+                  class="star-chart__hit"
+                  r="10"
+                  [attr.cx]="point.px"
+                  [attr.cy]="point.py"
+                  (mouseenter)="hover.set(point.index)"
+                />
+              }
+            </svg>
+            @if (hover() !== null) {
+              @let point = plot.points[hover()!];
+              @if (point) {
+                <div
+                  class="star-chart__tip star-chart__tip--point"
+                  [style.left.%]="(point.px / W) * 100"
+                  [style.top.%]="(point.py / H) * 100"
+                  [style.translate]="
+                    point.px / W > 0.7 ? '-100% 0' : point.px / W < 0.3 ? '0 0' : null
+                  "
+                >
+                  <span class="star-chart__tip-title">{{ point.seriesLabel }}</span>
+                  <span class="star-chart__tip-row">
+                    <svg class="star-chart__swatch-shape" viewBox="-6 -6 12 12">
+                      <path
+                        class="star-chart__mark star-chart__marker"
+                        [attr.d]="point.legendShape"
+                        [style.--mark]="point.color"
+                      />
+                    </svg>
+                    {{ xName() }}: <strong>{{ precise(point.x) }}</strong>
+                  </span>
+                  <span class="star-chart__tip-row star-chart__tip-indent">
+                    {{ yName() }}: <strong>{{ precise(point.y) }}</strong>
+                  </span>
+                </div>
+              }
+            }
+          }
+          @default {
+            <svg [attr.viewBox]="'0 0 ' + W + ' ' + H" class="star-chart__svg">
+              @for (tick of ticks(); track tick) {
+                <line
+                  class="star-chart__grid"
+                  [attr.x1]="PAD.left"
+                  [attr.x2]="W - PAD.right"
+                  [attr.y1]="y(tick)"
+                  [attr.y2]="y(tick)"
+                />
+                <text
+                  class="star-chart__axis"
+                  [attr.x]="PAD.left - 8"
+                  [attr.y]="y(tick) + 4"
+                  text-anchor="end"
+                >
+                  {{ yTick()(tick) }}
+                </text>
+              }
+              @if (yScale().min < 0) {
+                <line
+                  class="star-chart__baseline"
+                  [attr.x1]="PAD.left"
+                  [attr.x2]="W - PAD.right"
+                  [attr.y1]="y(0)"
+                  [attr.y2]="y(0)"
+                />
+              }
+              @for (label of axisLabels(); track $index; let i = $index) {
+                <text
+                  class="star-chart__axis"
+                  [attr.x]="x(i)"
+                  [attr.y]="H - 12"
+                  text-anchor="middle"
+                >
+                  {{ label.text }}
+                  @if (label.text !== label.full) {
+                    <title>{{ label.full }}</title>
+                  }
+                </text>
+              }
+              @if (type() === 'bar') {
+                @for (bar of bars(); track bar.key) {
+                  <path
+                    class="star-chart__bar"
+                    [attr.d]="bar.path"
+                    [style.fill]="bar.color"
+                    [class.star-chart__mark--dim]="hover() !== null && hover() !== bar.index"
+                  />
+                }
+              } @else if (type() === 'stacked-bar') {
+                @for (segment of segments(); track segment.key) {
+                  <rect
+                    class="star-chart__mark star-chart__segment"
+                    [attr.x]="segment.x"
+                    [attr.y]="segment.y"
+                    [attr.width]="segment.width"
+                    [attr.height]="segment.height"
+                    [style.--mark]="segment.color"
+                    [class.star-chart__mark--dim]="hover() !== null && hover() !== segment.index"
+                  />
+                }
+              } @else {
+                @if (hover() !== null) {
+                  <line
+                    class="star-chart__crosshair"
+                    [attr.x1]="x(hover()!)"
+                    [attr.x2]="x(hover()!)"
+                    [attr.y1]="PAD.top"
+                    [attr.y2]="H - PAD.bottom"
+                  />
+                }
+                @for (line of lines(); track line.label) {
+                  @if (type() === 'area') {
+                    <path class="star-chart__area" [attr.d]="line.area" [style.fill]="line.color" />
+                  }
+                  <path class="star-chart__line" [attr.d]="line.path" [style.stroke]="line.color" />
+                  @if (hover() !== null) {
+                    <circle
+                      class="star-chart__dot"
+                      r="4.5"
+                      [attr.cx]="x(hover()!)"
+                      [attr.cy]="y(line.data[hover()!] ?? 0)"
+                      [style.fill]="line.color"
+                    />
+                  }
+                }
+              }
+              <!-- Hit targets: one full-height column per category, wider than the marks. -->
+              @for (label of labels(); track $index; let i = $index) {
+                <rect
+                  class="star-chart__hit"
+                  [attr.x]="x(i) - band() / 2"
+                  [attr.y]="PAD.top"
+                  [attr.width]="band()"
+                  [attr.height]="H - PAD.top - PAD.bottom"
+                  (mouseenter)="hover.set(i)"
+                />
+              }
+            </svg>
+            @if (hover() !== null) {
+              <div
+                class="star-chart__tip"
+                [style.left.%]="(x(hover()!) / W) * 100"
+                [style.top.%]="6"
+              >
+                <span class="star-chart__tip-title">{{ labels()[hover()!] }}</span>
+                @for (s of drawn(); track s.label; let si = $index) {
+                  <span class="star-chart__tip-row">
+                    <span class="star-chart__swatch" [style.background]="color(si)"></span>
+                    {{ s.label }}: <strong>{{ cell(s, hover()!) }}</strong>
+                    @if (type() === 'stacked-bar' && percent()) {
+                      ({{ share(stack()[hover()!]?.segments?.[si]) }}%)
+                    }
+                  </span>
+                }
+                @if (type() === 'stacked-bar') {
+                  <span class="star-chart__tip-row star-chart__tip-total">
+                    {{ text.chartTotal }}:
+                    <strong>{{ format(stack()[hover()!]?.total ?? 0) }}</strong>
+                  </span>
+                }
+              </div>
+            }
+          }
+        }
+      </div>
+
+      <table class="star-chart__table" [class.star-sr-only]="!showTable()">
+        <caption class="star-sr-only">
+          {{
+            title()
+          }}
+        </caption>
+        <thead>
+          <tr>
+            <th scope="col">
+              {{ firstHeader() }}
+            </th>
+            @if (round()) {
+              <th scope="col">{{ series()[0]?.label ?? text.chartValue }}</th>
+              <th scope="col">{{ text.chartShare }}</th>
+            } @else if (kind() === 'polar') {
+              <th scope="col">{{ valueName() }}</th>
+            } @else if (kind() === 'scatter') {
+              <th scope="col">{{ xName() }}</th>
+              <th scope="col">{{ yName() }}</th>
+            } @else {
+              @for (s of series(); track s.label) {
+                <th scope="col">{{ s.label }}</th>
+              }
+              @if (type() === 'stacked-bar') {
+                <th scope="col">{{ text.chartTotal }}</th>
+              }
+            }
+          </tr>
+        </thead>
+        <tbody>
+          @if (round()) {
+            @for (slice of slices(); track slice.label) {
+              <tr>
+                <th scope="row">{{ slice.label }}</th>
+                <td>{{ format(slice.value) }}</td>
+                <td>{{ slice.percent }}%</td>
+              </tr>
+            }
+          } @else if (kind() === 'polar') {
+            @for (label of labels(); track $index; let i = $index) {
+              <tr>
+                <th scope="row">{{ label }}</th>
+                <td>{{ cell(numeric()[0], i) }}</td>
+              </tr>
+            }
+          } @else if (kind() === 'scatter') {
+            @for (row of scatterRows(); track $index) {
+              <tr>
+                <th scope="row">{{ row.series }}</th>
+                <td>{{ precise(row.x) }}</td>
+                <td>{{ precise(row.y) }}</td>
+              </tr>
+            }
+          } @else {
+            @for (label of labels(); track $index; let i = $index) {
+              <tr>
+                <th scope="row">{{ label }}</th>
+                @for (s of numeric(); track s.label) {
+                  <td>{{ cell(s, i) }}</td>
+                }
+                @if (type() === 'stacked-bar') {
+                  <td>{{ format(stack()[i]?.total ?? 0) }}</td>
+                }
+              </tr>
+            }
+          }
+        </tbody>
+      </table>
+    </figure>
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarChart,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-chart",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "star-chart" },
+			template: `
+    <figure
+      class="star-chart__figure"
+      [attr.aria-labelledby]="titleId"
+      [attr.aria-describedby]="descriptionId"
+    >
+      <figcaption class="star-chart__head">
+        <span class="star-chart__title" [id]="titleId">{{ title() }}</span>
+        <button
+          type="button"
+          class="star-btn star-btn--ghost star-btn--sm"
+          [attr.aria-pressed]="showTable()"
+          (click)="showTable.set(!showTable())"
+        >
+          <i
+            class="ph-bold"
+            [class.ph-table]="!showTable()"
+            [class.ph-chart-bar]="showTable()"
+            aria-hidden="true"
+          ></i>
+          {{ showTable() ? text.chartView : text.tableView }}
+        </button>
+      </figcaption>
+      <p class="star-sr-only" [id]="descriptionId">{{ description() }}</p>
+
+      @if (legend().length > 1 && !showTable()) {
+        <ul class="star-chart__legend" aria-hidden="true">
+          @for (item of legend(); track item.label) {
+            <li>
+              @if (item.shape) {
+                <svg class="star-chart__swatch-shape" viewBox="-6 -6 12 12">
+                  <path
+                    class="star-chart__mark star-chart__marker"
+                    [attr.d]="item.shape"
+                    [style.--mark]="item.color"
+                  />
+                </svg>
+              } @else {
+                <span class="star-chart__swatch" [style.background]="item.color"></span>
+              }
+              {{ item.label }}
+            </li>
+          }
+        </ul>
+      }
+
+      <div
+        class="star-chart__plot"
+        [hidden]="showTable()"
+        aria-hidden="true"
+        (mouseleave)="hover.set(null)"
+      >
+        @switch (kind()) {
+          @case ('round') {
+            <svg [attr.viewBox]="'0 0 ' + W + ' ' + H" class="star-chart__svg">
+              <g [attr.transform]="'translate(' + W / 2 + ',' + H / 2 + ')'">
+                @for (slice of slices(); track slice.label; let i = $index) {
+                  <path
+                    class="star-chart__slice"
+                    [attr.d]="slice.path"
+                    [style.fill]="slice.color"
+                    [class.star-chart__mark--dim]="hover() !== null && hover() !== i"
+                    (mouseenter)="hover.set(i)"
+                  />
+                }
+                @if (type() === 'doughnut') {
+                  <text class="star-chart__total" y="-2" text-anchor="middle">
+                    {{ format(total()) }}
+                  </text>
+                  <text class="star-chart__total-label" y="18" text-anchor="middle">
+                    {{ text.chartTotal }}
+                  </text>
+                }
+              </g>
+            </svg>
+            @if (hover() !== null) {
+              @let slice = slices()[hover()!];
+              @if (slice) {
+                <div class="star-chart__tip" [style.left.%]="50" [style.top.%]="8">
+                  <span class="star-chart__swatch" [style.background]="slice.color"></span>
+                  {{ slice.label }}: <strong>{{ format(slice.value) }}</strong> ({{
+                    slice.percent
+                  }}%)
+                </div>
+              }
+            }
+          }
+          @case ('radar') {
+            @let plot = radar();
+            <svg [attr.viewBox]="'0 0 ' + RW + ' ' + RH" class="star-chart__svg">
+              <g [attr.transform]="'translate(' + RW / 2 + ',' + RH / 2 + ')'">
+                @for (ring of plot.rings; track ring.value) {
+                  <path class="star-chart__ring" [attr.d]="ring.path" />
+                }
+                @for (spoke of plot.spokes; track $index) {
+                  <line
+                    class="star-chart__grid"
+                    x1="0"
+                    y1="0"
+                    [attr.x2]="spoke.x"
+                    [attr.y2]="spoke.y"
+                  />
+                }
+                @if (hover() !== null && plot.spokes[hover()!]) {
+                  <line
+                    class="star-chart__crosshair"
+                    x1="0"
+                    y1="0"
+                    [attr.x2]="plot.spokes[hover()!].x"
+                    [attr.y2]="plot.spokes[hover()!].y"
+                  />
+                }
+                @for (polygon of plot.polygons; track polygon.label) {
+                  <path
+                    class="star-chart__mark star-chart__polygon"
+                    [attr.d]="polygon.path"
+                    [style.--mark]="polygon.color"
+                  />
+                }
+                @for (polygon of plot.polygons; track polygon.label) {
+                  @for (vertex of polygon.vertices; track vertex.index) {
+                    <path
+                      class="star-chart__mark star-chart__vertex"
+                      [attr.d]="vertex.shape"
+                      [style.--mark]="polygon.color"
+                    />
+                  }
+                }
+                @for (ring of plot.rings; track ring.value) {
+                  <text
+                    class="star-chart__ring-label"
+                    [attr.x]="4"
+                    [attr.y]="-ring.radius + 11"
+                    text-anchor="start"
+                  >
+                    {{ ring.text }}
+                  </text>
+                }
+                @for (label of plot.labels; track $index) {
+                  <text
+                    class="star-chart__axis"
+                    [attr.x]="label.x"
+                    [attr.y]="label.y"
+                    [attr.dy]="label.dy"
+                    [attr.text-anchor]="label.anchor"
+                  >
+                    {{ label.text }}
+                    @if (label.text !== label.full) {
+                      <title>{{ label.full }}</title>
+                    }
+                  </text>
+                }
+                @for (hit of plot.hits; track $index; let i = $index) {
+                  <path class="star-chart__hit" [attr.d]="hit" (mouseenter)="hover.set(i)" />
+                }
+              </g>
+            </svg>
+            @if (hover() !== null && labels()[hover()!] !== undefined) {
+              <div class="star-chart__tip star-chart__tip--corner">
+                <span class="star-chart__tip-title">{{ labels()[hover()!] }}</span>
+                @for (s of drawn(); track s.label; let si = $index) {
+                  <span class="star-chart__tip-row">
+                    <span class="star-chart__swatch" [style.background]="color(si)"></span>
+                    {{ s.label }}: <strong>{{ cell(s, hover()!) }}</strong>
+                  </span>
+                }
+              </div>
+            }
+          }
+          @case ('polar') {
+            @let plot = polar();
+            <svg [attr.viewBox]="'0 0 ' + RW + ' ' + RH" class="star-chart__svg">
+              <g [attr.transform]="'translate(' + RW / 2 + ',' + RH / 2 + ')'">
+                @for (ring of plot.rings; track ring.value) {
+                  <circle class="star-chart__ring" [attr.r]="ring.radius" />
+                }
+                @for (sector of plot.sectors; track sector.index) {
+                  @if (sector.path) {
+                    <path
+                      class="star-chart__mark star-chart__sector"
+                      [attr.d]="sector.path"
+                      [style.--mark]="color(0)"
+                      [class.star-chart__mark--dim]="hover() !== null && hover() !== sector.index"
+                    />
+                  }
+                }
+                @for (ring of plot.rings; track ring.value) {
+                  <text
+                    class="star-chart__ring-label"
+                    [attr.x]="ring.x"
+                    [attr.y]="ring.y"
+                    text-anchor="start"
+                  >
+                    {{ ring.text }}
+                  </text>
+                }
+                @for (sector of plot.sectors; track sector.index) {
+                  <text
+                    class="star-chart__axis"
+                    [attr.x]="sector.label.x"
+                    [attr.y]="sector.label.y"
+                    [attr.dy]="sector.label.dy"
+                    [attr.text-anchor]="sector.label.anchor"
+                  >
+                    {{ sector.label.text }}
+                    @if (sector.label.text !== sector.label.full) {
+                      <title>{{ sector.label.full }}</title>
+                    }
+                  </text>
+                }
+                @for (sector of plot.sectors; track sector.index) {
+                  <path
+                    class="star-chart__hit"
+                    [attr.d]="sector.hit"
+                    (mouseenter)="hover.set(sector.index)"
+                  />
+                }
+              </g>
+            </svg>
+            @if (hover() !== null) {
+              @let sector = plot.sectors[hover()!];
+              @if (sector) {
+                <div class="star-chart__tip star-chart__tip--corner">
+                  <span class="star-chart__tip-title">{{ sector.label.full }}</span>
+                  <span class="star-chart__tip-row">
+                    <span class="star-chart__swatch" [style.background]="color(0)"></span>
+                    {{ valueName() }}: <strong>{{ format(sector.value) }}</strong>
+                  </span>
+                </div>
+              }
+            }
+          }
+          @case ('scatter') {
+            @let plot = scatter();
+            <svg [attr.viewBox]="'0 0 ' + W + ' ' + H" class="star-chart__svg">
+              @for (tick of plot.yTicks; track tick.value) {
+                <line
+                  class="star-chart__grid"
+                  [attr.x1]="SP.left"
+                  [attr.x2]="W - SP.right"
+                  [attr.y1]="tick.position"
+                  [attr.y2]="tick.position"
+                />
+                <text
+                  class="star-chart__axis"
+                  [attr.x]="SP.left - 8"
+                  [attr.y]="tick.position + 4"
+                  text-anchor="end"
+                >
+                  {{ tick.text }}
+                </text>
+              }
+              @for (tick of plot.xTicks; track tick.value) {
+                <line
+                  class="star-chart__grid"
+                  [attr.x1]="tick.position"
+                  [attr.x2]="tick.position"
+                  [attr.y1]="SP.top"
+                  [attr.y2]="H - SP.bottom"
+                />
+                <text
+                  class="star-chart__axis"
+                  [attr.x]="tick.position"
+                  [attr.y]="H - SP.bottom + 16"
+                  text-anchor="middle"
+                >
+                  {{ tick.text }}
+                </text>
+              }
+              @if (categoryLabel()) {
+                <text
+                  class="star-chart__axis-title"
+                  [attr.x]="W - SP.right"
+                  [attr.y]="H - 4"
+                  text-anchor="end"
+                >
+                  {{ categoryLabel() }}
+                </text>
+              }
+              @if (valueLabel()) {
+                <text class="star-chart__axis-title" x="4" y="12" text-anchor="start">
+                  {{ valueLabel() }}
+                </text>
+              }
+              @for (point of plot.points; track point.index) {
+                <path
+                  class="star-chart__mark star-chart__point"
+                  [attr.d]="point.shape"
+                  [style.--mark]="point.color"
+                  [class.star-chart__mark--dim]="hover() !== null && hover() !== point.index"
+                />
+              }
+              @for (point of plot.points; track point.index) {
+                <circle
+                  class="star-chart__hit"
+                  r="10"
+                  [attr.cx]="point.px"
+                  [attr.cy]="point.py"
+                  (mouseenter)="hover.set(point.index)"
+                />
+              }
+            </svg>
+            @if (hover() !== null) {
+              @let point = plot.points[hover()!];
+              @if (point) {
+                <div
+                  class="star-chart__tip star-chart__tip--point"
+                  [style.left.%]="(point.px / W) * 100"
+                  [style.top.%]="(point.py / H) * 100"
+                  [style.translate]="
+                    point.px / W > 0.7 ? '-100% 0' : point.px / W < 0.3 ? '0 0' : null
+                  "
+                >
+                  <span class="star-chart__tip-title">{{ point.seriesLabel }}</span>
+                  <span class="star-chart__tip-row">
+                    <svg class="star-chart__swatch-shape" viewBox="-6 -6 12 12">
+                      <path
+                        class="star-chart__mark star-chart__marker"
+                        [attr.d]="point.legendShape"
+                        [style.--mark]="point.color"
+                      />
+                    </svg>
+                    {{ xName() }}: <strong>{{ precise(point.x) }}</strong>
+                  </span>
+                  <span class="star-chart__tip-row star-chart__tip-indent">
+                    {{ yName() }}: <strong>{{ precise(point.y) }}</strong>
+                  </span>
+                </div>
+              }
+            }
+          }
+          @default {
+            <svg [attr.viewBox]="'0 0 ' + W + ' ' + H" class="star-chart__svg">
+              @for (tick of ticks(); track tick) {
+                <line
+                  class="star-chart__grid"
+                  [attr.x1]="PAD.left"
+                  [attr.x2]="W - PAD.right"
+                  [attr.y1]="y(tick)"
+                  [attr.y2]="y(tick)"
+                />
+                <text
+                  class="star-chart__axis"
+                  [attr.x]="PAD.left - 8"
+                  [attr.y]="y(tick) + 4"
+                  text-anchor="end"
+                >
+                  {{ yTick()(tick) }}
+                </text>
+              }
+              @if (yScale().min < 0) {
+                <line
+                  class="star-chart__baseline"
+                  [attr.x1]="PAD.left"
+                  [attr.x2]="W - PAD.right"
+                  [attr.y1]="y(0)"
+                  [attr.y2]="y(0)"
+                />
+              }
+              @for (label of axisLabels(); track $index; let i = $index) {
+                <text
+                  class="star-chart__axis"
+                  [attr.x]="x(i)"
+                  [attr.y]="H - 12"
+                  text-anchor="middle"
+                >
+                  {{ label.text }}
+                  @if (label.text !== label.full) {
+                    <title>{{ label.full }}</title>
+                  }
+                </text>
+              }
+              @if (type() === 'bar') {
+                @for (bar of bars(); track bar.key) {
+                  <path
+                    class="star-chart__bar"
+                    [attr.d]="bar.path"
+                    [style.fill]="bar.color"
+                    [class.star-chart__mark--dim]="hover() !== null && hover() !== bar.index"
+                  />
+                }
+              } @else if (type() === 'stacked-bar') {
+                @for (segment of segments(); track segment.key) {
+                  <rect
+                    class="star-chart__mark star-chart__segment"
+                    [attr.x]="segment.x"
+                    [attr.y]="segment.y"
+                    [attr.width]="segment.width"
+                    [attr.height]="segment.height"
+                    [style.--mark]="segment.color"
+                    [class.star-chart__mark--dim]="hover() !== null && hover() !== segment.index"
+                  />
+                }
+              } @else {
+                @if (hover() !== null) {
+                  <line
+                    class="star-chart__crosshair"
+                    [attr.x1]="x(hover()!)"
+                    [attr.x2]="x(hover()!)"
+                    [attr.y1]="PAD.top"
+                    [attr.y2]="H - PAD.bottom"
+                  />
+                }
+                @for (line of lines(); track line.label) {
+                  @if (type() === 'area') {
+                    <path class="star-chart__area" [attr.d]="line.area" [style.fill]="line.color" />
+                  }
+                  <path class="star-chart__line" [attr.d]="line.path" [style.stroke]="line.color" />
+                  @if (hover() !== null) {
+                    <circle
+                      class="star-chart__dot"
+                      r="4.5"
+                      [attr.cx]="x(hover()!)"
+                      [attr.cy]="y(line.data[hover()!] ?? 0)"
+                      [style.fill]="line.color"
+                    />
+                  }
+                }
+              }
+              <!-- Hit targets: one full-height column per category, wider than the marks. -->
+              @for (label of labels(); track $index; let i = $index) {
+                <rect
+                  class="star-chart__hit"
+                  [attr.x]="x(i) - band() / 2"
+                  [attr.y]="PAD.top"
+                  [attr.width]="band()"
+                  [attr.height]="H - PAD.top - PAD.bottom"
+                  (mouseenter)="hover.set(i)"
+                />
+              }
+            </svg>
+            @if (hover() !== null) {
+              <div
+                class="star-chart__tip"
+                [style.left.%]="(x(hover()!) / W) * 100"
+                [style.top.%]="6"
+              >
+                <span class="star-chart__tip-title">{{ labels()[hover()!] }}</span>
+                @for (s of drawn(); track s.label; let si = $index) {
+                  <span class="star-chart__tip-row">
+                    <span class="star-chart__swatch" [style.background]="color(si)"></span>
+                    {{ s.label }}: <strong>{{ cell(s, hover()!) }}</strong>
+                    @if (type() === 'stacked-bar' && percent()) {
+                      ({{ share(stack()[hover()!]?.segments?.[si]) }}%)
+                    }
+                  </span>
+                }
+                @if (type() === 'stacked-bar') {
+                  <span class="star-chart__tip-row star-chart__tip-total">
+                    {{ text.chartTotal }}:
+                    <strong>{{ format(stack()[hover()!]?.total ?? 0) }}</strong>
+                  </span>
+                }
+              </div>
+            }
+          }
+        }
+      </div>
+
+      <table class="star-chart__table" [class.star-sr-only]="!showTable()">
+        <caption class="star-sr-only">
+          {{
+            title()
+          }}
+        </caption>
+        <thead>
+          <tr>
+            <th scope="col">
+              {{ firstHeader() }}
+            </th>
+            @if (round()) {
+              <th scope="col">{{ series()[0]?.label ?? text.chartValue }}</th>
+              <th scope="col">{{ text.chartShare }}</th>
+            } @else if (kind() === 'polar') {
+              <th scope="col">{{ valueName() }}</th>
+            } @else if (kind() === 'scatter') {
+              <th scope="col">{{ xName() }}</th>
+              <th scope="col">{{ yName() }}</th>
+            } @else {
+              @for (s of series(); track s.label) {
+                <th scope="col">{{ s.label }}</th>
+              }
+              @if (type() === 'stacked-bar') {
+                <th scope="col">{{ text.chartTotal }}</th>
+              }
+            }
+          </tr>
+        </thead>
+        <tbody>
+          @if (round()) {
+            @for (slice of slices(); track slice.label) {
+              <tr>
+                <th scope="row">{{ slice.label }}</th>
+                <td>{{ format(slice.value) }}</td>
+                <td>{{ slice.percent }}%</td>
+              </tr>
+            }
+          } @else if (kind() === 'polar') {
+            @for (label of labels(); track $index; let i = $index) {
+              <tr>
+                <th scope="row">{{ label }}</th>
+                <td>{{ cell(numeric()[0], i) }}</td>
+              </tr>
+            }
+          } @else if (kind() === 'scatter') {
+            @for (row of scatterRows(); track $index) {
+              <tr>
+                <th scope="row">{{ row.series }}</th>
+                <td>{{ precise(row.x) }}</td>
+                <td>{{ precise(row.y) }}</td>
+              </tr>
+            }
+          } @else {
+            @for (label of labels(); track $index; let i = $index) {
+              <tr>
+                <th scope="row">{{ label }}</th>
+                @for (s of numeric(); track s.label) {
+                  <td>{{ cell(s, i) }}</td>
+                }
+                @if (type() === 'stacked-bar') {
+                  <td>{{ format(stack()[i]?.total ?? 0) }}</td>
+                }
+              </tr>
+            }
+          }
+        </tbody>
+      </table>
+    </figure>
+  `
+		}]
+	}],
+	propDecorators: {
+		type: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "type",
+				required: false
+			}]
+		}],
+		percent: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "percent",
+				required: false
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: true
+			}]
+		}],
+		labels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labels",
+				required: false
+			}]
+		}],
+		series: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "series",
+				required: false
+			}]
+		}],
+		categoryLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "categoryLabel",
+				required: false
+			}]
+		}],
+		valueLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "valueLabel",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		table: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "table",
+				required: false
+			}]
+		}]
+	}
+});
+export { STAR_CHART_SLOTS, StarChart };
+
+//# sourceMappingURL=star-ng-ui-chart.mjs.map