@forgeroute/ui 0.4.0 → 0.4.2

package/fesm2022/forgeroute-ui-charts.mjs

@@ -1,71 +1,265 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, DestroyRef, NgZone, computed, effect, inject, input, viewChild } from "@angular/core";
-import { BarController, BarElement, CategoryScale, Chart, LinearScale, Tooltip } from "chart.js";
-let registered = false;
-function registerChartParts() {
-	if (registered) return;
+import { ChangeDetectionStrategy, Component, DestroyRef, NgZone, PLATFORM_ID, computed, effect, inject, input, viewChild } from "@angular/core";
+import { ArcElement, BarController, BarElement, CategoryScale, Chart, DoughnutController, LinearScale, Tooltip } from "chart.js";
+import { isPlatformBrowser } from "@angular/common";
+let registered$1 = false;
+function registerChartParts$1() {
+	if (registered$1) return;
 	Chart.register(BarController, BarElement, CategoryScale, LinearScale, Tooltip);
-	registered = true;
+	registered$1 = true;
+}
+const HEX_RE = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+const RGB_RE = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d*\.?\d+)\s*)?\)$/i;
+const HOVER_DARKEN = .8;
+function darkenColor(input) {
+	const c = (input ?? "").trim();
+	let r, g, b, a = null;
+	const hex = HEX_RE.exec(c);
+	if (hex) {
+		let h = hex[1];
+		if (h.length <= 4) h = h.split("").map((ch) => ch + ch).join("");
+		r = parseInt(h.slice(0, 2), 16);
+		g = parseInt(h.slice(2, 4), 16);
+		b = parseInt(h.slice(4, 6), 16);
+		if (h.length === 8) a = Math.round(parseInt(h.slice(6, 8), 16) / 255 * 1e3) / 1e3;
+	} else {
+		const m = RGB_RE.exec(c);
+		if (!m) return null;
+		r = Number(m[1]);
+		g = Number(m[2]);
+		b = Number(m[3]);
+		if (r > 255 || g > 255 || b > 255) return null;
+		if (m[4] !== void 0) {
+			a = Number(m[4]);
+			if (a > 1) return null;
+		}
+	}
+	const d = (n) => Math.round(n * HOVER_DARKEN);
+	return a === null ? `rgb(${d(r)}, ${d(g)}, ${d(b)})` : `rgba(${d(r)}, ${d(g)}, ${d(b)}, ${a})`;
+}
+const BAR_CHART_SERIES_PALETTE = [
+	"#2563eb",
+	"#16a34a",
+	"#d27006",
+	"#dc2626",
+	"#7c3aed",
+	"#0891b2",
+	"#db2777",
+	"#4d7c0f",
+	"#475569",
+	"#0d9488",
+	"#c2410c",
+	"#4f46e5",
+	"#a21caf",
+	"#b45309"
+];
+function tryFormat(locale, options) {
+	try {
+		return new Intl.NumberFormat(locale, options);
+	} catch {
+		return null;
+	}
+}
+function safeLocale(locale) {
+	const l = (locale ?? "").trim();
+	return l && tryFormat(l) ? l : "en-US";
+}
+function safeCurrency(currency) {
+	const c = (currency ?? "").trim().toUpperCase();
+	return c && tryFormat("en-US", {
+		style: "currency",
+		currency: c
+	}) ? c : "USD";
+}
+function formatWith(nf, n, scale = 1) {
+	if (!Number.isFinite(n)) return String(n);
+	return nf.format(n === 0 ? 0 : n / scale);
 }
 const VALUE_LABELS = {
 	id: "uiBarChartValueLabels",
 	afterDatasetsDraw(chart) {
-		if (chart.options.plugins["uiBarChartValueLabels"]?.enabled === false) return;
+		const opts = chart.options.plugins["uiBarChartValueLabels"];
+		if (opts?.enabled === false) return;
 		const ctx = chart.ctx;
 		ctx.save();
 		ctx.fillStyle = "#475569";
 		ctx.font = "600 11px sans-serif";
 		ctx.textAlign = "center";
 		ctx.textBaseline = "bottom";
-		chart.getDatasetMeta(0).data.forEach((bar, i) => {
-			const value = chart.data.datasets[0]?.data[i];
-			if (typeof value === "number" && Number.isFinite(value) && value !== 0) ctx.fillText(String(value), bar.x, bar.y - 2);
+		chart.data.datasets.forEach((dataset, di) => {
+			if (!chart.isDatasetVisible(di)) return;
+			chart.getDatasetMeta(di).data.forEach((bar, i) => {
+				const value = dataset.data[i];
+				if (typeof value === "number" && Number.isFinite(value) && value !== 0) ctx.fillText(opts?.format ? opts.format(value) : String(value), bar.x, bar.y - 2);
+			});
 		});
 		ctx.restore();
 	}
 };
 var BarChartComponent = class BarChartComponent {
+	static fills(s) {
+		if (!s.colors?.length) return {
+			bg: s.color,
+			hover: s.hoverColor
+		};
+		const bg = [], hover = [];
+		for (let i = 0; i < s.data.length; i++) {
+			const own = typeof s.colors[i] === "string" ? s.colors[i].trim() : "";
+			if (!own) {
+				bg.push(s.color);
+				hover.push(s.hoverColor);
+				continue;
+			}
+			bg.push(s.colors[i]);
+			hover.push(darkenColor(own) ?? s.colors[i]);
+		}
+		return {
+			bg,
+			hover
+		};
+	}
+	static groupDataset(g) {
+		return {
+			label: g.name,
+			data: g.data,
+			backgroundColor: g.color,
+			hoverBackgroundColor: g.hover,
+			borderRadius: 3,
+			borderSkipped: false
+		};
+	}
 	constructor() {
 		this.labels = input([], ...ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []);
 		this.values = input([], ...ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []);
 		this.color = input("#3b82f6", ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+		this.colors = input([], ...ngDevMode ? [{ debugName: "colors" }] : /* istanbul ignore next */ []);
 		this.hoverColor = input("#2563eb", ...ngDevMode ? [{ debugName: "hoverColor" }] : /* istanbul ignore next */ []);
 		this.height = input(240, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
 		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 		this.showValues = input(true, ...ngDevMode ? [{ debugName: "showValues" }] : /* istanbul ignore next */ []);
 		this.unitSingular = input("", ...ngDevMode ? [{ debugName: "unitSingular" }] : /* istanbul ignore next */ []);
 		this.unitPlural = input("", ...ngDevMode ? [{ debugName: "unitPlural" }] : /* istanbul ignore next */ []);
+		this.valueFormat = input("number", ...ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []);
+		this.currency = input("USD", ...ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []);
+		this.locale = input("en-US", ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+		this.decimals = input(null, ...ngDevMode ? [{ debugName: "decimals" }] : /* istanbul ignore next */ []);
+		this.series = input([], ...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
+		this.stacked = input(false, ...ngDevMode ? [{ debugName: "stacked" }] : /* istanbul ignore next */ []);
+		this.showLegend = input(true, ...ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []);
 		this.canvas = viewChild.required("canvas", ...ngDevMode ? [{ debugName: "canvas" }] : /* istanbul ignore next */ []);
 		this.zone = inject(NgZone);
 		this.chart = null;
+		this.multiMode = null;
+		this.formatter = computed(() => {
+			const kind = this.valueFormat();
+			if (kind !== "currency" && kind !== "percent") return null;
+			const locale = safeLocale(this.locale());
+			const d = this.decimals();
+			const fixed = typeof d === "number" && Number.isFinite(d) ? Math.min(6, Math.max(0, Math.trunc(d))) : null;
+			const digits = (min, max) => ({
+				minimumFractionDigits: min,
+				maximumFractionDigits: max
+			});
+			const make = (extra) => {
+				try {
+					return new Intl.NumberFormat(locale, {
+						signDisplay: "negative",
+						...extra
+					});
+				} catch {
+					return new Intl.NumberFormat(locale, extra);
+				}
+			};
+			if (kind === "currency") {
+				const base = {
+					style: "currency",
+					currency: safeCurrency(this.currency())
+				};
+				const full = make(fixed === null ? base : {
+					...base,
+					...digits(fixed, fixed)
+				});
+				const whole = fixed === null ? make({
+					...base,
+					...digits(0, 0)
+				}) : full;
+				return {
+					value: (n) => formatWith(full, n),
+					tick: (n) => formatWith(Number.isInteger(n) ? whole : full, n)
+				};
+			}
+			const pct = make({
+				style: "percent",
+				...fixed === null ? digits(0, 1) : digits(fixed, fixed)
+			});
+			return {
+				value: (n) => formatWith(pct, n, 100),
+				tick: (n) => formatWith(pct, n, 100)
+			};
+		}, ...ngDevMode ? [{ debugName: "formatter" }] : /* istanbul ignore next */ []);
+		this.resolvedSeries = computed(() => {
+			const list = this.series();
+			if (!Array.isArray(list)) return [];
+			const count = this.labels().length;
+			return list.map((raw, i) => {
+				const s = raw && typeof raw === "object" ? raw : {};
+				const name = typeof s.name === "string" && s.name.trim() ? s.name.trim() : `Series ${i + 1}`;
+				const color = (typeof s.color === "string" && s.color.trim() ? s.color : "") || BAR_CHART_SERIES_PALETTE[i % BAR_CHART_SERIES_PALETTE.length];
+				const hover = (typeof s.hoverColor === "string" && s.hoverColor.trim() ? s.hoverColor : "") || (darkenColor(color) ?? color);
+				const source = Array.isArray(s.values) ? s.values : [];
+				return {
+					name,
+					data: Array.from({ length: count }, (_, k) => typeof source[k] === "number" ? source[k] : 0),
+					color,
+					hover
+				};
+			});
+		}, ...ngDevMode ? [{ debugName: "resolvedSeries" }] : /* istanbul ignore next */ []);
+		this.legendVisible = computed(() => this.resolvedSeries().length > 0 && this.showLegend(), ...ngDevMode ? [{ debugName: "legendVisible" }] : /* istanbul ignore next */ []);
+		this.srRows = computed(() => {
+			const groups = this.resolvedSeries();
+			if (!groups.length) return [];
+			const rows = [];
+			this.labels().forEach((label, k) => groups.forEach((g) => rows.push(`${label}, ${g.name}: ${this.tooltipText(g.data[k])}`)));
+			return rows;
+		}, ...ngDevMode ? [{ debugName: "srRows" }] : /* istanbul ignore next */ []);
 		this.tooltipText = (value) => {
+			const f = this.formatter();
+			if (f) return f.value(value);
 			const unit = value === 1 ? this.unitSingular() : this.unitPlural();
 			return unit ? `${value} ${unit}` : String(value);
 		};
-		this.series = computed(() => ({
+		this.model = computed(() => ({
+			groups: this.resolvedSeries(),
+			stacked: this.stacked(),
 			labels: this.labels(),
 			data: this.values(),
 			color: this.color(),
+			colors: this.colors(),
 			hoverColor: this.hoverColor(),
-			showValues: this.showValues()
-		}), ...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
+			showValues: this.showValues(),
+			formatter: this.formatter()
+		}), ...ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []);
 		effect(() => {
-			const s = this.series();
+			const s = this.model();
+			const multi = s.groups.length > 0;
+			const fills = BarChartComponent.fills(s);
+			const freshDatasets = () => multi ? s.groups.map(BarChartComponent.groupDataset) : [{
+				data: s.data,
+				backgroundColor: fills.bg,
+				hoverBackgroundColor: fills.hover,
+				borderRadius: 3,
+				borderSkipped: false
+			}];
 			const canvas = this.canvas().nativeElement;
 			if (!this.chart) {
-				registerChartParts();
+				registerChartParts$1();
 				this.zone.runOutsideAngular(() => {
 					this.chart = new Chart(canvas, {
 						type: "bar",
 						data: {
 							labels: s.labels,
-							datasets: [{
-								data: s.data,
-								backgroundColor: s.color,
-								hoverBackgroundColor: s.hoverColor,
-								borderRadius: 3,
-								borderSkipped: false
-							}]
+							datasets: freshDatasets()
 						},
 						options: {
 							responsive: true,
@@ -74,7 +268,10 @@ var BarChartComponent = class BarChartComponent {
 							layout: { padding: { top: 20 } },
 							plugins: {
 								legend: { display: false },
-								tooltip: { callbacks: { label: (item) => this.tooltipText(Number(item.raw)) } }
+								tooltip: { callbacks: { label: (item) => {
+									const text = this.tooltipText(Number(item.raw));
+									return this.multiMode ? `${item.dataset?.label ?? ""}: ${text}` : text;
+								} } }
 							},
 							scales: {
 								y: {
@@ -103,12 +300,40 @@ var BarChartComponent = class BarChartComponent {
 				});
 			}
 			const chart = this.chart;
+			if (this.numberTickCallback === void 0) this.numberTickCallback = chart.options.scales["y"].ticks.callback;
 			chart.data.labels = s.labels;
-			const ds = chart.data.datasets[0];
-			ds.data = s.data;
-			ds.backgroundColor = s.color;
-			ds.hoverBackgroundColor = s.hoverColor;
-			chart.options.plugins["uiBarChartValueLabels"] = { enabled: s.showValues };
+			if (this.multiMode !== null && this.multiMode !== multi) chart.data.datasets = freshDatasets();
+			this.multiMode = multi;
+			if (multi) {
+				const datasets = chart.data.datasets;
+				s.groups.forEach((g, i) => {
+					const next = BarChartComponent.groupDataset(g);
+					if (datasets[i]) Object.assign(datasets[i], next);
+					else datasets.push(next);
+				});
+				datasets.splice(s.groups.length);
+			} else {
+				const ds = chart.data.datasets[0];
+				ds.data = s.data;
+				ds.backgroundColor = fills.bg;
+				ds.hoverBackgroundColor = fills.hover;
+			}
+			const axes = chart.options.scales;
+			for (const axis of ["x", "y"]) if (multi || axes[axis].stacked !== void 0) axes[axis].stacked = multi ? s.stacked : void 0;
+			const labelsOn = multi ? s.showValues && !s.stacked && s.labels.length * s.groups.length <= 24 : s.showValues;
+			chart.options.plugins["uiBarChartValueLabels"] = s.formatter ? {
+				enabled: labelsOn,
+				format: s.formatter.value
+			} : { enabled: labelsOn };
+			const ticks = chart.options.scales["y"].ticks;
+			if (s.formatter) {
+				const tick = s.formatter.tick;
+				ticks.precision = void 0;
+				ticks.callback = (v) => tick(Number(v));
+			} else {
+				ticks.precision = 0;
+				if (this.numberTickCallback !== void 0) ticks.callback = this.numberTickCallback;
+			}
 			chart.update("none");
 		});
 		inject(DestroyRef).onDestroy(() => {
@@ -128,7 +353,7 @@ var BarChartComponent = class BarChartComponent {
 	}
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
-			minVersion: "17.2.0",
+			minVersion: "17.0.0",
 			version: "22.2.2",
 			type: BarChartComponent,
 			isStandalone: true,
@@ -155,6 +380,13 @@ var BarChartComponent = class BarChartComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				colors: {
+					classPropertyName: "colors",
+					publicName: "colors",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				hoverColor: {
 					classPropertyName: "hoverColor",
 					publicName: "hoverColor",
@@ -196,6 +428,55 @@ var BarChartComponent = class BarChartComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				valueFormat: {
+					classPropertyName: "valueFormat",
+					publicName: "valueFormat",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				currency: {
+					classPropertyName: "currency",
+					publicName: "currency",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				locale: {
+					classPropertyName: "locale",
+					publicName: "locale",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				decimals: {
+					classPropertyName: "decimals",
+					publicName: "decimals",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				series: {
+					classPropertyName: "series",
+					publicName: "series",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				stacked: {
+					classPropertyName: "stacked",
+					publicName: "stacked",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				showLegend: {
+					classPropertyName: "showLegend",
+					publicName: "showLegend",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			viewQueries: [{
@@ -211,9 +492,24 @@ var BarChartComponent = class BarChartComponent {
          [attr.role]="ariaLabel() ? 'img' : null" [attr.aria-label]="ariaLabel() || null">
       <canvas #canvas></canvas>
     </div>
+    @if (legendVisible()) {
+      <ul class="bc-legend" aria-hidden="true">
+        @for (g of resolvedSeries(); track $index) {
+          <li class="bc-legend-item">
+            <span class="bc-swatch" [style.background]="g.color"></span>
+            <span class="bc-legend-label">{{ g.name }}</span>
+          </li>
+        }
+      </ul>
+    }
+    @if (srRows().length) {
+      <ul class="bc-sr-only" role="list">
+        @for (row of srRows(); track $index) { <li>{{ row }}</li> }
+      </ul>
+    }
   `,
 			isInline: true,
-			styles: [":host{display:block}.bc-wrap{position:relative}@media(max-width:768px){.bc-wrap.bc-default-height{height:200px!important}}@media(max-width:480px){.bc-wrap.bc-default-height{height:160px!important}}\n"],
+			styles: [":host{display:block;position:relative}.bc-wrap{position:relative}.bc-legend{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px}.bc-legend-item{display:flex;align-items:center;gap:6px;font-size:.8125rem;color:#334155;max-width:100%;min-width:0}.bc-legend-label{min-width:0;overflow-wrap:anywhere;word-break:break-word}.bc-swatch{width:10px;height:10px;border-radius:2px;flex-shrink:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;forced-color-adjust:none}.bc-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;list-style:none}@media(max-width:768px){.bc-wrap.bc-default-height{height:200px!important}}@media(max-width:480px){.bc-wrap.bc-default-height{height:160px!important}.bc-legend{gap:4px 12px}}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -234,8 +530,23 @@ i0.ɵɵngDeclareClassMetadata({
          [attr.role]="ariaLabel() ? 'img' : null" [attr.aria-label]="ariaLabel() || null">
       <canvas #canvas></canvas>
     </div>
+    @if (legendVisible()) {
+      <ul class="bc-legend" aria-hidden="true">
+        @for (g of resolvedSeries(); track $index) {
+          <li class="bc-legend-item">
+            <span class="bc-swatch" [style.background]="g.color"></span>
+            <span class="bc-legend-label">{{ g.name }}</span>
+          </li>
+        }
+      </ul>
+    }
+    @if (srRows().length) {
+      <ul class="bc-sr-only" role="list">
+        @for (row of srRows(); track $index) { <li>{{ row }}</li> }
+      </ul>
+    }
   `,
-			styles: [":host{display:block}.bc-wrap{position:relative}@media(max-width:768px){.bc-wrap.bc-default-height{height:200px!important}}@media(max-width:480px){.bc-wrap.bc-default-height{height:160px!important}}\n"]
+			styles: [":host{display:block;position:relative}.bc-wrap{position:relative}.bc-legend{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px}.bc-legend-item{display:flex;align-items:center;gap:6px;font-size:.8125rem;color:#334155;max-width:100%;min-width:0}.bc-legend-label{min-width:0;overflow-wrap:anywhere;word-break:break-word}.bc-swatch{width:10px;height:10px;border-radius:2px;flex-shrink:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;forced-color-adjust:none}.bc-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;list-style:none}@media(max-width:768px){.bc-wrap.bc-default-height{height:200px!important}}@media(max-width:480px){.bc-wrap.bc-default-height{height:160px!important}.bc-legend{gap:4px 12px}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -264,6 +575,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		colors: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "colors",
+				required: false
+			}]
+		}],
 		hoverColor: [{
 			type: i0.Input,
 			args: [{
@@ -312,12 +631,518 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		valueFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "valueFormat",
+				required: false
+			}]
+		}],
+		currency: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "currency",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		decimals: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "decimals",
+				required: false
+			}]
+		}],
+		series: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "series",
+				required: false
+			}]
+		}],
+		stacked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stacked",
+				required: false
+			}]
+		}],
+		showLegend: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showLegend",
+				required: false
+			}]
+		}],
+		canvas: [{
+			type: i0.ViewChild,
+			args: ["canvas", { isSignal: true }]
+		}]
+	}
+});
+let registered = false;
+function registerChartParts() {
+	if (registered) return;
+	Chart.register(DoughnutController, ArcElement, Tooltip);
+	registered = true;
+}
+const PIE_CHART_PALETTE = [
+	"#2563eb",
+	"#16a34a",
+	"#d27006",
+	"#dc2626",
+	"#7c3aed",
+	"#0891b2",
+	"#db2777",
+	"#4d7c0f",
+	"#475569",
+	"#0d9488",
+	"#c2410c",
+	"#4f46e5",
+	"#a21caf",
+	"#b45309"
+];
+const DOUGHNUT_CUTOUT = "60%";
+const PIE_CUTOUT = "0%";
+const EMPTY_COLOR = "#e2e8f0";
+function formatPercent(value, total) {
+	if (!(total > 0) || !(value > 0)) return "0%";
+	const rounded = Math.round(value / total * 1e3) / 10;
+	return rounded === 0 ? "<0.1%" : `${rounded}%`;
+}
+function prefersReducedMotion() {
+	try {
+		return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+	} catch {
+		return false;
+	}
+}
+var PieChartComponent = class PieChartComponent {
+	constructor() {
+		this.labels = input([], ...ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []);
+		this.values = input([], ...ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []);
+		this.doughnut = input(false, ...ngDevMode ? [{ debugName: "doughnut" }] : /* istanbul ignore next */ []);
+		this.colors = input([], ...ngDevMode ? [{ debugName: "colors" }] : /* istanbul ignore next */ []);
+		this.height = input(240, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.showLegend = input(true, ...ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []);
+		this.showPercent = input(true, ...ngDevMode ? [{ debugName: "showPercent" }] : /* istanbul ignore next */ []);
+		this.unitSingular = input("", ...ngDevMode ? [{ debugName: "unitSingular" }] : /* istanbul ignore next */ []);
+		this.unitPlural = input("", ...ngDevMode ? [{ debugName: "unitPlural" }] : /* istanbul ignore next */ []);
+		this.centerLabel = input("", ...ngDevMode ? [{ debugName: "centerLabel" }] : /* istanbul ignore next */ []);
+		this.centerValue = input("", ...ngDevMode ? [{ debugName: "centerValue" }] : /* istanbul ignore next */ []);
+		this.canvas = viewChild.required("canvas", ...ngDevMode ? [{ debugName: "canvas" }] : /* istanbul ignore next */ []);
+		this.zone = inject(NgZone);
+		this.browser = isPlatformBrowser(inject(PLATFORM_ID));
+		this.chart = null;
+		this.slices = computed(() => {
+			const labels = this.labels();
+			const values = this.values();
+			const palette = this.colors().length ? this.colors() : PIE_CHART_PALETTE;
+			const clean = labels.map((_, i) => {
+				const v = values[i];
+				return typeof v === "number" && Number.isFinite(v) && v > 0 ? v : 0;
+			});
+			let total = clean.reduce((a, b) => a + b, 0);
+			const scale = Number.isFinite(total) ? 1 : Math.max(...clean);
+			if (scale !== 1) total = clean.reduce((a, b) => a + b / scale, 0);
+			const out = [];
+			clean.forEach((value, index) => {
+				if (value > 0) out.push({
+					index,
+					label: labels[index],
+					value,
+					percent: formatPercent(value / scale, total),
+					color: palette[index % palette.length]
+				});
+			});
+			return out;
+		}, ...ngDevMode ? [{ debugName: "slices" }] : /* istanbul ignore next */ []);
+		this.isEmpty = computed(() => this.slices().length === 0, ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
+		this.showCenter = computed(() => this.doughnut() && !this.isEmpty() && !!(this.centerLabel() || this.centerValue()), ...ngDevMode ? [{ debugName: "showCenter" }] : /* istanbul ignore next */ []);
+		this.valueText = (value) => {
+			const unit = value === 1 ? this.unitSingular() : this.unitPlural();
+			return unit ? `${value} ${unit}` : String(value);
+		};
+		this.tooltipText = (dataIndex, value) => {
+			const base = this.valueText(value);
+			const slice = this.slices()[dataIndex];
+			return this.showPercent() && slice ? `${base} (${slice.percent})` : base;
+		};
+		this.chartData = computed(() => {
+			const empty = this.isEmpty();
+			const s = this.slices();
+			return {
+				labels: empty ? ["No data"] : s.map((x) => x.label),
+				data: empty ? [1] : s.map((x) => x.value),
+				colors: empty ? [EMPTY_COLOR] : s.map((x) => x.color),
+				cutout: this.doughnut() ? DOUGHNUT_CUTOUT : PIE_CUTOUT,
+				tooltip: !empty
+			};
+		}, ...ngDevMode ? [{ debugName: "chartData" }] : /* istanbul ignore next */ []);
+		effect(() => {
+			const d = this.chartData();
+			if (!this.browser) return;
+			const canvas = this.canvas().nativeElement;
+			const reduced = prefersReducedMotion();
+			if (!this.chart) {
+				registerChartParts();
+				this.zone.runOutsideAngular(() => {
+					this.chart = new Chart(canvas, {
+						type: "doughnut",
+						data: {
+							labels: d.labels,
+							datasets: [{
+								data: d.data,
+								backgroundColor: d.colors,
+								borderColor: "#ffffff",
+								borderWidth: 2,
+								hoverOffset: 4
+							}]
+						},
+						options: {
+							responsive: true,
+							maintainAspectRatio: false,
+							animation: reduced ? false : { duration: 400 },
+							cutout: d.cutout,
+							plugins: {
+								legend: { display: false },
+								tooltip: {
+									enabled: d.tooltip,
+									callbacks: { label: (item) => this.tooltipText(item.dataIndex, Number(item.raw)) }
+								}
+							}
+						}
+					});
+				});
+			}
+			const chart = this.chart;
+			chart.data.labels = d.labels;
+			const ds = chart.data.datasets[0];
+			ds.data = d.data;
+			ds.backgroundColor = d.colors;
+			chart.options.cutout = d.cutout;
+			chart.options.animation = reduced ? false : { duration: 400 };
+			chart.options.plugins.tooltip.enabled = d.tooltip;
+			this.zone.runOutsideAngular(() => chart.update(reduced ? "none" : void 0));
+		});
+		inject(DestroyRef).onDestroy(() => {
+			this.chart?.destroy();
+			this.chart = null;
+		});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: PieChartComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: PieChartComponent,
+			isStandalone: true,
+			selector: "ui-pie-chart",
+			inputs: {
+				labels: {
+					classPropertyName: "labels",
+					publicName: "labels",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				values: {
+					classPropertyName: "values",
+					publicName: "values",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				doughnut: {
+					classPropertyName: "doughnut",
+					publicName: "doughnut",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				colors: {
+					classPropertyName: "colors",
+					publicName: "colors",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				height: {
+					classPropertyName: "height",
+					publicName: "height",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "ariaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				showLegend: {
+					classPropertyName: "showLegend",
+					publicName: "showLegend",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				showPercent: {
+					classPropertyName: "showPercent",
+					publicName: "showPercent",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				unitSingular: {
+					classPropertyName: "unitSingular",
+					publicName: "unitSingular",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				unitPlural: {
+					classPropertyName: "unitPlural",
+					publicName: "unitPlural",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				centerLabel: {
+					classPropertyName: "centerLabel",
+					publicName: "centerLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				centerValue: {
+					classPropertyName: "centerValue",
+					publicName: "centerValue",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			viewQueries: [{
+				propertyName: "canvas",
+				first: true,
+				predicate: ["canvas"],
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: `
+    <div class="pc-wrap" [class.pc-default-height]="height() === 240" [style.height.px]="height()"
+         [attr.role]="ariaLabel() ? 'img' : null" [attr.aria-label]="ariaLabel() || null">
+      <canvas #canvas></canvas>
+      @if (isEmpty()) {
+        <div class="pc-center"><span class="pc-center-label">No data</span></div>
+      } @else if (showCenter()) {
+        <div class="pc-center">
+          @if (centerValue()) { <span class="pc-center-value">{{ centerValue() }}</span> }
+          @if (centerLabel()) { <span class="pc-center-label">{{ centerLabel() }}</span> }
+        </div>
+      }
+    </div>
+    @if (showLegend() && !isEmpty()) {
+      <ul class="pc-legend" aria-hidden="true">
+        @for (s of slices(); track s.index) {
+          <li class="pc-legend-item">
+            <span class="pc-swatch" [style.background]="s.color"></span>
+            <span class="pc-legend-label">{{ s.label }}</span>
+            @if (showPercent()) { <span class="pc-legend-percent">{{ s.percent }}</span> }
+          </li>
+        }
+      </ul>
+    }
+    <ul class="pc-sr-only" role="list">
+      @if (showCenter() && (centerLabel() || centerValue())) { <li>{{ centerLabel() }} {{ centerValue() }}</li> }
+      @if (isEmpty()) { <li>No data</li> }
+      @for (s of slices(); track s.index) {
+        <li>{{ s.label }}: {{ valueText(s.value) }}@if (showPercent()) { ({{ s.percent }}) }</li>
+      }
+    </ul>
+  `,
+			isInline: true,
+			styles: [":host{display:block;position:relative}.pc-wrap{position:relative}.pc-center{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none;max-width:40%}.pc-center-value{font-size:1.5rem;font-weight:700;color:#0f172a;line-height:1.1}.pc-center-label{font-size:.75rem;color:#475569}.pc-legend{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px}.pc-legend-item{display:flex;align-items:center;gap:6px;font-size:.8125rem;color:#334155;max-width:100%;min-width:0}.pc-legend-label{min-width:0;overflow-wrap:anywhere;word-break:break-word}.pc-swatch{width:10px;height:10px;border-radius:2px;flex-shrink:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;forced-color-adjust:none}.pc-legend-percent{color:#64748b}.pc-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;list-style:none}@media(max-width:768px){.pc-wrap.pc-default-height{height:200px!important}}@media(max-width:480px){.pc-wrap.pc-default-height{height:160px!important}.pc-legend{gap:4px 12px}.pc-center-value{font-size:1.125rem}}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: PieChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-pie-chart",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `
+    <div class="pc-wrap" [class.pc-default-height]="height() === 240" [style.height.px]="height()"
+         [attr.role]="ariaLabel() ? 'img' : null" [attr.aria-label]="ariaLabel() || null">
+      <canvas #canvas></canvas>
+      @if (isEmpty()) {
+        <div class="pc-center"><span class="pc-center-label">No data</span></div>
+      } @else if (showCenter()) {
+        <div class="pc-center">
+          @if (centerValue()) { <span class="pc-center-value">{{ centerValue() }}</span> }
+          @if (centerLabel()) { <span class="pc-center-label">{{ centerLabel() }}</span> }
+        </div>
+      }
+    </div>
+    @if (showLegend() && !isEmpty()) {
+      <ul class="pc-legend" aria-hidden="true">
+        @for (s of slices(); track s.index) {
+          <li class="pc-legend-item">
+            <span class="pc-swatch" [style.background]="s.color"></span>
+            <span class="pc-legend-label">{{ s.label }}</span>
+            @if (showPercent()) { <span class="pc-legend-percent">{{ s.percent }}</span> }
+          </li>
+        }
+      </ul>
+    }
+    <ul class="pc-sr-only" role="list">
+      @if (showCenter() && (centerLabel() || centerValue())) { <li>{{ centerLabel() }} {{ centerValue() }}</li> }
+      @if (isEmpty()) { <li>No data</li> }
+      @for (s of slices(); track s.index) {
+        <li>{{ s.label }}: {{ valueText(s.value) }}@if (showPercent()) { ({{ s.percent }}) }</li>
+      }
+    </ul>
+  `,
+			styles: [":host{display:block;position:relative}.pc-wrap{position:relative}.pc-center{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none;max-width:40%}.pc-center-value{font-size:1.5rem;font-weight:700;color:#0f172a;line-height:1.1}.pc-center-label{font-size:.75rem;color:#475569}.pc-legend{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px}.pc-legend-item{display:flex;align-items:center;gap:6px;font-size:.8125rem;color:#334155;max-width:100%;min-width:0}.pc-legend-label{min-width:0;overflow-wrap:anywhere;word-break:break-word}.pc-swatch{width:10px;height:10px;border-radius:2px;flex-shrink:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;forced-color-adjust:none}.pc-legend-percent{color:#64748b}.pc-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;list-style:none}@media(max-width:768px){.pc-wrap.pc-default-height{height:200px!important}}@media(max-width:480px){.pc-wrap.pc-default-height{height:160px!important}.pc-legend{gap:4px 12px}.pc-center-value{font-size:1.125rem}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		labels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labels",
+				required: false
+			}]
+		}],
+		values: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "values",
+				required: false
+			}]
+		}],
+		doughnut: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "doughnut",
+				required: false
+			}]
+		}],
+		colors: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "colors",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		showLegend: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showLegend",
+				required: false
+			}]
+		}],
+		showPercent: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showPercent",
+				required: false
+			}]
+		}],
+		unitSingular: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "unitSingular",
+				required: false
+			}]
+		}],
+		unitPlural: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "unitPlural",
+				required: false
+			}]
+		}],
+		centerLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "centerLabel",
+				required: false
+			}]
+		}],
+		centerValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "centerValue",
+				required: false
+			}]
+		}],
 		canvas: [{
 			type: i0.ViewChild,
 			args: ["canvas", { isSignal: true }]
 		}]
 	}
 });
-export { BarChartComponent };
+export { BarChartComponent, PieChartComponent };
 
 //# sourceMappingURL=forgeroute-ui-charts.mjs.map