@lifecorner/angular-ui-kit 3.4.0 → 3.5.0

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

@@ -0,0 +1,360 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, afterNextRender, computed, inject, input, signal } from "@angular/core";
+import { chartColor, formatChartValue, niceScale, toFinite } from "@lifecorner/angular-ui-kit/internal/chart";
+const DEFAULT_WIDTH = 400;
+var BarChartComponent = class BarChartComponent {
+	_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(200, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+	orientation = input("vertical", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	showValues = input(true, ...ngDevMode ? [{ debugName: "showValues" }] : /* istanbul ignore next */ []);
+	showLabels = input(true, ...ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []);
+	showGrid = input(true, ...ngDevMode ? [{ debugName: "showGrid" }] : /* istanbul ignore next */ []);
+	barGap = input(.3, ...ngDevMode ? [{ debugName: "barGap" }] : /* istanbul ignore next */ []);
+	color = input("", ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+	formatValue = input(formatChartValue, ...ngDevMode ? [{ debugName: "formatValue" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	PADDING_LEFT = 40;
+	PADDING_RIGHT = 10;
+	PADDING_TOP = 10;
+	PADDING_BOTTOM = 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 */ []);
+	isVertical = computed(() => this.orientation() === "vertical", ...ngDevMode ? [{ debugName: "isVertical" }] : /* istanbul ignore next */ []);
+	plot = computed(() => {
+		const w = this.effectiveWidth();
+		const h = this.height();
+		return {
+			x: this.PADDING_LEFT,
+			y: this.PADDING_TOP,
+			w: w - this.PADDING_LEFT - this.PADDING_RIGHT,
+			h: h - this.PADDING_TOP - this.PADDING_BOTTOM
+		};
+	}, ...ngDevMode ? [{ debugName: "plot" }] : /* istanbul ignore next */ []);
+	scale = computed(() => {
+		const values = (this.data() ?? []).map((i) => toFinite(i.value));
+		return niceScale(Math.min(0, ...values), Math.max(0, ...values), 4);
+	}, ...ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []);
+	valueToPos(value) {
+		const { min, max } = this.scale();
+		const p = this.plot();
+		const frac = (value - min) / (max - min || 1);
+		return this.isVertical() ? p.y + p.h - frac * p.h : p.x + frac * p.w;
+	}
+	gridLines = computed(() => {
+		if (!this.showGrid() || !this.data()?.length) return [];
+		const fmt = this.formatValue();
+		return this.scale().ticks.map((tick) => ({
+			pos: this.valueToPos(tick),
+			label: fmt(tick)
+		}));
+	}, ...ngDevMode ? [{ debugName: "gridLines" }] : /* istanbul ignore next */ []);
+	bars = computed(() => {
+		const d = this.data();
+		if (!d || d.length === 0) return [];
+		const isVertical = this.isVertical();
+		const p = this.plot();
+		const gap = this.barGap();
+		const singleColor = this.color();
+		const fmt = this.formatValue();
+		const zero = this.valueToPos(0);
+		const h = this.height();
+		if (isVertical) {
+			const totalBarWidth = p.w / d.length;
+			const barWidth = totalBarWidth * (1 - gap);
+			const barOffset = (totalBarWidth - barWidth) / 2;
+			return d.map((item, i) => {
+				const value = toFinite(item.value);
+				const end = this.valueToPos(value);
+				const y = Math.min(zero, end);
+				const barH = Math.abs(end - zero);
+				return {
+					x: p.x + i * totalBarWidth + barOffset,
+					y,
+					width: barWidth,
+					height: barH,
+					color: singleColor || item.color || chartColor(i),
+					label: item.label || "",
+					value,
+					valueText: fmt(value),
+					labelX: p.x + i * totalBarWidth + totalBarWidth / 2,
+					labelY: h - this.PADDING_BOTTOM + 16,
+					valueX: p.x + i * totalBarWidth + totalBarWidth / 2,
+					valueY: value >= 0 ? y - 6 : y + barH + 12,
+					valueAnchor: "middle"
+				};
+			});
+		} else {
+			const totalBarHeight = p.h / d.length;
+			const barHeight = totalBarHeight * (1 - gap);
+			const barOffset = (totalBarHeight - barHeight) / 2;
+			return d.map((item, i) => {
+				const value = toFinite(item.value);
+				const end = this.valueToPos(value);
+				const x = Math.min(zero, end);
+				const barW = Math.abs(end - zero);
+				return {
+					x,
+					y: p.y + i * totalBarHeight + barOffset,
+					width: barW,
+					height: barHeight,
+					color: singleColor || item.color || chartColor(i),
+					label: item.label || "",
+					value,
+					valueText: fmt(value),
+					labelX: p.x - 6,
+					labelY: p.y + i * totalBarHeight + totalBarHeight / 2,
+					valueX: value >= 0 ? x + barW + 6 : x - 6,
+					valueY: p.y + i * totalBarHeight + totalBarHeight / 2,
+					valueAnchor: value >= 0 ? "start" : "end"
+				};
+			});
+		}
+	}, ...ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []);
+	axisLine = computed(() => {
+		const p = this.plot();
+		const isVertical = this.isVertical();
+		const zero = this.data()?.length ? this.valueToPos(0) : isVertical ? p.y + p.h : p.x;
+		return {
+			x1: isVertical ? p.x : zero,
+			y1: p.y,
+			x2: isVertical ? p.x : zero,
+			y2: p.y + p.h,
+			bx1: p.x,
+			by1: isVertical ? zero : p.y + p.h,
+			bx2: p.x + p.w,
+			by2: isVertical ? zero : p.y + p.h
+		};
+	}, ...ngDevMode ? [{ debugName: "axisLine" }] : /* istanbul ignore next */ []);
+	plotBottom = computed(() => this.plot().y + this.plot().h, ...ngDevMode ? [{ debugName: "plotBottom" }] : /* istanbul ignore next */ []);
+	effectiveAriaLabel = computed(() => {
+		const explicit = this.ariaLabel();
+		if (explicit) return explicit;
+		const d = this.data() ?? [];
+		if (!d.length) return "Bar chart: no data";
+		const fmt = this.formatValue();
+		return `Bar chart: ${d.map((item, i) => `${item.label || `Bar ${i + 1}`} ${fmt(toFinite(item.value))}`).join(", ")}`;
+	}, ...ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: BarChartComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: BarChartComponent,
+		isStandalone: true,
+		selector: "lc-bar-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
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showValues: {
+				classPropertyName: "showValues",
+				publicName: "showValues",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showLabels: {
+				classPropertyName: "showLabels",
+				publicName: "showLabels",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showGrid: {
+				classPropertyName: "showGrid",
+				publicName: "showGrid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			barGap: {
+				classPropertyName: "barGap",
+				publicName: "barGap",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			color: {
+				classPropertyName: "color",
+				publicName: "color",
+				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\n  width=\"100%\"\n  [attr.height]=\"height()\"\n  [attr.viewBox]=\"viewBox()\"\n  role=\"img\"\n  [attr.aria-label]=\"effectiveAriaLabel()\"\n  class=\"lc-bar-chart\"\n>\n  <title>{{ effectiveAriaLabel() }}</title>\n\n  <!-- Grid lines -->\n  @if (showGrid()) {\n    @for (line of gridLines(); track line.pos) {\n      @if (isVertical()) {\n        <line\n          [attr.x1]=\"axisLine().bx1\"\n          [attr.y1]=\"line.pos\"\n          [attr.x2]=\"axisLine().bx2\"\n          [attr.y2]=\"line.pos\"\n          class=\"lc-bar-chart__grid-line\"\n        />\n        <text\n          [attr.x]=\"axisLine().x1 - 6\"\n          [attr.y]=\"line.pos\"\n          text-anchor=\"end\"\n          dominant-baseline=\"central\"\n          class=\"lc-bar-chart__grid-label\"\n        >\n          {{ line.label }}\n        </text>\n      } @else {\n        <line\n          [attr.x1]=\"line.pos\"\n          [attr.y1]=\"axisLine().y1\"\n          [attr.x2]=\"line.pos\"\n          [attr.y2]=\"axisLine().y2\"\n          class=\"lc-bar-chart__grid-line\"\n        />\n        <text\n          [attr.x]=\"line.pos\"\n          [attr.y]=\"plotBottom() + 12\"\n          text-anchor=\"middle\"\n          class=\"lc-bar-chart__grid-label\"\n        >\n          {{ line.label }}\n        </text>\n      }\n    }\n  }\n\n  <!-- Axes -->\n  <line\n    [attr.x1]=\"axisLine().x1\"\n    [attr.y1]=\"axisLine().y1\"\n    [attr.x2]=\"axisLine().x2\"\n    [attr.y2]=\"axisLine().y2\"\n    class=\"lc-bar-chart__axis\"\n  />\n  <line\n    [attr.x1]=\"axisLine().bx1\"\n    [attr.y1]=\"axisLine().by1\"\n    [attr.x2]=\"axisLine().bx2\"\n    [attr.y2]=\"axisLine().by2\"\n    class=\"lc-bar-chart__axis\"\n  />\n\n  <!-- Bars -->\n  @for (bar of bars(); track $index) {\n    <rect\n      [attr.x]=\"bar.x\"\n      [attr.y]=\"bar.y\"\n      [attr.width]=\"bar.width\"\n      [attr.height]=\"bar.height\"\n      [attr.fill]=\"bar.color\"\n      rx=\"2\"\n      class=\"lc-bar-chart__bar\"\n    />\n\n    @if (showValues()) {\n      <text\n        [attr.x]=\"bar.valueX\"\n        [attr.y]=\"bar.valueY\"\n        [attr.text-anchor]=\"bar.valueAnchor\"\n        [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n        class=\"lc-bar-chart__value\"\n      >\n        {{ bar.valueText }}\n      </text>\n    }\n\n    @if (showLabels()) {\n      <text\n        [attr.x]=\"bar.labelX\"\n        [attr.y]=\"bar.labelY\"\n        [attr.text-anchor]=\"isVertical() ? 'middle' : 'end'\"\n        [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n        class=\"lc-bar-chart__label\"\n      >\n        {{ bar.label }}\n      </text>\n    }\n  }\n</svg>\n",
+		styles: [":host{display:block;width:100%}.lc-bar-chart{overflow:visible}.lc-bar-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-bar-chart__grid-line{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-bar-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-bar-chart__bar{transition:opacity .15s ease}.lc-bar-chart__bar:hover{opacity:.8}.lc-bar-chart__value{font-size:.625rem;font-weight:600;fill:var(--color-text-secondary)}.lc-bar-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: BarChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-bar-chart",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { "[style.max-width.px]": "width()" },
+			template: "<svg\n  width=\"100%\"\n  [attr.height]=\"height()\"\n  [attr.viewBox]=\"viewBox()\"\n  role=\"img\"\n  [attr.aria-label]=\"effectiveAriaLabel()\"\n  class=\"lc-bar-chart\"\n>\n  <title>{{ effectiveAriaLabel() }}</title>\n\n  <!-- Grid lines -->\n  @if (showGrid()) {\n    @for (line of gridLines(); track line.pos) {\n      @if (isVertical()) {\n        <line\n          [attr.x1]=\"axisLine().bx1\"\n          [attr.y1]=\"line.pos\"\n          [attr.x2]=\"axisLine().bx2\"\n          [attr.y2]=\"line.pos\"\n          class=\"lc-bar-chart__grid-line\"\n        />\n        <text\n          [attr.x]=\"axisLine().x1 - 6\"\n          [attr.y]=\"line.pos\"\n          text-anchor=\"end\"\n          dominant-baseline=\"central\"\n          class=\"lc-bar-chart__grid-label\"\n        >\n          {{ line.label }}\n        </text>\n      } @else {\n        <line\n          [attr.x1]=\"line.pos\"\n          [attr.y1]=\"axisLine().y1\"\n          [attr.x2]=\"line.pos\"\n          [attr.y2]=\"axisLine().y2\"\n          class=\"lc-bar-chart__grid-line\"\n        />\n        <text\n          [attr.x]=\"line.pos\"\n          [attr.y]=\"plotBottom() + 12\"\n          text-anchor=\"middle\"\n          class=\"lc-bar-chart__grid-label\"\n        >\n          {{ line.label }}\n        </text>\n      }\n    }\n  }\n\n  <!-- Axes -->\n  <line\n    [attr.x1]=\"axisLine().x1\"\n    [attr.y1]=\"axisLine().y1\"\n    [attr.x2]=\"axisLine().x2\"\n    [attr.y2]=\"axisLine().y2\"\n    class=\"lc-bar-chart__axis\"\n  />\n  <line\n    [attr.x1]=\"axisLine().bx1\"\n    [attr.y1]=\"axisLine().by1\"\n    [attr.x2]=\"axisLine().bx2\"\n    [attr.y2]=\"axisLine().by2\"\n    class=\"lc-bar-chart__axis\"\n  />\n\n  <!-- Bars -->\n  @for (bar of bars(); track $index) {\n    <rect\n      [attr.x]=\"bar.x\"\n      [attr.y]=\"bar.y\"\n      [attr.width]=\"bar.width\"\n      [attr.height]=\"bar.height\"\n      [attr.fill]=\"bar.color\"\n      rx=\"2\"\n      class=\"lc-bar-chart__bar\"\n    />\n\n    @if (showValues()) {\n      <text\n        [attr.x]=\"bar.valueX\"\n        [attr.y]=\"bar.valueY\"\n        [attr.text-anchor]=\"bar.valueAnchor\"\n        [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n        class=\"lc-bar-chart__value\"\n      >\n        {{ bar.valueText }}\n      </text>\n    }\n\n    @if (showLabels()) {\n      <text\n        [attr.x]=\"bar.labelX\"\n        [attr.y]=\"bar.labelY\"\n        [attr.text-anchor]=\"isVertical() ? 'middle' : 'end'\"\n        [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n        class=\"lc-bar-chart__label\"\n      >\n        {{ bar.label }}\n      </text>\n    }\n  }\n</svg>\n",
+			styles: [":host{display:block;width:100%}.lc-bar-chart{overflow:visible}.lc-bar-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-bar-chart__grid-line{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-bar-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-bar-chart__bar{transition:opacity .15s ease}.lc-bar-chart__bar:hover{opacity:.8}.lc-bar-chart__value{font-size:.625rem;font-weight:600;fill:var(--color-text-secondary)}.lc-bar-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
+			}]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		showValues: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showValues",
+				required: false
+			}]
+		}],
+		showLabels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showLabels",
+				required: false
+			}]
+		}],
+		showGrid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showGrid",
+				required: false
+			}]
+		}],
+		barGap: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "barGap",
+				required: false
+			}]
+		}],
+		color: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "color",
+				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 { BarChartComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-bar-chart.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-bar-chart.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/bar-chart/bar-chart.component.ts","../../../../libs/angular-ui-kit/src/lib/bar-chart/bar-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 { chartColor } from '@lifecorner/angular-ui-kit/internal/chart';\nimport {\n  ChartValueFormatter,\n  formatChartValue,\n  niceScale,\n  toFinite,\n} from '@lifecorner/angular-ui-kit/internal/chart';\n\nexport interface BarChartItem {\n  /** Bar value. Negative values draw downward (left) from the zero baseline. */\n  value: number;\n  label?: string;\n  color?: string;\n}\n\nexport type BarChartOrientation = 'vertical' | 'horizontal';\n\n/** viewBox width used until the container has been measured. */\nconst DEFAULT_WIDTH = 400;\n\n@Component({\n  selector: 'lc-bar-chart',\n  standalone: true,\n  templateUrl: './bar-chart.component.html',\n  styleUrls: ['./bar-chart.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[style.max-width.px]': 'width()',\n  },\n})\n/**\n * Bar chart component for comparing categorical data.\n *\n * Features:\n * - Vertical and horizontal orientation\n * - Per-bar or uniform color support\n * - Negative values drawn from a zero baseline\n * - Optional value labels on bars\n * - Configurable grid and axis labels on a nice tick scale\n * - Adjustable bar gap spacing\n * - Responsive SVG rendering\n *\n * @example\n * ```html\n * <lc-bar-chart [data]=\"items\" orientation=\"vertical\" [showValues]=\"true\" />\n * ```\n */\nexport class BarChartComponent {\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 items. */\n  data = input.required<BarChartItem[]>();\n\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\n  /** Chart height in pixels. */\n  height = input<number>(200);\n\n  /** Bar orientation. */\n  orientation = input<BarChartOrientation>('vertical');\n\n  /** Show value labels on bars. */\n  showValues = input<boolean>(true);\n\n  /** Show axis labels. */\n  showLabels = input<boolean>(true);\n\n  /** Show grid lines. */\n  showGrid = input<boolean>(true);\n\n  /** Gap between bars as ratio (0-1). */\n  barGap = input<number>(0.3);\n\n  /** Use a single color for all bars. */\n  color = input<string>('');\n\n  /** Formats value labels and axis ticks. Defaults to a float-safe `String(value)`. */\n  formatValue = input<ChartValueFormatter>(formatChartValue);\n\n  /**\n   * Accessible name of the chart. Defaults to a generated summary that lists\n   * every bar's label and value, so assistive technology hears the data and\n   * not just \"Bar chart\".\n   */\n  ariaLabel = input<string>('');\n\n  // Layout constants\n  private readonly PADDING_LEFT = 40;\n  private readonly PADDING_RIGHT = 10;\n  private readonly PADDING_TOP = 10;\n  private readonly PADDING_BOTTOM = 30;\n\n  protected readonly effectiveWidth = computed(\n    () => this._containerWidth() || this.width() || DEFAULT_WIDTH\n  );\n\n  protected readonly viewBox = computed(\n    () => `0 0 ${this.effectiveWidth()} ${this.height()}`\n  );\n\n  protected readonly isVertical = computed(() => this.orientation() === 'vertical');\n\n  private readonly plot = computed(() => {\n    const w = this.effectiveWidth();\n    const h = this.height();\n    return {\n      x: this.PADDING_LEFT,\n      y: this.PADDING_TOP,\n      w: w - this.PADDING_LEFT - this.PADDING_RIGHT,\n      h: h - this.PADDING_TOP - this.PADDING_BOTTOM,\n    };\n  });\n\n  /**\n   * One scale for grid *and* bars: bounds are nice multiples of the tick step,\n   * always include zero, and extend below zero when the data does — so the top\n   * tick is the value at the plot edge and negative bars hang off the baseline.\n   */\n  protected readonly scale = computed(() => {\n    const values = (this.data() ?? []).map((i) => toFinite(i.value));\n    return niceScale(Math.min(0, ...values), Math.max(0, ...values), 4);\n  });\n\n  /** Maps a data value to a pixel position along the value axis. */\n  private valueToPos(value: number): number {\n    const { min, max } = this.scale();\n    const p = this.plot();\n    const frac = (value - min) / (max - min || 1);\n    return this.isVertical() ? p.y + p.h - frac * p.h : p.x + frac * p.w;\n  }\n\n  protected readonly gridLines = computed(() => {\n    if (!this.showGrid() || !this.data()?.length) return [];\n    const fmt = this.formatValue();\n    return this.scale().ticks.map((tick) => ({\n      pos: this.valueToPos(tick),\n      label: fmt(tick),\n    }));\n  });\n\n  protected readonly bars = computed(() => {\n    const d = this.data();\n    if (!d || d.length === 0) return [];\n\n    const isVertical = this.isVertical();\n    const p = this.plot();\n    const gap = this.barGap();\n    const singleColor = this.color();\n    const fmt = this.formatValue();\n    const zero = this.valueToPos(0);\n    const h = this.height();\n\n    if (isVertical) {\n      const totalBarWidth = p.w / d.length;\n      const barWidth = totalBarWidth * (1 - gap);\n      const barOffset = (totalBarWidth - barWidth) / 2;\n\n      return d.map((item, i) => {\n        const value = toFinite(item.value);\n        const end = this.valueToPos(value);\n        const y = Math.min(zero, end);\n        const barH = Math.abs(end - zero);\n        return {\n          x: p.x + i * totalBarWidth + barOffset,\n          y,\n          width: barWidth,\n          height: barH,\n          color: singleColor || item.color || chartColor(i),\n          label: item.label || '',\n          value,\n          valueText: fmt(value),\n          labelX: p.x + i * totalBarWidth + totalBarWidth / 2,\n          labelY: h - this.PADDING_BOTTOM + 16,\n          valueX: p.x + i * totalBarWidth + totalBarWidth / 2,\n          // Above a positive bar, below a negative one.\n          valueY: value >= 0 ? y - 6 : y + barH + 12,\n          valueAnchor: 'middle',\n        };\n      });\n    } else {\n      const totalBarHeight = p.h / d.length;\n      const barHeight = totalBarHeight * (1 - gap);\n      const barOffset = (totalBarHeight - barHeight) / 2;\n\n      return d.map((item, i) => {\n        const value = toFinite(item.value);\n        const end = this.valueToPos(value);\n        const x = Math.min(zero, end);\n        const barW = Math.abs(end - zero);\n        return {\n          x,\n          y: p.y + i * totalBarHeight + barOffset,\n          width: barW,\n          height: barHeight,\n          color: singleColor || item.color || chartColor(i),\n          label: item.label || '',\n          value,\n          valueText: fmt(value),\n          labelX: p.x - 6,\n          labelY: p.y + i * totalBarHeight + totalBarHeight / 2,\n          // Right of a positive bar, left of a negative one.\n          valueX: value >= 0 ? x + barW + 6 : x - 6,\n          valueY: p.y + i * totalBarHeight + totalBarHeight / 2,\n          valueAnchor: value >= 0 ? 'start' : 'end',\n        };\n      });\n    }\n  });\n\n  /**\n   * Value axis along the plot edge plus the zero baseline, which sits inside\n   * the plot when the data goes negative.\n   */\n  protected readonly axisLine = computed(() => {\n    const p = this.plot();\n    const isVertical = this.isVertical();\n    const zero = this.data()?.length ? this.valueToPos(0) : (isVertical ? p.y + p.h : p.x);\n    return {\n      x1: isVertical ? p.x : zero,\n      y1: p.y,\n      x2: isVertical ? p.x : zero,\n      y2: p.y + p.h,\n      bx1: p.x,\n      by1: isVertical ? zero : p.y + p.h,\n      bx2: p.x + p.w,\n      by2: isVertical ? zero : p.y + p.h,\n    };\n  });\n\n  /** Bottom edge of the plot — where horizontal-orientation tick labels sit. */\n  protected readonly plotBottom = computed(() => this.plot().y + this.plot().h);\n\n  protected readonly effectiveAriaLabel = computed(() => {\n    const explicit = this.ariaLabel();\n    if (explicit) return explicit;\n    const d = this.data() ?? [];\n    if (!d.length) return 'Bar chart: no data';\n    const fmt = this.formatValue();\n    return `Bar chart: ${d\n      .map((item, i) => `${item.label || `Bar ${i + 1}`} ${fmt(toFinite(item.value))}`)\n      .join(', ')}`;\n  });\n}\n","<svg\n  width=\"100%\"\n  [attr.height]=\"height()\"\n  [attr.viewBox]=\"viewBox()\"\n  role=\"img\"\n  [attr.aria-label]=\"effectiveAriaLabel()\"\n  class=\"lc-bar-chart\"\n>\n  <title>{{ effectiveAriaLabel() }}</title>\n\n  <!-- Grid lines -->\n  @if (showGrid()) {\n    @for (line of gridLines(); track line.pos) {\n      @if (isVertical()) {\n        <line\n          [attr.x1]=\"axisLine().bx1\"\n          [attr.y1]=\"line.pos\"\n          [attr.x2]=\"axisLine().bx2\"\n          [attr.y2]=\"line.pos\"\n          class=\"lc-bar-chart__grid-line\"\n        />\n        <text\n          [attr.x]=\"axisLine().x1 - 6\"\n          [attr.y]=\"line.pos\"\n          text-anchor=\"end\"\n          dominant-baseline=\"central\"\n          class=\"lc-bar-chart__grid-label\"\n        >\n          {{ line.label }}\n        </text>\n      } @else {\n        <line\n          [attr.x1]=\"line.pos\"\n          [attr.y1]=\"axisLine().y1\"\n          [attr.x2]=\"line.pos\"\n          [attr.y2]=\"axisLine().y2\"\n          class=\"lc-bar-chart__grid-line\"\n        />\n        <text\n          [attr.x]=\"line.pos\"\n          [attr.y]=\"plotBottom() + 12\"\n          text-anchor=\"middle\"\n          class=\"lc-bar-chart__grid-label\"\n        >\n          {{ line.label }}\n        </text>\n      }\n    }\n  }\n\n  <!-- Axes -->\n  <line\n    [attr.x1]=\"axisLine().x1\"\n    [attr.y1]=\"axisLine().y1\"\n    [attr.x2]=\"axisLine().x2\"\n    [attr.y2]=\"axisLine().y2\"\n    class=\"lc-bar-chart__axis\"\n  />\n  <line\n    [attr.x1]=\"axisLine().bx1\"\n    [attr.y1]=\"axisLine().by1\"\n    [attr.x2]=\"axisLine().bx2\"\n    [attr.y2]=\"axisLine().by2\"\n    class=\"lc-bar-chart__axis\"\n  />\n\n  <!-- Bars -->\n  @for (bar of bars(); track $index) {\n    <rect\n      [attr.x]=\"bar.x\"\n      [attr.y]=\"bar.y\"\n      [attr.width]=\"bar.width\"\n      [attr.height]=\"bar.height\"\n      [attr.fill]=\"bar.color\"\n      rx=\"2\"\n      class=\"lc-bar-chart__bar\"\n    />\n\n    @if (showValues()) {\n      <text\n        [attr.x]=\"bar.valueX\"\n        [attr.y]=\"bar.valueY\"\n        [attr.text-anchor]=\"bar.valueAnchor\"\n        [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n        class=\"lc-bar-chart__value\"\n      >\n        {{ bar.valueText }}\n      </text>\n    }\n\n    @if (showLabels()) {\n      <text\n        [attr.x]=\"bar.labelX\"\n        [attr.y]=\"bar.labelY\"\n        [attr.text-anchor]=\"isVertical() ? 'middle' : 'end'\"\n        [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n        class=\"lc-bar-chart__label\"\n      >\n        {{ bar.label }}\n      </text>\n    }\n  }\n</svg>\n"],"mappings":"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"}