@magmonium/one 0.4.80 → 0.4.81

package/fesm2022/magmonium-one.mjs

@@ -18005,15 +18005,14 @@ const toChartTime = (value) => {
 	const parsed = Date.parse(value);
 	return Number.isFinite(parsed) ? parsed : null;
 };
-const readChartPoints = (rows, x, y) => {
+const readChartPoints = (rows, x, y, per) => {
 	const pairs = [];
 	for (const row of rows ?? []) {
 		if (row == null || typeof row !== "object") continue;
 		const record = row;
 		const t = toChartTime(record[x]);
-		const raw = record[y];
-		const v = typeof raw === "string" && raw.trim() ? Number(raw) : raw;
-		if (t === null || typeof v !== "number" || !Number.isFinite(v)) continue;
+		const v = readChartValue(record, y, per);
+		if (t === null || v === null) continue;
 		pairs.push([t, v]);
 	}
 	for (let i = 1; i < pairs.length; i++) if (pairs[i][0] < pairs[i - 1][0]) {
@@ -18025,6 +18024,46 @@ const readChartPoints = (rows, x, y) => {
 		y: pairs.map((p) => p[1])
 	};
 };
+const toChartNumber = (raw) => {
+	const v = typeof raw === "string" && raw.trim() ? Number(raw) : raw;
+	return typeof v === "number" && Number.isFinite(v) ? v : null;
+};
+const readChartValue = (record, y, per) => {
+	const v = toChartNumber(record[y]);
+	if (v === null || !per) return v;
+	const base = toChartNumber(record[per]);
+	return base ? v / base * 100 : null;
+};
+const readChartCategories = (rows, x, y, per) => {
+	const out = {
+		x: [],
+		y: []
+	};
+	for (const row of rows ?? []) {
+		if (row == null || typeof row !== "object") continue;
+		const record = row;
+		const raw = record[x];
+		const label = typeof raw === "string" || typeof raw === "number" ? String(raw).trim() : "";
+		const v = readChartValue(record, y, per);
+		if (!label || v === null) continue;
+		out.x.push(label);
+		out.y.push(v);
+	}
+	return out;
+};
+const mergeCategories = (series) => {
+	const seen = /* @__PURE__ */ new Set();
+	for (const { x } of series) for (const label of x) seen.add(label);
+	return [...seen];
+};
+const columnPath = (x, width, y0, y1, radius = 4) => {
+	const h = Math.abs(y0 - y1);
+	const r = Math.max(0, Math.min(radius, h / 2, width / 2));
+	const f = (v) => v.toFixed(1);
+	const dir = y1 <= y0 ? 1 : -1;
+	const right = x + width;
+	return `M${f(x)} ${f(y0)}V${f(y1 + dir * r)}Q${f(x)} ${f(y1)} ${f(x + r)} ${f(y1)}H${f(right - r)}Q${f(right)} ${f(y1)} ${f(right)} ${f(y1 + dir * r)}V${f(y0)}Z`;
+};
 const lowerBound = (times, x) => {
 	let lo = 0;
 	let hi = times.length;
@@ -18265,6 +18304,22 @@ const sampleChartPoints = (index, end = Date.UTC(2026, 0, 2)) => {
 		y
 	};
 };
+const sampleChartCategories = (index) => ({
+	x: [
+		"2022",
+		"2023",
+		"2024",
+		"2025",
+		"2026"
+	],
+	y: [
+		59,
+		68,
+		94,
+		107,
+		108
+	].map((v) => v * .25 ** index)
+});
 const MARGIN = {
 	top: 12,
 	right: 16,
@@ -18288,6 +18343,12 @@ const NAV_TOP = 4;
 const GRIP_SLOP = 8;
 const MIN_WINDOW_SHARE = .02;
 const KEY_PAN_SHARE = .1;
+const STRIP_GAP = 40;
+const STRIP_HEIGHT = 72;
+const COLUMN_MAX = 40;
+const COLUMN_MIN = 4;
+const COLUMN_GAP = 2;
+const COLUMN_FILL = .6;
 const optionalNumber = (value) => value == null || value === "" ? void 0 : numberAttribute(value, void 0);
 const optionalBoolean = (value) => value == null ? void 0 : booleanAttribute(value);
 let nextId$2 = 0;
@@ -18345,7 +18406,7 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
 	minimal = computed(() => (this.variant() ?? this.config()?.variant) === "minimal", ...ngDevMode ? [{ debugName: "minimal" }] : /* istanbul ignore next */ []);
 	margin = computed(() => this.minimal() ? MINIMAL_MARGIN : MARGIN, ...ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []);
 	showNavigator = computed(() => !this.minimal() && (this.navigator() ?? this.config()?.navigator ?? false), ...ngDevMode ? [{ debugName: "showNavigator" }] : /* istanbul ignore next */ []);
-	canMeasure = computed(() => !this.minimal() && (this.measure() ?? this.config()?.measure ?? false), ...ngDevMode ? [{ debugName: "canMeasure" }] : /* istanbul ignore next */ []);
+	canMeasure = computed(() => !this.minimal() && !this.categorical() && (this.measure() ?? this.config()?.measure ?? false), ...ngDevMode ? [{ debugName: "canMeasure" }] : /* istanbul ignore next */ []);
 	presets = computed(() => {
 		const authored = this.config()?.ranges;
 		const ids = (authored?.length ? authored : DEFAULT_SECTION_CHART_RANGES).filter(isPresetId).map((id) => id.trim().toLowerCase());
@@ -18370,7 +18431,158 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
 			};
 		});
 	}, ...ngDevMode ? [{ debugName: "painted" }] : /* istanbul ignore next */ []);
