ngwr 15.0.1 → 15.2.0

package/fesm2022/ngwr-charts-line-chart.mjs

@@ -1,55 +1,31 @@
 import * as i0 from "@angular/core";
-import { Component, LOCALE_ID, ViewEncapsulation, computed, effect, inject, input, signal, viewChild } from "@angular/core";
+import { Component, DestroyRef, LOCALE_ID, PLATFORM_ID, ViewEncapsulation, afterNextRender, afterRenderEffect, computed, effect, inject, input, model, signal, untracked, viewChild } from "@angular/core";
 import { coerceBooleanProperty, coerceNumberProperty } from "@angular/cdk/coercion";
-import { DOCUMENT as DOCUMENT$1 } from "@angular/common";
+import { DOCUMENT as DOCUMENT$1, isPlatformBrowser } from "@angular/common";
 import { useI18nText } from "ngwr/i18n";
-import { clamp, round } from "ngwr/utils";
+import { clamp } from "ngwr/utils";
+import { WR_CHART_LEGEND_BLOCK, WrChartLegend } from "ngwr/charts/chart-legend";
+import { WrChartTable, chartAxis, chartColor, chartDash, useChartNumbers } from "ngwr/charts/core";
 /**
 * @license
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
 */
-const TICK_COUNT = 4;
-function niceStep(raw) {
-	if (!Number.isFinite(raw) || raw <= 0) return 1;
-	const magnitude = 10 ** Math.floor(Math.log10(raw));
-	const normalised = raw / magnitude;
-	return (normalised <= 1 ? 1 : normalised <= 2 ? 2 : normalised <= 2.5 ? 2.5 : normalised <= 5 ? 5 : 10) * magnitude;
-}
-function fractionDigits(value) {
-	for (let d = 0; d <= 6; d++) if (Math.abs(value * 10 ** d - Math.round(value * 10 ** d)) < 1e-9) return d;
-	return 6;
-}
-function magnitude(value) {
-	const abs = Math.abs(value);
-	let m = Math.floor(Math.log10(abs));
-	if (10 ** (m + 1) <= abs) m++;
-	if (10 ** m > abs) m--;
-	return m;
-}
-function lastDigit(step) {
-	for (let e = magnitude(step); e > -21; e--) {
-		const scaled = step / 10 ** e;
-		if (Math.abs(scaled - Math.round(scaled)) < 1e-6) return e;
-	}
-	return -21;
-}
-const FALLBACK_COLORS = [
-	"var(--wr-color-primary)",
-	"var(--wr-color-success)",
-	"var(--wr-color-warning)",
-	"var(--wr-color-danger)",
-	"var(--wr-color-on-surface-muted)"
-];
+const ASSUMED_WIDTH = 560;
+const ASSUMED_INSET = 16;
+const CHAR_WIDTH = 7;
+const LABEL_GAP = 8;
+const HOVER_RADIUS = 6;
+const BESIDE = 12;
 var WrLineChart = class WrLineChart {
 	series = input([], ...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
 	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
-	resolvedAriaLabel = useI18nText(this.ariaLabel, "lineChart.label", "Line chart");
+	lineLabel = useI18nText(this.ariaLabel, "lineChart.label", "Line chart");
+	areaLabel = useI18nText(this.ariaLabel, "lineChart.areaLabel", "Area chart");
+	resolvedAriaLabel = computed(() => this.showArea() ? this.areaLabel() : this.lineLabel(), ...ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []);
 	valueFormat = input(null, ...ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []);
-	locale = inject(LOCALE_ID);
-	numbers = new Intl.NumberFormat(this.locale);
-	smallNumbers = new Intl.NumberFormat(this.locale, { maximumSignificantDigits: 3 });
+	numbers = useChartNumbers(this.valueFormat);
 	xLabels = input([], ...ngDevMode ? [{ debugName: "xLabels" }] : /* istanbul ignore next */ []);
 	height = input(240, {
 		...ngDevMode ? { debugName: "height" } : /* istanbul ignore next */ {},
@@ -63,10 +39,27 @@ var WrLineChart = class WrLineChart {
 		...ngDevMode ? { debugName: "showLegend" } : /* istanbul ignore next */ {},
 		transform: coerceBooleanProperty
 	});
+	toggleableLegend = input(false, {
+		...ngDevMode ? { debugName: "toggleableLegend" } : /* istanbul ignore next */ {},
+		transform: coerceBooleanProperty
+	});
+	hiddenSeries = model([], ...ngDevMode ? [{ debugName: "hiddenSeries" }] : /* istanbul ignore next */ []);
 	showDots = input(true, {
 		...ngDevMode ? { debugName: "showDots" } : /* istanbul ignore next */ {},
 		transform: coerceBooleanProperty
 	});
+	showArea = input(false, {
+		...ngDevMode ? { debugName: "showArea" } : /* istanbul ignore next */ {},
+		transform: coerceBooleanProperty
+	});
+	stacked = input(false, {
+		...ngDevMode ? { debugName: "stacked" } : /* istanbul ignore next */ {},
+		transform: coerceBooleanProperty
+	});
+	dataTable = input(false, {
+		...ngDevMode ? { debugName: "dataTable" } : /* istanbul ignore next */ {},
+		transform: coerceBooleanProperty
+	});
 	tooltip = input(true, {
 		...ngDevMode ? { debugName: "tooltip" } : /* istanbul ignore next */ {},
 		transform: coerceBooleanProperty
@@ -74,6 +67,12 @@ var WrLineChart = class WrLineChart {
 	vbW = 600;
 	vbH = 300;
 	svg = viewChild.required("svg", ...ngDevMode ? [{ debugName: "svg" }] : /* istanbul ignore next */ []);
+	plot = viewChild.required("plot", ...ngDevMode ? [{ debugName: "plot" }] : /* istanbul ignore next */ []);
+	probe = viewChild("probe", ...ngDevMode ? [{ debugName: "probe" }] : /* istanbul ignore next */ []);
+	tooltipEl = viewChild("tooltip", ...ngDevMode ? [{ debugName: "tooltipEl" }] : /* istanbul ignore next */ []);
+	ordinals = new Intl.NumberFormat(inject(LOCALE_ID));
+	measured = signal(null, ...ngDevMode ? [{ debugName: "measured" }] : /* istanbul ignore next */ []);
+	tooltipPlacement = signal("top", ...ngDevMode ? [{ debugName: "tooltipPlacement" }] : /* istanbul ignore next */ []);
 	hoveredIndex = signal(null, ...ngDevMode ? [{ debugName: "hoveredIndex" }] : /* istanbul ignore next */ []);
 	activeIndex = computed(() => this.tooltip() ? this.hoveredIndex() : null, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
 	dismissed = null;
@@ -89,61 +88,97 @@ var WrLineChart = class WrLineChart {
 			document.addEventListener("keydown", onKeydown);
 			onCleanup(() => document.removeEventListener("keydown", onKeydown));
 		});
+		if (!isPlatformBrowser(inject(PLATFORM_ID))) return;
+		const destroyRef = inject(DestroyRef);
+		afterRenderEffect(() => {
+			this.probeText();
+			untracked(() => this.measure());
+		});
+		afterRenderEffect(() => {
+			const points = this.hoverPoints();
+			const tooltip = this.tooltipEl()?.nativeElement;
+			if (points.length === 0 || !tooltip) return;
+			untracked(() => this.placeTooltip(points, tooltip));
+		});
+		afterNextRender(() => {
+			if (typeof ResizeObserver === "undefined") return;
+			const observer = new ResizeObserver(() => this.measure());
+			observer.observe(this.svg().nativeElement);
+			destroyRef.onDestroy(() => observer.disconnect());
+		});
 	}
-	static DASHES = [
-		"",
-		"7 4",
-		"2 3",
-		"10 4 2 4",
-		"1 4",
-		"6 3 2 3"
-	];
 	resolvedSeries = computed(() => this.series().map((s, i) => ({
+		index: i,
 		label: s.label,
-		dash: WrLineChart.DASHES[i % WrLineChart.DASHES.length],
-		data: s.data.map((v) => Number.isFinite(v) ? v : null),
-		color: s.color ?? FALLBACK_COLORS[i % FALLBACK_COLORS.length]
+		dash: chartDash(i),
+		data: s.data.map((v) => typeof v === "number" && Number.isFinite(v) ? v : null),
+		color: s.color ?? chartColor(i)
 	})), ...ngDevMode ? [{ debugName: "resolvedSeries" }] : /* istanbul ignore next */ []);
+	legendItems = computed(() => this.resolvedSeries().map(({ label, color, dash }) => ({
+		label,
+		color,
+		dash
+	})), ...ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []);
+	visibleSeries = computed(() => {
+		const hidden = new Set(this.hiddenSeries());
+		return this.resolvedSeries().filter((s) => !hidden.has(s.index));
+	}, ...ngDevMode ? [{ debugName: "visibleSeries" }] : /* istanbul ignore next */ []);
+	plottedSeries = computed(() => {
+		const visible = this.visibleSeries();
+		if (!this.stacked()) return visible.map((s) => ({
+			...s,
+			tops: s.data,
+			bases: null
+		}));
+		const up = [];
+		const down = [];
+		return visible.map((s) => {
+			const tops = [];
+			const bases = [];
+			s.data.forEach((v, i) => {
+				if (v === null) {
+					tops.push(null);
+					bases.push(null);
+					return;
+				}
+				const pile = v < 0 ? down : up;
+				const base = pile[i] ?? 0;
+				pile[i] = base + v;
+				bases.push(base);
+				tops.push(base + v);
+			});
+			return {
+				...s,
+				tops,
+				bases
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "plottedSeries" }] : /* istanbul ignore next */ []);
 	bounds = computed(() => {
-		const all = this.resolvedSeries().flatMap((s) => s.data.filter((v) => v !== null));
-		if (all.length === 0) return {
-			min: 0,
-			max: 1,
-			step: .25
-		};
-		const rawMin = Math.min(0, Math.min(...all));
-		const rawMax = Math.max(...all);
-		const step = niceStep((rawMax - rawMin || Math.abs(rawMax) || 1) / TICK_COUNT);
-		const min = Math.floor(rawMin / step) * step;
-		let max = Math.ceil(rawMax / step) * step;
-		if (max === rawMax) max += step;
-		return {
-			min,
-			max,
-			step
-		};
+		let min = Number.POSITIVE_INFINITY;
+		let max = Number.NEGATIVE_INFINITY;
+		for (const s of this.plottedSeries()) for (const v of s.tops) {
+			if (v === null) continue;
+			if (v < min) min = v;
+			if (v > max) max = v;
+		}
+		if (min > max) return chartAxis(NaN, NaN);
+		if (this.showArea() || this.stacked()) return chartAxis(min, max, { includeZero: true });
+		return chartAxis(Math.min(0, min), max);
 	}, ...ngDevMode ? [{ debugName: "bounds" }] : /* istanbul ignore next */ []);
 	pointCount = computed(() => {
 		const maxLen = this.resolvedSeries().reduce((acc, s) => Math.max(acc, s.data.length), 0);
 		return Math.max(maxLen, this.xLabels().length);
 	}, ...ngDevMode ? [{ debugName: "pointCount" }] : /* istanbul ignore next */ []);
 	yTicks = computed(() => {
-		const { min, max, step } = this.bounds();
-		const out = [];
-		const count = Math.round((max - min) / step);
-		for (let i = 0; i <= count; i++) {
-			const value = round(max - i * step, 6);
-			out.push({
-				value,
-				y: (max - value) / (max - min) * this.vbH
-			});
-		}
-		return out;
+		const { min, max, ticks } = this.bounds();
+		return ticks.map((value) => ({
+			value,
+			y: (max - value) / (max - min) * this.vbH
+		}));
 	}, ...ngDevMode ? [{ debugName: "yTicks" }] : /* istanbul ignore next */ []);
-	pathFor(series) {
+	pathFor(values) {
 		const { min, max } = this.bounds();
-		const count = this.pointCount();
-		if (count <= 1) return "";
 		const commands = [];
 		let run = 0;
 		let last = "";
@@ -151,12 +186,12 @@ var WrLineChart = class WrLineChart {
 			if (run === 1) commands.push(`L ${last}`);
 			run = 0;
 		};
-		series.data.forEach((v, i) => {
+		values.forEach((v, i) => {
 			if (v === null) {
 				closeRun();
 				return;
 			}
-			const x = i / (count - 1) * this.vbW;
+			const x = this.pointX(i);
 			const y = (max - v) / (max - min) * this.vbH;
 			last = `${x.toFixed(2)} ${y.toFixed(2)}`;
 			commands.push(`${run === 0 ? "M" : "L"} ${last}`);
@@ -165,6 +200,45 @@ var WrLineChart = class WrLineChart {
 		closeRun();
 		return commands.join(" ");
 	}
+	drawn = computed(() => {
+		const dots = this.showDots();
+		return this.plottedSeries().map((s) => ({
+			index: s.index,
+			color: s.color,
+			dash: s.dash,
+			d: this.pathFor(s.tops),
+			dots: dots ? s.tops.map((v, i) => v === null ? null : this.dotPath(this.pointX(i), this.pointY(v))) : []
+		}));
+	}, ...ngDevMode ? [{ debugName: "drawn" }] : /* istanbul ignore next */ []);
+	areas = computed(() => {
+		if (!this.showArea() || this.pointCount() <= 1) return [];
+		return this.plottedSeries().flatMap((s) => {
+			const fills = [];
+			let start = -1;
+			const close = (end) => {
+				if (start >= 0 && end - start >= 2) fills.push({
+					key: `${s.index}:${start}`,
+					color: s.color,
+					d: this.areaPath(s, start, end)
+				});
+				start = -1;
+			};
+			s.tops.forEach((v, i) => {
+				if (v === null) close(i);
+				else if (start < 0) start = i;
+			});
+			close(s.tops.length);
+			return fills;
+		});
+	}, ...ngDevMode ? [{ debugName: "areas" }] : /* istanbul ignore next */ []);
+	areaPath(series, start, end) {
+		const at = (i, value) => `${this.pointX(i).toFixed(2)} ${this.pointY(value).toFixed(2)}`;
+		const commands = [];
+		for (let i = start; i < end; i++) commands.push(`${i === start ? "M" : "L"} ${at(i, series.tops[i] ?? 0)}`);
+		for (let i = end - 1; i >= start; i--) commands.push(`L ${at(i, series.bases?.[i] ?? 0)}`);
+		commands.push("Z");
+		return commands.join(" ");
+	}
 	pointX(index) {
 		const count = this.pointCount();
 		if (count <= 1) return this.vbW / 2;
@@ -179,29 +253,63 @@ var WrLineChart = class WrLineChart {
 	}
 	xSlot = computed(() => {
 		const count = this.pointCount();
-		return count <= 1 ? 100 : 100 / (count - 1);
+		return count <= 1 ? 100 : Math.min(100, 100 * this.xAxis().every / (count - 1));
 	}, ...ngDevMode ? [{ debugName: "xSlot" }] : /* istanbul ignore next */ []);
+	probeText = computed(() => [...new Set(this.xLabels().map((label) => label.replace(/\r\n?|\n/g, " ")))].join("\n"), ...ngDevMode ? [{ debugName: "probeText" }] : /* istanbul ignore next */ []);
+	xAxis = computed(() => {
+		const labels = this.xLabels();
+		const count = this.pointCount();
+		const measured = this.measured();
+		const width = measured?.width ?? ASSUMED_WIDTH;
+		const inset = measured?.inset ?? ASSUMED_INSET;
+		const strip = width + 2 * inset;
+		const longest = labels.reduce((most, label) => Math.max(most, label.length), 0);
+		const label = Math.min(measured && measured.label > 0 ? measured.label : longest * CHAR_WIDTH, strip);
+		const step = count <= 1 ? strip : width / (count - 1);
+		const start = (index) => clamp(inset + this.pointX(index) * (width / this.vbW) - label / 2, 0, strip - label);
+		const crowds = (from, previousEnd) => from + 1e-6 < previousEnd + LABEL_GAP;
+		let every = count <= 1 ? 1 : Math.max(1, Math.ceil((label + LABEL_GAP - 1e-6) / step));
+		while (every < labels.length - 1 && crowds(start(every), start(0) + label)) every++;
+		const ticks = [];
+		let end = Number.NEGATIVE_INFINITY;
+		for (let index = 0; index < labels.length; index += every) {
+			const from = start(index);
+			if (every > 1 && crowds(from, end)) break;
+			ticks.push({
+				index,
+				label: labels[index],
+				x: this.xPercent(index)
+			});
+			end = from + label;
+		}
+		return {
+			every,
+			ticks
+		};
+	}, ...ngDevMode ? [{ debugName: "xAxis" }] : /* istanbul ignore next */ []);
 	hoverPoints = computed(() => {
 		const i = this.activeIndex();
 		if (i === null) return [];
-		return this.resolvedSeries().flatMap((s) => {
+		return this.plottedSeries().flatMap((s) => {
 			const value = s.data[i];
-			if (value === void 0 || value === null) return [];
-			const text = this.formatValue(value);
+			const plotted = s.tops[i];
+			if (value === void 0 || value === null || plotted === void 0 || plotted === null) return [];
+			const text = this.numbers.value(value);
 			return [{
+				index: s.index,
 				label: s.label,
 				value,
 				text,
 				color: s.color,
 				x: this.pointX(i),
-				y: this.pointY(value)
+				y: this.pointY(plotted)
 			}];
 		});
 	}, ...ngDevMode ? [{ debugName: "hoverPoints" }] : /* istanbul ignore next */ []);
 	hoverLabel = computed(() => {
 		const i = this.activeIndex();
 		if (i === null) return "";
-		return this.xLabels()[i] ?? String(i);
+		return this.xLabels()[i] ?? this.ordinals.format(i + 1);
 	}, ...ngDevMode ? [{ debugName: "hoverLabel" }] : /* istanbul ignore next */ []);
 	onPointerMove(event) {
 		if (!this.tooltip()) return;
@@ -221,26 +329,66 @@ var WrLineChart = class WrLineChart {
 	dotPath(x, y) {
 		return `M ${x.toFixed(2)} ${y.toFixed(2)} h 0`;
 	}
-	formatValue(value) {
-		const custom = this.valueFormat();
-		if (custom) return custom(value);
-		return (value !== 0 && Math.abs(value) < 1 ? this.smallNumbers : this.numbers).format(value);
+	measure() {
+		const box = this.svg().nativeElement.getBoundingClientRect();
+		if (box.width <= 0) return;
+		const inset = box.left - this.plot().nativeElement.getBoundingClientRect().left;
+		const label = this.probe()?.nativeElement.getBoundingClientRect().width ?? 0;
+		const last = this.measured();
+		if (last?.width === box.width && last.inset === inset && last.label === label) return;
+		this.measured.set({
+			width: box.width,
+			inset,
+			label
+		});
 	}
-	tickLabels = computed(() => {
-		const ticks = this.yTicks();
-		const custom = this.valueFormat();
-		if (custom) return ticks.map((tick) => custom(tick.value));
-		const { step } = this.bounds();
-		const last = lastDigit(step);
-		const full = new Intl.NumberFormat(this.locale, { maximumFractionDigits: fractionDigits(step) });
-		const plain = ticks.map((tick) => full.format(tick.value));
-		const compact = ticks.map(({ value }) => value === 0 ? full.format(0) : new Intl.NumberFormat(this.locale, {
-			notation: "compact",
-			maximumSignificantDigits: clamp(magnitude(value) - last + 1, 1, 21)
-		}).format(value));
-		const longest = (labels) => Math.max(...labels.map((label) => label.length));
-		return longest(compact) <= longest(plain) ? compact : plain;
-	}, ...ngDevMode ? [{ debugName: "tickLabels" }] : /* istanbul ignore next */ []);
+	placeTooltip(points, tooltip) {
+		const box = this.svg().nativeElement.getBoundingClientRect();
+		const plot = this.plot().nativeElement.getBoundingClientRect();
+		const rect = tooltip.getBoundingClientRect();
+		if (box.height <= 0 || rect.height <= 0 || rect.width <= 0) return;
+		const current = this.tooltipPlacement();
+		const inset = current === "below" ? box.bottom - rect.bottom : rect.top - box.top;
+		const { width, height } = rect;
+		const x = box.left + points[0].x / this.vbW * box.width;
+		const ys = points.map((p) => box.top + p.y / this.vbH * box.height);
+		const across = (left) => clamp(left, plot.left, plot.right - width);
+		const top = box.top + inset;
+		const candidates = [
+			{
+				placement: "top",
+				left: across(x - width / 2),
+				top
+			},
+			{
+				placement: "below",
+				left: across(x - width / 2),
+				top: box.bottom - inset - height
+			},
+			x - plot.left > plot.right - x ? {
+				placement: "left",
+				left: across(x - BESIDE - width),
+				top
+			} : {
+				placement: "right",
+				left: across(x + BESIDE),
+				top
+			}
+		];
+		const covers = (c) => x + HOVER_RADIUS > c.left && x - HOVER_RADIUS < c.left + width ? ys.filter((y) => y + HOVER_RADIUS > c.top && y - HOVER_RADIUS < c.top + height).length : 0;
+		let best = candidates[0];
+		let fewest = covers(best);
+		for (const candidate of candidates.slice(1)) {
+			if (fewest === 0) break;
+			const count = covers(candidate);
+			if (count < fewest) {
+				best = candidate;
+				fewest = count;
+			}
+		}
+		if (best.placement !== current) this.tooltipPlacement.set(best.placement);
+	}
+	tickLabels = computed(() => this.numbers.ticks(this.yTicks().map((tick) => tick.value), this.bounds().step), ...ngDevMode ? [{ debugName: "tickLabels" }] : /* istanbul ignore next */ []);
 	yAxis = computed(() => {
 		const labels = this.tickLabels();
 		return this.yTicks().map((tick, i) => ({
@@ -249,9 +397,25 @@ var WrLineChart = class WrLineChart {
 		}));
 	}, ...ngDevMode ? [{ debugName: "yAxis" }] : /* istanbul ignore next */ []);
 	viewBox = computed(() => `0 0 ${this.vbW} ${this.vbH}`, ...ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []);
+	tableData = computed(() => {
+		const series = this.visibleSeries();
+		const labels = this.xLabels();
+		const rows = series.length === 0 ? [] : Array.from({ length: this.pointCount() }, (_, i) => ({
+			header: labels[i] ?? this.ordinals.format(i + 1),
+			cells: series.map((s) => {
+				const value = s.data[i];
+				return value === void 0 || value === null ? "" : this.numbers.value(value);
+			})
+		}));
+		return {
+			caption: this.resolvedAriaLabel(),
+			columns: series.map((s) => s.label),
+			groups: [{ rows }]
+		};
+	}, ...ngDevMode ? [{ debugName: "tableData" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		ngImport: i0,
 		type: WrLineChart,
 		deps: [],
@@ -259,7 +423,7 @@ var WrLineChart = class WrLineChart {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		type: WrLineChart,
 		isStandalone: true,
 		selector: "wr-line-chart",
@@ -313,6 +477,20 @@ var WrLineChart = class WrLineChart {
 				isRequired: false,
 				transformFunction: null
 			},
+			toggleableLegend: {
+				classPropertyName: "toggleableLegend",
+				publicName: "toggleableLegend",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hiddenSeries: {
+				classPropertyName: "hiddenSeries",
+				publicName: "hiddenSeries",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			showDots: {
 				classPropertyName: "showDots",
 				publicName: "showDots",
@@ -320,6 +498,27 @@ var WrLineChart = class WrLineChart {
 				isRequired: false,
 				transformFunction: null
 			},
+			showArea: {
+				classPropertyName: "showArea",
+				publicName: "showArea",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stacked: {
+				classPropertyName: "stacked",
+				publicName: "stacked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dataTable: {
+				classPropertyName: "dataTable",
+				publicName: "dataTable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			tooltip: {
 				classPropertyName: "tooltip",
 				publicName: "tooltip",
@@ -328,22 +527,73 @@ var WrLineChart = class WrLineChart {
 				transformFunction: null
 			}
 		},
-		host: { classAttribute: "wr-line-chart" },
-		viewQueries: [{
-			propertyName: "svg",
-			first: true,
-			predicate: ["svg"],
-			descendants: true,
-			isSignal: true
-		}],
+		outputs: { hiddenSeries: "hiddenSeriesChange" },
+		host: {
+			properties: {
+				"class.wr-line-chart--area": "showArea()",
+				"class.wr-line-chart--stacked": "stacked()"
+			},
+			classAttribute: "wr-line-chart"
+		},
+		viewQueries: [
+			{
+				propertyName: "svg",
+				first: true,
+				predicate: ["svg"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "plot",
+				first: true,
+				predicate: ["plot"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "probe",
+				first: true,
+				predicate: ["probe"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "tooltipEl",
+				first: true,
+				predicate: ["tooltip"],
+				descendants: true,
+				isSignal: true
+			}
+		],
 		ngImport: i0,
-		template: "@let hovered = activeIndex();\n@if (showLegend() && resolvedSeries().length > 0) {\n  <ul class=\"wr-line-chart__legend\">\n    @for (s of resolvedSeries(); track s.label) {\n      <li class=\"wr-line-chart__legend-item\">\n        <!-- The swatch draws the series' own dash, not a solid block. A legend\n             that pairs a coloured square with a name leaves the reader to match\n             the square to the LINE, and matching by colour is the step the\n             patterns exist to remove. -->\n        <svg class=\"wr-line-chart__swatch\" viewBox=\"0 0 16 2\" aria-hidden=\"true\">\n          <line\n            x1=\"0\"\n            y1=\"1\"\n            x2=\"16\"\n            y2=\"1\"\n            [attr.stroke]=\"s.color\"\n            [attr.stroke-dasharray]=\"s.dash || null\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n        <span>{{ s.label }}</span>\n      </li>\n    }\n  </ul>\n}\n\n<!-- Two columns: the y-axis labels at inline start, the drawing beside them, and the\n     x labels under the drawing only, so their percentages are the drawing's. -->\n<div class=\"wr-line-chart__body\">\n  @if (showGrid()) {\n    <!-- The tick labels are HTML beside the drawing rather than `<text>` inside it: the\n         drawing stretches with `preserveAspectRatio=\"none\"` and its type stretched with\n         it. In flow, so the column is exactly as wide as the longest label; each one\n         hands the stylesheet the y of its own gridline, as the x labels hand it their x.\n         Hidden, as they were inside the plot's `img`: the plot's name is what is\n         announced. -->\n    <div class=\"wr-line-chart__y-axis\" aria-hidden=\"true\">\n      @for (tick of yAxis(); track $index) {\n        <span class=\"wr-line-chart__tick\" [style.--wr-line-chart-y]=\"tick.y\">{{ tick.label }}</span>\n      }\n    </div>\n  }\n\n  <div\n    class=\"wr-line-chart__plot\"\n    role=\"img\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [style.height.px]=\"height()\"\n    (mousemove)=\"onPointerMove($event)\"\n    (mouseleave)=\"onPointerLeave()\"\n  >\n    <!-- Named, where it was the only unnamed element in the component. The legend\n         swatch is an `<svg>` too now, so `querySelector('svg')` no longer means\n         \"the chart\" — and a plot that nothing can address by name is one a\n         consumer's stylesheet and a spec both have to reach by position. -->\n    <svg #svg class=\"wr-line-chart__svg\" [attr.viewBox]=\"viewBox()\" preserveAspectRatio=\"none\">\n      @if (showGrid()) {\n        @for (tick of yTicks(); track tick.value) {\n          <line\n            class=\"wr-line-chart__grid-line\"\n            x1=\"0\"\n            [attr.x2]=\"vbW\"\n            [attr.y1]=\"tick.y\"\n            [attr.y2]=\"tick.y\"\n            stroke=\"color-mix(in srgb, var(--wr-border-base) 70%, transparent)\"\n            stroke-width=\"1\"\n            vector-effect=\"non-scaling-stroke\"\n          />\n        }\n      }\n\n      @for (s of resolvedSeries(); track s.label) {\n        <path\n          class=\"wr-line-chart__line\"\n          [attr.d]=\"pathFor(s)\"\n          fill=\"none\"\n          [attr.stroke]=\"s.color\"\n          [attr.stroke-dasharray]=\"s.dash || null\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n        @if (showDots()) {\n          @for (v of s.data; track $index; let i = $index) {\n            <!-- A hole in the data gets no dot: the index still belongs to it, so the\n                 points after it stay on their own x. A dot is a zero-length line with a\n                 round cap and a non-scaling stroke, which stays a 6px circle however the\n                 drawing stretches; a `<circle>` scaled with it, into a 3 × 5px oval on a\n                 phone and a 9 × 5px one at 1920px. -->\n            @if (v !== null) {\n              <path\n                class=\"wr-line-chart__dot\"\n                [attr.d]=\"dotPath(pointX(i), pointY(v))\"\n                fill=\"none\"\n                [attr.stroke]=\"s.color\"\n                stroke-width=\"6\"\n                stroke-linecap=\"round\"\n                vector-effect=\"non-scaling-stroke\"\n              />\n            }\n          }\n        }\n      }\n\n      @if (hovered !== null && hoverPoints().length > 0) {\n        <line\n          class=\"wr-line-chart__crosshair\"\n          [attr.x1]=\"pointX(hovered)\"\n          [attr.x2]=\"pointX(hovered)\"\n          y1=\"0\"\n          [attr.y2]=\"vbH\"\n          stroke=\"var(--wr-color-on-surface-muted)\"\n          stroke-width=\"1\"\n          stroke-dasharray=\"3 3\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n        <!-- A ring of the series' colour round a white centre, drawn the way a dot is\n             and for the same reason. -->\n        @for (p of hoverPoints(); track p.label) {\n          <path\n            [attr.d]=\"dotPath(p.x, p.y)\"\n            fill=\"none\"\n            [attr.stroke]=\"p.color\"\n            stroke-width=\"12\"\n            stroke-linecap=\"round\"\n            vector-effect=\"non-scaling-stroke\"\n          />\n          <path\n            [attr.d]=\"dotPath(p.x, p.y)\"\n            fill=\"none\"\n            stroke=\"var(--wr-color-white)\"\n            stroke-width=\"8\"\n            stroke-linecap=\"round\"\n            vector-effect=\"non-scaling-stroke\"\n          />\n        }\n      }\n    </svg>\n\n    @if (hovered !== null && hoverPoints().length > 0) {\n      <!-- The layer covers the plot and is what the tooltip's `cqw` measures. It is out of flow, so the containment it turns on\n           costs the plot's own sizing nothing. The tooltip takes the same\n           `--wr-line-chart-x` the x labels take, and the same clamp: centred on its\n           point, never past either end. -->\n      <div class=\"wr-line-chart__tooltip-layer\">\n        <div class=\"wr-line-chart__tooltip\" [style.--wr-line-chart-x]=\"xPercent(hovered)\">\n          <div class=\"wr-line-chart__tooltip-label\">{{ hoverLabel() }}</div>\n          @for (p of hoverPoints(); track p.label) {\n            <div class=\"wr-line-chart__tooltip-row\">\n              <span class=\"wr-line-chart__swatch\" [style.background]=\"p.color\"></span>\n              <span class=\"wr-line-chart__tooltip-name\">{{ p.label }}</span>\n              <span class=\"wr-line-chart__tooltip-value\">{{ p.text }}</span>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  @if (xLabels().length > 0) {\n    <!-- The strip is as wide as the plot, and hands the stylesheet the distance between\n         two points; each label hands it the x of the point it names. Both are percentages\n         of the drawing's width, so they track the drawing at any size: the stylesheet\n         centres a label on its point and ellipsises it past its slot. Laying the labels\n         out as equal centred flex slots instead is bar-chart geometry: only the middle\n         label landed on its dot, and the outer ones sat up to half a column away. -->\n    <div class=\"wr-line-chart__x-labels\" [style.--wr-line-chart-x-slot]=\"xSlot()\">\n      @for (label of xLabels(); track $index) {\n        <span class=\"wr-line-chart__x-label\" [style.--wr-line-chart-x]=\"xPercent($index)\">{{ label }}</span>\n      }\n    </div>\n  }\n</div>\n",
+		template: "@let hovered = activeIndex();\n@if (showLegend() && resolvedSeries().length > 0) {\n  <!-- Every row keys its series by the series' own dash rather than a solid block: a\n       coloured square leaves the reader to match it to the LINE, and matching by colour\n       is the step the patterns exist to remove. Rows are tracked by position, so two\n       series that share a label are two rows. -->\n  <ul\n    wr-chart-legend\n    class=\"wr-line-chart__legend\"\n    [items]=\"legendItems()\"\n    [toggleable]=\"toggleableLegend()\"\n    [(hiddenSeries)]=\"hiddenSeries\"\n  ></ul>\n}\n\n<!-- Two columns: the y-axis labels at inline start, the drawing beside them, and the\n     x labels under the drawing only, so their percentages are the drawing's. -->\n<div class=\"wr-line-chart__body\">\n  @if (showGrid()) {\n    <!-- The tick labels are HTML beside the drawing rather than `<text>` inside it: the\n         drawing stretches with `preserveAspectRatio=\"none\"` and its type stretched with\n         it. In flow, so the column is exactly as wide as the longest label; each one\n         hands the stylesheet the y of its own gridline, as the x labels hand it their x.\n         Hidden, as they were inside the plot's `img`: the plot's name is what is\n         announced. -->\n    <div class=\"wr-line-chart__y-axis\" aria-hidden=\"true\">\n      @for (tick of yAxis(); track $index) {\n        <span class=\"wr-line-chart__tick\" [style.--wr-line-chart-y]=\"tick.y\">{{ tick.label }}</span>\n      }\n    </div>\n  }\n\n  <div\n    #plot\n    class=\"wr-line-chart__plot\"\n    role=\"img\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [style.height.px]=\"height()\"\n    (mousemove)=\"onPointerMove($event)\"\n    (mouseleave)=\"onPointerLeave()\"\n  >\n    <!-- Named, where it was the only unnamed element in the component. The legend\n         swatch is an `<svg>` too now, so `querySelector('svg')` no longer means\n         \"the chart\" — and a plot that nothing can address by name is one a\n         consumer's stylesheet and a spec both have to reach by position. -->\n    <svg #svg class=\"wr-line-chart__svg\" [attr.viewBox]=\"viewBox()\" preserveAspectRatio=\"none\">\n      @if (showGrid()) {\n        @for (tick of yTicks(); track tick.value) {\n          <!-- The colour is the stylesheet's, from `--wr-line-chart-grid-color`, so forced\n               colors can swap it for the system's own. -->\n          <line\n            class=\"wr-line-chart__grid-line\"\n            x1=\"0\"\n            [attr.x2]=\"vbW\"\n            [attr.y1]=\"tick.y\"\n            [attr.y2]=\"tick.y\"\n            stroke-width=\"1\"\n            vector-effect=\"non-scaling-stroke\"\n          />\n        }\n      }\n\n      <!-- Every fill before every line, so the lines and their dashes stay on top where\n           the fills overlap and the series are still told apart by shape. The opacity is\n           the stylesheet's, from `--wr-line-chart-area-opacity`. -->\n      @for (area of areas(); track area.key) {\n        <path class=\"wr-line-chart__area\" [attr.d]=\"area.d\" [attr.fill]=\"area.color\" stroke=\"none\" />\n      }\n\n      <!-- By position, not by label: two series may share one, and a duplicate key\n           makes Angular re-create rows it cannot tell apart. Each is drawn at its\n           plotted values, which under `stacked` are the tops of its band. Every path is\n           built once per data change (`drawn`), so hovering rebuilds none of them. -->\n      @for (s of drawn(); track s.index) {\n        <path\n          class=\"wr-line-chart__line\"\n          [attr.d]=\"s.d\"\n          fill=\"none\"\n          [attr.stroke]=\"s.color\"\n          [attr.stroke-dasharray]=\"s.dash || null\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n        @for (dot of s.dots; track $index) {\n          <!-- A hole in the data gets no dot: the index still belongs to it, so the\n               points after it stay on their own x. A dot is a zero-length line with a\n               round cap and a non-scaling stroke, which stays a 6px circle however the\n               drawing stretches; a `<circle>` scaled with it, into a 3 × 5px oval on a\n               phone and a 9 × 5px one at 1920px. -->\n          @if (dot !== null) {\n            <path\n              class=\"wr-line-chart__dot\"\n              [attr.d]=\"dot\"\n              fill=\"none\"\n              [attr.stroke]=\"s.color\"\n              stroke-width=\"6\"\n              stroke-linecap=\"round\"\n              vector-effect=\"non-scaling-stroke\"\n            />\n          }\n        }\n      }\n\n      @if (hovered !== null && hoverPoints().length > 0) {\n        <line\n          class=\"wr-line-chart__crosshair\"\n          [attr.x1]=\"pointX(hovered)\"\n          [attr.x2]=\"pointX(hovered)\"\n          y1=\"0\"\n          [attr.y2]=\"vbH\"\n          stroke-width=\"1\"\n          stroke-dasharray=\"3 3\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n        <!-- A ring of the series' colour round a surface-coloured centre, drawn the way a\n             dot is and for the same reason. The centre's colour is the stylesheet's, from\n             `--wr-line-chart-hover-center`. -->\n        @for (p of hoverPoints(); track p.index) {\n          <path\n            class=\"wr-line-chart__hover-dot\"\n            [attr.d]=\"dotPath(p.x, p.y)\"\n            fill=\"none\"\n            [attr.stroke]=\"p.color\"\n            stroke-width=\"12\"\n            stroke-linecap=\"round\"\n            vector-effect=\"non-scaling-stroke\"\n          />\n          <path\n            class=\"wr-line-chart__hover-dot-center\"\n            [attr.d]=\"dotPath(p.x, p.y)\"\n            fill=\"none\"\n            stroke-width=\"8\"\n            stroke-linecap=\"round\"\n            vector-effect=\"non-scaling-stroke\"\n          />\n        }\n      }\n    </svg>\n\n    @if (hovered !== null && hoverPoints().length > 0) {\n      <!-- The layer covers the plot and is what the tooltip's `cqw` measures. It is out of\n           flow, so the containment it turns on costs the plot's own sizing nothing. The\n           tooltip takes the same `--wr-line-chart-x` the x labels take, and the same\n           clamp: centred on its point, never past either end. At the top of the plot, or\n           where that would cover a marker it reads, at the bottom (`--below`) or beside the\n           crosshair (`--left`, `--right`). -->\n      <div class=\"wr-line-chart__tooltip-layer\">\n        <div\n          #tooltip\n          class=\"wr-line-chart__tooltip\"\n          [class.wr-line-chart__tooltip--below]=\"tooltipPlacement() === 'below'\"\n          [class.wr-line-chart__tooltip--left]=\"tooltipPlacement() === 'left'\"\n          [class.wr-line-chart__tooltip--right]=\"tooltipPlacement() === 'right'\"\n          [style.--wr-line-chart-x]=\"xPercent(hovered)\"\n        >\n          <div class=\"wr-line-chart__tooltip-label\">{{ hoverLabel() }}</div>\n          @for (p of hoverPoints(); track p.index) {\n            <div class=\"wr-line-chart__tooltip-row\">\n              <span class=\"wr-line-chart__swatch\" [style.background]=\"p.color\"></span>\n              <span class=\"wr-line-chart__tooltip-name\">{{ p.label }}</span>\n              <span class=\"wr-line-chart__tooltip-value\">{{ p.text }}</span>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  @if (xLabels().length > 0) {\n    <!-- The strip is as wide as the plot, and hands the stylesheet the distance between\n         two printed labels; each label hands it the x of the point it names. Both are\n         percentages of the drawing's width, so they track the drawing at any size: the\n         stylesheet centres a label on its point and ellipsises it past its slot. Laying the\n         labels out as equal centred flex slots instead is bar-chart geometry: only the\n         middle label landed on its dot, and the outer ones sat up to half a column away.\n         The hidden copy of every label, a line each, is what the room they need is\n         measured against: it is as wide as the widest. -->\n    <div class=\"wr-line-chart__x-labels\" [style.--wr-line-chart-x-slot]=\"xSlot()\">\n      <span #probe class=\"wr-line-chart__x-probe\" aria-hidden=\"true\">{{ probeText() }}</span>\n      @for (tick of xAxis().ticks; track tick.index) {\n        <span class=\"wr-line-chart__x-label\" [style.--wr-line-chart-x]=\"tick.x\">{{ tick.label }}</span>\n      }\n    </div>\n  }\n</div>\n\n@if (dataTable()) {\n  <!-- The figures for a screen reader, beside the plot's `img` and never inside it:\n       `img` makes everything it holds presentational. Clipped to nothing by its own\n       stylesheet, so it takes no room and draws nothing. -->\n  <wr-chart-table [data]=\"tableData()\" />\n}\n",
+		dependencies: [{
+			kind: "component",
+			type: WrChartLegend,
+			selector: "ul[wr-chart-legend]",
+			inputs: [
+				"items",
+				"toggleable",
+				"hiddenSeries",
+				"ariaLabel"
+			],
+			outputs: ["hiddenSeriesChange", "toggled"]
+		}, {
+			kind: "component",
+			type: WrChartTable,
+			selector: "wr-chart-table",
+			inputs: ["data"]
+		}],
+		viewProviders: [{
+			provide: WR_CHART_LEGEND_BLOCK,
+			useValue: "wr-line-chart"
+		}],
 		encapsulation: i0.ViewEncapsulation.None
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.4",
 	ngImport: i0,
 	type: WrLineChart,
 	decorators: [{
@@ -351,8 +601,17 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "wr-line-chart",
 			encapsulation: ViewEncapsulation.None,
-			host: { class: "wr-line-chart" },
-			template: "@let hovered = activeIndex();\n@if (showLegend() && resolvedSeries().length > 0) {\n  <ul class=\"wr-line-chart__legend\">\n    @for (s of resolvedSeries(); track s.label) {\n      <li class=\"wr-line-chart__legend-item\">\n        <!-- The swatch draws the series' own dash, not a solid block. A legend\n             that pairs a coloured square with a name leaves the reader to match\n             the square to the LINE, and matching by colour is the step the\n             patterns exist to remove. -->\n        <svg class=\"wr-line-chart__swatch\" viewBox=\"0 0 16 2\" aria-hidden=\"true\">\n          <line\n            x1=\"0\"\n            y1=\"1\"\n            x2=\"16\"\n            y2=\"1\"\n            [attr.stroke]=\"s.color\"\n            [attr.stroke-dasharray]=\"s.dash || null\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n        <span>{{ s.label }}</span>\n      </li>\n    }\n  </ul>\n}\n\n<!-- Two columns: the y-axis labels at inline start, the drawing beside them, and the\n     x labels under the drawing only, so their percentages are the drawing's. -->\n<div class=\"wr-line-chart__body\">\n  @if (showGrid()) {\n    <!-- The tick labels are HTML beside the drawing rather than `<text>` inside it: the\n         drawing stretches with `preserveAspectRatio=\"none\"` and its type stretched with\n         it. In flow, so the column is exactly as wide as the longest label; each one\n         hands the stylesheet the y of its own gridline, as the x labels hand it their x.\n         Hidden, as they were inside the plot's `img`: the plot's name is what is\n         announced. -->\n    <div class=\"wr-line-chart__y-axis\" aria-hidden=\"true\">\n      @for (tick of yAxis(); track $index) {\n        <span class=\"wr-line-chart__tick\" [style.--wr-line-chart-y]=\"tick.y\">{{ tick.label }}</span>\n      }\n    </div>\n  }\n\n  <div\n    class=\"wr-line-chart__plot\"\n    role=\"img\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [style.height.px]=\"height()\"\n    (mousemove)=\"onPointerMove($event)\"\n    (mouseleave)=\"onPointerLeave()\"\n  >\n    <!-- Named, where it was the only unnamed element in the component. The legend\n         swatch is an `<svg>` too now, so `querySelector('svg')` no longer means\n         \"the chart\" — and a plot that nothing can address by name is one a\n         consumer's stylesheet and a spec both have to reach by position. -->\n    <svg #svg class=\"wr-line-chart__svg\" [attr.viewBox]=\"viewBox()\" preserveAspectRatio=\"none\">\n      @if (showGrid()) {\n        @for (tick of yTicks(); track tick.value) {\n          <line\n            class=\"wr-line-chart__grid-line\"\n            x1=\"0\"\n            [attr.x2]=\"vbW\"\n            [attr.y1]=\"tick.y\"\n            [attr.y2]=\"tick.y\"\n            stroke=\"color-mix(in srgb, var(--wr-border-base) 70%, transparent)\"\n            stroke-width=\"1\"\n            vector-effect=\"non-scaling-stroke\"\n          />\n        }\n      }\n\n      @for (s of resolvedSeries(); track s.label) {\n        <path\n          class=\"wr-line-chart__line\"\n          [attr.d]=\"pathFor(s)\"\n          fill=\"none\"\n          [attr.stroke]=\"s.color\"\n          [attr.stroke-dasharray]=\"s.dash || null\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n        @if (showDots()) {\n          @for (v of s.data; track $index; let i = $index) {\n            <!-- A hole in the data gets no dot: the index still belongs to it, so the\n                 points after it stay on their own x. A dot is a zero-length line with a\n                 round cap and a non-scaling stroke, which stays a 6px circle however the\n                 drawing stretches; a `<circle>` scaled with it, into a 3 × 5px oval on a\n                 phone and a 9 × 5px one at 1920px. -->\n            @if (v !== null) {\n              <path\n                class=\"wr-line-chart__dot\"\n                [attr.d]=\"dotPath(pointX(i), pointY(v))\"\n                fill=\"none\"\n                [attr.stroke]=\"s.color\"\n                stroke-width=\"6\"\n                stroke-linecap=\"round\"\n                vector-effect=\"non-scaling-stroke\"\n              />\n            }\n          }\n        }\n      }\n\n      @if (hovered !== null && hoverPoints().length > 0) {\n        <line\n          class=\"wr-line-chart__crosshair\"\n          [attr.x1]=\"pointX(hovered)\"\n          [attr.x2]=\"pointX(hovered)\"\n          y1=\"0\"\n          [attr.y2]=\"vbH\"\n          stroke=\"var(--wr-color-on-surface-muted)\"\n          stroke-width=\"1\"\n          stroke-dasharray=\"3 3\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n        <!-- A ring of the series' colour round a white centre, drawn the way a dot is\n             and for the same reason. -->\n        @for (p of hoverPoints(); track p.label) {\n          <path\n            [attr.d]=\"dotPath(p.x, p.y)\"\n            fill=\"none\"\n            [attr.stroke]=\"p.color\"\n            stroke-width=\"12\"\n            stroke-linecap=\"round\"\n            vector-effect=\"non-scaling-stroke\"\n          />\n          <path\n            [attr.d]=\"dotPath(p.x, p.y)\"\n            fill=\"none\"\n            stroke=\"var(--wr-color-white)\"\n            stroke-width=\"8\"\n            stroke-linecap=\"round\"\n            vector-effect=\"non-scaling-stroke\"\n          />\n        }\n      }\n    </svg>\n\n    @if (hovered !== null && hoverPoints().length > 0) {\n      <!-- The layer covers the plot and is what the tooltip's `cqw` measures. It is out of flow, so the containment it turns on\n           costs the plot's own sizing nothing. The tooltip takes the same\n           `--wr-line-chart-x` the x labels take, and the same clamp: centred on its\n           point, never past either end. -->\n      <div class=\"wr-line-chart__tooltip-layer\">\n        <div class=\"wr-line-chart__tooltip\" [style.--wr-line-chart-x]=\"xPercent(hovered)\">\n          <div class=\"wr-line-chart__tooltip-label\">{{ hoverLabel() }}</div>\n          @for (p of hoverPoints(); track p.label) {\n            <div class=\"wr-line-chart__tooltip-row\">\n              <span class=\"wr-line-chart__swatch\" [style.background]=\"p.color\"></span>\n              <span class=\"wr-line-chart__tooltip-name\">{{ p.label }}</span>\n              <span class=\"wr-line-chart__tooltip-value\">{{ p.text }}</span>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  @if (xLabels().length > 0) {\n    <!-- The strip is as wide as the plot, and hands the stylesheet the distance between\n         two points; each label hands it the x of the point it names. Both are percentages\n         of the drawing's width, so they track the drawing at any size: the stylesheet\n         centres a label on its point and ellipsises it past its slot. Laying the labels\n         out as equal centred flex slots instead is bar-chart geometry: only the middle\n         label landed on its dot, and the outer ones sat up to half a column away. -->\n    <div class=\"wr-line-chart__x-labels\" [style.--wr-line-chart-x-slot]=\"xSlot()\">\n      @for (label of xLabels(); track $index) {\n        <span class=\"wr-line-chart__x-label\" [style.--wr-line-chart-x]=\"xPercent($index)\">{{ label }}</span>\n      }\n    </div>\n  }\n</div>\n"
+			host: {
+				class: "wr-line-chart",
+				"[class.wr-line-chart--area]": "showArea()",
+				"[class.wr-line-chart--stacked]": "stacked()"
+			},
+			imports: [WrChartLegend, WrChartTable],
+			viewProviders: [{
+				provide: WR_CHART_LEGEND_BLOCK,
+				useValue: "wr-line-chart"
+			}],
+			template: "@let hovered = activeIndex();\n@if (showLegend() && resolvedSeries().length > 0) {\n  <!-- Every row keys its series by the series' own dash rather than a solid block: a\n       coloured square leaves the reader to match it to the LINE, and matching by colour\n       is the step the patterns exist to remove. Rows are tracked by position, so two\n       series that share a label are two rows. -->\n  <ul\n    wr-chart-legend\n    class=\"wr-line-chart__legend\"\n    [items]=\"legendItems()\"\n    [toggleable]=\"toggleableLegend()\"\n    [(hiddenSeries)]=\"hiddenSeries\"\n  ></ul>\n}\n\n<!-- Two columns: the y-axis labels at inline start, the drawing beside them, and the\n     x labels under the drawing only, so their percentages are the drawing's. -->\n<div class=\"wr-line-chart__body\">\n  @if (showGrid()) {\n    <!-- The tick labels are HTML beside the drawing rather than `<text>` inside it: the\n         drawing stretches with `preserveAspectRatio=\"none\"` and its type stretched with\n         it. In flow, so the column is exactly as wide as the longest label; each one\n         hands the stylesheet the y of its own gridline, as the x labels hand it their x.\n         Hidden, as they were inside the plot's `img`: the plot's name is what is\n         announced. -->\n    <div class=\"wr-line-chart__y-axis\" aria-hidden=\"true\">\n      @for (tick of yAxis(); track $index) {\n        <span class=\"wr-line-chart__tick\" [style.--wr-line-chart-y]=\"tick.y\">{{ tick.label }}</span>\n      }\n    </div>\n  }\n\n  <div\n    #plot\n    class=\"wr-line-chart__plot\"\n    role=\"img\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [style.height.px]=\"height()\"\n    (mousemove)=\"onPointerMove($event)\"\n    (mouseleave)=\"onPointerLeave()\"\n  >\n    <!-- Named, where it was the only unnamed element in the component. The legend\n         swatch is an `<svg>` too now, so `querySelector('svg')` no longer means\n         \"the chart\" — and a plot that nothing can address by name is one a\n         consumer's stylesheet and a spec both have to reach by position. -->\n    <svg #svg class=\"wr-line-chart__svg\" [attr.viewBox]=\"viewBox()\" preserveAspectRatio=\"none\">\n      @if (showGrid()) {\n        @for (tick of yTicks(); track tick.value) {\n          <!-- The colour is the stylesheet's, from `--wr-line-chart-grid-color`, so forced\n               colors can swap it for the system's own. -->\n          <line\n            class=\"wr-line-chart__grid-line\"\n            x1=\"0\"\n            [attr.x2]=\"vbW\"\n            [attr.y1]=\"tick.y\"\n            [attr.y2]=\"tick.y\"\n            stroke-width=\"1\"\n            vector-effect=\"non-scaling-stroke\"\n          />\n        }\n      }\n\n      <!-- Every fill before every line, so the lines and their dashes stay on top where\n           the fills overlap and the series are still told apart by shape. The opacity is\n           the stylesheet's, from `--wr-line-chart-area-opacity`. -->\n      @for (area of areas(); track area.key) {\n        <path class=\"wr-line-chart__area\" [attr.d]=\"area.d\" [attr.fill]=\"area.color\" stroke=\"none\" />\n      }\n\n      <!-- By position, not by label: two series may share one, and a duplicate key\n           makes Angular re-create rows it cannot tell apart. Each is drawn at its\n           plotted values, which under `stacked` are the tops of its band. Every path is\n           built once per data change (`drawn`), so hovering rebuilds none of them. -->\n      @for (s of drawn(); track s.index) {\n        <path\n          class=\"wr-line-chart__line\"\n          [attr.d]=\"s.d\"\n          fill=\"none\"\n          [attr.stroke]=\"s.color\"\n          [attr.stroke-dasharray]=\"s.dash || null\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n        @for (dot of s.dots; track $index) {\n          <!-- A hole in the data gets no dot: the index still belongs to it, so the\n               points after it stay on their own x. A dot is a zero-length line with a\n               round cap and a non-scaling stroke, which stays a 6px circle however the\n               drawing stretches; a `<circle>` scaled with it, into a 3 × 5px oval on a\n               phone and a 9 × 5px one at 1920px. -->\n          @if (dot !== null) {\n            <path\n              class=\"wr-line-chart__dot\"\n              [attr.d]=\"dot\"\n              fill=\"none\"\n              [attr.stroke]=\"s.color\"\n              stroke-width=\"6\"\n              stroke-linecap=\"round\"\n              vector-effect=\"non-scaling-stroke\"\n            />\n          }\n        }\n      }\n\n      @if (hovered !== null && hoverPoints().length > 0) {\n        <line\n          class=\"wr-line-chart__crosshair\"\n          [attr.x1]=\"pointX(hovered)\"\n          [attr.x2]=\"pointX(hovered)\"\n          y1=\"0\"\n          [attr.y2]=\"vbH\"\n          stroke-width=\"1\"\n          stroke-dasharray=\"3 3\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n        <!-- A ring of the series' colour round a surface-coloured centre, drawn the way a\n             dot is and for the same reason. The centre's colour is the stylesheet's, from\n             `--wr-line-chart-hover-center`. -->\n        @for (p of hoverPoints(); track p.index) {\n          <path\n            class=\"wr-line-chart__hover-dot\"\n            [attr.d]=\"dotPath(p.x, p.y)\"\n            fill=\"none\"\n            [attr.stroke]=\"p.color\"\n            stroke-width=\"12\"\n            stroke-linecap=\"round\"\n            vector-effect=\"non-scaling-stroke\"\n          />\n          <path\n            class=\"wr-line-chart__hover-dot-center\"\n            [attr.d]=\"dotPath(p.x, p.y)\"\n            fill=\"none\"\n            stroke-width=\"8\"\n            stroke-linecap=\"round\"\n            vector-effect=\"non-scaling-stroke\"\n          />\n        }\n      }\n    </svg>\n\n    @if (hovered !== null && hoverPoints().length > 0) {\n      <!-- The layer covers the plot and is what the tooltip's `cqw` measures. It is out of\n           flow, so the containment it turns on costs the plot's own sizing nothing. The\n           tooltip takes the same `--wr-line-chart-x` the x labels take, and the same\n           clamp: centred on its point, never past either end. At the top of the plot, or\n           where that would cover a marker it reads, at the bottom (`--below`) or beside the\n           crosshair (`--left`, `--right`). -->\n      <div class=\"wr-line-chart__tooltip-layer\">\n        <div\n          #tooltip\n          class=\"wr-line-chart__tooltip\"\n          [class.wr-line-chart__tooltip--below]=\"tooltipPlacement() === 'below'\"\n          [class.wr-line-chart__tooltip--left]=\"tooltipPlacement() === 'left'\"\n          [class.wr-line-chart__tooltip--right]=\"tooltipPlacement() === 'right'\"\n          [style.--wr-line-chart-x]=\"xPercent(hovered)\"\n        >\n          <div class=\"wr-line-chart__tooltip-label\">{{ hoverLabel() }}</div>\n          @for (p of hoverPoints(); track p.index) {\n            <div class=\"wr-line-chart__tooltip-row\">\n              <span class=\"wr-line-chart__swatch\" [style.background]=\"p.color\"></span>\n              <span class=\"wr-line-chart__tooltip-name\">{{ p.label }}</span>\n              <span class=\"wr-line-chart__tooltip-value\">{{ p.text }}</span>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  @if (xLabels().length > 0) {\n    <!-- The strip is as wide as the plot, and hands the stylesheet the distance between\n         two printed labels; each label hands it the x of the point it names. Both are\n         percentages of the drawing's width, so they track the drawing at any size: the\n         stylesheet centres a label on its point and ellipsises it past its slot. Laying the\n         labels out as equal centred flex slots instead is bar-chart geometry: only the\n         middle label landed on its dot, and the outer ones sat up to half a column away.\n         The hidden copy of every label, a line each, is what the room they need is\n         measured against: it is as wide as the widest. -->\n    <div class=\"wr-line-chart__x-labels\" [style.--wr-line-chart-x-slot]=\"xSlot()\">\n      <span #probe class=\"wr-line-chart__x-probe\" aria-hidden=\"true\">{{ probeText() }}</span>\n      @for (tick of xAxis().ticks; track tick.index) {\n        <span class=\"wr-line-chart__x-label\" [style.--wr-line-chart-x]=\"tick.x\">{{ tick.label }}</span>\n      }\n    </div>\n  }\n</div>\n\n@if (dataTable()) {\n  <!-- The figures for a screen reader, beside the plot's `img` and never inside it:\n       `img` makes everything it holds presentational. Clipped to nothing by its own\n       stylesheet, so it takes no room and draws nothing. -->\n  <wr-chart-table [data]=\"tableData()\" />\n}\n"
 		}]
 	}],
 	ctorParameters: () => [],
@@ -413,6 +672,25 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		toggleableLegend: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "toggleableLegend",
+				required: false
+			}]
+		}],
+		hiddenSeries: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hiddenSeries",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["hiddenSeriesChange"]
+		}],
 		showDots: [{
 			type: i0.Input,
 			args: [{
@@ -421,6 +699,30 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		showArea: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showArea",
+				required: false
+			}]
+		}],
+		stacked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stacked",
+				required: false
+			}]
+		}],
+		dataTable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dataTable",
+				required: false
+			}]
+		}],
 		tooltip: [{
 			type: i0.Input,
 			args: [{
@@ -432,6 +734,18 @@ i0.ɵɵngDeclareClassMetadata({
 		svg: [{
 			type: i0.ViewChild,
 			args: ["svg", { isSignal: true }]
+		}],
+		plot: [{
+			type: i0.ViewChild,
+			args: ["plot", { isSignal: true }]
+		}],
+		probe: [{
+			type: i0.ViewChild,
+			args: ["probe", { isSignal: true }]
+		}],
+		tooltipEl: [{
+			type: i0.ViewChild,
+			args: ["tooltip", { isSignal: true }]
 		}]
 	}
 });