ngwr 15.0.1 → 15.2.0

package/fesm2022/ngwr-charts-waterfall-chart-testing.mjs

@@ -0,0 +1,131 @@
+import { ComponentHarness, HarnessPredicate } from "@angular/cdk/testing";
+/**
+* @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 KINDS = [
+	"increase",
+	"decrease",
+	"flat",
+	"total"
+];
+function styleNumber(style, name) {
+	const match = new RegExp(`(?:^|;)\\s*${name}\\s*:\\s*([^;]+)`).exec(style ?? "");
+	const value = match ? Number.parseFloat(match[1]) : NaN;
+	return Number.isFinite(value) ? value : null;
+}
+async function numberAttribute(element, name, method) {
+	const raw = await element.getAttribute(name);
+	const value = raw === null ? NaN : Number.parseFloat(raw);
+	if (!Number.isFinite(value)) throw new Error(`WrWaterfallChartHarness.${method}(): a step carries ${name}="${raw ?? ""}", which the component writes as a finite number on every step it draws.`);
+	return value;
+}
+var StepHarness = class StepHarness extends ComponentHarness {
+	static hostSelector = ".wr-waterfall-chart__step";
+	async read(label) {
+		const host = await this.host();
+		const value = await this.locatorForOptional(".wr-waterfall-chart__value")();
+		const connector = await this.locatorForOptional(".wr-waterfall-chart__connector")();
+		const style = await host.getAttribute("style");
+		const bottom = styleNumber(style, "--wr-waterfall-chart-lo");
+		const top = styleNumber(style, "--wr-waterfall-chart-hi");
+		if (bottom === null || top === null) throw new Error(`WrWaterfallChartHarness.getSteps(): the step "${label}" carries no inline bar ends (style: "${style ?? ""}"). The component writes both on every step, a change of zero included, so their absence is the bug — reporting 0 would read as a bar on the frame.`);
+		return {
+			label,
+			kind: await StepHarness.kindOf(host, label),
+			name: await host.getAttribute("aria-label"),
+			value: value ? await value.text() : null,
+			start: await numberAttribute(host, "data-start", "getSteps"),
+			end: await numberAttribute(host, "data-end", "getSteps"),
+			bottomPercent: bottom,
+			topPercent: top,
+			connected: connector !== null
+		};
+	}
+	static async kindOf(host, label) {
+		for (const kind of KINDS) if (await host.hasClass(`wr-waterfall-chart__step--${kind}`)) return kind;
+		throw new Error(`WrWaterfallChartHarness.getSteps(): the step "${label}" carries no kind modifier. The component gives every step one of \`--increase\`, \`--decrease\`, \`--flat\` and \`--total\`, and the stylesheet paints the figure by it.`);
+	}
+};
+var TableRowHarness = class extends ComponentHarness {
+	static hostSelector = ".wr-chart-table tbody tr";
+	async read() {
+		const header = await this.locatorFor("th[scope=\"row\"]")();
+		const cells = await this.locatorForAll("td")();
+		return {
+			header: await header.text(),
+			cells: await Promise.all(cells.map((cell) => cell.text()))
+		};
+	}
+};
+var WrWaterfallChartHarness = class WrWaterfallChartHarness extends ComponentHarness {
+	static hostSelector = "wr-waterfall-chart";
+	static with(options = {}) {
+		return new HarnessPredicate(WrWaterfallChartHarness, options).addOption("ariaLabel", options.ariaLabel, (harness, label) => HarnessPredicate.stringMatches(harness.getAccessibleName(), label)).addOption("stepLabel", options.stepLabel, async (harness, label) => {
+			for (const step of await harness.getLabels()) if (await HarnessPredicate.stringMatches(step, label)) return true;
+			return false;
+		});
+	}
+	async getAccessibleName() {
+		return (await this.locatorFor(".wr-waterfall-chart__plot")()).getAttribute("aria-label");
+	}
+	async getStepCount() {
+		return (await this.locatorForAll(".wr-waterfall-chart__step")()).length;
+	}
+	async getLabels() {
+		const labels = await this.locatorForAll(".wr-waterfall-chart__label")();
+		return Promise.all(labels.map((label) => label.text()));
+	}
+	async getSteps() {
+		const steps = await this.locatorForAll(StepHarness)();
+		const labels = await this.getLabels();
+		if (labels.length !== steps.length) throw new Error(`WrWaterfallChartHarness.getSteps(): the chart draws ${steps.length} step(s) and ${labels.length} label(s). It renders one label per step, so the two lists line up or the template is broken.`);
+		return Promise.all(steps.map((step, i) => step.read(labels[i])));
+	}
+	async hasValues() {
+		return await this.locatorForOptional(".wr-waterfall-chart__value")() !== null;
+	}
+	async getConnectorCount() {
+		return (await this.locatorForAll(".wr-waterfall-chart__connector")()).length;
+	}
+	async hasGrid() {
+		return await this.locatorForOptional(".wr-waterfall-chart__grid-line")() !== null;
+	}
+	async getYTicks() {
+		const ticks = await this.locatorForAll(".wr-waterfall-chart__tick")();
+		return Promise.all(ticks.map((tick) => tick.text()));
+	}
+	async getZeroPercent() {
+		const style = await (await this.locatorFor(".wr-waterfall-chart__track")()).getAttribute("style");
+		const zero = styleNumber(style, "--wr-waterfall-chart-zero");
+		if (zero === null) throw new Error(`WrWaterfallChartHarness.getZeroPercent(): no inline zero on .wr-waterfall-chart__track (style: "${style ?? ""}"). The component writes one unconditionally, so its absence is the bug rather than a zero line on the frame.`);
+		return zero;
+	}
+	async hasDataTable() {
+		return await this.locatorForOptional(".wr-chart-table")() !== null;
+	}
+	async getTableColumns() {
+		await this.assertDataTable("getTableColumns");
+		const cells = await this.locatorForAll(".wr-chart-table thead tr > *")();
+		return Promise.all(cells.slice(1).map((cell) => cell.text()));
+	}
+	async getTableRows() {
+		await this.assertDataTable("getTableRows");
+		const rows = await this.locatorForAll(TableRowHarness)();
+		return Promise.all(rows.map((row) => row.read()));
+	}
+	async getPlotHeight() {
+		const style = await (await this.locatorFor(".wr-waterfall-chart__plot")()).getAttribute("style");
+		const match = /height:\s*([\d.]+)px/.exec(style ?? "");
+		if (!match) throw new Error(`WrWaterfallChartHarness.getPlotHeight(): no inline height on .wr-waterfall-chart__plot (style: "${style ?? ""}"). The component writes one unconditionally, so its absence is the bug rather than a zero.`);
+		return Number.parseFloat(match[1]);
+	}
+	async assertDataTable(method) {
+		if (!await this.hasDataTable()) throw new Error(`WrWaterfallChartHarness.${method}(): the chart renders no data table — \`dataTable\` is off. Ask hasDataTable() first.`);
+	}
+};
+export { WrWaterfallChartHarness };
+
+//# sourceMappingURL=ngwr-charts-waterfall-chart-testing.mjs.map

package/fesm2022/ngwr-charts-waterfall-chart-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-charts-waterfall-chart-testing.mjs","names":[],"sources":["../../../projects/lib/charts/waterfall-chart/testing/wr-waterfall-chart-harness.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ComponentHarness, HarnessPredicate, type TestElement } from '@angular/cdk/testing';\n\nimport type { WrWaterfallChartHarnessFilters, WrWaterfallChartHarnessStep, WrWaterfallChartTableRow } from './types';\n\nconst KINDS = ['increase', 'decrease', 'flat', 'total'] as const;\n\n/** One custom property the component wrote into an inline `style`, as a finite number, or `null` when it is absent. */\nfunction styleNumber(style: string | null, name: string): number | null {\n  const match = new RegExp(`(?:^|;)\\\\s*${name}\\\\s*:\\\\s*([^;]+)`).exec(style ?? '');\n  const value = match ? Number.parseFloat(match[1]) : Number.NaN;\n  return Number.isFinite(value) ? value : null;\n}\n\n/** A finite number off one attribute, or a sentence saying which one the element lacks. */\nasync function numberAttribute(element: TestElement, name: string, method: string): Promise<number> {\n  const raw = await element.getAttribute(name);\n  const value = raw === null ? Number.NaN : Number.parseFloat(raw);\n  if (!Number.isFinite(value)) {\n    throw new Error(\n      `WrWaterfallChartHarness.${method}(): a step carries ${name}=\"${raw ?? ''}\", which the component writes as a ` +\n        'finite number on every step it draws.'\n    );\n  }\n  return value;\n}\n\n/**\n * One step's column, so its kind, its figure, its bar and its connector are read off the\n * column they sit in rather than matched up by position across the chart: a step prints a\n * figure only with `showValues`, and the last one has no connector.\n */\nclass StepHarness extends ComponentHarness {\n  static hostSelector = '.wr-waterfall-chart__step';\n\n  async read(label: string): Promise<WrWaterfallChartHarnessStep> {\n    const host = await this.host();\n    const value = await this.locatorForOptional('.wr-waterfall-chart__value')();\n    const connector = await this.locatorForOptional('.wr-waterfall-chart__connector')();\n    const style = await host.getAttribute('style');\n    const bottom = styleNumber(style, '--wr-waterfall-chart-lo');\n    const top = styleNumber(style, '--wr-waterfall-chart-hi');\n    if (bottom === null || top === null) {\n      throw new Error(\n        `WrWaterfallChartHarness.getSteps(): the step \"${label}\" carries no inline bar ends (style: \"${style ?? ''}\"). ` +\n          'The component writes both on every step, a change of zero included, so their absence is the bug — ' +\n          'reporting 0 would read as a bar on the frame.'\n      );\n    }\n    return {\n      label,\n      kind: await StepHarness.kindOf(host, label),\n      name: await host.getAttribute('aria-label'),\n      value: value ? await value.text() : null,\n      start: await numberAttribute(host, 'data-start', 'getSteps'),\n      end: await numberAttribute(host, 'data-end', 'getSteps'),\n      bottomPercent: bottom,\n      topPercent: top,\n      connected: connector !== null,\n    };\n  }\n\n  private static async kindOf(host: TestElement, label: string): Promise<WrWaterfallChartHarnessStep['kind']> {\n    for (const kind of KINDS) {\n      if (await host.hasClass(`wr-waterfall-chart__step--${kind}`)) return kind;\n    }\n    throw new Error(\n      `WrWaterfallChartHarness.getSteps(): the step \"${label}\" carries no kind modifier. The component gives every ` +\n        'step one of `--increase`, `--decrease`, `--flat` and `--total`, and the stylesheet paints the figure by it.'\n    );\n  }\n}\n\n/** One body row of the chart's data table. */\nclass TableRowHarness extends ComponentHarness {\n  static hostSelector = '.wr-chart-table tbody tr';\n\n  async read(): Promise<WrWaterfallChartTableRow> {\n    const header = await this.locatorFor('th[scope=\"row\"]')();\n    const cells = await this.locatorForAll('td')();\n    return { header: await header.text(), cells: await Promise.all(cells.map(cell => cell.text())) };\n  }\n}\n\n/**\n * Test harness for `<wr-waterfall-chart>`.\n *\n * **The bars are read as PERCENTAGES of the drawing, not as pixels.** Each step's two\n * ends are written inline as shares of the drawing's height from its bottom, which is the\n * one number that survives a test with no layout, and they are read off the `style`\n * ATTRIBUTE rather than through `getCssValue()`: in a browser that answers laid-out pixels\n * and in jsdom the declaration, with nothing to say which. The running totals before and\n * after each step are read off the `data-*` the component writes beside them, so a spec\n * can hold the arithmetic and the drawing apart — a total at the right figure and the\n * wrong height is exactly the defect worth catching. The hairline a change of zero keeps\n * is the stylesheet's floor, so no method reports it.\n *\n * **Two questions are not one.** A step's printed figure and its accessible name are read\n * separately ({@link WrWaterfallChartHarnessStep.value} and\n * {@link WrWaterfallChartHarnessStep.name}): the column is an `img`, so the name is what a\n * screen reader gets, and asserting only what is drawn would pass on a step that announces\n * nothing.\n *\n * **Whether a printed figure fits is not read.** The stylesheet hides a figure wider than\n * its column by wrapping it out of sight, which takes a layout jsdom does not have;\n * {@link WrWaterfallChartHarnessStep.value} gives the text the component printed, fitting\n * or not.\n *\n * **What tells the kinds apart is read as such.** {@link WrWaterfallChartHarnessStep.kind} comes\n * off the modifier class, not off the colour, and the sign is in the printed figure — so a\n * spec can assert the channels that are not colour, which are the ones a reader without\n * hue relies on. A change of zero is `'flat'`, neither way, so a missing figure the chart\n * counted as nothing never reads as an increase.\n *\n * **No hover method.** The tooltip repeats the step's name, and the chip renders into the\n * overlay container with nothing tying it to this chart, so a query for it would answer\n * with whichever chart's chip is open. The same figures are in the names and in the data\n * table, which {@link getTableRows} reads.\n *\n * @example\n * ```ts\n * const chart = await loader.getHarness(WrWaterfallChartHarness);\n *\n * expect(await chart.getLabels()).toEqual(['Opening', 'Sales', 'Refunds', 'Closing']);\n * const steps = await chart.getSteps();\n * expect(steps[2]).toMatchObject({ kind: 'decrease', value: '−350', end: 5650 });\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrWaterfallChartHarness extends ComponentHarness {\n  static hostSelector = 'wr-waterfall-chart';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrWaterfallChartHarnessFilters = {}): HarnessPredicate<WrWaterfallChartHarness> {\n    return new HarnessPredicate(WrWaterfallChartHarness, options)\n      .addOption('ariaLabel', options.ariaLabel, (harness, label) =>\n        HarnessPredicate.stringMatches(harness.getAccessibleName(), label)\n      )\n      .addOption('stepLabel', options.stepLabel, async (harness, label) => {\n        for (const step of await harness.getLabels()) {\n          if (await HarnessPredicate.stringMatches(step, label)) return true;\n        }\n        return false;\n      });\n  }\n\n  /** The chart's accessible name, on the `group` that holds the steps. */\n  async getAccessibleName(): Promise<string | null> {\n    return (await this.locatorFor('.wr-waterfall-chart__plot')()).getAttribute('aria-label');\n  }\n\n  /** How many steps the chart drew — one per step given. */\n  async getStepCount(): Promise<number> {\n    return (await this.locatorForAll('.wr-waterfall-chart__step')()).length;\n  }\n\n  /** The labels under the bars, in order — the full text, ellipsised on screen or not. */\n  async getLabels(): Promise<string[]> {\n    const labels = await this.locatorForAll('.wr-waterfall-chart__label')();\n    return Promise.all(labels.map(label => label.text()));\n  }\n\n  /**\n   * Every step, in order: its label, its kind, what it prints and announces, the running\n   * totals before and after it, and where its bar runs.\n   *\n   * Throws on a step missing anything the component writes on every one, rather than\n   * answering with a `NaN` a spec could compare against.\n   */\n  async getSteps(): Promise<WrWaterfallChartHarnessStep[]> {\n    const steps = await this.locatorForAll(StepHarness)();\n    const labels = await this.getLabels();\n    if (labels.length !== steps.length) {\n      throw new Error(\n        `WrWaterfallChartHarness.getSteps(): the chart draws ${steps.length} step(s) and ${labels.length} label(s). ` +\n          'It renders one label per step, so the two lists line up or the template is broken.'\n      );\n    }\n    return Promise.all(steps.map((step, i) => step.read(labels[i])));\n  }\n\n  /** Whether any figure is printed past a bar (`showValues`, and at least one step). */\n  async hasValues(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-waterfall-chart__value')()) !== null;\n  }\n\n  /** How many connectors are drawn: one per step that the next one starts from, with `showConnectors`. */\n  async getConnectorCount(): Promise<number> {\n    return (await this.locatorForAll('.wr-waterfall-chart__connector')()).length;\n  }\n\n  /** Whether the gridlines are drawn (`showGrid`). */\n  async hasGrid(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-waterfall-chart__grid-line')()) !== null;\n  }\n\n  /** The value axis' tick labels, top to bottom; `[]` with `showGrid` off. */\n  async getYTicks(): Promise<string[]> {\n    const ticks = await this.locatorForAll('.wr-waterfall-chart__tick')();\n    return Promise.all(ticks.map(tick => tick.text()));\n  }\n\n  /**\n   * Where zero is — the line every total stands on — as the percentage of the drawing's\n   * height from its bottom that the component wrote: `0` when nothing goes below zero.\n   */\n  async getZeroPercent(): Promise<number> {\n    const style = await (await this.locatorFor('.wr-waterfall-chart__track')()).getAttribute('style');\n    const zero = styleNumber(style, '--wr-waterfall-chart-zero');\n    if (zero === null) {\n      throw new Error(\n        `WrWaterfallChartHarness.getZeroPercent(): no inline zero on .wr-waterfall-chart__track (style: \"${style ?? ''}\"). ` +\n          'The component writes one unconditionally, so its absence is the bug rather than a zero line on the frame.'\n      );\n    }\n    return zero;\n  }\n\n  /** Whether the hidden data table is rendered (`dataTable`). */\n  async hasDataTable(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-chart-table')()) !== null;\n  }\n\n  /**\n   * The data table's column headings: the change and the running total, in that order.\n   *\n   * Throws when the chart renders no table (`dataTable` off) rather than answering with\n   * no columns.\n   */\n  async getTableColumns(): Promise<string[]> {\n    await this.assertDataTable('getTableColumns');\n    // The first cell is the corner over the row headers — what one row is — not a column\n    // of figures.\n    const cells = await this.locatorForAll('.wr-chart-table thead tr > *')();\n    return Promise.all(cells.slice(1).map(cell => cell.text()));\n  }\n\n  /**\n   * The data table's rows, one per step: its label, its change (`''` on a total) and the\n   * running total after it, as a screen reader walks them.\n   *\n   * Throws when the chart renders no table (`dataTable` off), for the reason\n   * {@link getTableColumns} gives.\n   */\n  async getTableRows(): Promise<WrWaterfallChartTableRow[]> {\n    await this.assertDataTable('getTableRows');\n    const rows = await this.locatorForAll(TableRowHarness)();\n    return Promise.all(rows.map(row => row.read()));\n  }\n\n  /**\n   * The plot's height in pixels, read off the `style` ATTRIBUTE the component wrote, not\n   * through `getCssValue()`, which answers from the laid-out box and so differs between\n   * jsdom and a browser.\n   */\n  async getPlotHeight(): Promise<number> {\n    const style = await (await this.locatorFor('.wr-waterfall-chart__plot')()).getAttribute('style');\n    const match = /height:\\s*([\\d.]+)px/.exec(style ?? '');\n    if (!match) {\n      throw new Error(\n        `WrWaterfallChartHarness.getPlotHeight(): no inline height on .wr-waterfall-chart__plot (style: \"${style ?? ''}\"). ` +\n          'The component writes one unconditionally, so its absence is the bug rather than a zero.'\n      );\n    }\n    return Number.parseFloat(match[1]);\n  }\n\n  private async assertDataTable(method: string): Promise<void> {\n    if (!(await this.hasDataTable())) {\n      throw new Error(\n        `WrWaterfallChartHarness.${method}(): the chart renders no data table — \\`dataTable\\` is off. Ask hasDataTable() first.`\n      );\n    }\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,462 @@
+import * as i0 from "@angular/core";
+import { Component, ViewEncapsulation, computed, effect, input, isDevMode, viewChildren } from "@angular/core";
+import { coerceBooleanProperty, coerceNumberProperty } from "@angular/cdk/coercion";
+import { readI18nText, useI18nFormatter, useI18nText } from "ngwr/i18n";
+import { WrChartTable, chartAxis, useChartNumbers } from "ngwr/charts/core";
+import { useChartTooltip } from "ngwr/popover";
+/**
+* @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 MINUS = "−";
+const isolate = (text) => `⁨${text}⁩`;
+const percent = (value) => Math.round(value * 1e3) / 1e3 || 0;
+const clean = (value) => Number(value.toPrecision(15)) || 0;
+var WrWaterfallChart = class WrWaterfallChart {
+	steps = input([], ...ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	resolvedAriaLabel = useI18nText(this.ariaLabel, "waterfallChart.label", "Waterfall chart");
+	increaseColor = input("var(--wr-color-success)", ...ngDevMode ? [{ debugName: "increaseColor" }] : /* istanbul ignore next */ []);
+	decreaseColor = input("var(--wr-color-danger)", ...ngDevMode ? [{ debugName: "decreaseColor" }] : /* istanbul ignore next */ []);
+	totalColor = input("var(--wr-color-primary)", ...ngDevMode ? [{ debugName: "totalColor" }] : /* istanbul ignore next */ []);
+	height = input(240, {
+		...ngDevMode ? { debugName: "height" } : /* istanbul ignore next */ {},
+		transform: (v) => Math.max(80, coerceNumberProperty(v, 240))
+	});
+	showGrid = input(true, {
+		...ngDevMode ? { debugName: "showGrid" } : /* istanbul ignore next */ {},
+		transform: coerceBooleanProperty
+	});
+	showValues = input(true, {
+		...ngDevMode ? { debugName: "showValues" } : /* istanbul ignore next */ {},
+		transform: coerceBooleanProperty
+	});
+	showConnectors = input(true, {
+		...ngDevMode ? { debugName: "showConnectors" } : /* istanbul ignore next */ {},
+		transform: coerceBooleanProperty
+	});
+	tooltip = input(true, {
+		...ngDevMode ? { debugName: "tooltip" } : /* istanbul ignore next */ {},
+		transform: coerceBooleanProperty
+	});
+	dataTable = input(false, {
+		...ngDevMode ? { debugName: "dataTable" } : /* istanbul ignore next */ {},
+		transform: coerceBooleanProperty
+	});
+	valueFormat = input(null, ...ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []);
+	numbers = useChartNumbers(this.valueFormat);
+	stepName = readI18nText("waterfallChart.step", "Step");
+	changeName = readI18nText("waterfallChart.change", "Change");
+	runningTotalName = readI18nText("waterfallChart.runningTotal", "Running total");
+	changeStepName = useI18nFormatter("waterfallChart.changeStep", "{{label}}: {{change}}, running total {{total}}");
+	totalStepName = useI18nFormatter("waterfallChart.totalStep", "{{label}}: total {{total}}");
+	barEls = viewChildren("barEl", ...ngDevMode ? [{ debugName: "barEls" }] : /* istanbul ignore next */ []);
+	constructor() {
+		if (isDevMode()) {
+			const warned = /* @__PURE__ */ new Set();
+			effect(() => {
+				this.resolved().forEach((step, index) => {
+					if (step.mismatch === null) return;
+					const key = `${index}:${step.mismatch}:${step.end}`;
+					if (warned.has(key)) return;
+					warned.add(key);
+					console.warn(`[NGWR] <wr-waterfall-chart>: the total "${step.label}" (step ${index + 1}) is given as ${step.mismatch}, and the steps above it add up to ${step.end}. The bar shows ${step.end}.`);
+				});
+			});
+		}
+	}
+	resolved = computed(() => {
+		let running = 0;
+		let moved = false;
+		return this.steps().map((step) => {
+			const value = Number.isFinite(step.value) ? step.value : null;
+			const start = running;
+			if (step.total) {
+				let mismatch = null;
+				if (!moved) {
+					if (value !== null) running = clean(value);
+				} else if (value !== null && clean(value) !== running) mismatch = value;
+				return {
+					label: step.label,
+					kind: "total",
+					change: null,
+					start,
+					end: running,
+					mismatch
+				};
+			}
+			const change = value ?? 0;
+			running = clean(running + change);
+			moved = true;
+			return {
+				label: step.label,
+				kind: change < 0 ? "decrease" : change > 0 ? "increase" : "flat",
+				change,
+				start,
+				end: running,
+				mismatch: null
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []);
+	axis = computed(() => {
+		const steps = this.resolved();
+		if (steps.length === 0) return chartAxis(NaN, NaN);
+		let min = 0;
+		let max = 0;
+		for (const { start, end, kind } of steps) {
+			const from = kind === "total" ? 0 : start;
+			min = Math.min(min, from, end);
+			max = Math.max(max, from, end);
+		}
+		return chartAxis(min, max, { includeZero: true });
+	}, ...ngDevMode ? [{ debugName: "axis" }] : /* istanbul ignore next */ []);
+	zero = computed(() => this.level(0), ...ngDevMode ? [{ debugName: "zero" }] : /* istanbul ignore next */ []);
+	ticks = computed(() => {
+		const { step, ticks } = this.axis();
+		const labels = this.numbers.ticks(ticks.map((value) => Math.abs(value)), step, "tick");
+		return ticks.map((value, i) => {
+			const bottom = this.level(value);
+			return {
+				label: value < 0 ? `${MINUS}${labels[i]}` : labels[i],
+				bottom,
+				top: percent(100 - bottom)
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []);
+	drawn = computed(() => {
+		const steps = this.resolved();
+		const colors = {
+			increase: this.increaseColor(),
+			decrease: this.decreaseColor(),
+			flat: null,
+			total: this.totalColor()
+		};
+		return steps.map((step, i) => {
+			const from = step.kind === "total" ? 0 : step.start;
+			const totalText = this.written(step.end, (v) => this.numbers.value(v, "value"));
+			const changeText = step.change === null ? "" : this.signed(step.change, (v) => this.numbers.value(v, "value"));
+			const next = steps[i + 1];
+			const connected = next !== void 0 && (next.kind !== "total" || next.end === step.end);
+			return {
+				label: step.label,
+				kind: step.kind,
+				start: step.start,
+				end: step.end,
+				lo: this.level(Math.min(from, step.end)),
+				hi: this.level(Math.max(from, step.end)),
+				color: colors[step.kind],
+				display: step.change === null ? this.written(step.end, (v) => this.numbers.label(v, "label")) : this.signed(step.change, (v) => this.numbers.label(v, "label")),
+				below: step.kind === "decrease" || step.kind === "total" && step.end < 0,
+				changeText,
+				totalText,
+				name: step.change === null ? this.totalStepName({
+					label: step.label,
+					total: totalText
+				}) : this.changeStepName({
+					label: step.label,
+					change: changeText,
+					total: totalText
+				}),
+				connector: connected ? this.level(step.end) : null
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "drawn" }] : /* istanbul ignore next */ []);
+	tableData = computed(() => ({
+		caption: this.resolvedAriaLabel(),
+		corner: this.stepName(),
+		columns: [this.changeName(), this.runningTotalName()],
+		groups: [{ rows: this.drawn().map((step) => ({
+			header: step.label,
+			cells: [step.changeText, step.totalText]
+		})) }]
+	}), ...ngDevMode ? [{ debugName: "tableData" }] : /* istanbul ignore next */ []);
+	tip = useChartTooltip(this.tooltip, (index) => {
+		const step = this.drawn()[index];
+		const anchor = this.barEls()[index]?.nativeElement;
+		if (!step || !anchor) return null;
+		const rows = [];
+		if (step.kind !== "total") rows.push({
+			label: this.changeName(),
+			value: isolate(step.changeText)
+		});
+		rows.push({
+			label: this.runningTotalName(),
+			value: isolate(step.totalText)
+		});
+		const label = step.label;
+		return {
+			datum: step.color === null ? {
+				label,
+				value: "",
+				rows
+			} : {
+				label,
+				value: "",
+				color: step.color,
+				rows
+			},
+			anchor
+		};
+	});
+	level(value) {
+		const { min, max } = this.axis();
+		return percent((value - min) / (max - min) * 100);
+	}
+	signed(change, write) {
+		return change > 0 ? `+${write(change)}` : this.written(change, write);
+	}
+	written(value, write) {
+		return value < 0 ? `${MINUS}${write(-value)}` : write(Math.abs(value));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: WrWaterfallChart,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: WrWaterfallChart,
+		isStandalone: true,
+		selector: "wr-waterfall-chart",
+		inputs: {
+			steps: {
+				classPropertyName: "steps",
+				publicName: "steps",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			increaseColor: {
+				classPropertyName: "increaseColor",
+				publicName: "increaseColor",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			decreaseColor: {
+				classPropertyName: "decreaseColor",
+				publicName: "decreaseColor",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			totalColor: {
+				classPropertyName: "totalColor",
+				publicName: "totalColor",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showGrid: {
+				classPropertyName: "showGrid",
+				publicName: "showGrid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showValues: {
+				classPropertyName: "showValues",
+				publicName: "showValues",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showConnectors: {
+				classPropertyName: "showConnectors",
+				publicName: "showConnectors",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tooltip: {
+				classPropertyName: "tooltip",
+				publicName: "tooltip",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dataTable: {
+				classPropertyName: "dataTable",
+				publicName: "dataTable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			valueFormat: {
+				classPropertyName: "valueFormat",
+				publicName: "valueFormat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"class.wr-waterfall-chart--values": "showValues()",
+				"style.--wr-waterfall-chart-steps": "steps().length || 1"
+			},
+			classAttribute: "wr-waterfall-chart"
+		},
+		viewQueries: [{
+			propertyName: "barEls",
+			predicate: ["barEl"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "@let active = tip.active();\n@let values = showValues();\n@let connectors = showConnectors();\n<!-- Two columns: the value axis' tick labels at inline start and the plot beside them,\n     with the step labels under the plot only, so their slots are the plot's columns. -->\n<div class=\"wr-waterfall-chart__body\">\n  @if (showGrid()) {\n    <!-- HTML beside the plot rather than inside it, in flow, so the column is exactly as\n         wide as the longest label; each one hands the stylesheet the y of its own\n         gridline. Hidden: every figure is in a step's own name, and the axis is the eye's. -->\n    <div class=\"wr-waterfall-chart__y-axis\" aria-hidden=\"true\">\n      @for (tick of ticks(); track $index) {\n        <span class=\"wr-waterfall-chart__tick\" [style.--wr-waterfall-chart-y]=\"tick.top\">{{ tick.label }}</span>\n      }\n    </div>\n  }\n\n  <!-- A named `group` of one named `img` per step, as the bar chart's columns are. Not one\n       `img` round the whole chart: `img` makes everything inside it presentational, and\n       WebKit drops such a subtree, so every step's own name would go with it. -->\n  <div\n    class=\"wr-waterfall-chart__plot\"\n    role=\"group\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [style.height.px]=\"height()\"\n  >\n    <!-- The drawing: every position in it is a percentage of its height from the bottom,\n         handed to the stylesheet as a number. -->\n    <div class=\"wr-waterfall-chart__track\" [style.--wr-waterfall-chart-zero]=\"zero()\">\n      @if (showGrid()) {\n        @for (tick of ticks(); track $index) {\n          <span\n            class=\"wr-waterfall-chart__grid-line\"\n            aria-hidden=\"true\"\n            [style.--wr-waterfall-chart-level]=\"tick.bottom\"\n          ></span>\n        }\n      }\n\n      @for (step of drawn(); track $index) {\n        <!-- Its change and the running total after it in its name: the figure inside is\n             drawn for the eye, and the `img` role makes it presentational. The bar's two\n             ends are handed to the stylesheet; the running totals before and after it ride\n             along as data, beside the name that says them in words. -->\n        <div\n          class=\"wr-waterfall-chart__step\"\n          [class.wr-waterfall-chart__step--increase]=\"step.kind === 'increase'\"\n          [class.wr-waterfall-chart__step--decrease]=\"step.kind === 'decrease'\"\n          [class.wr-waterfall-chart__step--flat]=\"step.kind === 'flat'\"\n          [class.wr-waterfall-chart__step--total]=\"step.kind === 'total'\"\n          [class.wr-waterfall-chart__step--active]=\"active === $index\"\n          role=\"img\"\n          [attr.aria-label]=\"step.name\"\n          [attr.data-start]=\"step.start\"\n          [attr.data-end]=\"step.end\"\n          [style.--wr-waterfall-chart-lo]=\"step.lo\"\n          [style.--wr-waterfall-chart-hi]=\"step.hi\"\n          (mouseenter)=\"tip.enter($index)\"\n          (mouseleave)=\"tip.leave($event)\"\n        >\n          <!-- A change of zero writes no paint: its neutral hairline is the stylesheet's hook. -->\n          <span #barEl class=\"wr-waterfall-chart__bar\" [style.background]=\"step.color\"></span>\n          @if (values) {\n            <!-- A line one figure tall that the figure joins only where it fits whole; one\n                 that does not wraps out of sight below it (see the stylesheet). -->\n            <span class=\"wr-waterfall-chart__value\" [class.wr-waterfall-chart__value--below]=\"step.below\"\n              ><span class=\"wr-waterfall-chart__value-text\">{{ step.display }}</span></span\n            >\n          }\n          @if (connectors && step.connector !== null) {\n            <!-- Across the gap to the next bar, at the running total that bar starts from. -->\n            <span class=\"wr-waterfall-chart__connector\" [style.--wr-waterfall-chart-level]=\"step.connector\"></span>\n          }\n        </div>\n      }\n\n      <!-- After the bars, so it is drawn over them where zero runs through the plot. -->\n      <span class=\"wr-waterfall-chart__baseline\" aria-hidden=\"true\"></span>\n    </div>\n  </div>\n\n  <!-- Named on each step above, so the visible label row is decoration here. -->\n  <div class=\"wr-waterfall-chart__labels\" aria-hidden=\"true\">\n    @for (step of drawn(); track $index) {\n      <span class=\"wr-waterfall-chart__label\" [class.wr-waterfall-chart__label--total]=\"step.kind === 'total'\">{{\n        step.label\n      }}</span>\n    }\n  </div>\n</div>\n\n@if (dataTable()) {\n  <!-- The figures for a screen reader who wants to move cell by cell, beside the steps\n       rather than inside an `img`. Clipped to nothing by its own stylesheet, so it takes no\n       room and draws nothing. -->\n  <wr-chart-table [data]=\"tableData()\" />\n}\n",
+		dependencies: [{
+			kind: "component",
+			type: WrChartTable,
+			selector: "wr-chart-table",
+			inputs: ["data"]
+		}],
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: WrWaterfallChart,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "wr-waterfall-chart",
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				class: "wr-waterfall-chart",
+				"[class.wr-waterfall-chart--values]": "showValues()",
+				"[style.--wr-waterfall-chart-steps]": "steps().length || 1"
+			},
+			imports: [WrChartTable],
+			template: "@let active = tip.active();\n@let values = showValues();\n@let connectors = showConnectors();\n<!-- Two columns: the value axis' tick labels at inline start and the plot beside them,\n     with the step labels under the plot only, so their slots are the plot's columns. -->\n<div class=\"wr-waterfall-chart__body\">\n  @if (showGrid()) {\n    <!-- HTML beside the plot rather than inside it, in flow, so the column is exactly as\n         wide as the longest label; each one hands the stylesheet the y of its own\n         gridline. Hidden: every figure is in a step's own name, and the axis is the eye's. -->\n    <div class=\"wr-waterfall-chart__y-axis\" aria-hidden=\"true\">\n      @for (tick of ticks(); track $index) {\n        <span class=\"wr-waterfall-chart__tick\" [style.--wr-waterfall-chart-y]=\"tick.top\">{{ tick.label }}</span>\n      }\n    </div>\n  }\n\n  <!-- A named `group` of one named `img` per step, as the bar chart's columns are. Not one\n       `img` round the whole chart: `img` makes everything inside it presentational, and\n       WebKit drops such a subtree, so every step's own name would go with it. -->\n  <div\n    class=\"wr-waterfall-chart__plot\"\n    role=\"group\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [style.height.px]=\"height()\"\n  >\n    <!-- The drawing: every position in it is a percentage of its height from the bottom,\n         handed to the stylesheet as a number. -->\n    <div class=\"wr-waterfall-chart__track\" [style.--wr-waterfall-chart-zero]=\"zero()\">\n      @if (showGrid()) {\n        @for (tick of ticks(); track $index) {\n          <span\n            class=\"wr-waterfall-chart__grid-line\"\n            aria-hidden=\"true\"\n            [style.--wr-waterfall-chart-level]=\"tick.bottom\"\n          ></span>\n        }\n      }\n\n      @for (step of drawn(); track $index) {\n        <!-- Its change and the running total after it in its name: the figure inside is\n             drawn for the eye, and the `img` role makes it presentational. The bar's two\n             ends are handed to the stylesheet; the running totals before and after it ride\n             along as data, beside the name that says them in words. -->\n        <div\n          class=\"wr-waterfall-chart__step\"\n          [class.wr-waterfall-chart__step--increase]=\"step.kind === 'increase'\"\n          [class.wr-waterfall-chart__step--decrease]=\"step.kind === 'decrease'\"\n          [class.wr-waterfall-chart__step--flat]=\"step.kind === 'flat'\"\n          [class.wr-waterfall-chart__step--total]=\"step.kind === 'total'\"\n          [class.wr-waterfall-chart__step--active]=\"active === $index\"\n          role=\"img\"\n          [attr.aria-label]=\"step.name\"\n          [attr.data-start]=\"step.start\"\n          [attr.data-end]=\"step.end\"\n          [style.--wr-waterfall-chart-lo]=\"step.lo\"\n          [style.--wr-waterfall-chart-hi]=\"step.hi\"\n          (mouseenter)=\"tip.enter($index)\"\n          (mouseleave)=\"tip.leave($event)\"\n        >\n          <!-- A change of zero writes no paint: its neutral hairline is the stylesheet's hook. -->\n          <span #barEl class=\"wr-waterfall-chart__bar\" [style.background]=\"step.color\"></span>\n          @if (values) {\n            <!-- A line one figure tall that the figure joins only where it fits whole; one\n                 that does not wraps out of sight below it (see the stylesheet). -->\n            <span class=\"wr-waterfall-chart__value\" [class.wr-waterfall-chart__value--below]=\"step.below\"\n              ><span class=\"wr-waterfall-chart__value-text\">{{ step.display }}</span></span\n            >\n          }\n          @if (connectors && step.connector !== null) {\n            <!-- Across the gap to the next bar, at the running total that bar starts from. -->\n            <span class=\"wr-waterfall-chart__connector\" [style.--wr-waterfall-chart-level]=\"step.connector\"></span>\n          }\n        </div>\n      }\n\n      <!-- After the bars, so it is drawn over them where zero runs through the plot. -->\n      <span class=\"wr-waterfall-chart__baseline\" aria-hidden=\"true\"></span>\n    </div>\n  </div>\n\n  <!-- Named on each step above, so the visible label row is decoration here. -->\n  <div class=\"wr-waterfall-chart__labels\" aria-hidden=\"true\">\n    @for (step of drawn(); track $index) {\n      <span class=\"wr-waterfall-chart__label\" [class.wr-waterfall-chart__label--total]=\"step.kind === 'total'\">{{\n        step.label\n      }}</span>\n    }\n  </div>\n</div>\n\n@if (dataTable()) {\n  <!-- The figures for a screen reader who wants to move cell by cell, beside the steps\n       rather than inside an `img`. Clipped to nothing by its own stylesheet, so it takes no\n       room and draws nothing. -->\n  <wr-chart-table [data]=\"tableData()\" />\n}\n"
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		steps: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "steps",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		increaseColor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "increaseColor",
+				required: false
+			}]
+		}],
+		decreaseColor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "decreaseColor",
+				required: false
+			}]
+		}],
+		totalColor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "totalColor",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		showGrid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showGrid",
+				required: false
+			}]
+		}],
+		showValues: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showValues",
+				required: false
+			}]
+		}],
+		showConnectors: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showConnectors",
+				required: false
+			}]
+		}],
+		tooltip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tooltip",
+				required: false
+			}]
+		}],
+		dataTable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dataTable",
+				required: false
+			}]
+		}],
+		valueFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "valueFormat",
+				required: false
+			}]
+		}],
+		barEls: [{
+			type: i0.ViewChildren,
+			args: ["barEl", { isSignal: true }]
+		}]
+	}
+});
+export { WrWaterfallChart };
+
+//# sourceMappingURL=ngwr-charts-waterfall-chart.mjs.map