+	categorical = computed(() => this.members().some(({ member }) => member.mark() === "column"), ...ngDevMode ? [{ debugName: "categorical" }] : /* istanbul ignore next */ []);
+	categoryData = computed(() => {
+		if (!this.categorical()) return {
+			categories: [],
+			series: []
+		};
+		const read = this.painted().map(({ member, color }) => ({
+			member,
+			color,
+			label: member.label(),
+			noTranslate: member.noTranslate(),
+			params: member.params(),
+			mark: member.mark(),
+			panel: member.panel(),
+			ratio: member.ratio(),
+			...member.categories()
+		}));
+		const withData = read.filter((s) => s.x.length);
+		const source = withData.length || !this.isDesignMode ? withData : read.map((s, i) => ({
+			...s,
+			...sampleChartCategories(i)
+		}));
+		const categories = mergeCategories(source);
+		return {
+			categories,
+			series: source.map(({ x, y, ...s }) => ({
+				...s,
+				values: categories.map((c) => {
+					const j = x.indexOf(c);
+					return j < 0 ? null : y[j];
+				})
+			}))
+		};
+	}, ...ngDevMode ? [{ debugName: "categoryData" }] : /* istanbul ignore next */ []);
+	hasStrip = computed(() => this.categoryData().series.some((s) => s.panel === "strip"), ...ngDevMode ? [{ debugName: "hasStrip" }] : /* istanbul ignore next */ []);
+	svgHeight = computed(() => this.resolvedHeight() + (this.hasStrip() ? 112 : 0), ...ngDevMode ? [{ debugName: "svgHeight" }] : /* istanbul ignore next */ []);
+	bandCentre = computed(() => {
+		const band = this.plotWidth() / Math.max(1, this.categoryData().categories.length);
+		const left = this.left();
+		return (i) => left + band * (i + .5);
+	}, ...ngDevMode ? [{ debugName: "bandCentre" }] : /* istanbul ignore next */ []);
+	categoryExtent = computed(() => {
+		const main = this.categoryData().series.filter((s) => s.panel === "main");
+		const values = main.flatMap((s) => s.values.filter((v) => v !== null));
+		if (!values.length) return null;
+		return {
+			...niceTicks(Math.min(0, ...values), Math.max(0, ...values)),
+			ratio: main.every((s) => s.ratio)
+		};
+	}, ...ngDevMode ? [{ debugName: "categoryExtent" }] : /* istanbul ignore next */ []);
+	categorySy = computed(() => {
+		const extent = this.categoryExtent();
+		const height = this.plotHeight();
+		const top = this.top();
+		return (v) => extent ? top + (1 - (v - extent.min) / (extent.max - extent.min)) * height : top + height;
+	}, ...ngDevMode ? [{ debugName: "categorySy" }] : /* istanbul ignore next */ []);
+	categoryView = computed(() => {
+		const { categories, series } = this.categoryData();
+		const extent = this.categoryExtent();
+		if (!categories.length) return null;
+		const n = categories.length;
+		const band = this.plotWidth() / n;
+		const centre = this.bandCentre();
+		const sy = this.categorySy();
+		const last = n - 1;
+		const columnSeries = series.filter((s) => s.panel === "main" && s.mark === "column");
+		const k = Math.max(1, columnSeries.length);
+		const colWidth = Math.max(COLUMN_MIN, Math.min(COLUMN_MAX, (band * COLUMN_FILL - (k - 1) * COLUMN_GAP) / k));
+		const group = k * colWidth + (k - 1) * COLUMN_GAP;
+		const base = extent ? sy(0) : this.bottom();
+		const columns = [];
+		const labels = [];
+		columnSeries.forEach((s, c) => {
+			s.values.forEach((v, i) => {
+				if (v === null) return;
+				const x = centre(i) - group / 2 + c * (colWidth + COLUMN_GAP);
+				columns.push({
+					d: columnPath(x, colWidth, base, sy(v)),
+					color: s.color
+				});
+				if (i === last) labels.push({
+					x: x + colWidth / 2,
+					y: Math.min(sy(v), base) - 6,
+					text: this.formatShort(v, s.ratio)
+				});
+			});
+		});
+		const lineOf = (s, y) => {
+			const dots = s.values.flatMap((v, i) => v === null ? [] : [{
+				cx: centre(i),
+				cy: y(v),
+				v
+			}]);
+			return {
+				d: dots.map((p, i) => `${i ? "L" : "M"}${p.cx.toFixed(1)} ${p.cy.toFixed(1)}`).join(""),
+				dots
+			};
+		};
+		return {
+			columns,
+			labels,
+			lines: series.filter((s) => s.panel === "main" && s.mark === "line").map((s) => {
+				const { d, dots } = lineOf(s, sy);
+				const end = dots[dots.length - 1];
+				return {
+					d,
+					color: s.color,
+					endX: end?.cx ?? 0,
+					endY: end?.cy ?? 0
+				};
+			}),
+			strip: this.stripView(series, lineOf)
+		};
+	}, ...ngDevMode ? [{ debugName: "categoryView" }] : /* istanbul ignore next */ []);
+	stripView = (series, lineOf) => {
+		const strip = series.filter((s) => s.panel === "strip");
+		const values = strip.flatMap((s) => s.values.filter((v) => v !== null));
+		if (!values.length) return null;
+		const lo = Math.min(...values);
+		const hi = Math.max(...values);
+		const pad = (hi - lo || Math.abs(hi) || 1) * .2;
+		const ticks = niceTicks(lo - pad, hi + pad, 2);
+		const top = this.bottom() + STRIP_GAP;
+		const sy = (v) => top + (1 - (v - ticks.min) / (ticks.max - ticks.min || 1)) * STRIP_HEIGHT;
+		const ratio = strip.every((s) => s.ratio);
+		return {
+			top,
+			bottom: top + STRIP_HEIGHT,
+			ticks: [ticks.min, ticks.max].map((v) => ({
+				y: sy(v),
+				label: this.formatShort(v, ratio)
+			})),
+			lines: strip.map((s) => {
+				const { d, dots } = lineOf(s, sy);
+				return {
+					d,
+					color: s.color,
+					dots: dots.map((p) => ({
+						...p,
+						text: this.formatShort(p.v, s.ratio)
+					}))
+				};
+			})
+		};
+	};
+	categoryIndex = linkedSignal({
+		...ngDevMode ? { debugName: "categoryIndex" } : /* istanbul ignore next */ {},
+		source: this.categoryData,
+		computation: () => null
+	});
 	lines = computed(() => {
+		if (this.categorical()) return [];
 		const palette = this.palette();
 		const drawn = this.painted().map(({ member, color }) => ({
 			...member.points(),
@@ -18427,7 +18639,7 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
 	top = computed(() => this.margin().top, ...ngDevMode ? [{ debugName: "top" }] : /* istanbul ignore next */ []);
 	right = computed(() => this.left() + this.plotWidth(), ...ngDevMode ? [{ debugName: "right" }] : /* istanbul ignore next */ []);
 	bottom = computed(() => this.top() + this.plotHeight(), ...ngDevMode ? [{ debugName: "bottom" }] : /* istanbul ignore next */ []);
-	viewBox = computed(() => `0 0 ${this.width()} ${this.resolvedHeight()}`, ...ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []);
+	viewBox = computed(() => `0 0 ${this.width()} ${this.svgHeight()}`, ...ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []);
 	plotted = computed(() => {
 		const pct = this.percent();
 		const maxPoints = Math.max(3, Math.round(this.plotWidth() / 1.5));
@@ -18491,8 +18703,18 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
 		});
 	}, ...ngDevMode ? [{ debugName: "paths" }] : /* istanbul ignore next */ []);
 	yTicks = computed(() => {
+		if (this.minimal()) return [];
+		if (this.categorical()) {
+			const extent = this.categoryExtent();
+			const sy = this.categorySy();
+			return (extent?.ticks ?? []).map((v) => ({
+				y: sy(v),
+				label: this.formatShort(v, extent?.ratio ?? false),
+				zero: v === 0
+			}));
+		}
 		const extent = this.extent();
-		if (!extent || this.minimal()) return [];
+		if (!extent) return [];
 		const sy = this.sy();
 		const pct = this.percent();
 		return extent.ticks.map((v) => ({
@@ -18502,8 +18724,16 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
 		}));
 	}, ...ngDevMode ? [{ debugName: "yTicks" }] : /* istanbul ignore next */ []);
 	xTicks = computed(() => {
+		if (this.minimal()) return [];
+		if (this.categorical()) {
+			const centre = this.bandCentre();
+			return this.categoryData().categories.map((label, i) => ({
+				x: centre(i),
+				label
+			}));
+		}
 		const extent = this.extent();
-		if (!extent || this.minimal()) return [];
+		if (!extent) return [];
 		const sx = this.sx();
 		return timeTicks(extent.t0, extent.t1, this.plotWidth() / 80).map((tick) => ({
 			x: sx(tick.t),
@@ -18511,11 +18741,18 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
 		}));
 	}, ...ngDevMode ? [{ debugName: "xTicks" }] : /* istanbul ignore next */ []);
 	windowLabel = computed(() => {
+		const { categories } = this.categoryData();
+		if (categories.length) {
+			const first = categories[0];
+			const last = categories[categories.length - 1];
+			return first === last ? first : `${first} – ${last}`;
+		}
 		const span = this.drawnSpan();
 		return span ? `${this.dateFormat.format(span[0])} – ${this.dateFormat.format(span[1])}` : "";
 	}, ...ngDevMode ? [{ debugName: "windowLabel" }] : /* istanbul ignore next */ []);
 	periodLabel = computed(() => this.displayPeriod() || this.config()?.displayPeriod || this.windowLabel(), ...ngDevMode ? [{ debugName: "periodLabel" }] : /* istanbul ignore next */ []);
 	legendRows = computed(() => {
+		if (this.categorical()) return this.categoryLegendRows();
 		const changes = /* @__PURE__ */ new Map();
 		for (const line of this.windowed()) if (line.member) changes.set(line.member, chartChange(line.y));
 		return new Map(this.painted().map(({ member, color }) => [member, {
@@ -18575,7 +18812,68 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
 			}
 		};
 	}, ...ngDevMode ? [{ debugName: "measureView" }] : /* istanbul ignore next */ []);
+	categoryLegendRows = () => {
+		const series = new Map(this.categoryData().series.map((s) => [s.member, s]));
+		return new Map(this.painted().map(({ member, color }) => {
+			const s = series.get(member);
+			return [member, {
+				color,
+				...s ? this.categoryChange(s.values, s.ratio, s.values.length - 1) : this.signedChange(null)
+			}];
+		}));
+	};
+	categoryChange = (values, ratio, i) => {
+		let last = i;
+		while (last >= 0 && values[last] === null) last--;
+		let prev = last - 1;
+		while (prev >= 0 && values[prev] === null) prev--;
+		const to = values[last];
+		const from = values[prev];
+		if (last < 0 || prev < 0 || to == null || from == null) return this.signedChange(null);
+		if (ratio) return this.signedPoints(to - from);
+		return this.signedChange(from ? (to / from - 1) * 100 : null);
+	};
+	categoryHover = computed(() => {
+		const index = this.categoryIndex();
+		const { categories, series } = this.categoryData();
+		if (index === null || !categories.length || this.minimal()) return null;
+		const i = Math.min(index, categories.length - 1);
+		const centre = this.bandCentre();
+		const band = this.plotWidth() / categories.length;
+		const sy = this.categorySy();
+		const strip = this.categoryView()?.strip;
+		const x = centre(i);
+		const rows = series.flatMap((s) => {
+			const v = s.values[i];
+			if (v === null) return [];
+			const line = s.panel === "main" && s.mark === "line";
+			const change = this.categoryChange(s.values, s.ratio, i);
+			return [{
+				color: s.color,
+				label: s.label,
+				noTranslate: s.noTranslate,
+				params: s.params,
+				v,
+				value: s.ratio ? this.formatShort(v, true) : this.numberFormat.format(v),
+				sub: change.change === "—" ? "" : change.change,
+				cx: line ? x : null,
+				cy: line ? sy(v) : null
+			}];
+		});
+		return {
+			x,
+			title: categories[i],
+			rows,
+			flip: x > this.width() - TOOLTIP_ROOM,
+			band: {
+				x: x - band / 2,
+				width: band,
+				bottom: strip?.bottom ?? this.bottom()
+			}
+		};
+	}, ...ngDevMode ? [{ debugName: "categoryHover" }] : /* istanbul ignore next */ []);
 	hover = computed(() => {
+		if (this.categorical()) return this.categoryHover();
 		const index = this.hoverIndex();
 		const times = this.times();
 		if (index === null || !times.length || this.minimal()) return null;
@@ -18603,7 +18901,8 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
 			x,
 			title: this.dateFormat.format(t),
 			rows,
-			flip: x > this.width() - TOOLTIP_ROOM
+			flip: x > this.width() - TOOLTIP_ROOM,
+			band: null
 		};
 	}, ...ngDevMode ? [{ debugName: "hover" }] : /* istanbul ignore next */ []);
 	navScale = computed(() => {
@@ -18651,6 +18950,24 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
 	navTop = NAV_TOP;
 	navViewBox = computed(() => `0 0 ${this.width()} ${NAV_HEIGHT}`, ...ngDevMode ? [{ debugName: "navViewBox" }] : /* istanbul ignore next */ []);
 	table = computed(() => {
+		if (this.categorical()) {
+			const { categories, series } = this.categoryData();
+			return {
+				columns: series.map((s) => ({
+					label: s.label,
+					noTranslate: s.noTranslate,
+					params: s.params
+				})),
+				rows: categories.map((date, i) => ({
+					date,
+					cells: series.map((s) => {
+						const v = s.values[i];
+						if (v === null) return "—";
+						return s.ratio ? this.formatShort(v, true) : this.numberFormat.format(v);
+					})
+				})).reverse()
+			};
+		}
 		const plotted = this.plotted();
 		const pct = this.percent();
 		const rows = [...plotted.reduce((best, p) => !best || p.line.t.length > best.line.t.length ? p : best, null)?.ds.t ?? []].reverse().map((t) => ({
@@ -18788,6 +19105,15 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
 		return times[nearestIndex(times, t)];
 	};
 	onPointerMove = (event) => {
+		if (this.categorical()) {
+			const count = this.categoryData().categories.length;
+			if (!count) return;
+			const rect = event.currentTarget.getBoundingClientRect();
+			const px = event.clientX - rect.left - this.left();
+			if (px < 0 || px > this.plotWidth()) return;
+			this.categoryIndex.set(Math.min(count - 1, Math.floor(px / this.plotWidth() * count)));
+			return;
+		}
 		const t = this.plotTime(event);
 		if (t === null) return;
 		const measured = this.measured();
@@ -18815,9 +19141,37 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
 		if (measured && measured[0] === measured[1]) this.measured.set(null);
 	};
 	clearHover = () => {
+		this.categoryIndex.set(null);
 		if (!this.measuring) this.hoverIndex.set(null);
 	};
+	onCategoryKeydown = (event) => {
+		const count = this.categoryData().categories.length;
+		if (!count) return;
+		const current = this.categoryIndex();
+		let next;
+		switch (event.key) {
+			case "ArrowLeft":
+				next = Math.max(0, (current ?? count) - 1);
+				break;
+			case "ArrowRight":
+				next = Math.min(count - 1, (current ?? -1) + 1);
+				break;
+			case "Home":
+				next = 0;
+				break;
+			case "End":
+				next = count - 1;
+				break;
+			case "Escape":
+				next = null;
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		this.categoryIndex.set(next);
+	};
 	onKeydown = (event) => {
+		if (this.categorical()) return this.onCategoryKeydown(event);
 		const times = this.times();
 		const count = times.length;
 		if (!count) return;
@@ -18874,6 +19228,24 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
 			trend
 		};
 	};
+	signedPoints = (diff) => {
+		const trend = diff > 0 ? "up" : diff < 0 ? "down" : "flat";
+		return {
+			change: `${trend === "up" ? "▲" : trend === "down" ? "▼" : "■"} ${this.pointsFormat.format(diff)} pp`,
+			trend
+		};
+	};
+	pointsFormat = new Intl.NumberFormat(this.locale, {
+		signDisplay: "exceptZero",
+		minimumFractionDigits: 1,
+		maximumFractionDigits: 1
+	});
+	levelFormat = new Intl.NumberFormat(this.locale, {
+		style: "percent",
+		minimumFractionDigits: 1,
+		maximumFractionDigits: 1
+	});
+	formatShort = (v, ratio) => ratio ? this.levelFormat.format(v / 100) : this.compactFormat.format(v);
 	percentFormats = /* @__PURE__ */ new Map();
 	formatPercent = (v, digits) => {
 		let format = this.percentFormats.get(digits);
@@ -18984,8 +19356,8 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
 		}],
 		usesInheritance: true,
 		ngImport: i0,
-		template: "<div class=\"m-section-chart__top\">\n  <!-- Each series draws its own legend row: the row is the series' element,\n       which is what the editor's Canvas selects it by. -->\n  <div class=\"m-section-chart__legend\" role=\"list\">\n    <ng-content />\n  </div>\n  @if (periodLabel(); as label) {\n    <span class=\"m-section-chart__window\">{{ label }}</span>\n  }\n</div>\n\n<div class=\"m-section-chart__plot\">\n  <svg\n    class=\"m-section-chart__svg\"\n    role=\"img\"\n    tabindex=\"0\"\n    [class.is-measurable]=\"canMeasure()\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"resolvedHeight()\"\n    [attr.viewBox]=\"viewBox()\"\n    [attr.aria-label]=\"windowLabel()\"\n    [attr.aria-describedby]=\"tableId\"\n    (pointerdown)=\"onPlotDown($event)\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerup)=\"onPlotUp()\"\n    (pointercancel)=\"onPlotUp()\"\n    (pointerleave)=\"clearHover()\"\n    (blur)=\"clearHover()\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    @for (tick of yTicks(); track $index) {\n      <svg:line\n        class=\"m-section-chart__grid\"\n        [class.m-section-chart__grid--zero]=\"tick.zero\"\n        [attr.x1]=\"left()\"\n        [attr.x2]=\"right()\"\n        [attr.y1]=\"tick.y\"\n        [attr.y2]=\"tick.y\"\n      />\n      <svg:text\n        class=\"m-section-chart__tick\"\n        text-anchor=\"end\"\n        [attr.x]=\"left() - 8\"\n        [attr.y]=\"tick.y + 4\"\n      >\n        {{ tick.label }}\n      </svg:text>\n    }\n    @if (!minimal()) {\n      <svg:line\n        class=\"m-section-chart__axis\"\n        [attr.x1]=\"left()\"\n        [attr.x2]=\"right()\"\n        [attr.y1]=\"bottom()\"\n        [attr.y2]=\"bottom()\"\n      />\n    }\n    @for (tick of xTicks(); track $index) {\n      <svg:text\n        class=\"m-section-chart__tick\"\n        text-anchor=\"middle\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"bottom() + 18\"\n      >\n        {{ tick.label }}\n      </svg:text>\n    }\n    @if (measureView(); as band) {\n      <svg:rect\n        class=\"m-section-chart__band\"\n        [attr.x]=\"band.start\"\n        [attr.y]=\"top()\"\n        [attr.width]=\"band.width\"\n        [attr.height]=\"bottom() - top()\"\n      />\n      <svg:line\n        class=\"m-section-chart__band-edge\"\n        [attr.x1]=\"band.start\"\n        [attr.x2]=\"band.start\"\n        [attr.y1]=\"top()\"\n        [attr.y2]=\"bottom()\"\n      />\n      <svg:line\n        class=\"m-section-chart__band-edge\"\n        [attr.x1]=\"band.start + band.width\"\n        [attr.x2]=\"band.start + band.width\"\n        [attr.y1]=\"top()\"\n        [attr.y2]=\"bottom()\"\n      />\n    }\n    @for (path of paths(); track $index) {\n      @if (path.area; as area) {\n        <svg:defs>\n          <svg:linearGradient [attr.id]=\"path.fillId\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <svg:stop offset=\"0\" stop-opacity=\"0.22\" [attr.stop-color]=\"path.color\" />\n            <svg:stop offset=\"1\" stop-opacity=\"0\" [attr.stop-color]=\"path.color\" />\n          </svg:linearGradient>\n        </svg:defs>\n        <svg:path class=\"m-section-chart__area\" [attr.d]=\"area\" [attr.fill]=\"path.fill\" />\n      }\n    }\n    @for (path of paths(); track $index) {\n      <svg:path\n        class=\"m-section-chart__line\"\n        [attr.d]=\"path.d\"\n        [style.stroke]=\"path.color\"\n      />\n    }\n    @if (!minimal()) {\n      @for (path of paths(); track $index) {\n        <svg:circle\n          class=\"m-section-chart__dot\"\n          r=\"4\"\n          [attr.cx]=\"path.endX\"\n          [attr.cy]=\"path.endY\"\n          [style.fill]=\"path.color\"\n        />\n      }\n    }\n    @if (hover(); as h) {\n      <svg:line\n        class=\"m-section-chart__cross\"\n        [attr.x1]=\"h.x\"\n        [attr.x2]=\"h.x\"\n        [attr.y1]=\"top()\"\n        [attr.y2]=\"bottom()\"\n      />\n      @for (row of h.rows; track $index) {\n        <svg:circle\n          class=\"m-section-chart__dot\"\n          r=\"4\"\n          [attr.cx]=\"row.cx\"\n          [attr.cy]=\"row.cy\"\n          [style.fill]=\"row.color\"\n        />\n      }\n    }\n  </svg>\n\n  @if (hover(); as h) {\n    <div\n      class=\"m-section-chart__tip\"\n      role=\"status\"\n      [class.m-section-chart__tip--flip]=\"h.flip\"\n      [style.left.px]=\"h.x\"\n    >\n      <span class=\"m-section-chart__tip-title\">{{ h.title }}</span>\n      @for (row of h.rows; track $index) {\n        <span class=\"m-section-chart__tip-row\">\n          <span class=\"m-section-chart__tip-key\" [style.background]=\"row.color\"></span>\n          <span class=\"m-section-chart__tip-value\">{{ row.value }}</span>\n          <span class=\"m-section-chart__tip-label\">{{\n            row.noTranslate ? row.label : (row.label | translate: row.params)\n          }}</span>\n          <span class=\"m-section-chart__tip-sub\">{{ row.sub }}</span>\n        </span>\n      }\n    </div>\n  }\n\n  @if (measureView()?.card; as card) {\n    <div\n      class=\"m-section-chart__measure\"\n      role=\"status\"\n      [class.m-section-chart__measure--flip]=\"card.flip\"\n      [style.left.px]=\"card.x\"\n    >\n      <span class=\"m-section-chart__tip-title\">{{ card.title }}</span>\n      @for (row of card.rows; track $index) {\n        <span class=\"m-section-chart__tip-row\">\n          <span class=\"m-section-chart__tip-key\" [style.background]=\"row.color\"></span>\n          <span class=\"m-section-chart__tip-value\">{{ row.value }}</span>\n          <span class=\"m-section-chart__tip-label\">{{\n            row.noTranslate ? row.label : (row.label | translate: row.params)\n          }}</span>\n          <span class=\"m-section-chart__tip-sub\">{{ row.sub }}</span>\n        </span>\n      }\n    </div>\n  }\n</div>\n\n@if (presets().length > 1 && !minimal()) {\n  <div class=\"m-section-chart__presets\">\n    <m-section-toggle\n      [items]=\"presets()\"\n      [selectedIndex]=\"presetIndex()\"\n      [border]=\"false\"\n      (action)=\"selectPreset($event)\"\n    >\n      <ng-template [mSectionToggleItem]=\"presets()\" let-preset>\n        <span class=\"m-section-chart__preset\">{{ preset.label }}</span>\n      </ng-template>\n    </m-section-toggle>\n  </div>\n}\n\n@if (navigatorView(); as nav) {\n  <svg\n    class=\"m-section-chart__navigator\"\n    role=\"slider\"\n    tabindex=\"0\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-label]=\"'zoom' | translate\"\n    [attr.aria-valuenow]=\"nav.position\"\n    [attr.aria-valuetext]=\"windowLabel()\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"navHeight\"\n    [attr.viewBox]=\"navViewBox()\"\n    (pointerdown)=\"onNavigatorDown($event)\"\n    (pointermove)=\"onNavigatorMove($event)\"\n    (pointerup)=\"onNavigatorUp()\"\n    (pointercancel)=\"onNavigatorUp()\"\n    (keydown)=\"onNavigatorKeydown($event)\"\n  >\n    <svg:path class=\"m-section-chart__nav-area\" [attr.d]=\"nav.area\" />\n    <svg:path class=\"m-section-chart__nav-line\" [attr.d]=\"nav.d\" />\n    <svg:line\n      class=\"m-section-chart__axis\"\n      [attr.x1]=\"left()\"\n      [attr.x2]=\"right()\"\n      [attr.y1]=\"nav.base\"\n      [attr.y2]=\"nav.base\"\n    />\n    @for (tick of nav.ticks; track $index) {\n      <svg:text\n        class=\"m-section-chart__tick\"\n        text-anchor=\"middle\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"nav.base + 15\"\n      >\n        {{ tick.label }}\n      </svg:text>\n    }\n    <svg:rect\n      class=\"m-section-chart__nav-dim\"\n      [attr.x]=\"left()\"\n      [attr.y]=\"navTop\"\n      [attr.width]=\"nav.start - left()\"\n      [attr.height]=\"nav.base - navTop\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-dim\"\n      [attr.x]=\"nav.end\"\n      [attr.y]=\"navTop\"\n      [attr.width]=\"right() - nav.end\"\n      [attr.height]=\"nav.base - navTop\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-window\"\n      [attr.x]=\"nav.start\"\n      [attr.y]=\"navTop\"\n      [attr.width]=\"nav.end - nav.start\"\n      [attr.height]=\"nav.base - navTop\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-handle\"\n      rx=\"2\"\n      width=\"6\"\n      height=\"20\"\n      [attr.x]=\"nav.start - 3\"\n      [attr.y]=\"(nav.base + navTop) / 2 - 10\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-handle\"\n      rx=\"2\"\n      width=\"6\"\n      height=\"20\"\n      [attr.x]=\"nav.end - 3\"\n      [attr.y]=\"(nav.base + navTop) / 2 - 10\"\n    />\n  </svg>\n}\n\n<table class=\"m-section-chart__table\" [id]=\"tableId\">\n  <thead>\n    <tr>\n      <th scope=\"col\">{{ 'date' | translate }}</th>\n      @for (column of table().columns; track $index) {\n        <th scope=\"col\">\n          {{ column.noTranslate ? column.label : (column.label | translate: column.params) }}\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (row of table().rows; track $index) {\n      <tr>\n        <td>{{ row.date }}</td>\n        @for (cell of row.cells; track $index) {\n          <td>{{ cell }}</td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n",
-		styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;position:relative;width:100%;min-width:0}.m-section-chart__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.5rem 1rem;margin-bottom:.5rem}.m-section-chart__legend{display:grid;gap:.15rem;min-width:0}.m-section-chart__tip-key{display:inline-block;width:.75rem;height:2px;border-radius:1px}.m-section-chart__window{color:var(--m-text-tertiary);font-size:.8rem}:host(.m-section-chart--minimal) .m-section-chart__svg{cursor:default}:host(.m-section-chart--minimal) .m-section-chart__line{stroke-width:2.25}.m-section-chart__area{stroke:none}.m-section-chart__plot{position:relative}.m-section-chart__svg{display:block;overflow:visible}.m-section-chart__svg:focus{outline:none}.m-section-chart__svg:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px;border-radius:4px}.m-section-chart__svg.is-measurable{cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}.m-section-chart__band{fill:var(--m-text);opacity:.06}.m-section-chart__band-edge{stroke:var(--m-text-secondary);stroke-width:1}.m-section-chart__grid{stroke:var(--m-text-septenary);stroke-width:1}.m-section-chart__grid--zero{stroke:var(--m-text-quinary);stroke-width:1.5}.m-section-chart__axis{stroke:var(--m-text-quinary);stroke-width:1}.m-section-chart__tick{fill:var(--m-text-tertiary);font-size:11px;font-variant-numeric:tabular-nums}.m-section-chart__line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.m-section-chart__dot{stroke:var(--m-background);stroke-width:2}.m-section-chart__cross{stroke:var(--m-text-secondary);stroke-width:1;opacity:.55}.m-section-chart__tip,.m-section-chart__measure{position:absolute;z-index:2;display:grid;gap:.25rem;min-width:10rem;padding:.5rem .625rem;border:1px solid var(--m-backdrop-border);border-radius:.5rem;background:var(--m-background);box-shadow:0 6px 20px var(--m-backdrop-shadow);font-size:.75rem;pointer-events:none}.m-section-chart__tip{top:0;margin-left:.875rem}.m-section-chart__tip--flip{transform:translate(calc(-100% - 1.75rem))}.m-section-chart__measure{bottom:2.25rem}.m-section-chart__measure--flip{transform:translate(-100%)}.m-section-chart__tip-title{color:var(--m-text-secondary);font-weight:600}.m-section-chart__tip-row{display:grid;grid-template-columns:.75rem auto 1fr auto;align-items:center;gap:.5rem}.m-section-chart__tip-value{color:var(--m-text);font-weight:650;font-variant-numeric:tabular-nums}.m-section-chart__tip-label{color:var(--m-text-secondary);white-space:nowrap}.m-section-chart__tip-sub{color:var(--m-text-tertiary);font-variant-numeric:tabular-nums}.m-section-chart__presets{--section-px: 0;margin-top:.5rem}.m-section-chart__preset{font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}.m-section-chart__navigator{display:block;margin-top:.25rem;overflow:visible;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer}.m-section-chart__navigator:focus{outline:none}.m-section-chart__navigator:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px;border-radius:4px}.m-section-chart__nav-area{fill:var(--m-text-tertiary);opacity:.12}.m-section-chart__nav-line{fill:none;stroke:var(--m-text-tertiary);stroke-width:1.25}.m-section-chart__nav-dim{fill:var(--m-background);opacity:.6}.m-section-chart__nav-window{fill:transparent;stroke:var(--m-text-secondary);stroke-width:1;cursor:grab}.m-section-chart__nav-handle{fill:var(--m-text-secondary);cursor:ew-resize}.m-section-chart__table{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"],
+		template: "<div class=\"m-section-chart__top\">\n  <!-- Each series draws its own legend row: the row is the series' element,\n       which is what the editor's Canvas selects it by. -->\n  <div class=\"m-section-chart__legend\" role=\"list\">\n    <ng-content />\n  </div>\n  @if (periodLabel(); as label) {\n    <span class=\"m-section-chart__window\">{{ label }}</span>\n  }\n</div>\n\n<div class=\"m-section-chart__plot\">\n  <svg\n    class=\"m-section-chart__svg\"\n    role=\"img\"\n    tabindex=\"0\"\n    [class.is-measurable]=\"canMeasure()\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"svgHeight()\"\n    [attr.viewBox]=\"viewBox()\"\n    [attr.aria-label]=\"windowLabel()\"\n    [attr.aria-describedby]=\"tableId\"\n    (pointerdown)=\"onPlotDown($event)\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerup)=\"onPlotUp()\"\n    (pointercancel)=\"onPlotUp()\"\n    (pointerleave)=\"clearHover()\"\n    (blur)=\"clearHover()\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    @for (tick of yTicks(); track $index) {\n      <svg:line\n        class=\"m-section-chart__grid\"\n        [class.m-section-chart__grid--zero]=\"tick.zero\"\n        [attr.x1]=\"left()\"\n        [attr.x2]=\"right()\"\n        [attr.y1]=\"tick.y\"\n        [attr.y2]=\"tick.y\"\n      />\n      <svg:text\n        class=\"m-section-chart__tick\"\n        text-anchor=\"end\"\n        [attr.x]=\"left() - 8\"\n        [attr.y]=\"tick.y + 4\"\n      >\n        {{ tick.label }}\n      </svg:text>\n    }\n    @if (!minimal()) {\n      <svg:line\n        class=\"m-section-chart__axis\"\n        [attr.x1]=\"left()\"\n        [attr.x2]=\"right()\"\n        [attr.y1]=\"bottom()\"\n        [attr.y2]=\"bottom()\"\n      />\n    }\n    @for (tick of xTicks(); track $index) {\n      <svg:text\n        class=\"m-section-chart__tick\"\n        text-anchor=\"middle\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"bottom() + 18\"\n      >\n        {{ tick.label }}\n      </svg:text>\n    }\n    @if (measureView(); as band) {\n      <svg:rect\n        class=\"m-section-chart__band\"\n        [attr.x]=\"band.start\"\n        [attr.y]=\"top()\"\n        [attr.width]=\"band.width\"\n        [attr.height]=\"bottom() - top()\"\n      />\n      <svg:line\n        class=\"m-section-chart__band-edge\"\n        [attr.x1]=\"band.start\"\n        [attr.x2]=\"band.start\"\n        [attr.y1]=\"top()\"\n        [attr.y2]=\"bottom()\"\n      />\n      <svg:line\n        class=\"m-section-chart__band-edge\"\n        [attr.x1]=\"band.start + band.width\"\n        [attr.x2]=\"band.start + band.width\"\n        [attr.y1]=\"top()\"\n        [attr.y2]=\"bottom()\"\n      />\n    }\n    @if (hover()?.band; as band) {\n      <svg:rect\n        class=\"m-section-chart__hover-band\"\n        [attr.x]=\"band.x\"\n        [attr.y]=\"top()\"\n        [attr.width]=\"band.width\"\n        [attr.height]=\"band.bottom - top()\"\n      />\n    }\n    @if (categoryView(); as cat) {\n      @for (column of cat.columns; track $index) {\n        <svg:path\n          class=\"m-section-chart__column\"\n          [attr.d]=\"column.d\"\n          [style.fill]=\"column.color\"\n        />\n      }\n      @for (line of cat.lines; track $index) {\n        <svg:path\n          class=\"m-section-chart__line\"\n          [attr.d]=\"line.d\"\n          [style.stroke]=\"line.color\"\n        />\n        <svg:circle\n          class=\"m-section-chart__dot\"\n          r=\"4\"\n          [attr.cx]=\"line.endX\"\n          [attr.cy]=\"line.endY\"\n          [style.fill]=\"line.color\"\n        />\n      }\n      @for (label of cat.labels; track $index) {\n        <svg:text\n          class=\"m-section-chart__value\"\n          text-anchor=\"middle\"\n          [attr.x]=\"label.x\"\n          [attr.y]=\"label.y\"\n        >\n          {{ label.text }}\n        </svg:text>\n      }\n      @if (cat.strip; as strip) {\n        @for (tick of strip.ticks; track $index) {\n          <svg:line\n            class=\"m-section-chart__grid\"\n            [attr.x1]=\"left()\"\n            [attr.x2]=\"right()\"\n            [attr.y1]=\"tick.y\"\n            [attr.y2]=\"tick.y\"\n          />\n          <svg:text\n            class=\"m-section-chart__tick\"\n            text-anchor=\"end\"\n            [attr.x]=\"left() - 8\"\n            [attr.y]=\"tick.y + 4\"\n          >\n            {{ tick.label }}\n          </svg:text>\n        }\n        @for (line of strip.lines; track $index) {\n          <svg:path\n            class=\"m-section-chart__line\"\n            [attr.d]=\"line.d\"\n            [style.stroke]=\"line.color\"\n          />\n          @for (dot of line.dots; track $index) {\n            <svg:circle\n              class=\"m-section-chart__dot\"\n              r=\"4\"\n              [attr.cx]=\"dot.cx\"\n              [attr.cy]=\"dot.cy\"\n              [style.fill]=\"line.color\"\n            />\n            <svg:text\n              class=\"m-section-chart__value\"\n              text-anchor=\"middle\"\n              [attr.x]=\"dot.cx\"\n              [attr.y]=\"dot.cy - 9\"\n            >\n              {{ dot.text }}\n            </svg:text>\n          }\n        }\n      }\n    }\n    @for (path of paths(); track $index) {\n      @if (path.area; as area) {\n        <svg:defs>\n          <svg:linearGradient [attr.id]=\"path.fillId\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <svg:stop offset=\"0\" stop-opacity=\"0.22\" [attr.stop-color]=\"path.color\" />\n            <svg:stop offset=\"1\" stop-opacity=\"0\" [attr.stop-color]=\"path.color\" />\n          </svg:linearGradient>\n        </svg:defs>\n        <svg:path class=\"m-section-chart__area\" [attr.d]=\"area\" [attr.fill]=\"path.fill\" />\n      }\n    }\n    @for (path of paths(); track $index) {\n      <svg:path\n        class=\"m-section-chart__line\"\n        [attr.d]=\"path.d\"\n        [style.stroke]=\"path.color\"\n      />\n    }\n    @if (!minimal()) {\n      @for (path of paths(); track $index) {\n        <svg:circle\n          class=\"m-section-chart__dot\"\n          r=\"4\"\n          [attr.cx]=\"path.endX\"\n          [attr.cy]=\"path.endY\"\n          [style.fill]=\"path.color\"\n        />\n      }\n    }\n    @if (hover(); as h) {\n      @if (!h.band) {\n        <svg:line\n          class=\"m-section-chart__cross\"\n          [attr.x1]=\"h.x\"\n          [attr.x2]=\"h.x\"\n          [attr.y1]=\"top()\"\n          [attr.y2]=\"bottom()\"\n        />\n      }\n      @for (row of h.rows; track $index) {\n        @if (row.cx !== null) {\n          <svg:circle\n            class=\"m-section-chart__dot\"\n            r=\"4\"\n            [attr.cx]=\"row.cx\"\n            [attr.cy]=\"row.cy\"\n            [style.fill]=\"row.color\"\n          />\n        }\n      }\n    }\n  </svg>\n\n  @if (hover(); as h) {\n    <div\n      class=\"m-section-chart__tip\"\n      role=\"status\"\n      [class.m-section-chart__tip--flip]=\"h.flip\"\n      [style.left.px]=\"h.x\"\n    >\n      <span class=\"m-section-chart__tip-title\">{{ h.title }}</span>\n      @for (row of h.rows; track $index) {\n        <span class=\"m-section-chart__tip-row\">\n          <span class=\"m-section-chart__tip-key\" [style.background]=\"row.color\"></span>\n          <span class=\"m-section-chart__tip-value\">{{ row.value }}</span>\n          <span class=\"m-section-chart__tip-label\">{{\n            row.noTranslate ? row.label : (row.label | translate: row.params)\n          }}</span>\n          <span class=\"m-section-chart__tip-sub\">{{ row.sub }}</span>\n        </span>\n      }\n    </div>\n  }\n\n  @if (measureView()?.card; as card) {\n    <div\n      class=\"m-section-chart__measure\"\n      role=\"status\"\n      [class.m-section-chart__measure--flip]=\"card.flip\"\n      [style.left.px]=\"card.x\"\n    >\n      <span class=\"m-section-chart__tip-title\">{{ card.title }}</span>\n      @for (row of card.rows; track $index) {\n        <span class=\"m-section-chart__tip-row\">\n          <span class=\"m-section-chart__tip-key\" [style.background]=\"row.color\"></span>\n          <span class=\"m-section-chart__tip-value\">{{ row.value }}</span>\n          <span class=\"m-section-chart__tip-label\">{{\n            row.noTranslate ? row.label : (row.label | translate: row.params)\n          }}</span>\n          <span class=\"m-section-chart__tip-sub\">{{ row.sub }}</span>\n        </span>\n      }\n    </div>\n  }\n</div>\n\n@if (presets().length > 1 && !minimal() && !categorical()) {\n  <div class=\"m-section-chart__presets\">\n    <m-section-toggle\n      [items]=\"presets()\"\n      [selectedIndex]=\"presetIndex()\"\n      [border]=\"false\"\n      (action)=\"selectPreset($event)\"\n    >\n      <ng-template [mSectionToggleItem]=\"presets()\" let-preset>\n        <span class=\"m-section-chart__preset\">{{ preset.label }}</span>\n      </ng-template>\n    </m-section-toggle>\n  </div>\n}\n\n@if (navigatorView(); as nav) {\n  <svg\n    class=\"m-section-chart__navigator\"\n    role=\"slider\"\n    tabindex=\"0\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-label]=\"'zoom' | translate\"\n    [attr.aria-valuenow]=\"nav.position\"\n    [attr.aria-valuetext]=\"windowLabel()\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"navHeight\"\n    [attr.viewBox]=\"navViewBox()\"\n    (pointerdown)=\"onNavigatorDown($event)\"\n    (pointermove)=\"onNavigatorMove($event)\"\n    (pointerup)=\"onNavigatorUp()\"\n    (pointercancel)=\"onNavigatorUp()\"\n    (keydown)=\"onNavigatorKeydown($event)\"\n  >\n    <svg:path class=\"m-section-chart__nav-area\" [attr.d]=\"nav.area\" />\n    <svg:path class=\"m-section-chart__nav-line\" [attr.d]=\"nav.d\" />\n    <svg:line\n      class=\"m-section-chart__axis\"\n      [attr.x1]=\"left()\"\n      [attr.x2]=\"right()\"\n      [attr.y1]=\"nav.base\"\n      [attr.y2]=\"nav.base\"\n    />\n    @for (tick of nav.ticks; track $index) {\n      <svg:text\n        class=\"m-section-chart__tick\"\n        text-anchor=\"middle\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"nav.base + 15\"\n      >\n        {{ tick.label }}\n      </svg:text>\n    }\n    <svg:rect\n      class=\"m-section-chart__nav-dim\"\n      [attr.x]=\"left()\"\n      [attr.y]=\"navTop\"\n      [attr.width]=\"nav.start - left()\"\n      [attr.height]=\"nav.base - navTop\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-dim\"\n      [attr.x]=\"nav.end\"\n      [attr.y]=\"navTop\"\n      [attr.width]=\"right() - nav.end\"\n      [attr.height]=\"nav.base - navTop\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-window\"\n      [attr.x]=\"nav.start\"\n      [attr.y]=\"navTop\"\n      [attr.width]=\"nav.end - nav.start\"\n      [attr.height]=\"nav.base - navTop\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-handle\"\n      rx=\"2\"\n      width=\"6\"\n      height=\"20\"\n      [attr.x]=\"nav.start - 3\"\n      [attr.y]=\"(nav.base + navTop) / 2 - 10\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-handle\"\n      rx=\"2\"\n      width=\"6\"\n      height=\"20\"\n      [attr.x]=\"nav.end - 3\"\n      [attr.y]=\"(nav.base + navTop) / 2 - 10\"\n    />\n  </svg>\n}\n\n<table class=\"m-section-chart__table\" [id]=\"tableId\">\n  <thead>\n    <tr>\n      <th scope=\"col\">{{ 'date' | translate }}</th>\n      @for (column of table().columns; track $index) {\n        <th scope=\"col\">\n          {{ column.noTranslate ? column.label : (column.label | translate: column.params) }}\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (row of table().rows; track $index) {\n      <tr>\n        <td>{{ row.date }}</td>\n        @for (cell of row.cells; track $index) {\n          <td>{{ cell }}</td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n",
+		styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;position:relative;width:100%;min-width:0}.m-section-chart__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.5rem 1rem;margin-bottom:.5rem}.m-section-chart__legend{display:grid;gap:.15rem;min-width:0}.m-section-chart__tip-key{display:inline-block;width:.75rem;height:2px;border-radius:1px}.m-section-chart__window{color:var(--m-text-tertiary);font-size:.8rem}:host(.m-section-chart--minimal) .m-section-chart__svg{cursor:default}:host(.m-section-chart--minimal) .m-section-chart__line{stroke-width:2.25}.m-section-chart__area{stroke:none}.m-section-chart__plot{position:relative}.m-section-chart__svg{display:block;overflow:visible}.m-section-chart__svg:focus{outline:none}.m-section-chart__svg:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px;border-radius:4px}.m-section-chart__svg.is-measurable{cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}.m-section-chart__band{fill:var(--m-text);opacity:.06}.m-section-chart__band-edge{stroke:var(--m-text-secondary);stroke-width:1}.m-section-chart__grid{stroke:var(--m-text-septenary);stroke-width:1}.m-section-chart__grid--zero{stroke:var(--m-text-quinary);stroke-width:1.5}.m-section-chart__axis{stroke:var(--m-text-quinary);stroke-width:1}.m-section-chart__tick{fill:var(--m-text-tertiary);font-size:11px;font-variant-numeric:tabular-nums}.m-section-chart__line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.m-section-chart__dot{stroke:var(--m-background);stroke-width:2}.m-section-chart__cross{stroke:var(--m-text-secondary);stroke-width:1;opacity:.55}.m-section-chart__hover-band{fill:var(--m-text);opacity:.05}.m-section-chart__column{stroke:none}.m-section-chart__value{fill:var(--m-text-secondary);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}.m-section-chart__tip,.m-section-chart__measure{position:absolute;z-index:2;display:grid;gap:.25rem;min-width:10rem;padding:.5rem .625rem;border:1px solid var(--m-backdrop-border);border-radius:.5rem;background:var(--m-background);box-shadow:0 6px 20px var(--m-backdrop-shadow);font-size:.75rem;pointer-events:none}.m-section-chart__tip{top:0;margin-left:.875rem}.m-section-chart__tip--flip{transform:translate(calc(-100% - 1.75rem))}.m-section-chart__measure{bottom:2.25rem}.m-section-chart__measure--flip{transform:translate(-100%)}.m-section-chart__tip-title{color:var(--m-text-secondary);font-weight:600}.m-section-chart__tip-row{display:grid;grid-template-columns:.75rem auto 1fr auto;align-items:center;gap:.5rem}.m-section-chart__tip-value{color:var(--m-text);font-weight:650;font-variant-numeric:tabular-nums}.m-section-chart__tip-label{color:var(--m-text-secondary);white-space:nowrap}.m-section-chart__tip-sub{color:var(--m-text-tertiary);font-variant-numeric:tabular-nums}.m-section-chart__presets{--section-px: 0;margin-top:.5rem}.m-section-chart__preset{font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}.m-section-chart__navigator{display:block;margin-top:.25rem;overflow:visible;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer}.m-section-chart__navigator:focus{outline:none}.m-section-chart__navigator:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px;border-radius:4px}.m-section-chart__nav-area{fill:var(--m-text-tertiary);opacity:.12}.m-section-chart__nav-line{fill:none;stroke:var(--m-text-tertiary);stroke-width:1.25}.m-section-chart__nav-dim{fill:var(--m-background);opacity:.6}.m-section-chart__nav-window{fill:transparent;stroke:var(--m-text-secondary);stroke-width:1;cursor:grab}.m-section-chart__nav-handle{fill:var(--m-text-secondary);cursor:ew-resize}.m-section-chart__table{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"],
 		dependencies: [
 			{
 				kind: "component",
@@ -19045,8 +19417,8 @@ i0.ɵɵngDeclareClassMetadata({
 					};
 				}
 			}],
-			template: "<div class=\"m-section-chart__top\">\n  <!-- Each series draws its own legend row: the row is the series' element,\n       which is what the editor's Canvas selects it by. -->\n  <div class=\"m-section-chart__legend\" role=\"list\">\n    <ng-content />\n  </div>\n  @if (periodLabel(); as label) {\n    <span class=\"m-section-chart__window\">{{ label }}</span>\n  }\n</div>\n\n<div class=\"m-section-chart__plot\">\n  <svg\n    class=\"m-section-chart__svg\"\n    role=\"img\"\n    tabindex=\"0\"\n    [class.is-measurable]=\"canMeasure()\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"resolvedHeight()\"\n    [attr.viewBox]=\"viewBox()\"\n    [attr.aria-label]=\"windowLabel()\"\n    [attr.aria-describedby]=\"tableId\"\n    (pointerdown)=\"onPlotDown($event)\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerup)=\"onPlotUp()\"\n    (pointercancel)=\"onPlotUp()\"\n    (pointerleave)=\"clearHover()\"\n    (blur)=\"clearHover()\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    @for (tick of yTicks(); track $index) {\n      <svg:line\n        class=\"m-section-chart__grid\"\n        [class.m-section-chart__grid--zero]=\"tick.zero\"\n        [attr.x1]=\"left()\"\n        [attr.x2]=\"right()\"\n        [attr.y1]=\"tick.y\"\n        [attr.y2]=\"tick.y\"\n      />\n      <svg:text\n        class=\"m-section-chart__tick\"\n        text-anchor=\"end\"\n        [attr.x]=\"left() - 8\"\n        [attr.y]=\"tick.y + 4\"\n      >\n        {{ tick.label }}\n      </svg:text>\n    }\n    @if (!minimal()) {\n      <svg:line\n        class=\"m-section-chart__axis\"\n        [attr.x1]=\"left()\"\n        [attr.x2]=\"right()\"\n        [attr.y1]=\"bottom()\"\n        [attr.y2]=\"bottom()\"\n      />\n    }\n    @for (tick of xTicks(); track $index) {\n      <svg:text\n        class=\"m-section-chart__tick\"\n        text-anchor=\"middle\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"bottom() + 18\"\n      >\n        {{ tick.label }}\n      </svg:text>\n    }\n    @if (measureView(); as band) {\n      <svg:rect\n        class=\"m-section-chart__band\"\n        [attr.x]=\"band.start\"\n        [attr.y]=\"top()\"\n        [attr.width]=\"band.width\"\n        [attr.height]=\"bottom() - top()\"\n      />\n      <svg:line\n        class=\"m-section-chart__band-edge\"\n        [attr.x1]=\"band.start\"\n        [attr.x2]=\"band.start\"\n        [attr.y1]=\"top()\"\n        [attr.y2]=\"bottom()\"\n      />\n      <svg:line\n        class=\"m-section-chart__band-edge\"\n        [attr.x1]=\"band.start + band.width\"\n        [attr.x2]=\"band.start + band.width\"\n        [attr.y1]=\"top()\"\n        [attr.y2]=\"bottom()\"\n      />\n    }\n    @for (path of paths(); track $index) {\n      @if (path.area; as area) {\n        <svg:defs>\n          <svg:linearGradient [attr.id]=\"path.fillId\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <svg:stop offset=\"0\" stop-opacity=\"0.22\" [attr.stop-color]=\"path.color\" />\n            <svg:stop offset=\"1\" stop-opacity=\"0\" [attr.stop-color]=\"path.color\" />\n          </svg:linearGradient>\n        </svg:defs>\n        <svg:path class=\"m-section-chart__area\" [attr.d]=\"area\" [attr.fill]=\"path.fill\" />\n      }\n    }\n    @for (path of paths(); track $index) {\n      <svg:path\n        class=\"m-section-chart__line\"\n        [attr.d]=\"path.d\"\n        [style.stroke]=\"path.color\"\n      />\n    }\n    @if (!minimal()) {\n      @for (path of paths(); track $index) {\n        <svg:circle\n          class=\"m-section-chart__dot\"\n          r=\"4\"\n          [attr.cx]=\"path.endX\"\n          [attr.cy]=\"path.endY\"\n          [style.fill]=\"path.color\"\n        />\n      }\n    }\n    @if (hover(); as h) {\n      <svg:line\n        class=\"m-section-chart__cross\"\n        [attr.x1]=\"h.x\"\n        [attr.x2]=\"h.x\"\n        [attr.y1]=\"top()\"\n        [attr.y2]=\"bottom()\"\n      />\n      @for (row of h.rows; track $index) {\n        <svg:circle\n          class=\"m-section-chart__dot\"\n          r=\"4\"\n          [attr.cx]=\"row.cx\"\n          [attr.cy]=\"row.cy\"\n          [style.fill]=\"row.color\"\n        />\n      }\n    }\n  </svg>\n\n  @if (hover(); as h) {\n    <div\n      class=\"m-section-chart__tip\"\n      role=\"status\"\n      [class.m-section-chart__tip--flip]=\"h.flip\"\n      [style.left.px]=\"h.x\"\n    >\n      <span class=\"m-section-chart__tip-title\">{{ h.title }}</span>\n      @for (row of h.rows; track $index) {\n        <span class=\"m-section-chart__tip-row\">\n          <span class=\"m-section-chart__tip-key\" [style.background]=\"row.color\"></span>\n          <span class=\"m-section-chart__tip-value\">{{ row.value }}</span>\n          <span class=\"m-section-chart__tip-label\">{{\n            row.noTranslate ? row.label : (row.label | translate: row.params)\n          }}</span>\n          <span class=\"m-section-chart__tip-sub\">{{ row.sub }}</span>\n        </span>\n      }\n    </div>\n  }\n\n  @if (measureView()?.card; as card) {\n    <div\n      class=\"m-section-chart__measure\"\n      role=\"status\"\n      [class.m-section-chart__measure--flip]=\"card.flip\"\n      [style.left.px]=\"card.x\"\n    >\n      <span class=\"m-section-chart__tip-title\">{{ card.title }}</span>\n      @for (row of card.rows; track $index) {\n        <span class=\"m-section-chart__tip-row\">\n          <span class=\"m-section-chart__tip-key\" [style.background]=\"row.color\"></span>\n          <span class=\"m-section-chart__tip-value\">{{ row.value }}</span>\n          <span class=\"m-section-chart__tip-label\">{{\n            row.noTranslate ? row.label : (row.label | translate: row.params)\n          }}</span>\n          <span class=\"m-section-chart__tip-sub\">{{ row.sub }}</span>\n        </span>\n      }\n    </div>\n  }\n</div>\n\n@if (presets().length > 1 && !minimal()) {\n  <div class=\"m-section-chart__presets\">\n    <m-section-toggle\n      [items]=\"presets()\"\n      [selectedIndex]=\"presetIndex()\"\n      [border]=\"false\"\n      (action)=\"selectPreset($event)\"\n    >\n      <ng-template [mSectionToggleItem]=\"presets()\" let-preset>\n        <span class=\"m-section-chart__preset\">{{ preset.label }}</span>\n      </ng-template>\n    </m-section-toggle>\n  </div>\n}\n\n@if (navigatorView(); as nav) {\n  <svg\n    class=\"m-section-chart__navigator\"\n    role=\"slider\"\n    tabindex=\"0\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-label]=\"'zoom' | translate\"\n    [attr.aria-valuenow]=\"nav.position\"\n    [attr.aria-valuetext]=\"windowLabel()\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"navHeight\"\n    [attr.viewBox]=\"navViewBox()\"\n    (pointerdown)=\"onNavigatorDown($event)\"\n    (pointermove)=\"onNavigatorMove($event)\"\n    (pointerup)=\"onNavigatorUp()\"\n    (pointercancel)=\"onNavigatorUp()\"\n    (keydown)=\"onNavigatorKeydown($event)\"\n  >\n    <svg:path class=\"m-section-chart__nav-area\" [attr.d]=\"nav.area\" />\n    <svg:path class=\"m-section-chart__nav-line\" [attr.d]=\"nav.d\" />\n    <svg:line\n      class=\"m-section-chart__axis\"\n      [attr.x1]=\"left()\"\n      [attr.x2]=\"right()\"\n      [attr.y1]=\"nav.base\"\n      [attr.y2]=\"nav.base\"\n    />\n    @for (tick of nav.ticks; track $index) {\n      <svg:text\n        class=\"m-section-chart__tick\"\n        text-anchor=\"middle\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"nav.base + 15\"\n      >\n        {{ tick.label }}\n      </svg:text>\n    }\n    <svg:rect\n      class=\"m-section-chart__nav-dim\"\n      [attr.x]=\"left()\"\n      [attr.y]=\"navTop\"\n      [attr.width]=\"nav.start - left()\"\n      [attr.height]=\"nav.base - navTop\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-dim\"\n      [attr.x]=\"nav.end\"\n      [attr.y]=\"navTop\"\n      [attr.width]=\"right() - nav.end\"\n      [attr.height]=\"nav.base - navTop\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-window\"\n      [attr.x]=\"nav.start\"\n      [attr.y]=\"navTop\"\n      [attr.width]=\"nav.end - nav.start\"\n      [attr.height]=\"nav.base - navTop\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-handle\"\n      rx=\"2\"\n      width=\"6\"\n      height=\"20\"\n      [attr.x]=\"nav.start - 3\"\n      [attr.y]=\"(nav.base + navTop) / 2 - 10\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-handle\"\n      rx=\"2\"\n      width=\"6\"\n      height=\"20\"\n      [attr.x]=\"nav.end - 3\"\n      [attr.y]=\"(nav.base + navTop) / 2 - 10\"\n    />\n  </svg>\n}\n\n<table class=\"m-section-chart__table\" [id]=\"tableId\">\n  <thead>\n    <tr>\n      <th scope=\"col\">{{ 'date' | translate }}</th>\n      @for (column of table().columns; track $index) {\n        <th scope=\"col\">\n          {{ column.noTranslate ? column.label : (column.label | translate: column.params) }}\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (row of table().rows; track $index) {\n      <tr>\n        <td>{{ row.date }}</td>\n        @for (cell of row.cells; track $index) {\n          <td>{{ cell }}</td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n",
-			styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;position:relative;width:100%;min-width:0}.m-section-chart__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.5rem 1rem;margin-bottom:.5rem}.m-section-chart__legend{display:grid;gap:.15rem;min-width:0}.m-section-chart__tip-key{display:inline-block;width:.75rem;height:2px;border-radius:1px}.m-section-chart__window{color:var(--m-text-tertiary);font-size:.8rem}:host(.m-section-chart--minimal) .m-section-chart__svg{cursor:default}:host(.m-section-chart--minimal) .m-section-chart__line{stroke-width:2.25}.m-section-chart__area{stroke:none}.m-section-chart__plot{position:relative}.m-section-chart__svg{display:block;overflow:visible}.m-section-chart__svg:focus{outline:none}.m-section-chart__svg:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px;border-radius:4px}.m-section-chart__svg.is-measurable{cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}.m-section-chart__band{fill:var(--m-text);opacity:.06}.m-section-chart__band-edge{stroke:var(--m-text-secondary);stroke-width:1}.m-section-chart__grid{stroke:var(--m-text-septenary);stroke-width:1}.m-section-chart__grid--zero{stroke:var(--m-text-quinary);stroke-width:1.5}.m-section-chart__axis{stroke:var(--m-text-quinary);stroke-width:1}.m-section-chart__tick{fill:var(--m-text-tertiary);font-size:11px;font-variant-numeric:tabular-nums}.m-section-chart__line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.m-section-chart__dot{stroke:var(--m-background);stroke-width:2}.m-section-chart__cross{stroke:var(--m-text-secondary);stroke-width:1;opacity:.55}.m-section-chart__tip,.m-section-chart__measure{position:absolute;z-index:2;display:grid;gap:.25rem;min-width:10rem;padding:.5rem .625rem;border:1px solid var(--m-backdrop-border);border-radius:.5rem;background:var(--m-background);box-shadow:0 6px 20px var(--m-backdrop-shadow);font-size:.75rem;pointer-events:none}.m-section-chart__tip{top:0;margin-left:.875rem}.m-section-chart__tip--flip{transform:translate(calc(-100% - 1.75rem))}.m-section-chart__measure{bottom:2.25rem}.m-section-chart__measure--flip{transform:translate(-100%)}.m-section-chart__tip-title{color:var(--m-text-secondary);font-weight:600}.m-section-chart__tip-row{display:grid;grid-template-columns:.75rem auto 1fr auto;align-items:center;gap:.5rem}.m-section-chart__tip-value{color:var(--m-text);font-weight:650;font-variant-numeric:tabular-nums}.m-section-chart__tip-label{color:var(--m-text-secondary);white-space:nowrap}.m-section-chart__tip-sub{color:var(--m-text-tertiary);font-variant-numeric:tabular-nums}.m-section-chart__presets{--section-px: 0;margin-top:.5rem}.m-section-chart__preset{font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}.m-section-chart__navigator{display:block;margin-top:.25rem;overflow:visible;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer}.m-section-chart__navigator:focus{outline:none}.m-section-chart__navigator:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px;border-radius:4px}.m-section-chart__nav-area{fill:var(--m-text-tertiary);opacity:.12}.m-section-chart__nav-line{fill:none;stroke:var(--m-text-tertiary);stroke-width:1.25}.m-section-chart__nav-dim{fill:var(--m-background);opacity:.6}.m-section-chart__nav-window{fill:transparent;stroke:var(--m-text-secondary);stroke-width:1;cursor:grab}.m-section-chart__nav-handle{fill:var(--m-text-secondary);cursor:ew-resize}.m-section-chart__table{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"]
+			template: "<div class=\"m-section-chart__top\">\n  <!-- Each series draws its own legend row: the row is the series' element,\n       which is what the editor's Canvas selects it by. -->\n  <div class=\"m-section-chart__legend\" role=\"list\">\n    <ng-content />\n  </div>\n  @if (periodLabel(); as label) {\n    <span class=\"m-section-chart__window\">{{ label }}</span>\n  }\n</div>\n\n<div class=\"m-section-chart__plot\">\n  <svg\n    class=\"m-section-chart__svg\"\n    role=\"img\"\n    tabindex=\"0\"\n    [class.is-measurable]=\"canMeasure()\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"svgHeight()\"\n    [attr.viewBox]=\"viewBox()\"\n    [attr.aria-label]=\"windowLabel()\"\n    [attr.aria-describedby]=\"tableId\"\n    (pointerdown)=\"onPlotDown($event)\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerup)=\"onPlotUp()\"\n    (pointercancel)=\"onPlotUp()\"\n    (pointerleave)=\"clearHover()\"\n    (blur)=\"clearHover()\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    @for (tick of yTicks(); track $index) {\n      <svg:line\n        class=\"m-section-chart__grid\"\n        [class.m-section-chart__grid--zero]=\"tick.zero\"\n        [attr.x1]=\"left()\"\n        [attr.x2]=\"right()\"\n        [attr.y1]=\"tick.y\"\n        [attr.y2]=\"tick.y\"\n      />\n      <svg:text\n        class=\"m-section-chart__tick\"\n        text-anchor=\"end\"\n        [attr.x]=\"left() - 8\"\n        [attr.y]=\"tick.y + 4\"\n      >\n        {{ tick.label }}\n      </svg:text>\n    }\n    @if (!minimal()) {\n      <svg:line\n        class=\"m-section-chart__axis\"\n        [attr.x1]=\"left()\"\n        [attr.x2]=\"right()\"\n        [attr.y1]=\"bottom()\"\n        [attr.y2]=\"bottom()\"\n      />\n    }\n    @for (tick of xTicks(); track $index) {\n      <svg:text\n        class=\"m-section-chart__tick\"\n        text-anchor=\"middle\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"bottom() + 18\"\n      >\n        {{ tick.label }}\n      </svg:text>\n    }\n    @if (measureView(); as band) {\n      <svg:rect\n        class=\"m-section-chart__band\"\n        [attr.x]=\"band.start\"\n        [attr.y]=\"top()\"\n        [attr.width]=\"band.width\"\n        [attr.height]=\"bottom() - top()\"\n      />\n      <svg:line\n        class=\"m-section-chart__band-edge\"\n        [attr.x1]=\"band.start\"\n        [attr.x2]=\"band.start\"\n        [attr.y1]=\"top()\"\n        [attr.y2]=\"bottom()\"\n      />\n      <svg:line\n        class=\"m-section-chart__band-edge\"\n        [attr.x1]=\"band.start + band.width\"\n        [attr.x2]=\"band.start + band.width\"\n        [attr.y1]=\"top()\"\n        [attr.y2]=\"bottom()\"\n      />\n    }\n    @if (hover()?.band; as band) {\n      <svg:rect\n        class=\"m-section-chart__hover-band\"\n        [attr.x]=\"band.x\"\n        [attr.y]=\"top()\"\n        [attr.width]=\"band.width\"\n        [attr.height]=\"band.bottom - top()\"\n      />\n    }\n    @if (categoryView(); as cat) {\n      @for (column of cat.columns; track $index) {\n        <svg:path\n          class=\"m-section-chart__column\"\n          [attr.d]=\"column.d\"\n          [style.fill]=\"column.color\"\n        />\n      }\n      @for (line of cat.lines; track $index) {\n        <svg:path\n          class=\"m-section-chart__line\"\n          [attr.d]=\"line.d\"\n          [style.stroke]=\"line.color\"\n        />\n        <svg:circle\n          class=\"m-section-chart__dot\"\n          r=\"4\"\n          [attr.cx]=\"line.endX\"\n          [attr.cy]=\"line.endY\"\n          [style.fill]=\"line.color\"\n        />\n      }\n      @for (label of cat.labels; track $index) {\n        <svg:text\n          class=\"m-section-chart__value\"\n          text-anchor=\"middle\"\n          [attr.x]=\"label.x\"\n          [attr.y]=\"label.y\"\n        >\n          {{ label.text }}\n        </svg:text>\n      }\n      @if (cat.strip; as strip) {\n        @for (tick of strip.ticks; track $index) {\n          <svg:line\n            class=\"m-section-chart__grid\"\n            [attr.x1]=\"left()\"\n            [attr.x2]=\"right()\"\n            [attr.y1]=\"tick.y\"\n            [attr.y2]=\"tick.y\"\n          />\n          <svg:text\n            class=\"m-section-chart__tick\"\n            text-anchor=\"end\"\n            [attr.x]=\"left() - 8\"\n            [attr.y]=\"tick.y + 4\"\n          >\n            {{ tick.label }}\n          </svg:text>\n        }\n        @for (line of strip.lines; track $index) {\n          <svg:path\n            class=\"m-section-chart__line\"\n            [attr.d]=\"line.d\"\n            [style.stroke]=\"line.color\"\n          />\n          @for (dot of line.dots; track $index) {\n            <svg:circle\n              class=\"m-section-chart__dot\"\n              r=\"4\"\n              [attr.cx]=\"dot.cx\"\n              [attr.cy]=\"dot.cy\"\n              [style.fill]=\"line.color\"\n            />\n            <svg:text\n              class=\"m-section-chart__value\"\n              text-anchor=\"middle\"\n              [attr.x]=\"dot.cx\"\n              [attr.y]=\"dot.cy - 9\"\n            >\n              {{ dot.text }}\n            </svg:text>\n          }\n        }\n      }\n    }\n    @for (path of paths(); track $index) {\n      @if (path.area; as area) {\n        <svg:defs>\n          <svg:linearGradient [attr.id]=\"path.fillId\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <svg:stop offset=\"0\" stop-opacity=\"0.22\" [attr.stop-color]=\"path.color\" />\n            <svg:stop offset=\"1\" stop-opacity=\"0\" [attr.stop-color]=\"path.color\" />\n          </svg:linearGradient>\n        </svg:defs>\n        <svg:path class=\"m-section-chart__area\" [attr.d]=\"area\" [attr.fill]=\"path.fill\" />\n      }\n    }\n    @for (path of paths(); track $index) {\n      <svg:path\n        class=\"m-section-chart__line\"\n        [attr.d]=\"path.d\"\n        [style.stroke]=\"path.color\"\n      />\n    }\n    @if (!minimal()) {\n      @for (path of paths(); track $index) {\n        <svg:circle\n          class=\"m-section-chart__dot\"\n          r=\"4\"\n          [attr.cx]=\"path.endX\"\n          [attr.cy]=\"path.endY\"\n          [style.fill]=\"path.color\"\n        />\n      }\n    }\n    @if (hover(); as h) {\n      @if (!h.band) {\n        <svg:line\n          class=\"m-section-chart__cross\"\n          [attr.x1]=\"h.x\"\n          [attr.x2]=\"h.x\"\n          [attr.y1]=\"top()\"\n          [attr.y2]=\"bottom()\"\n        />\n      }\n      @for (row of h.rows; track $index) {\n        @if (row.cx !== null) {\n          <svg:circle\n            class=\"m-section-chart__dot\"\n            r=\"4\"\n            [attr.cx]=\"row.cx\"\n            [attr.cy]=\"row.cy\"\n            [style.fill]=\"row.color\"\n          />\n        }\n      }\n    }\n  </svg>\n\n  @if (hover(); as h) {\n    <div\n      class=\"m-section-chart__tip\"\n      role=\"status\"\n      [class.m-section-chart__tip--flip]=\"h.flip\"\n      [style.left.px]=\"h.x\"\n    >\n      <span class=\"m-section-chart__tip-title\">{{ h.title }}</span>\n      @for (row of h.rows; track $index) {\n        <span class=\"m-section-chart__tip-row\">\n          <span class=\"m-section-chart__tip-key\" [style.background]=\"row.color\"></span>\n          <span class=\"m-section-chart__tip-value\">{{ row.value }}</span>\n          <span class=\"m-section-chart__tip-label\">{{\n            row.noTranslate ? row.label : (row.label | translate: row.params)\n          }}</span>\n          <span class=\"m-section-chart__tip-sub\">{{ row.sub }}</span>\n        </span>\n      }\n    </div>\n  }\n\n  @if (measureView()?.card; as card) {\n    <div\n      class=\"m-section-chart__measure\"\n      role=\"status\"\n      [class.m-section-chart__measure--flip]=\"card.flip\"\n      [style.left.px]=\"card.x\"\n    >\n      <span class=\"m-section-chart__tip-title\">{{ card.title }}</span>\n      @for (row of card.rows; track $index) {\n        <span class=\"m-section-chart__tip-row\">\n          <span class=\"m-section-chart__tip-key\" [style.background]=\"row.color\"></span>\n          <span class=\"m-section-chart__tip-value\">{{ row.value }}</span>\n          <span class=\"m-section-chart__tip-label\">{{\n            row.noTranslate ? row.label : (row.label | translate: row.params)\n          }}</span>\n          <span class=\"m-section-chart__tip-sub\">{{ row.sub }}</span>\n        </span>\n      }\n    </div>\n  }\n</div>\n\n@if (presets().length > 1 && !minimal() && !categorical()) {\n  <div class=\"m-section-chart__presets\">\n    <m-section-toggle\n      [items]=\"presets()\"\n      [selectedIndex]=\"presetIndex()\"\n      [border]=\"false\"\n      (action)=\"selectPreset($event)\"\n    >\n      <ng-template [mSectionToggleItem]=\"presets()\" let-preset>\n        <span class=\"m-section-chart__preset\">{{ preset.label }}</span>\n      </ng-template>\n    </m-section-toggle>\n  </div>\n}\n\n@if (navigatorView(); as nav) {\n  <svg\n    class=\"m-section-chart__navigator\"\n    role=\"slider\"\n    tabindex=\"0\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-label]=\"'zoom' | translate\"\n    [attr.aria-valuenow]=\"nav.position\"\n    [attr.aria-valuetext]=\"windowLabel()\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"navHeight\"\n    [attr.viewBox]=\"navViewBox()\"\n    (pointerdown)=\"onNavigatorDown($event)\"\n    (pointermove)=\"onNavigatorMove($event)\"\n    (pointerup)=\"onNavigatorUp()\"\n    (pointercancel)=\"onNavigatorUp()\"\n    (keydown)=\"onNavigatorKeydown($event)\"\n  >\n    <svg:path class=\"m-section-chart__nav-area\" [attr.d]=\"nav.area\" />\n    <svg:path class=\"m-section-chart__nav-line\" [attr.d]=\"nav.d\" />\n    <svg:line\n      class=\"m-section-chart__axis\"\n      [attr.x1]=\"left()\"\n      [attr.x2]=\"right()\"\n      [attr.y1]=\"nav.base\"\n      [attr.y2]=\"nav.base\"\n    />\n    @for (tick of nav.ticks; track $index) {\n      <svg:text\n        class=\"m-section-chart__tick\"\n        text-anchor=\"middle\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"nav.base + 15\"\n      >\n        {{ tick.label }}\n      </svg:text>\n    }\n    <svg:rect\n      class=\"m-section-chart__nav-dim\"\n      [attr.x]=\"left()\"\n      [attr.y]=\"navTop\"\n      [attr.width]=\"nav.start - left()\"\n      [attr.height]=\"nav.base - navTop\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-dim\"\n      [attr.x]=\"nav.end\"\n      [attr.y]=\"navTop\"\n      [attr.width]=\"right() - nav.end\"\n      [attr.height]=\"nav.base - navTop\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-window\"\n      [attr.x]=\"nav.start\"\n      [attr.y]=\"navTop\"\n      [attr.width]=\"nav.end - nav.start\"\n      [attr.height]=\"nav.base - navTop\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-handle\"\n      rx=\"2\"\n      width=\"6\"\n      height=\"20\"\n      [attr.x]=\"nav.start - 3\"\n      [attr.y]=\"(nav.base + navTop) / 2 - 10\"\n    />\n    <svg:rect\n      class=\"m-section-chart__nav-handle\"\n      rx=\"2\"\n      width=\"6\"\n      height=\"20\"\n      [attr.x]=\"nav.end - 3\"\n      [attr.y]=\"(nav.base + navTop) / 2 - 10\"\n    />\n  </svg>\n}\n\n<table class=\"m-section-chart__table\" [id]=\"tableId\">\n  <thead>\n    <tr>\n      <th scope=\"col\">{{ 'date' | translate }}</th>\n      @for (column of table().columns; track $index) {\n        <th scope=\"col\">\n          {{ column.noTranslate ? column.label : (column.label | translate: column.params) }}\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (row of table().rows; track $index) {\n      <tr>\n        <td>{{ row.date }}</td>\n        @for (cell of row.cells; track $index) {\n          <td>{{ cell }}</td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n",
+			styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;position:relative;width:100%;min-width:0}.m-section-chart__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.5rem 1rem;margin-bottom:.5rem}.m-section-chart__legend{display:grid;gap:.15rem;min-width:0}.m-section-chart__tip-key{display:inline-block;width:.75rem;height:2px;border-radius:1px}.m-section-chart__window{color:var(--m-text-tertiary);font-size:.8rem}:host(.m-section-chart--minimal) .m-section-chart__svg{cursor:default}:host(.m-section-chart--minimal) .m-section-chart__line{stroke-width:2.25}.m-section-chart__area{stroke:none}.m-section-chart__plot{position:relative}.m-section-chart__svg{display:block;overflow:visible}.m-section-chart__svg:focus{outline:none}.m-section-chart__svg:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px;border-radius:4px}.m-section-chart__svg.is-measurable{cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}.m-section-chart__band{fill:var(--m-text);opacity:.06}.m-section-chart__band-edge{stroke:var(--m-text-secondary);stroke-width:1}.m-section-chart__grid{stroke:var(--m-text-septenary);stroke-width:1}.m-section-chart__grid--zero{stroke:var(--m-text-quinary);stroke-width:1.5}.m-section-chart__axis{stroke:var(--m-text-quinary);stroke-width:1}.m-section-chart__tick{fill:var(--m-text-tertiary);font-size:11px;font-variant-numeric:tabular-nums}.m-section-chart__line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.m-section-chart__dot{stroke:var(--m-background);stroke-width:2}.m-section-chart__cross{stroke:var(--m-text-secondary);stroke-width:1;opacity:.55}.m-section-chart__hover-band{fill:var(--m-text);opacity:.05}.m-section-chart__column{stroke:none}.m-section-chart__value{fill:var(--m-text-secondary);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}.m-section-chart__tip,.m-section-chart__measure{position:absolute;z-index:2;display:grid;gap:.25rem;min-width:10rem;padding:.5rem .625rem;border:1px solid var(--m-backdrop-border);border-radius:.5rem;background:var(--m-background);box-shadow:0 6px 20px var(--m-backdrop-shadow);font-size:.75rem;pointer-events:none}.m-section-chart__tip{top:0;margin-left:.875rem}.m-section-chart__tip--flip{transform:translate(calc(-100% - 1.75rem))}.m-section-chart__measure{bottom:2.25rem}.m-section-chart__measure--flip{transform:translate(-100%)}.m-section-chart__tip-title{color:var(--m-text-secondary);font-weight:600}.m-section-chart__tip-row{display:grid;grid-template-columns:.75rem auto 1fr auto;align-items:center;gap:.5rem}.m-section-chart__tip-value{color:var(--m-text);font-weight:650;font-variant-numeric:tabular-nums}.m-section-chart__tip-label{color:var(--m-text-secondary);white-space:nowrap}.m-section-chart__tip-sub{color:var(--m-text-tertiary);font-variant-numeric:tabular-nums}.m-section-chart__presets{--section-px: 0;margin-top:.5rem}.m-section-chart__preset{font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}.m-section-chart__navigator{display:block;margin-top:.25rem;overflow:visible;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer}.m-section-chart__navigator:focus{outline:none}.m-section-chart__navigator:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px;border-radius:4px}.m-section-chart__nav-area{fill:var(--m-text-tertiary);opacity:.12}.m-section-chart__nav-line{fill:none;stroke:var(--m-text-tertiary);stroke-width:1.25}.m-section-chart__nav-dim{fill:var(--m-background);opacity:.6}.m-section-chart__nav-window{fill:transparent;stroke:var(--m-text-secondary);stroke-width:1;cursor:grab}.m-section-chart__nav-handle{fill:var(--m-text-secondary);cursor:ew-resize}.m-section-chart__table{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -19131,7 +19503,12 @@ var SectionChartSeriesComponent = class SectionChartSeriesComponent {
 	noTranslate = input(false, ...ngDevMode ? [{ debugName: "noTranslate" }] : /* istanbul ignore next */ []);
 	params = input(void 0, ...ngDevMode ? [{ debugName: "params" }] : /* istanbul ignore next */ []);
 	color = input(void 0, ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
-	points = computed(() => readChartPoints(this.data(), this.x(), this.y()), ...ngDevMode ? [{ debugName: "points" }] : /* istanbul ignore next */ []);
+	mark = input("line", ...ngDevMode ? [{ debugName: "mark" }] : /* istanbul ignore next */ []);
+	per = input(void 0, ...ngDevMode ? [{ debugName: "per" }] : /* istanbul ignore next */ []);
+	panel = input("main", ...ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []);
+	points = computed(() => readChartPoints(this.data(), this.x(), this.y(), this.per()), ...ngDevMode ? [{ debugName: "points" }] : /* istanbul ignore next */ []);
+	categories = computed(() => readChartCategories(this.data(), this.x(), this.y(), this.per()), ...ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []);
+	ratio = computed(() => !!this.per(), ...ngDevMode ? [{ debugName: "ratio" }] : /* istanbul ignore next */ []);
 	row;
 	constructor() {
 		const chart = inject(SECTION_CHART_CONTEXT, { optional: true });
@@ -19141,6 +19518,10 @@ var SectionChartSeriesComponent = class SectionChartSeriesComponent {
 		}
 		const member = {
 			points: this.points,
+			categories: this.categories,
+			mark: this.mark,
+			panel: this.panel,
+			ratio: this.ratio,
 			label: this.label,
 			noTranslate: this.noTranslate,
 			params: this.params,
@@ -19213,6 +19594,27 @@ var SectionChartSeriesComponent = class SectionChartSeriesComponent {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			mark: {
+				classPropertyName: "mark",
+				publicName: "mark",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			per: {
+				classPropertyName: "per",
+				publicName: "per",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			panel: {
+				classPropertyName: "panel",
+				publicName: "panel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		host: {
@@ -19341,6 +19743,30 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "color",
 				required: false
 			}]
+		}],
+		mark: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mark",
+				required: false
+			}]
+		}],
+		per: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "per",
+				required: false
+			}]
+		}],
+		panel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "panel",
+				required: false
+			}]
 		}]
 	}
 });