@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

package/fesm2022/lifecorner-angular-ui-kit-waterfall-chart.mjs

@@ -0,0 +1,371 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, afterNextRender, computed, inject, input, signal } from "@angular/core";
+import { formatChartValue, niceScale, toFinite } from "@lifecorner/angular-ui-kit/internal/chart";
+const DEFAULT_WIDTH = 500;
+var WaterfallChartComponent = class WaterfallChartComponent {
+	_el = inject(ElementRef);
+	_destroyRef = inject(DestroyRef);
+	_containerWidth = signal(0, ...ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterNextRender(() => {
+			const obs = new ResizeObserver(([entry]) => {
+				this._containerWidth.set(entry.contentRect.width);
+			});
+			obs.observe(this._el.nativeElement);
+			this._destroyRef.onDestroy(() => obs.disconnect());
+		});
+	}
+	data = input.required(...ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []);
+	width = input(void 0, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	height = input(250, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+	showValues = input(true, ...ngDevMode ? [{ debugName: "showValues" }] : /* istanbul ignore next */ []);
+	showGrid = input(true, ...ngDevMode ? [{ debugName: "showGrid" }] : /* istanbul ignore next */ []);
+	showConnectors = input(true, ...ngDevMode ? [{ debugName: "showConnectors" }] : /* istanbul ignore next */ []);
+	increaseColor = input("var(--color-success-default)", ...ngDevMode ? [{ debugName: "increaseColor" }] : /* istanbul ignore next */ []);
+	decreaseColor = input("var(--color-error-default)", ...ngDevMode ? [{ debugName: "decreaseColor" }] : /* istanbul ignore next */ []);
+	totalColor = input("var(--color-primary-500)", ...ngDevMode ? [{ debugName: "totalColor" }] : /* istanbul ignore next */ []);
+	barGap = input(.3, ...ngDevMode ? [{ debugName: "barGap" }] : /* istanbul ignore next */ []);
+	formatValue = input(formatChartValue, ...ngDevMode ? [{ debugName: "formatValue" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	PL = 50;
+	PR = 10;
+	PT = 15;
+	PB = 30;
+	effectiveWidth = computed(() => this._containerWidth() || this.width() || DEFAULT_WIDTH, ...ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []);
+	viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`, ...ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []);
+	entries = computed(() => {
+		const entries = [];
+		let running = 0;
+		for (const item of this.data() ?? []) {
+			const raw = toFinite(item.value);
+			if (item.type === "total") {
+				entries.push({
+					label: item.label,
+					start: 0,
+					end: raw,
+					delta: raw,
+					type: "total"
+				});
+				running = raw;
+				continue;
+			}
+			const delta = item.type === "increase" ? Math.abs(raw) : item.type === "decrease" ? -Math.abs(raw) : raw;
+			const start = running;
+			running += delta;
+			entries.push({
+				label: item.label,
+				start,
+				end: running,
+				delta,
+				type: delta >= 0 ? "increase" : "decrease"
+			});
+		}
+		return entries;
+	}, ...ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []);
+	valueLabel(e) {
+		const text = this.formatValue()(e.delta);
+		return e.type !== "total" && e.delta > 0 ? `+${text}` : text;
+	}
+	scale = computed(() => {
+		const allVals = this.entries().flatMap((e) => [e.start, e.end]);
+		return niceScale(Math.min(0, ...allVals), Math.max(0, ...allVals), 4);
+	}, ...ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []);
+	plotH = computed(() => this.height() - this.PT - this.PB, ...ngDevMode ? [{ debugName: "plotH" }] : /* istanbul ignore next */ []);
+	toY(value) {
+		const { min, max } = this.scale();
+		return this.PT + this.plotH() - (value - min) / (max - min || 1) * this.plotH();
+	}
+	computedBars = computed(() => {
+		const entries = this.entries();
+		if (!entries.length) return {
+			bars: [],
+			connectors: [],
+			gridLines: []
+		};
+		const w = this.effectiveWidth();
+		const h = this.height();
+		const plotW = w - this.PL - this.PR;
+		const gap = this.barGap();
+		const fmt = this.formatValue();
+		const totalBarW = plotW / entries.length;
+		const barW = totalBarW * (1 - gap);
+		const barOff = (totalBarW - barW) / 2;
+		const bars = entries.map((e, i) => {
+			const top = this.toY(Math.max(e.start, e.end));
+			const bottom = this.toY(Math.min(e.start, e.end));
+			return {
+				x: this.PL + i * totalBarW + barOff,
+				y: top,
+				width: barW,
+				height: Math.max(bottom - top, 1),
+				color: e.type === "total" ? this.totalColor() : e.type === "increase" ? this.increaseColor() : this.decreaseColor(),
+				label: e.label,
+				value: e.delta,
+				valueText: this.valueLabel(e),
+				labelX: this.PL + i * totalBarW + totalBarW / 2,
+				labelY: h - this.PB + 16,
+				valueY: top - 6,
+				endVal: e.end
+			};
+		});
+		const connectors = [];
+		if (this.showConnectors()) for (let i = 0; i < entries.length - 1; i++) connectors.push({
+			x1: this.PL + i * totalBarW + barOff + barW,
+			x2: this.PL + (i + 1) * totalBarW + barOff,
+			y: this.toY(entries[i].end)
+		});
+		return {
+			bars,
+			connectors,
+			gridLines: this.showGrid() ? this.scale().ticks.map((tick) => ({
+				y: this.toY(tick),
+				label: fmt(tick)
+			})) : []
+		};
+	}, ...ngDevMode ? [{ debugName: "computedBars" }] : /* istanbul ignore next */ []);
+	axisLine = computed(() => {
+		const zeroY = this.entries().length ? this.toY(0) : this.height() - this.PB;
+		return {
+			vx1: this.PL,
+			vy1: this.PT,
+			vx2: this.PL,
+			vy2: this.height() - this.PB,
+			hx1: this.PL,
+			hy1: zeroY,
+			hx2: this.effectiveWidth() - this.PR,
+			hy2: zeroY
+		};
+	}, ...ngDevMode ? [{ debugName: "axisLine" }] : /* istanbul ignore next */ []);
+	effectiveAriaLabel = computed(() => {
+		const explicit = this.ariaLabel();
+		if (explicit) return explicit;
+		const entries = this.entries();
+		if (!entries.length) return "Waterfall chart: no data";
+		return `Waterfall chart: ${entries.map((e, i) => `${e.label || `Bar ${i + 1}`} ${this.valueLabel(e)}`).join(", ")}`;
+	}, ...ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: WaterfallChartComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: WaterfallChartComponent,
+		isStandalone: true,
+		selector: "lc-waterfall-chart",
+		inputs: {
+			data: {
+				classPropertyName: "data",
+				publicName: "data",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showValues: {
+				classPropertyName: "showValues",
+				publicName: "showValues",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showGrid: {
+				classPropertyName: "showGrid",
+				publicName: "showGrid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showConnectors: {
+				classPropertyName: "showConnectors",
+				publicName: "showConnectors",
+				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
+			},
+			barGap: {
+				classPropertyName: "barGap",
+				publicName: "barGap",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			formatValue: {
+				classPropertyName: "formatValue",
+				publicName: "formatValue",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "style.max-width.px": "width()" } },
+		ngImport: i0,
+		template: "<svg width=\"100%\" [attr.height]=\"height()\" [attr.viewBox]=\"viewBox()\" role=\"img\" [attr.aria-label]=\"effectiveAriaLabel()\" class=\"lc-waterfall-chart\">\n  <title>{{ effectiveAriaLabel() }}</title>\n\n  @for (line of computedBars().gridLines; track line.y) {\n    <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"line.y\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"line.y\" class=\"lc-waterfall-chart__grid\" />\n    <text [attr.x]=\"axisLine().vx1 - 6\" [attr.y]=\"line.y\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-waterfall-chart__grid-label\">{{ line.label }}</text>\n  }\n\n  <line [attr.x1]=\"axisLine().vx1\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"axisLine().vx2\" [attr.y2]=\"axisLine().vy2\" class=\"lc-waterfall-chart__axis\" />\n  <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-waterfall-chart__axis\" />\n\n  @for (conn of computedBars().connectors; track $index) {\n    <line [attr.x1]=\"conn.x1\" [attr.y1]=\"conn.y\" [attr.x2]=\"conn.x2\" [attr.y2]=\"conn.y\" class=\"lc-waterfall-chart__connector\" />\n  }\n\n  @for (bar of computedBars().bars; track $index) {\n    <rect [attr.x]=\"bar.x\" [attr.y]=\"bar.y\" [attr.width]=\"bar.width\" [attr.height]=\"bar.height\" [attr.fill]=\"bar.color\" rx=\"2\" class=\"lc-waterfall-chart__bar\" />\n    @if (showValues()) {\n      <text [attr.x]=\"bar.labelX\" [attr.y]=\"bar.valueY\" text-anchor=\"middle\" class=\"lc-waterfall-chart__value\">{{ bar.valueText }}</text>\n    }\n    <text [attr.x]=\"bar.labelX\" [attr.y]=\"bar.labelY\" text-anchor=\"middle\" class=\"lc-waterfall-chart__label\">{{ bar.label }}</text>\n  }\n</svg>\n",
+		styles: [":host{display:block;width:100%}.lc-waterfall-chart{overflow:visible}.lc-waterfall-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-waterfall-chart__grid{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-waterfall-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-waterfall-chart__connector{stroke:var(--color-border-strong);stroke-width:1;stroke-dasharray:2 2}.lc-waterfall-chart__bar{transition:opacity .15s ease}.lc-waterfall-chart__bar:hover{opacity:.8}.lc-waterfall-chart__value{font-size:.625rem;font-weight:600;fill:var(--color-text-secondary)}.lc-waterfall-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: WaterfallChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-waterfall-chart",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { "[style.max-width.px]": "width()" },
+			template: "<svg width=\"100%\" [attr.height]=\"height()\" [attr.viewBox]=\"viewBox()\" role=\"img\" [attr.aria-label]=\"effectiveAriaLabel()\" class=\"lc-waterfall-chart\">\n  <title>{{ effectiveAriaLabel() }}</title>\n\n  @for (line of computedBars().gridLines; track line.y) {\n    <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"line.y\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"line.y\" class=\"lc-waterfall-chart__grid\" />\n    <text [attr.x]=\"axisLine().vx1 - 6\" [attr.y]=\"line.y\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-waterfall-chart__grid-label\">{{ line.label }}</text>\n  }\n\n  <line [attr.x1]=\"axisLine().vx1\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"axisLine().vx2\" [attr.y2]=\"axisLine().vy2\" class=\"lc-waterfall-chart__axis\" />\n  <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-waterfall-chart__axis\" />\n\n  @for (conn of computedBars().connectors; track $index) {\n    <line [attr.x1]=\"conn.x1\" [attr.y1]=\"conn.y\" [attr.x2]=\"conn.x2\" [attr.y2]=\"conn.y\" class=\"lc-waterfall-chart__connector\" />\n  }\n\n  @for (bar of computedBars().bars; track $index) {\n    <rect [attr.x]=\"bar.x\" [attr.y]=\"bar.y\" [attr.width]=\"bar.width\" [attr.height]=\"bar.height\" [attr.fill]=\"bar.color\" rx=\"2\" class=\"lc-waterfall-chart__bar\" />\n    @if (showValues()) {\n      <text [attr.x]=\"bar.labelX\" [attr.y]=\"bar.valueY\" text-anchor=\"middle\" class=\"lc-waterfall-chart__value\">{{ bar.valueText }}</text>\n    }\n    <text [attr.x]=\"bar.labelX\" [attr.y]=\"bar.labelY\" text-anchor=\"middle\" class=\"lc-waterfall-chart__label\">{{ bar.label }}</text>\n  }\n</svg>\n",
+			styles: [":host{display:block;width:100%}.lc-waterfall-chart{overflow:visible}.lc-waterfall-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-waterfall-chart__grid{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-waterfall-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-waterfall-chart__connector{stroke:var(--color-border-strong);stroke-width:1;stroke-dasharray:2 2}.lc-waterfall-chart__bar{transition:opacity .15s ease}.lc-waterfall-chart__bar:hover{opacity:.8}.lc-waterfall-chart__value{font-size:.625rem;font-weight:600;fill:var(--color-text-secondary)}.lc-waterfall-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		data: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data",
+				required: true
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		showValues: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showValues",
+				required: false
+			}]
+		}],
+		showGrid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showGrid",
+				required: false
+			}]
+		}],
+		showConnectors: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showConnectors",
+				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
+			}]
+		}],
+		barGap: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "barGap",
+				required: false
+			}]
+		}],
+		formatValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "formatValue",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}]
+	}
+});
+export { WaterfallChartComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-waterfall-chart.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-waterfall-chart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-waterfall-chart.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/waterfall-chart/waterfall-chart.component.ts","../../../../libs/angular-ui-kit/src/lib/waterfall-chart/waterfall-chart.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  afterNextRender,\n  inject,\n  input,\n  computed,\n  signal,\n} from '@angular/core';\nimport {\n  ChartValueFormatter,\n  formatChartValue,\n  niceScale,\n  toFinite,\n} from '@lifecorner/angular-ui-kit/internal/chart';\n\nexport interface WaterfallItem {\n  label: string;\n  /**\n   * The bar's amount. For an incremental step the sign gives the direction\n   * unless `type` says otherwise; for a `total` it is the absolute level.\n   */\n  value: number;\n  /**\n   * `'total'` renders from 0 to `value` instead of incrementally.\n   * `'increase'` / `'decrease'` force the direction: the step moves the running\n   * total by `|value|` up or down regardless of the sign of `value`. When\n   * omitted the sign of `value` decides.\n   */\n  type?: 'increase' | 'decrease' | 'total';\n}\n\n/** viewBox width used until the container has been measured. */\nconst DEFAULT_WIDTH = 500;\n\n@Component({\n  selector: 'lc-waterfall-chart',\n  standalone: true,\n  templateUrl: './waterfall-chart.component.html',\n  styleUrls: ['./waterfall-chart.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[style.max-width.px]': 'width()',\n  },\n})\n/**\n * Waterfall chart component for visualizing cumulative value changes.\n *\n * Features:\n * - Increase, decrease, and total bar types\n * - Connector lines between bars\n * - Configurable colors for increase, decrease, and total\n * - Optional value labels and grid on a nice tick scale\n * - Adjustable bar gap spacing\n * - Responsive SVG rendering\n *\n * @example\n * ```html\n * <lc-waterfall-chart [data]=\"items\" [showConnectors]=\"true\" />\n * ```\n */\nexport class WaterfallChartComponent {\n  private readonly _el = inject(ElementRef);\n  private readonly _destroyRef = inject(DestroyRef);\n  private readonly _containerWidth = signal<number>(0);\n\n  constructor() {\n    afterNextRender(() => {\n      const obs = new ResizeObserver(([entry]) => {\n        this._containerWidth.set(entry.contentRect.width);\n      });\n      obs.observe(this._el.nativeElement);\n      this._destroyRef.onDestroy(() => obs.disconnect());\n    });\n  }\n\n  data = input.required<WaterfallItem[]>();\n  /**\n   * Intrinsic chart width in pixels. The chart fills its container (the SVG is\n   * `width=\"100%\"` and its viewBox follows the measured container width);\n   * `width` is the viewBox width until the container has been measured and,\n   * when set, the host's `max-width`, so the chart never grows past it. Leave\n   * unset for a fully fluid chart.\n   */\n  width = input<number | undefined>(undefined);\n  height = input<number>(250);\n  showValues = input<boolean>(true);\n  showGrid = input<boolean>(true);\n  showConnectors = input<boolean>(true);\n  increaseColor = input<string>('var(--color-success-default)');\n  decreaseColor = input<string>('var(--color-error-default)');\n  totalColor = input<string>('var(--color-primary-500)');\n  barGap = input<number>(0.3);\n  /**\n   * Formats value labels and axis ticks. Defaults to a float-safe\n   * `String(value)`; incremental steps are additionally prefixed with their sign.\n   */\n  formatValue = input<ChartValueFormatter>(formatChartValue);\n  /**\n   * Accessible name of the chart. Defaults to a generated summary listing every\n   * bar's label and signed value (totals unsigned).\n   */\n  ariaLabel = input<string>('');\n\n  private readonly PL = 50;\n  private readonly PR = 10;\n  private readonly PT = 15;\n  private readonly PB = 30;\n\n  protected readonly effectiveWidth = computed(\n    () => this._containerWidth() || this.width() || DEFAULT_WIDTH\n  );\n\n  protected readonly viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`);\n\n  /** Running totals with the explicit `type` applied. */\n  private readonly entries = computed(() => {\n    const entries: { label: string; start: number; end: number; delta: number; type: 'increase' | 'decrease' | 'total' }[] = [];\n    let running = 0;\n\n    for (const item of this.data() ?? []) {\n      const raw = toFinite(item.value);\n      if (item.type === 'total') {\n        entries.push({ label: item.label, start: 0, end: raw, delta: raw, type: 'total' });\n        running = raw;\n        continue;\n      }\n      // An explicit direction wins over the sign of the value.\n      const delta = item.type === 'increase' ? Math.abs(raw)\n        : item.type === 'decrease' ? -Math.abs(raw)\n        : raw;\n      const start = running;\n      running += delta;\n      entries.push({\n        label: item.label,\n        start,\n        end: running,\n        delta,\n        type: delta >= 0 ? 'increase' : 'decrease',\n      });\n    }\n    return entries;\n  });\n\n  private valueLabel(e: { delta: number; type: string }): string {\n    const fmt = this.formatValue();\n    const text = fmt(e.delta);\n    return e.type !== 'total' && e.delta > 0 ? `+${text}` : text;\n  }\n\n  /** One nice scale for bars and grid, always including zero. */\n  private readonly scale = computed(() => {\n    const allVals = this.entries().flatMap(e => [e.start, e.end]);\n    return niceScale(Math.min(0, ...allVals), Math.max(0, ...allVals), 4);\n  });\n\n  private readonly plotH = computed(() => this.height() - this.PT - this.PB);\n\n  private toY(value: number): number {\n    const { min, max } = this.scale();\n    return this.PT + this.plotH() - ((value - min) / (max - min || 1)) * this.plotH();\n  }\n\n  protected readonly computedBars = computed(() => {\n    const entries = this.entries();\n    if (!entries.length) return { bars: [], connectors: [], gridLines: [] };\n\n    const w = this.effectiveWidth();\n    const h = this.height();\n    const plotW = w - this.PL - this.PR;\n    const gap = this.barGap();\n    const fmt = this.formatValue();\n\n    const totalBarW = plotW / entries.length;\n    const barW = totalBarW * (1 - gap);\n    const barOff = (totalBarW - barW) / 2;\n\n    const bars = entries.map((e, i) => {\n      const top = this.toY(Math.max(e.start, e.end));\n      const bottom = this.toY(Math.min(e.start, e.end));\n      return {\n        x: this.PL + i * totalBarW + barOff,\n        y: top,\n        width: barW,\n        height: Math.max(bottom - top, 1),\n        color: e.type === 'total' ? this.totalColor()\n          : e.type === 'increase' ? this.increaseColor()\n          : this.decreaseColor(),\n        label: e.label,\n        // The item's own amount — not `end - start`, which drifts (0.1 + 0.2).\n        value: e.delta,\n        valueText: this.valueLabel(e),\n        labelX: this.PL + i * totalBarW + totalBarW / 2,\n        labelY: h - this.PB + 16,\n        valueY: top - 6,\n        endVal: e.end,\n      };\n    });\n\n    const connectors: { x1: number; x2: number; y: number }[] = [];\n    if (this.showConnectors()) {\n      for (let i = 0; i < entries.length - 1; i++) {\n        connectors.push({\n          x1: this.PL + i * totalBarW + barOff + barW,\n          x2: this.PL + (i + 1) * totalBarW + barOff,\n          y: this.toY(entries[i].end),\n        });\n      }\n    }\n\n    const gridLines = this.showGrid()\n      ? this.scale().ticks.map((tick) => ({ y: this.toY(tick), label: fmt(tick) }))\n      : [];\n\n    return { bars, connectors, gridLines };\n  });\n\n  /** Value axis on the left plus the zero baseline (inside the plot when the data goes negative). */\n  protected readonly axisLine = computed(() => {\n    const zeroY = this.entries().length ? this.toY(0) : this.height() - this.PB;\n    return {\n      vx1: this.PL, vy1: this.PT,\n      vx2: this.PL, vy2: this.height() - this.PB,\n      hx1: this.PL, hy1: zeroY,\n      hx2: this.effectiveWidth() - this.PR, hy2: zeroY,\n    };\n  });\n\n  protected readonly effectiveAriaLabel = computed(() => {\n    const explicit = this.ariaLabel();\n    if (explicit) return explicit;\n    const entries = this.entries();\n    if (!entries.length) return 'Waterfall chart: no data';\n    return `Waterfall chart: ${entries\n      .map((e, i) => `${e.label || `Bar ${i + 1}`} ${this.valueLabel(e)}`)\n      .join(', ')}`;\n  });\n}\n","<svg width=\"100%\" [attr.height]=\"height()\" [attr.viewBox]=\"viewBox()\" role=\"img\" [attr.aria-label]=\"effectiveAriaLabel()\" class=\"lc-waterfall-chart\">\n  <title>{{ effectiveAriaLabel() }}</title>\n\n  @for (line of computedBars().gridLines; track line.y) {\n    <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"line.y\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"line.y\" class=\"lc-waterfall-chart__grid\" />\n    <text [attr.x]=\"axisLine().vx1 - 6\" [attr.y]=\"line.y\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-waterfall-chart__grid-label\">{{ line.label }}</text>\n  }\n\n  <line [attr.x1]=\"axisLine().vx1\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"axisLine().vx2\" [attr.y2]=\"axisLine().vy2\" class=\"lc-waterfall-chart__axis\" />\n  <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-waterfall-chart__axis\" />\n\n  @for (conn of computedBars().connectors; track $index) {\n    <line [attr.x1]=\"conn.x1\" [attr.y1]=\"conn.y\" [attr.x2]=\"conn.x2\" [attr.y2]=\"conn.y\" class=\"lc-waterfall-chart__connector\" />\n  }\n\n  @for (bar of computedBars().bars; track $index) {\n    <rect [attr.x]=\"bar.x\" [attr.y]=\"bar.y\" [attr.width]=\"bar.width\" [attr.height]=\"bar.height\" [attr.fill]=\"bar.color\" rx=\"2\" class=\"lc-waterfall-chart__bar\" />\n    @if (showValues()) {\n      <text [attr.x]=\"bar.labelX\" [attr.y]=\"bar.valueY\" text-anchor=\"middle\" class=\"lc-waterfall-chart__value\">{{ bar.valueText }}</text>\n    }\n    <text [attr.x]=\"bar.labelX\" [attr.y]=\"bar.labelY\" text-anchor=\"middle\" class=\"lc-waterfall-chart__label\">{{ bar.label }}</text>\n  }\n</svg>\n"],"mappings":"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"}