@vadem/ui 0.0.0-stage → 0.0.1

package/fesm2022/vadem-ui-chart.mjs

@@ -0,0 +1,1984 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ViewEncapsulation, afterNextRender, booleanAttribute, computed, inject, input, numberAttribute, output, signal, viewChild } from "@angular/core";
+import { VD_LOCALE, vdTexts } from "@vadem/ui/locale";
+import { VdButton } from "@vadem/ui/button";
+import { vdUniqueId } from "@vadem/ui/field";
+function linearScale(domain, range) {
+	const [d0, d1] = domain;
+	const [r0, r1] = range;
+	const span = d1 - d0 || 1;
+	const scale = ((value) => r0 + (value - d0) / span * (r1 - r0));
+	return Object.assign(scale, {
+		domain,
+		range
+	});
+}
+function niceTicks(min, max, target = 5) {
+	const lo = Math.min(0, min);
+	const hi = Math.max(0, max);
+	if (lo === hi) return [0, 1];
+	const raw = (hi - lo) / Math.max(1, target);
+	const power = 10 ** Math.floor(Math.log10(raw));
+	const step = [
+		1,
+		2,
+		2.5,
+		5,
+		10
+	].map((m) => m * power).find((s) => s >= raw) ?? 10 * power;
+	const start = Math.floor(lo / step) * step;
+	const end = Math.ceil(hi / step) * step;
+	const ticks = [];
+	for (let v = start; v <= end + step / 2; v += step) ticks.push(Number(v.toFixed(10)));
+	return ticks;
+}
+function bands(count, range) {
+	const [r0, r1] = range;
+	const step = count > 0 ? (r1 - r0) / count : 0;
+	return Array.from({ length: count }, (_, i) => ({
+		start: r0 + i * step,
+		center: r0 + (i + .5) * step,
+		step
+	}));
+}
+function nearestIndex(position, count, range) {
+	if (count <= 0) return -1;
+	const [r0, r1] = range;
+	const t = (position - r0) / (r1 - r0 || 1);
+	return Math.min(count - 1, Math.max(0, Math.floor(t * count)));
+}
+function stack(series, count) {
+	const up = new Array(count).fill(0);
+	const down = new Array(count).fill(0);
+	return series.map((s) => Array.from({ length: count }, (_, i) => {
+		const v = s.values[i] ?? 0;
+		if (v >= 0) {
+			const seg = {
+				from: up[i],
+				to: up[i] + v
+			};
+			up[i] += v;
+			return seg;
+		}
+		const seg = {
+			from: down[i],
+			to: down[i] + v
+		};
+		down[i] += v;
+		return seg;
+	}));
+}
+function extent(series, count, stacked) {
+	let min = 0;
+	let max = 0;
+	if (stacked) for (const segments of stack(series, count)) for (const seg of segments) {
+		min = Math.min(min, seg.to);
+		max = Math.max(max, seg.to);
+	}
+	else for (const s of series) for (const v of s.values) {
+		if (v === null || !Number.isFinite(v)) continue;
+		min = Math.min(min, v);
+		max = Math.max(max, v);
+	}
+	return [min, max];
+}
+const r = (n) => Math.round(n * 100) / 100;
+function barPath(center, thickness, base, end, radius, orientation) {
+	const length = Math.abs(end - base);
+	if (length < .5) return "";
+	const rad = Math.min(radius, thickness / 2, length);
+	const a = center - thickness / 2;
+	const b = center + thickness / 2;
+	const tip = end - (end < base ? -1 : 1) * rad;
+	if (orientation === "vertical") return [
+		`M${r(a)},${r(base)}`,
+		`L${r(a)},${r(tip)}`,
+		`Q${r(a)},${r(end)} ${r(a + rad)},${r(end)}`,
+		`L${r(b - rad)},${r(end)}`,
+		`Q${r(b)},${r(end)} ${r(b)},${r(tip)}`,
+		`L${r(b)},${r(base)}`,
+		"Z"
+	].join(" ");
+	return [
+		`M${r(base)},${r(a)}`,
+		`L${r(tip)},${r(a)}`,
+		`Q${r(end)},${r(a)} ${r(end)},${r(a + rad)}`,
+		`L${r(end)},${r(b - rad)}`,
+		`Q${r(end)},${r(b)} ${r(tip)},${r(b)}`,
+		`L${r(base)},${r(b)}`,
+		"Z"
+	].join(" ");
+}
+function linePath(points) {
+	let d = "";
+	let pen = false;
+	for (const p of points) {
+		if (!p) {
+			pen = false;
+			continue;
+		}
+		d += `${pen ? "L" : "M"}${r(p[0])},${r(p[1])}`;
+		pen = true;
+	}
+	return d;
+}
+function areaPath(points, baseline) {
+	const runs = [[]];
+	for (const p of points) if (p) runs[runs.length - 1].push(p);
+	else if (runs[runs.length - 1].length) runs.push([]);
+	return runs.filter((run) => run.length > 1).map((run) => `M${r(run[0][0])},${r(baseline)}` + run.map(([x, y]) => `L${r(x)},${r(y)}`).join("") + `L${r(run[run.length - 1][0])},${r(baseline)}Z`).join("");
+}
+function seriesSlot(index, count) {
+	return count === 1 ? "accent" : String(index % 8 + 1);
+}
+var VdChartFrame = class VdChartFrame {
+	title = input.required(...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	description = input(...ngDevMode ? [void 0, { debugName: "description" }] : /* istanbul ignore next */ []);
+	categories = input([], ...ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []);
+	series = input([], ...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
+	kind = input("bar", ...ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []);
+	format = input(...ngDevMode ? [void 0, { debugName: "format" }] : /* istanbul ignore next */ []);
+	categoryLabel = input(...ngDevMode ? [void 0, { debugName: "categoryLabel" }] : /* istanbul ignore next */ []);
+	active = input(-1, ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	tooltipX = input(null, ...ngDevMode ? [{ debugName: "tooltipX" }] : /* istanbul ignore next */ []);
+	tooltipY = input(0, ...ngDevMode ? [{ debugName: "tooltipY" }] : /* istanbul ignore next */ []);
+	tableLabel = input(...ngDevMode ? [void 0, { debugName: "tableLabel" }] : /* istanbul ignore next */ []);
+	loading = input(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+	t = vdTexts("chart", {
+		tableLabel: this.tableLabel,
+		categoryLabel: this.categoryLabel
+	});
+	locale = inject(VD_LOCALE);
+	titleId = vdUniqueId("vd-chart-title");
+	tableId = vdUniqueId("vd-chart-table");
+	tableShown = signal(false, ...ngDevMode ? [{ debugName: "tableShown" }] : /* istanbul ignore next */ []);
+	width = signal(0, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	pointerLeave = output();
+	plot = viewChild.required("plot", ...ngDevMode ? [{ debugName: "plot" }] : /* istanbul ignore next */ []);
+	numberFormat = computed(() => new Intl.NumberFormat(this.locale.code), ...ngDevMode ? [{ debugName: "numberFormat" }] : /* istanbul ignore next */ []);
+	constructor() {
+		const destroyRef = inject(DestroyRef);
+		afterNextRender(() => {
+			const el = this.plot().nativeElement;
+			const view = el.ownerDocument.defaultView;
+			const measure = () => this.width.set(el.clientWidth);
+			measure();
+			if (!view?.ResizeObserver) return;
+			const observer = new view.ResizeObserver(measure);
+			observer.observe(el);
+			destroyRef.onDestroy(() => observer.disconnect());
+		});
+	}
+	slot(index) {
+		return seriesSlot(index, this.series().length);
+	}
+	valueText(value) {
+		if (value === null || value === void 0 || !Number.isFinite(value)) return "—";
+		return (this.format() ?? ((v) => this.numberFormat().format(v)))(value);
+	}
+	leave() {
+		this.pointerLeave.emit();
+	}
+	tooltipSide = computed(() => (this.tooltipX() ?? 0) > this.width() / 2 ? "start" : "end", ...ngDevMode ? [{ debugName: "tooltipSide" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdChartFrame,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: VdChartFrame,
+		isStandalone: true,
+		selector: "vd-chart-frame",
+		inputs: {
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			description: {
+				classPropertyName: "description",
+				publicName: "description",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			categories: {
+				classPropertyName: "categories",
+				publicName: "categories",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			series: {
+				classPropertyName: "series",
+				publicName: "series",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			kind: {
+				classPropertyName: "kind",
+				publicName: "kind",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			format: {
+				classPropertyName: "format",
+				publicName: "format",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			categoryLabel: {
+				classPropertyName: "categoryLabel",
+				publicName: "categoryLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			active: {
+				classPropertyName: "active",
+				publicName: "active",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tooltipX: {
+				classPropertyName: "tooltipX",
+				publicName: "tooltipX",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tooltipY: {
+				classPropertyName: "tooltipY",
+				publicName: "tooltipY",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tableLabel: {
+				classPropertyName: "tableLabel",
+				publicName: "tableLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loading: {
+				classPropertyName: "loading",
+				publicName: "loading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { pointerLeave: "pointerLeave" },
+		host: { classAttribute: "vd-chart" },
+		viewQueries: [{
+			propertyName: "plot",
+			first: true,
+			predicate: ["plot"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <figure
+      class="vd-chart__figure"
+      [attr.aria-labelledby]="titleId"
+      [attr.aria-busy]="loading() || null"
+      [attr.data-loading]="loading() ? '' : null"
+    >
+      <figcaption class="vd-chart__head">
+        <span class="vd-chart__title" [id]="titleId">{{ title() }}</span>
+        @if (description()) {
+          <span class="vd-chart__description">{{ description() }}</span>
+        }
+      </figcaption>
+      <div class="vd-chart__toolbar">
+        @if (series().length > 1) {
+          <ul class="vd-chart__legend" role="list">
+            @for (s of series(); track $index) {
+              <li class="vd-chart__legend-item">
+                <span
+                  class="vd-chart__key"
+                  aria-hidden="true"
+                  [attr.data-series]="slot($index)"
+                  [attr.data-kind]="kind()"
+                ></span>
+                {{ s.name }}
+              </li>
+            }
+          </ul>
+        }
+        <button
+          vdButton
+          type="button"
+          variant="ghost"
+          size="sm"
+          class="vd-chart__table-toggle"
+          [attr.aria-pressed]="tableShown()"
+          [attr.aria-controls]="tableId"
+          (click)="tableShown.set(!tableShown())"
+        >
+          {{ t().tableLabel }}
+        </button>
+      </div>
+
+      <div #plot class="vd-chart__plot" [hidden]="tableShown()" (pointerleave)="leave()">
+        <ng-content />
+        @if (active() >= 0 && tooltipX() !== null) {
+          <div
+            class="vd-chart__tooltip"
+            role="presentation"
+            aria-hidden="true"
+            [attr.data-side]="tooltipSide()"
+            [style.--vd-chart-tip-x.px]="tooltipX()"
+            [style.--vd-chart-tip-y.px]="tooltipY()"
+          >
+            <span class="vd-chart__tooltip-category" dir="auto">{{ categories()[active()] }}</span>
+            @for (s of series(); track $index) {
+              <span class="vd-chart__tooltip-row">
+                <span
+                  class="vd-chart__key"
+                  [attr.data-series]="slot($index)"
+                  data-kind="line"
+                ></span>
+                <strong class="vd-chart__tooltip-value">{{ valueText(s.values[active()]) }}</strong>
+                <span class="vd-chart__tooltip-name" dir="auto">{{ s.name }}</span>
+              </span>
+            }
+          </div>
+        }
+      </div>
+
+      <div
+        class="vd-chart__table-wrap"
+        role="region"
+        tabindex="0"
+        [id]="tableId"
+        [attr.aria-labelledby]="titleId"
+        [hidden]="!tableShown()"
+      >
+        @if (tableShown()) {
+          <table class="vd-chart__table">
+            <thead>
+              <tr>
+                <th scope="col">{{ t().categoryLabel }}</th>
+                @for (s of series(); track $index) {
+                  <th scope="col">{{ s.name }}</th>
+                }
+              </tr>
+            </thead>
+            <tbody>
+              @for (c of categories(); track $index; let i = $index) {
+                <tr>
+                  <th scope="row">{{ c }}</th>
+                  @for (s of series(); track $index) {
+                    <td>{{ valueText(s.values[i]) }}</td>
+                  }
+                </tr>
+              }
+            </tbody>
+          </table>
+        }
+      </div>
+    </figure>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: VdButton,
+			selector: "button[vdButton], a[vdButton]",
+			inputs: [
+				"variant",
+				"size",
+				"disabled",
+				"loading",
+				"iconOnly",
+				"type"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdChartFrame,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-chart-frame",
+			imports: [VdButton],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: { class: "vd-chart" },
+			template: `
+    <figure
+      class="vd-chart__figure"
+      [attr.aria-labelledby]="titleId"
+      [attr.aria-busy]="loading() || null"
+      [attr.data-loading]="loading() ? '' : null"
+    >
+      <figcaption class="vd-chart__head">
+        <span class="vd-chart__title" [id]="titleId">{{ title() }}</span>
+        @if (description()) {
+          <span class="vd-chart__description">{{ description() }}</span>
+        }
+      </figcaption>
+      <div class="vd-chart__toolbar">
+        @if (series().length > 1) {
+          <ul class="vd-chart__legend" role="list">
+            @for (s of series(); track $index) {
+              <li class="vd-chart__legend-item">
+                <span
+                  class="vd-chart__key"
+                  aria-hidden="true"
+                  [attr.data-series]="slot($index)"
+                  [attr.data-kind]="kind()"
+                ></span>
+                {{ s.name }}
+              </li>
+            }
+          </ul>
+        }
+        <button
+          vdButton
+          type="button"
+          variant="ghost"
+          size="sm"
+          class="vd-chart__table-toggle"
+          [attr.aria-pressed]="tableShown()"
+          [attr.aria-controls]="tableId"
+          (click)="tableShown.set(!tableShown())"
+        >
+          {{ t().tableLabel }}
+        </button>
+      </div>
+
+      <div #plot class="vd-chart__plot" [hidden]="tableShown()" (pointerleave)="leave()">
+        <ng-content />
+        @if (active() >= 0 && tooltipX() !== null) {
+          <div
+            class="vd-chart__tooltip"
+            role="presentation"
+            aria-hidden="true"
+            [attr.data-side]="tooltipSide()"
+            [style.--vd-chart-tip-x.px]="tooltipX()"
+            [style.--vd-chart-tip-y.px]="tooltipY()"
+          >
+            <span class="vd-chart__tooltip-category" dir="auto">{{ categories()[active()] }}</span>
+            @for (s of series(); track $index) {
+              <span class="vd-chart__tooltip-row">
+                <span
+                  class="vd-chart__key"
+                  [attr.data-series]="slot($index)"
+                  data-kind="line"
+                ></span>
+                <strong class="vd-chart__tooltip-value">{{ valueText(s.values[active()]) }}</strong>
+                <span class="vd-chart__tooltip-name" dir="auto">{{ s.name }}</span>
+              </span>
+            }
+          </div>
+        }
+      </div>
+
+      <div
+        class="vd-chart__table-wrap"
+        role="region"
+        tabindex="0"
+        [id]="tableId"
+        [attr.aria-labelledby]="titleId"
+        [hidden]="!tableShown()"
+      >
+        @if (tableShown()) {
+          <table class="vd-chart__table">
+            <thead>
+              <tr>
+                <th scope="col">{{ t().categoryLabel }}</th>
+                @for (s of series(); track $index) {
+                  <th scope="col">{{ s.name }}</th>
+                }
+              </tr>
+            </thead>
+            <tbody>
+              @for (c of categories(); track $index; let i = $index) {
+                <tr>
+                  <th scope="row">{{ c }}</th>
+                  @for (s of series(); track $index) {
+                    <td>{{ valueText(s.values[i]) }}</td>
+                  }
+                </tr>
+              }
+            </tbody>
+          </table>
+        }
+      </div>
+    </figure>
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: true
+			}]
+		}],
+		description: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "description",
+				required: false
+			}]
+		}],
+		categories: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "categories",
+				required: false
+			}]
+		}],
+		series: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "series",
+				required: false
+			}]
+		}],
+		kind: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "kind",
+				required: false
+			}]
+		}],
+		format: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "format",
+				required: false
+			}]
+		}],
+		categoryLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "categoryLabel",
+				required: false
+			}]
+		}],
+		active: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "active",
+				required: false
+			}]
+		}],
+		tooltipX: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tooltipX",
+				required: false
+			}]
+		}],
+		tooltipY: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tooltipY",
+				required: false
+			}]
+		}],
+		tableLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tableLabel",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		pointerLeave: [{
+			type: i0.Output,
+			args: ["pointerLeave"]
+		}],
+		plot: [{
+			type: i0.ViewChild,
+			args: ["plot", { isSignal: true }]
+		}]
+	}
+});
+const CHAR_PX = 6.8;
+const AXIS_FONT_GAP = 8;
+var VdChartBase = class VdChartBase {
+	title = input.required(...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	description = input(...ngDevMode ? [void 0, { debugName: "description" }] : /* istanbul ignore next */ []);
+	categories = input([], ...ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []);
+	series = input([], ...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
+	height = input(240, {
+		...ngDevMode ? { debugName: "height" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	format = input(...ngDevMode ? [void 0, { debugName: "format" }] : /* istanbul ignore next */ []);
+	axisFormat = input(...ngDevMode ? [void 0, { debugName: "axisFormat" }] : /* istanbul ignore next */ []);
+	categoryLabel = input(...ngDevMode ? [void 0, { debugName: "categoryLabel" }] : /* istanbul ignore next */ []);
+	loading = input(false, {
+		...ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	frame = viewChild.required(VdChartFrame, ...ngDevMode ? [{ debugName: "frame" }] : /* istanbul ignore next */ []);
+	active = signal(-1, ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	focusIndex = signal(0, ...ngDevMode ? [{ debugName: "focusIndex" }] : /* istanbul ignore next */ []);
+	count = computed(() => this.categories().length, ...ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []);
+	width = computed(() => this.frame().width(), ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	ticks = computed(() => {
+		const [min, max] = this.extentOf();
+		return niceTicks(min, max, Math.max(2, Math.round(this.height() / 60)));
+	}, ...ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []);
+	compact = computed(() => new Intl.NumberFormat(this.localeCode(), {
+		notation: "compact",
+		maximumFractionDigits: 1
+	}), ...ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []);
+	locale = inject(VD_LOCALE);
+	localeCode() {
+		return this.locale.code;
+	}
+	tickText(value) {
+		return (this.axisFormat() ?? ((v) => this.compact().format(v)))(value);
+	}
+	tickWidth = computed(() => Math.max(...this.ticks().map((t) => this.tickText(t).length), 1) * CHAR_PX + AXIS_FONT_GAP, ...ngDevMode ? [{ debugName: "tickWidth" }] : /* istanbul ignore next */ []);
+	categoryWidth = computed(() => Math.max(...this.categories().map((c) => c.length), 1) * CHAR_PX + AXIS_FONT_GAP, ...ngDevMode ? [{ debugName: "categoryWidth" }] : /* istanbul ignore next */ []);
+	valueScale(range) {
+		const ticks = this.ticks();
+		return linearScale([ticks[0], ticks[ticks.length - 1]], range);
+	}
+	slot(index) {
+		return seriesSlot(index, this.series().length);
+	}
+	pointLabel(index) {
+		const values = this.series().map((s) => `${s.name} ${this.frame().valueText(s.values[index])}`).join(", ");
+		return `${this.categories()[index]}: ${values}`;
+	}
+	labelEvery(available) {
+		const per = this.categoryWidth();
+		const fit = Math.max(1, Math.floor(available / per));
+		return Math.max(1, Math.ceil(this.count() / fit));
+	}
+	pointerAt(position, range) {
+		this.active.set(nearestIndex(position, this.count(), range));
+	}
+	onKeydown(event, index) {
+		const last = this.count() - 1;
+		const next = {
+			ArrowRight: index + 1,
+			ArrowDown: index + 1,
+			ArrowLeft: index - 1,
+			ArrowUp: index - 1,
+			Home: 0,
+			End: last
+		}[event.key] ?? null;
+		if (next === null) return;
+		event.preventDefault();
+		const target = Math.min(last, Math.max(0, next));
+		this.focusIndex.set(target);
+		event.currentTarget.parentElement?.querySelector(`[data-index="${target}"]`)?.focus();
+	}
+	onFocus(index) {
+		this.focusIndex.set(index);
+		this.active.set(index);
+	}
+	onBlur(event) {
+		if (!event.relatedTarget?.closest(".vd-chart__hits")) this.active.set(-1);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdChartBase,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.2.0",
+		version: "22.2.1",
+		type: VdChartBase,
+		isStandalone: true,
+		inputs: {
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			description: {
+				classPropertyName: "description",
+				publicName: "description",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			categories: {
+				classPropertyName: "categories",
+				publicName: "categories",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			series: {
+				classPropertyName: "series",
+				publicName: "series",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			format: {
+				classPropertyName: "format",
+				publicName: "format",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			axisFormat: {
+				classPropertyName: "axisFormat",
+				publicName: "axisFormat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			categoryLabel: {
+				classPropertyName: "categoryLabel",
+				publicName: "categoryLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loading: {
+				classPropertyName: "loading",
+				publicName: "loading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		viewQueries: [{
+			propertyName: "frame",
+			first: true,
+			predicate: VdChartFrame,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdChartBase,
+	decorators: [{ type: Directive }],
+	propDecorators: {
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: true
+			}]
+		}],
+		description: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "description",
+				required: false
+			}]
+		}],
+		categories: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "categories",
+				required: false
+			}]
+		}],
+		series: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "series",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		format: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "format",
+				required: false
+			}]
+		}],
+		axisFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "axisFormat",
+				required: false
+			}]
+		}],
+		categoryLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "categoryLabel",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		frame: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => VdChartFrame), { isSignal: true }]
+		}]
+	}
+});
+const MAX_THICKNESS = 24;
+const RADIUS = 4;
+const GAP = 2;
+const PAD$1 = 8;
+const AXIS_BAND$1 = 22;
+var VdBarChart = class VdBarChart extends VdChartBase {
+	orientation = input("vertical", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	stacked = input(false, {
+		...ngDevMode ? { debugName: "stacked" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	highlight = input(null, ...ngDevMode ? [{ debugName: "highlight" }] : /* istanbul ignore next */ []);
+	highlighted = computed(() => {
+		const h = this.highlight();
+		const values = this.series()[0]?.values ?? [];
+		if (h === null || this.series().length !== 1) return -1;
+		if (h !== "max") return h;
+		let best = -1;
+		values.forEach((v, i) => {
+			if (v !== null && Number.isFinite(v) && (best < 0 || v > (values[best] ?? -Infinity))) best = i;
+		});
+		return best;
+	}, ...ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []);
+	stackedValues = () => this.stacked();
+	extentOf() {
+		return extent(this.series(), this.count(), this.stacked());
+	}
+	vertical = computed(() => this.orientation() === "vertical", ...ngDevMode ? [{ debugName: "vertical" }] : /* istanbul ignore next */ []);
+	box = computed(() => {
+		const w = this.width();
+		const h = this.height();
+		if (this.vertical()) return {
+			x0: this.tickWidth(),
+			x1: w - PAD$1,
+			y0: PAD$1,
+			y1: h - AXIS_BAND$1
+		};
+		return {
+			x0: Math.min(this.categoryWidth(), w * .4),
+			x1: w - PAD$1 - this.tickWidth() / 2,
+			y0: PAD$1,
+			y1: h - AXIS_BAND$1
+		};
+	}, ...ngDevMode ? [{ debugName: "box" }] : /* istanbul ignore next */ []);
+	scale = computed(() => {
+		const b = this.box();
+		return this.vertical() ? this.valueScale([b.y1, b.y0]) : this.valueScale([b.x0, b.x1]);
+	}, ...ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []);
+	categoryRange = computed(() => {
+		const b = this.box();
+		return this.vertical() ? [b.x0, b.x1] : [b.y0, b.y1];
+	}, ...ngDevMode ? [{ debugName: "categoryRange" }] : /* istanbul ignore next */ []);
+	bandList = computed(() => bands(this.count(), this.categoryRange()), ...ngDevMode ? [{ debugName: "bandList" }] : /* istanbul ignore next */ []);
+	marks = computed(() => {
+		const series = this.series();
+		const n = series.length;
+		if (!n || !this.count()) return [];
+		const scale = this.scale();
+		const zero = scale(0);
+		const orient = this.orientation();
+		const marks = [];
+		if (this.stacked()) {
+			const segments = stack(series, this.count());
+			const outer = this.bandList().map((_, c) => {
+				let top = -1;
+				let bottom = -1;
+				segments.forEach((s, i) => {
+					if (s[c].to > s[c].from) top = i;
+					if (s[c].to < s[c].from) bottom = i;
+				});
+				return {
+					top,
+					bottom
+				};
+			});
+			this.bandList().forEach((band, c) => {
+				const thickness = Math.min(MAX_THICKNESS, band.step * .6);
+				segments.forEach((s, i) => {
+					const seg = s[c];
+					if (seg.to === seg.from) return;
+					const rounded = i === outer[c].top || i === outer[c].bottom;
+					const from = scale(seg.from);
+					const to = scale(seg.to);
+					const dir = Math.sign(to - from);
+					const end = rounded ? to : to - dir * GAP;
+					marks.push({
+						d: barPath(band.center, thickness, from, end, rounded ? RADIUS : 0, orient),
+						series: i,
+						category: c
+					});
+				});
+			});
+			return marks;
+		}
+		this.bandList().forEach((band, c) => {
+			const thickness = Math.min(MAX_THICKNESS, (band.step * .7 - GAP * (n - 1)) / n);
+			const group = thickness * n + GAP * (n - 1);
+			series.forEach((s, i) => {
+				const v = s.values[c];
+				if (v === null || v === void 0 || !Number.isFinite(v)) return;
+				const center = band.center - group / 2 + thickness / 2 + i * (thickness + GAP);
+				marks.push({
+					d: barPath(center, thickness, zero, scale(v), RADIUS, orient),
+					series: i,
+					category: c
+				});
+			});
+		});
+		return marks;
+	}, ...ngDevMode ? [{ debugName: "marks" }] : /* istanbul ignore next */ []);
+	tickMarks = computed(() => {
+		const b = this.box();
+		const scale = this.scale();
+		return this.ticks().map((value) => this.vertical() ? {
+			value,
+			x1: b.x0,
+			x2: b.x1,
+			y1: scale(value),
+			y2: scale(value),
+			tx: b.x0 - 6,
+			ty: scale(value),
+			anchor: "end"
+		} : {
+			value,
+			x1: scale(value),
+			x2: scale(value),
+			y1: b.y0,
+			y2: b.y1,
+			tx: scale(value),
+			ty: b.y1 + AXIS_BAND$1 / 2 + 2,
+			anchor: "middle"
+		});
+	}, ...ngDevMode ? [{ debugName: "tickMarks" }] : /* istanbul ignore next */ []);
+	categoryTicks = computed(() => {
+		const b = this.box();
+		const list = this.bandList();
+		if (this.vertical()) {
+			const every = this.labelEvery(b.x1 - b.x0);
+			return list.map((band, index) => ({
+				index,
+				x: band.center,
+				y: b.y1 + AXIS_BAND$1 / 2 + 2,
+				anchor: "middle"
+			})).filter((c) => c.index % every === 0);
+		}
+		return list.map((band, index) => ({
+			index,
+			x: b.x0 - 8,
+			y: band.center,
+			anchor: "end"
+		}));
+	}, ...ngDevMode ? [{ debugName: "categoryTicks" }] : /* istanbul ignore next */ []);
+	hits = computed(() => {
+		const b = this.box();
+		return this.bandList().map((band, index) => this.vertical() ? {
+			index,
+			x: band.start,
+			y: b.y0,
+			w: band.step,
+			h: b.y1 - b.y0
+		} : {
+			index,
+			x: b.x0,
+			y: band.start,
+			w: b.x1 - b.x0,
+			h: band.step
+		});
+	}, ...ngDevMode ? [{ debugName: "hits" }] : /* istanbul ignore next */ []);
+	bandRect = computed(() => {
+		const hit = this.hits()[this.active()];
+		if (!hit) return {
+			x: 0,
+			y: 0,
+			w: 0,
+			h: 0
+		};
+		const inset = 2;
+		return {
+			x: hit.x + inset,
+			y: hit.y + inset,
+			w: Math.max(0, hit.w - 4),
+			h: Math.max(0, hit.h - 4)
+		};
+	}, ...ngDevMode ? [{ debugName: "bandRect" }] : /* istanbul ignore next */ []);
+	tooltip = computed(() => {
+		const i = this.active();
+		const band = this.bandList()[i];
+		if (!band) return null;
+		const b = this.box();
+		return this.vertical() ? {
+			x: band.center,
+			y: b.y0
+		} : {
+			x: b.x0 + (b.x1 - b.x0) / 2,
+			y: band.center
+		};
+	}, ...ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []);
+	onPointer(event) {
+		const rect = event.currentTarget.getBoundingClientRect();
+		const pos = this.vertical() ? event.clientX - rect.left : event.clientY - rect.top;
+		this.pointerAt(pos, this.categoryRange());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdBarChart,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: VdBarChart,
+		isStandalone: true,
+		selector: "vd-bar-chart",
+		inputs: {
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stacked: {
+				classPropertyName: "stacked",
+				publicName: "stacked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			highlight: {
+				classPropertyName: "highlight",
+				publicName: "highlight",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"attr.title": "null",
+				"attr.data-orientation": "orientation()"
+			},
+			classAttribute: "vd-bar-chart"
+		},
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
+    <vd-chart-frame
+      kind="bar"
+      [title]="title()"
+      [description]="description()"
+      [categories]="categories()"
+      [series]="series()"
+      [format]="format()"
+      [categoryLabel]="categoryLabel()"
+      [loading]="loading()"
+      [active]="active()"
+      [tooltipX]="tooltip()?.x ?? null"
+      [tooltipY]="tooltip()?.y ?? 0"
+      (pointerLeave)="active.set(-1)"
+    >
+      @if (width() > 0) {
+        <svg
+          class="vd-chart__svg"
+          [attr.width]="width()"
+          [attr.height]="height()"
+          [attr.viewBox]="'0 0 ' + width() + ' ' + height()"
+          role="group"
+          [attr.aria-labelledby]="frame().titleId"
+          (pointermove)="onPointer($event)"
+        >
+          <g class="vd-chart__grid" aria-hidden="true">
+            @for (t of tickMarks(); track t.value) {
+              <line
+                [attr.x1]="t.x1"
+                [attr.x2]="t.x2"
+                [attr.y1]="t.y1"
+                [attr.y2]="t.y2"
+                [attr.data-zero]="t.value === 0 ? '' : null"
+              />
+              <text
+                [attr.x]="t.tx"
+                [attr.y]="t.ty"
+                [attr.text-anchor]="t.anchor"
+                dominant-baseline="middle"
+              >
+                {{ tickText(t.value) }}
+              </text>
+            }
+          </g>
+          @if (active() >= 0) {
+            <rect
+              class="vd-chart__band"
+              aria-hidden="true"
+              [attr.x]="bandRect().x"
+              [attr.y]="bandRect().y"
+              [attr.width]="bandRect().w"
+              [attr.height]="bandRect().h"
+              rx="4"
+            />
+          }
+          <g class="vd-chart__marks" aria-hidden="true">
+            @for (m of marks(); track $index) {
+              <path
+                class="vd-chart__bar"
+                [attr.d]="m.d"
+                [attr.data-series]="slot(m.series)"
+                [attr.data-muted]="highlighted() >= 0 && m.category !== highlighted() ? '' : null"
+              />
+            }
+          </g>
+          <g class="vd-chart__axis" aria-hidden="true">
+            @for (c of categoryTicks(); track c.index) {
+              <text
+                [attr.x]="c.x"
+                [attr.y]="c.y"
+                [attr.text-anchor]="c.anchor"
+                dominant-baseline="middle"
+              >
+                {{ categories()[c.index] }}
+              </text>
+            }
+          </g>
+          <g class="vd-chart__hits">
+            @for (h of hits(); track h.index) {
+              <rect
+                class="vd-chart__hit"
+                rx="6"
+                role="img"
+                [attr.data-index]="h.index"
+                [attr.tabindex]="h.index === focusIndex() ? 0 : -1"
+                [attr.aria-label]="pointLabel(h.index)"
+                [attr.x]="h.x"
+                [attr.y]="h.y"
+                [attr.width]="h.w"
+                [attr.height]="h.h"
+                (focus)="onFocus(h.index)"
+                (blur)="onBlur($event)"
+                (keydown)="onKeydown($event, h.index)"
+              />
+            }
+          </g>
+        </svg>
+      }
+    </vd-chart-frame>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: VdChartFrame,
+			selector: "vd-chart-frame",
+			inputs: [
+				"title",
+				"description",
+				"categories",
+				"series",
+				"kind",
+				"format",
+				"categoryLabel",
+				"active",
+				"tooltipX",
+				"tooltipY",
+				"tableLabel",
+				"loading"
+			],
+			outputs: ["pointerLeave"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdBarChart,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-bar-chart",
+			imports: [VdChartFrame],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				"[attr.title]": "null",
+				class: "vd-bar-chart",
+				"[attr.data-orientation]": "orientation()"
+			},
+			template: `
+    <vd-chart-frame
+      kind="bar"
+      [title]="title()"
+      [description]="description()"
+      [categories]="categories()"
+      [series]="series()"
+      [format]="format()"
+      [categoryLabel]="categoryLabel()"
+      [loading]="loading()"
+      [active]="active()"
+      [tooltipX]="tooltip()?.x ?? null"
+      [tooltipY]="tooltip()?.y ?? 0"
+      (pointerLeave)="active.set(-1)"
+    >
+      @if (width() > 0) {
+        <svg
+          class="vd-chart__svg"
+          [attr.width]="width()"
+          [attr.height]="height()"
+          [attr.viewBox]="'0 0 ' + width() + ' ' + height()"
+          role="group"
+          [attr.aria-labelledby]="frame().titleId"
+          (pointermove)="onPointer($event)"
+        >
+          <g class="vd-chart__grid" aria-hidden="true">
+            @for (t of tickMarks(); track t.value) {
+              <line
+                [attr.x1]="t.x1"
+                [attr.x2]="t.x2"
+                [attr.y1]="t.y1"
+                [attr.y2]="t.y2"
+                [attr.data-zero]="t.value === 0 ? '' : null"
+              />
+              <text
+                [attr.x]="t.tx"
+                [attr.y]="t.ty"
+                [attr.text-anchor]="t.anchor"
+                dominant-baseline="middle"
+              >
+                {{ tickText(t.value) }}
+              </text>
+            }
+          </g>
+          @if (active() >= 0) {
+            <rect
+              class="vd-chart__band"
+              aria-hidden="true"
+              [attr.x]="bandRect().x"
+              [attr.y]="bandRect().y"
+              [attr.width]="bandRect().w"
+              [attr.height]="bandRect().h"
+              rx="4"
+            />
+          }
+          <g class="vd-chart__marks" aria-hidden="true">
+            @for (m of marks(); track $index) {
+              <path
+                class="vd-chart__bar"
+                [attr.d]="m.d"
+                [attr.data-series]="slot(m.series)"
+                [attr.data-muted]="highlighted() >= 0 && m.category !== highlighted() ? '' : null"
+              />
+            }
+          </g>
+          <g class="vd-chart__axis" aria-hidden="true">
+            @for (c of categoryTicks(); track c.index) {
+              <text
+                [attr.x]="c.x"
+                [attr.y]="c.y"
+                [attr.text-anchor]="c.anchor"
+                dominant-baseline="middle"
+              >
+                {{ categories()[c.index] }}
+              </text>
+            }
+          </g>
+          <g class="vd-chart__hits">
+            @for (h of hits(); track h.index) {
+              <rect
+                class="vd-chart__hit"
+                rx="6"
+                role="img"
+                [attr.data-index]="h.index"
+                [attr.tabindex]="h.index === focusIndex() ? 0 : -1"
+                [attr.aria-label]="pointLabel(h.index)"
+                [attr.x]="h.x"
+                [attr.y]="h.y"
+                [attr.width]="h.w"
+                [attr.height]="h.h"
+                (focus)="onFocus(h.index)"
+                (blur)="onBlur($event)"
+                (keydown)="onKeydown($event, h.index)"
+              />
+            }
+          </g>
+        </svg>
+      }
+    </vd-chart-frame>
+  `
+		}]
+	}],
+	propDecorators: {
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		stacked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stacked",
+				required: false
+			}]
+		}],
+		highlight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "highlight",
+				required: false
+			}]
+		}]
+	}
+});
+const PAD = 12;
+const AXIS_BAND = 22;
+const MAX_END_LABELS = 4;
+const END_LABEL_GAP = 14;
+var VdLineChart = class VdLineChart extends VdChartBase {
+	area = input(true, {
+		...ngDevMode ? { debugName: "area" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	stackedValues = () => false;
+	extentOf() {
+		return extent(this.series(), this.count(), false);
+	}
+	showArea = computed(() => this.area() && this.series().length === 1, ...ngDevMode ? [{ debugName: "showArea" }] : /* istanbul ignore next */ []);
+	labelled = computed(() => this.series().length > 1 && this.series().length <= MAX_END_LABELS, ...ngDevMode ? [{ debugName: "labelled" }] : /* istanbul ignore next */ []);
+	box = computed(() => {
+		const longest = Math.max(...this.series().map((s) => s.name.length), 0);
+		const end = this.labelled() ? Math.min(longest * 6.8 + END_LABEL_GAP, this.width() * .3) : PAD;
+		return {
+			x0: this.tickWidth(),
+			x1: this.width() - end,
+			y0: PAD,
+			y1: this.height() - AXIS_BAND
+		};
+	}, ...ngDevMode ? [{ debugName: "box" }] : /* istanbul ignore next */ []);
+	scale = computed(() => this.valueScale([this.box().y1, this.box().y0]), ...ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []);
+	xs = computed(() => {
+		const { x0, x1 } = this.box();
+		const n = this.count();
+		if (n <= 1) return [(x0 + x1) / 2];
+		return Array.from({ length: n }, (_, i) => x0 + i * (x1 - x0) / (n - 1));
+	}, ...ngDevMode ? [{ debugName: "xs" }] : /* istanbul ignore next */ []);
+	step = computed(() => {
+		const xs = this.xs();
+		return xs.length > 1 ? xs[1] - xs[0] : this.box().x1 - this.box().x0;
+	}, ...ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []);
+	points = computed(() => this.series().map((s) => this.xs().map((x, i) => {
+		const v = s.values[i];
+		return v === null || v === void 0 || !Number.isFinite(v) ? null : [x, this.scale()(v)];
+	})), ...ngDevMode ? [{ debugName: "points" }] : /* istanbul ignore next */ []);
+	lines = computed(() => this.points().map((p) => linePath(p)), ...ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []);
+	areaD = computed(() => areaPath(this.points()[0] ?? [], this.scale()(0)), ...ngDevMode ? [{ debugName: "areaD" }] : /* istanbul ignore next */ []);
+	tickMarks = computed(() => this.ticks().map((value) => ({
+		value,
+		y: this.scale()(value)
+	})), ...ngDevMode ? [{ debugName: "tickMarks" }] : /* istanbul ignore next */ []);
+	categoryTicks = computed(() => {
+		const every = this.labelEvery(this.box().x1 - this.box().x0);
+		return this.xs().map((x, index) => ({
+			index,
+			x
+		})).filter((c) => c.index % every === 0 || c.index === this.count() - 1).filter((c, i, all) => i === all.length - 1 || all[all.length - 1].index - c.index >= every);
+	}, ...ngDevMode ? [{ debugName: "categoryTicks" }] : /* istanbul ignore next */ []);
+	dots = computed(() => {
+		const at = this.active() >= 0 ? this.active() : this.count() - 1;
+		return this.points().flatMap((p, series) => {
+			const point = p[at];
+			return point ? [{
+				x: point[0],
+				y: point[1],
+				series
+			}] : [];
+		});
+	}, ...ngDevMode ? [{ debugName: "dots" }] : /* istanbul ignore next */ []);
+	endLabels = computed(() => {
+		if (!this.labelled()) return [];
+		const x = this.box().x1 + 8;
+		const placed = [];
+		this.points().map((p, series) => ({
+			series,
+			y: [...p].reverse().find((q) => q)?.[1]
+		})).filter((e) => e.y !== void 0).sort((a, b) => a.y - b.y).forEach((e) => {
+			if (placed.every((p) => Math.abs(p.y - e.y) >= 14)) placed.push({
+				...e,
+				x
+			});
+		});
+		return placed;
+	}, ...ngDevMode ? [{ debugName: "endLabels" }] : /* istanbul ignore next */ []);
+	tooltip = computed(() => {
+		const x = this.xs()[this.active()];
+		return x === void 0 ? null : {
+			x,
+			y: this.box().y0
+		};
+	}, ...ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []);
+	onPointer(event) {
+		const rect = event.currentTarget.getBoundingClientRect();
+		const { x0, x1 } = this.box();
+		const half = this.step() / 2;
+		this.pointerAt(event.clientX - rect.left, [x0 - half, x1 + half]);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdLineChart,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: VdLineChart,
+		isStandalone: true,
+		selector: "vd-line-chart",
+		inputs: { area: {
+			classPropertyName: "area",
+			publicName: "area",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			properties: { "attr.title": "null" },
+			classAttribute: "vd-line-chart"
+		},
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
+    <vd-chart-frame
+      kind="line"
+      [title]="title()"
+      [description]="description()"
+      [categories]="categories()"
+      [series]="series()"
+      [format]="format()"
+      [categoryLabel]="categoryLabel()"
+      [loading]="loading()"
+      [active]="active()"
+      [tooltipX]="tooltip()?.x ?? null"
+      [tooltipY]="tooltip()?.y ?? 0"
+      (pointerLeave)="active.set(-1)"
+    >
+      @if (width() > 0) {
+        <svg
+          class="vd-chart__svg"
+          [attr.width]="width()"
+          [attr.height]="height()"
+          [attr.viewBox]="'0 0 ' + width() + ' ' + height()"
+          role="group"
+          [attr.aria-labelledby]="frame().titleId"
+          (pointermove)="onPointer($event)"
+        >
+          <g class="vd-chart__grid" aria-hidden="true">
+            @for (t of tickMarks(); track t.value) {
+              <line
+                [attr.x1]="box().x0"
+                [attr.x2]="box().x1"
+                [attr.y1]="t.y"
+                [attr.y2]="t.y"
+                [attr.data-zero]="t.value === 0 ? '' : null"
+              />
+              <text
+                [attr.x]="box().x0 - 6"
+                [attr.y]="t.y"
+                text-anchor="end"
+                dominant-baseline="middle"
+              >
+                {{ tickText(t.value) }}
+              </text>
+            }
+          </g>
+          <g class="vd-chart__marks" aria-hidden="true">
+            @if (showArea()) {
+              <path class="vd-chart__area" [attr.d]="areaD()" [attr.data-series]="slot(0)" />
+            }
+            @for (l of lines(); track $index) {
+              <path class="vd-chart__line" [attr.d]="l" [attr.data-series]="slot($index)" />
+            }
+            @if (active() >= 0) {
+              <line
+                class="vd-chart__crosshair"
+                [attr.x1]="xs()[active()]"
+                [attr.x2]="xs()[active()]"
+                [attr.y1]="box().y0"
+                [attr.y2]="box().y1"
+              />
+            }
+            @for (d of dots(); track $index) {
+              <circle
+                class="vd-chart__dot"
+                [attr.cx]="d.x"
+                [attr.cy]="d.y"
+                r="4"
+                [attr.data-series]="slot(d.series)"
+              />
+            }
+          </g>
+          <g class="vd-chart__end-labels" aria-hidden="true">
+            @for (e of endLabels(); track e.series) {
+              <text [attr.x]="e.x" [attr.y]="e.y" dominant-baseline="middle">
+                {{ series()[e.series].name }}
+              </text>
+            }
+          </g>
+          <g class="vd-chart__axis" aria-hidden="true">
+            @for (c of categoryTicks(); track c.index) {
+              <text
+                [attr.x]="c.x"
+                [attr.y]="box().y1 + 13"
+                text-anchor="middle"
+                dominant-baseline="middle"
+              >
+                {{ categories()[c.index] }}
+              </text>
+            }
+          </g>
+          <g class="vd-chart__hits">
+            @for (x of xs(); track $index; let i = $index) {
+              <rect
+                class="vd-chart__hit"
+                rx="6"
+                role="img"
+                [attr.data-index]="i"
+                [attr.tabindex]="i === focusIndex() ? 0 : -1"
+                [attr.aria-label]="pointLabel(i)"
+                [attr.x]="x - step() / 2"
+                [attr.y]="box().y0"
+                [attr.width]="step()"
+                [attr.height]="box().y1 - box().y0"
+                (focus)="onFocus(i)"
+                (blur)="onBlur($event)"
+                (keydown)="onKeydown($event, i)"
+              />
+            }
+          </g>
+        </svg>
+      }
+    </vd-chart-frame>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: VdChartFrame,
+			selector: "vd-chart-frame",
+			inputs: [
+				"title",
+				"description",
+				"categories",
+				"series",
+				"kind",
+				"format",
+				"categoryLabel",
+				"active",
+				"tooltipX",
+				"tooltipY",
+				"tableLabel",
+				"loading"
+			],
+			outputs: ["pointerLeave"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdLineChart,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-line-chart",
+			imports: [VdChartFrame],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				"[attr.title]": "null",
+				class: "vd-line-chart"
+			},
+			template: `
+    <vd-chart-frame
+      kind="line"
+      [title]="title()"
+      [description]="description()"
+      [categories]="categories()"
+      [series]="series()"
+      [format]="format()"
+      [categoryLabel]="categoryLabel()"
+      [loading]="loading()"
+      [active]="active()"
+      [tooltipX]="tooltip()?.x ?? null"
+      [tooltipY]="tooltip()?.y ?? 0"
+      (pointerLeave)="active.set(-1)"
+    >
+      @if (width() > 0) {
+        <svg
+          class="vd-chart__svg"
+          [attr.width]="width()"
+          [attr.height]="height()"
+          [attr.viewBox]="'0 0 ' + width() + ' ' + height()"
+          role="group"
+          [attr.aria-labelledby]="frame().titleId"
+          (pointermove)="onPointer($event)"
+        >
+          <g class="vd-chart__grid" aria-hidden="true">
+            @for (t of tickMarks(); track t.value) {
+              <line
+                [attr.x1]="box().x0"
+                [attr.x2]="box().x1"
+                [attr.y1]="t.y"
+                [attr.y2]="t.y"
+                [attr.data-zero]="t.value === 0 ? '' : null"
+              />
+              <text
+                [attr.x]="box().x0 - 6"
+                [attr.y]="t.y"
+                text-anchor="end"
+                dominant-baseline="middle"
+              >
+                {{ tickText(t.value) }}
+              </text>
+            }
+          </g>
+          <g class="vd-chart__marks" aria-hidden="true">
+            @if (showArea()) {
+              <path class="vd-chart__area" [attr.d]="areaD()" [attr.data-series]="slot(0)" />
+            }
+            @for (l of lines(); track $index) {
+              <path class="vd-chart__line" [attr.d]="l" [attr.data-series]="slot($index)" />
+            }
+            @if (active() >= 0) {
+              <line
+                class="vd-chart__crosshair"
+                [attr.x1]="xs()[active()]"
+                [attr.x2]="xs()[active()]"
+                [attr.y1]="box().y0"
+                [attr.y2]="box().y1"
+              />
+            }
+            @for (d of dots(); track $index) {
+              <circle
+                class="vd-chart__dot"
+                [attr.cx]="d.x"
+                [attr.cy]="d.y"
+                r="4"
+                [attr.data-series]="slot(d.series)"
+              />
+            }
+          </g>
+          <g class="vd-chart__end-labels" aria-hidden="true">
+            @for (e of endLabels(); track e.series) {
+              <text [attr.x]="e.x" [attr.y]="e.y" dominant-baseline="middle">
+                {{ series()[e.series].name }}
+              </text>
+            }
+          </g>
+          <g class="vd-chart__axis" aria-hidden="true">
+            @for (c of categoryTicks(); track c.index) {
+              <text
+                [attr.x]="c.x"
+                [attr.y]="box().y1 + 13"
+                text-anchor="middle"
+                dominant-baseline="middle"
+              >
+                {{ categories()[c.index] }}
+              </text>
+            }
+          </g>
+          <g class="vd-chart__hits">
+            @for (x of xs(); track $index; let i = $index) {
+              <rect
+                class="vd-chart__hit"
+                rx="6"
+                role="img"
+                [attr.data-index]="i"
+                [attr.tabindex]="i === focusIndex() ? 0 : -1"
+                [attr.aria-label]="pointLabel(i)"
+                [attr.x]="x - step() / 2"
+                [attr.y]="box().y0"
+                [attr.width]="step()"
+                [attr.height]="box().y1 - box().y0"
+                (focus)="onFocus(i)"
+                (blur)="onBlur($event)"
+                (keydown)="onKeydown($event, i)"
+              />
+            }
+          </g>
+        </svg>
+      }
+    </vd-chart-frame>
+  `
+		}]
+	}],
+	propDecorators: { area: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "area",
+			required: false
+		}]
+	}] }
+});
+const W = 120;
+const H = 32;
+const INSET = 4;
+var VdSparkline = class VdSparkline {
+	values = input([], ...ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []);
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	format = input(...ngDevMode ? [void 0, { debugName: "format" }] : /* istanbul ignore next */ []);
+	trendSummary = input(...ngDevMode ? [void 0, { debugName: "trendSummary" }] : /* istanbul ignore next */ []);
+	W = W;
+	H = H;
+	t = vdTexts("chart", { trendSummary: this.trendSummary });
+	locale = inject(VD_LOCALE);
+	numbers = computed(() => this.values().filter((v) => v !== null && Number.isFinite(v)), ...ngDevMode ? [{ debugName: "numbers" }] : /* istanbul ignore next */ []);
+	points = computed(() => {
+		const values = this.values();
+		const nums = this.numbers();
+		if (!nums.length) return [];
+		const min = Math.min(...nums);
+		const max = Math.max(...nums);
+		const y = linearScale(min === max ? [min - 1, max + 1] : [min, max], [28, INSET]);
+		const n = values.length;
+		return values.map((v, i) => v === null || !Number.isFinite(v) ? null : [n > 1 ? i * W / (n - 1) : W / 2, y(v)]);
+	}, ...ngDevMode ? [{ debugName: "points" }] : /* istanbul ignore next */ []);
+	line = computed(() => linePath(this.points()), ...ngDevMode ? [{ debugName: "line" }] : /* istanbul ignore next */ []);
+	area = computed(() => areaPath(this.points(), H), ...ngDevMode ? [{ debugName: "area" }] : /* istanbul ignore next */ []);
+	last = computed(() => [...this.points()].reverse().find((p) => p) ?? null, ...ngDevMode ? [{ debugName: "last" }] : /* istanbul ignore next */ []);
+	summary = computed(() => {
+		const nums = this.numbers();
+		if (!nums.length) return this.label();
+		const fmt = this.format() ?? ((v) => new Intl.NumberFormat(this.locale.code).format(v));
+		const text = this.t().trendSummary(fmt(nums[0]), fmt(nums[nums.length - 1]), fmt(Math.min(...nums)), fmt(Math.max(...nums)));
+		return `${this.label()}: ${text}`;
+	}, ...ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdSparkline,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: VdSparkline,
+		isStandalone: true,
+		selector: "vd-sparkline",
+		inputs: {
+			values: {
+				classPropertyName: "values",
+				publicName: "values",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			format: {
+				classPropertyName: "format",
+				publicName: "format",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			trendSummary: {
+				classPropertyName: "trendSummary",
+				publicName: "trendSummary",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "vd-sparkline" },
+		ngImport: i0,
+		template: `
+    <svg
+      class="vd-sparkline__svg"
+      [attr.viewBox]="'0 0 ' + W + ' ' + H"
+      preserveAspectRatio="none"
+      role="img"
+      [attr.aria-label]="summary()"
+    >
+      <path class="vd-sparkline__area" [attr.d]="area()" />
+      <path class="vd-sparkline__line" [attr.d]="line()" vector-effect="non-scaling-stroke" />
+    </svg>
+    @if (last(); as p) {
+      <span
+        class="vd-sparkline__dot"
+        aria-hidden="true"
+        [style.--vd-sparkline-x.%]="(p[0] / W) * 100"
+        [style.--vd-sparkline-y.%]="(p[1] / H) * 100"
+      ></span>
+    }
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdSparkline,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-sparkline",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: { class: "vd-sparkline" },
+			template: `
+    <svg
+      class="vd-sparkline__svg"
+      [attr.viewBox]="'0 0 ' + W + ' ' + H"
+      preserveAspectRatio="none"
+      role="img"
+      [attr.aria-label]="summary()"
+    >
+      <path class="vd-sparkline__area" [attr.d]="area()" />
+      <path class="vd-sparkline__line" [attr.d]="line()" vector-effect="non-scaling-stroke" />
+    </svg>
+    @if (last(); as p) {
+      <span
+        class="vd-sparkline__dot"
+        aria-hidden="true"
+        [style.--vd-sparkline-x.%]="(p[0] / W) * 100"
+        [style.--vd-sparkline-y.%]="(p[1] / H) * 100"
+      ></span>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		values: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "values",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		format: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "format",
+				required: false
+			}]
+		}],
+		trendSummary: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "trendSummary",
+				required: false
+			}]
+		}]
+	}
+});
+export { VdBarChart, VdChartFrame, VdLineChart, VdSparkline, areaPath, bands, barPath, extent, linePath, linearScale, nearestIndex, niceTicks, stack };
+
+//# sourceMappingURL=vadem-ui-chart.mjs.map