@ojiepermana/angular 22.1.11 → 22.1.12

package/fesm2022/ojiepermana-angular-chart-bar.mjs

@@ -1,7 +1,726 @@
-export * from '@ojiepermana/angular-chart/bar';
+import * as i0 from '@angular/core';
+import { inject, input, output, computed, Component } from '@angular/core';
+import { resolveSeriesColor, seriesColorVar, readNumber, zeroBaselineDomain, ChartContext, CartesianContext, ChartThemeRadius, resolveChartStyle, ChartThemeSpace, resolveChartMargin, DEFAULT_CARTESIAN_MARGIN_UNITS, setupCartesianChart, ChartRovingFocus, ChartMarkFocus, ChartDataTable } from '@ojiepermana/angular/chart/core';
+import { scaleBand, scaleLinear } from 'd3-scale';
+import { min, max } from 'd3-array';
+import { stack } from 'd3-shape';
+import { ChartPointerTracker } from '@ojiepermana/angular/chart/primitives';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+function resolveBarColor(datum, seriesKey, colorKey) {
+    return resolveSeriesColor(colorKey ? datum[colorKey] : undefined, seriesColorVar(seriesKey));
+}
+function isActiveBar(datum, activeKey, activeValue) {
+    if (!activeKey || activeValue === undefined) {
+        return false;
+    }
+    const value = datum[activeKey];
+    if (typeof value === 'number' && typeof activeValue === 'number') {
+        return value === activeValue;
+    }
+    return String(value ?? '') === String(activeValue);
+}
+/** Build all bar rectangles for the given config. */
+function computeBarLayout(input) {
+    const { data, xKey, seriesKeys, variant, orientation, innerWidth, innerHeight, bandPadding, groupPadding, colorKey, activeKey, activeValue, } = input;
+    const categories = data.map((d) => String(d[xKey] ?? ''));
+    const isVertical = orientation === 'vertical';
+    const categoryScale = scaleBand()
+        .domain(categories)
+        .range(isVertical ? [0, innerWidth] : [0, innerHeight])
+        .padding(bandPadding);
+    const valueScale = scaleLinear();
+    if (variant === 'stacked' && seriesKeys.length > 0) {
+        return stackedLayout({
+            data,
+            xKey,
+            seriesKeys,
+            orientation,
+            innerWidth,
+            innerHeight,
+            categoryScale,
+            valueScale,
+            categories,
+            colorKey,
+            activeKey,
+            activeValue,
+        });
+    }
+    return groupedLayout({
+        data,
+        xKey,
+        seriesKeys,
+        orientation,
+        innerWidth,
+        innerHeight,
+        categoryScale,
+        valueScale,
+        groupPadding,
+        categories,
+        colorKey,
+        activeKey,
+        activeValue,
+    });
+}
+function groupedLayout(input) {
+    const { data, seriesKeys, orientation, innerWidth, innerHeight, categoryScale, valueScale, groupPadding, categories, colorKey, activeKey, activeValue, } = input;
+    const isVertical = orientation === 'vertical';
+    const minValue = min(data, (d) => min(seriesKeys, (k) => readNumber(d, k)) ?? 0) ?? 0;
+    const maxValue = max(data, (d) => max(seriesKeys, (k) => readNumber(d, k)) ?? 0) ?? 0;
+    const [domainMin, domainMax] = zeroBaselineDomain(minValue, maxValue);
+    valueScale
+        .domain([domainMin, domainMax])
+        .nice()
+        .range(isVertical ? [innerHeight, 0] : [0, innerWidth]);
+    const baseline = valueScale(0);
+    const subScale = scaleBand()
+        .domain(seriesKeys)
+        .range([0, categoryScale.bandwidth()])
+        .padding(groupPadding);
+    const bars = [];
+    data.forEach((datum, datumIndex) => {
+        const category = categories[datumIndex];
+        const bandStart = categoryScale(category) ?? 0;
+        seriesKeys.forEach((seriesKey) => {
+            const value = readNumber(datum, seriesKey);
+            const sub = subScale(seriesKey) ?? 0;
+            const scaledValue = valueScale(value);
+            const color = resolveBarColor(datum, seriesKey, colorKey);
+            const active = isActiveBar(datum, activeKey, activeValue);
+            const rect = isVertical
+                ? {
+                    key: `${datumIndex}-${seriesKey}`,
+                    seriesKey,
+                    datumIndex,
+                    category,
+                    value,
+                    x: bandStart + sub,
+                    y: Math.min(scaledValue, baseline),
+                    width: subScale.bandwidth(),
+                    height: Math.abs(baseline - scaledValue),
+                    color,
+                    active,
+                }
+                : {
+                    key: `${datumIndex}-${seriesKey}`,
+                    seriesKey,
+                    datumIndex,
+                    category,
+                    value,
+                    x: Math.min(scaledValue, baseline),
+                    y: bandStart + sub,
+                    width: Math.abs(baseline - scaledValue),
+                    height: subScale.bandwidth(),
+                    color,
+                    active,
+                };
+            bars.push(rect);
+        });
+    });
+    return { bars, categoryScale, valueScale, categories };
+}
+function stackedLayout(input) {
+    const { data, seriesKeys, orientation, innerWidth, innerHeight, categoryScale, valueScale, categories, colorKey, activeKey, activeValue, } = input;
+    const isVertical = orientation === 'vertical';
+    const normalized = data.map((d) => {
+        const out = {};
+        for (const k of seriesKeys) {
+            out[k] = readNumber(d, k);
+        }
+        return out;
+    });
+    const series = stack().keys(seriesKeys)(normalized);
+    // Every layer is measured, not just the last one: a stack that runs below the
+    // baseline puts its extreme on whichever layer carries the negative values.
+    const minTotal = min(series, (layer) => min(layer, (p) => Math.min(p[0], p[1]))) ?? 0;
+    const maxTotal = max(series, (layer) => max(layer, (p) => Math.max(p[0], p[1]))) ?? 0;
+    const [domainMin, domainMax] = zeroBaselineDomain(minTotal, maxTotal);
+    valueScale
+        .domain([domainMin, domainMax])
+        .nice()
+        .range(isVertical ? [innerHeight, 0] : [0, innerWidth]);
+    const bars = [];
+    series.forEach((layer) => {
+        const seriesKey = layer.key;
+        layer.forEach((point, datumIndex) => {
+            const [lower, upper] = point;
+            const value = upper - lower;
+            const category = categories[datumIndex];
+            const bandStart = categoryScale(category) ?? 0;
+            const color = resolveBarColor(data[datumIndex], seriesKey, colorKey);
+            const active = isActiveBar(data[datumIndex], activeKey, activeValue);
+            // A negative segment stacks downward, so `upper` lands on the far side of
+            // the baseline from `lower`. Taking the near edge and the absolute span
+            // keeps the rectangle drawable whichever way round the pair sits.
+            const lowerCoord = valueScale(lower);
+            const upperCoord = valueScale(upper);
+            const span = Math.abs(upperCoord - lowerCoord);
+            const rect = isVertical
+                ? {
+                    key: `${datumIndex}-${seriesKey}`,
+                    seriesKey,
+                    datumIndex,
+                    category,
+                    value,
+                    x: bandStart,
+                    y: Math.min(lowerCoord, upperCoord),
+                    width: categoryScale.bandwidth(),
+                    height: span,
+                    color,
+                    active,
+                }
+                : {
+                    key: `${datumIndex}-${seriesKey}`,
+                    seriesKey,
+                    datumIndex,
+                    category,
+                    value,
+                    x: Math.min(lowerCoord, upperCoord),
+                    y: bandStart,
+                    width: span,
+                    height: categoryScale.bandwidth(),
+                    color,
+                    active,
+                };
+            bars.push(rect);
+        });
+    });
+    return { bars, categoryScale, valueScale, categories };
+}
+
+/** Hard cap so degenerate inputs (tiny `dotSize`) cannot explode the DOM. */
+const MAX_ROWS_PER_COLUMN = 400;
+const EDGE_TOLERANCE = 0.5;
+/**
+ * Build the dot-matrix cells for the `dot` bar style.
+ *
+ * Cells tile a global grid anchored at the value baseline, so stacked
+ * segments snap to the same rows and never overlap. A bar fills every cell
+ * whose center lies inside its value range; bars too short to cover a center
+ * still claim the cell nearest their midpoint when it is free.
+ */
+function computeBarDotCells(input) {
+    const { bars, orientation, innerWidth, innerHeight, baseline, dotSize, dotGap } = input;
+    const isVertical = orientation === 'vertical';
+    const innerLength = isVertical ? innerHeight : innerWidth;
+    const track = [];
+    const values = [];
+    if (innerLength <= 0 || bars.length === 0) {
+        return { track, values };
+    }
+    const columns = groupColumns(bars, isVertical);
+    columns.forEach((column, columnIndex) => {
+        const cellLength = dotSize ?? column.thickness;
+        const step = cellLength + dotGap;
+        if (cellLength <= 0 || step <= EDGE_TOLERANCE) {
+            return;
+        }
+        // Signed row index r anchored at the baseline: r = 0 is the first cell on
+        // the positive-value side, negative r tiles the negative side.
+        // `rowStart(r)` is the cell's lower main-axis coordinate (top edge for
+        // vertical, left edge for horizontal); `rowAt(c)` is the fractional row
+        // whose cell center sits at coordinate c.
+        const rowStart = (r) => isVertical ? baseline - r * step - cellLength : baseline + r * step;
+        const rowAt = (c) => isVertical ? (baseline - c - cellLength / 2) / step : (c - baseline - cellLength / 2) / step;
+        // Rows whose cell lies fully inside the plot area.
+        const rMin = Math.ceil(isVertical
+            ? (baseline - innerLength - EDGE_TOLERANCE) / step
+            : (-baseline - EDGE_TOLERANCE) / step);
+        let rMax = Math.floor(isVertical
+            ? (baseline - cellLength + EDGE_TOLERANCE) / step
+            : (innerLength - baseline - cellLength + EDGE_TOLERANCE) / step);
+        if (rMax - rMin + 1 > MAX_ROWS_PER_COLUMN) {
+            rMax = rMin + MAX_ROWS_PER_COLUMN - 1;
+        }
+        const cellRect = (r) => isVertical
+            ? { x: column.pos, y: rowStart(r), width: column.thickness, height: cellLength }
+            : { x: rowStart(r), y: column.pos, width: cellLength, height: column.thickness };
+        for (let r = rMin; r <= rMax; r++) {
+            track.push({ key: `${columnIndex}:${r}`, ...cellRect(r) });
+        }
+        const usedRows = new Set();
+        for (const bar of column.bars) {
+            const barLength = isVertical ? bar.height : bar.width;
+            if (barLength <= EDGE_TOLERANCE) {
+                continue;
+            }
+            const barStart = isVertical ? bar.y : bar.x;
+            const barEnd = barStart + barLength;
+            // Rows whose cell center falls inside [barStart, barEnd] (± tolerance).
+            const rA = rowAt(barStart);
+            const rB = rowAt(barEnd);
+            const first = Math.max(Math.ceil(Math.min(rA, rB) - EDGE_TOLERANCE / step), rMin);
+            const last = Math.min(Math.floor(Math.max(rA, rB) + EDGE_TOLERANCE / step), rMax);
+            const rows = [];
+            for (let r = first; r <= last; r++) {
+                rows.push(r);
+            }
+            // Guarantee visibility: a non-zero bar shorter than one cell claims the
+            // row nearest its midpoint when that row is still free.
+            if (rows.length === 0) {
+                const r = Math.round(rowAt(barStart + barLength / 2));
+                if (r >= rMin && r <= rMax && !usedRows.has(r)) {
+                    rows.push(r);
+                }
+            }
+            for (const r of rows) {
+                if (usedRows.has(r)) {
+                    continue;
+                }
+                usedRows.add(r);
+                values.push({
+                    key: `${bar.key}:${r}`,
+                    ...cellRect(r),
+                    seriesKey: bar.seriesKey,
+                    datumIndex: bar.datumIndex,
+                    color: bar.color,
+                    active: bar.active,
+                });
+            }
+        }
+    });
+    return { track, values };
+}
+/** Group bars sharing the same cross-axis band into one cell column. */
+function groupColumns(bars, isVertical) {
+    const map = new Map();
+    for (const bar of bars) {
+        const pos = isVertical ? bar.x : bar.y;
+        const thickness = isVertical ? bar.width : bar.height;
+        if (thickness <= 0) {
+            continue;
+        }
+        const key = `${pos.toFixed(2)}:${thickness.toFixed(2)}`;
+        const existing = map.get(key);
+        if (existing) {
+            existing.bars.push(bar);
+        }
+        else {
+            map.set(key, { pos, thickness, bars: [bar] });
+        }
+    }
+    return [...map.values()];
+}
+
+const defaultBarValueFormatter = (value) => `${value}`;
+/**
+ * Bar chart — composable within `<Chart>`.
+ *
+ * Layout variants (via inputs):
+ * - `orientation`: `'vertical'` (default) or `'horizontal'`
+ * - `variant`:     `'grouped'`  (default) or `'stacked'`
+ * - `styles`:      `'base'`     (default) or `'dot'` (dot-matrix cells)
+ */
+class BarChart {
+    root = inject(ChartContext);
+    cart = inject(CartesianContext);
+    themeRadius = inject(ChartThemeRadius);
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    xKey = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []));
+    orientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    variant = input('grouped', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /**
+     * Presentational style of the chart.
+     *
+     * Replaces `styles`, which read like a CSS styles bag rather than a single
+     * variant. Named `styleVariant` and not `variant` because `ChartBar` already
+     * publishes a `variant` input for its grouped versus stacked axis, and one
+     * name cannot mean two things across the family.
+     */
+    styleVariant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "styleVariant" }] : /* istanbul ignore next */ []));
+    /**
+     * @deprecated Use `styleVariant`. Still fully supported; when both are bound,
+     *   `styleVariant` wins. Due for removal in the next major.
+     */
+    styles = input('base', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []));
+    /** The style actually in effect. Bind this, never `styles()`. */
+    chartStyle = resolveChartStyle(this.styleVariant, this.styles);
+    themeSpace = inject(ChartThemeSpace);
+    /**
+     * Plot gutters. Leave it unset and they follow the theme-space density
+     * axis; set it and your numbers win, unchanged, whatever the axis says.
+     */
+    margin = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    /** The margin actually in effect. Bind this, never `margin()`. */
+    plotMargin = resolveChartMargin(this.margin, DEFAULT_CARTESIAN_MARGIN_UNITS, this.themeSpace);
+    bandPadding = input(0.2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bandPadding" }] : /* istanbul ignore next */ []));
+    groupPadding = input(0.05, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupPadding" }] : /* istanbul ignore next */ []));
+    cornerRadius = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cornerRadius" }] : /* istanbul ignore next */ []));
+    colorKey = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colorKey" }] : /* istanbul ignore next */ []));
+    activeKey = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []));
+    activeValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeValue" }] : /* istanbul ignore next */ []));
+    showValueLabels = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showValueLabels" }] : /* istanbul ignore next */ []));
+    valueLabelFormat = input(defaultBarValueFormatter, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueLabelFormat" }] : /* istanbul ignore next */ []));
+    /** Cell length along the value axis for the `dot` style; defaults to the bar thickness. */
+    dotSize = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dotSize" }] : /* istanbul ignore next */ []));
+    /** Gap between consecutive cells along the value axis for the `dot` style. */
+    dotGap = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dotGap" }] : /* istanbul ignore next */ []));
+    /** Corner radius of each `dot` cell. */
+    dotCornerRadius = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dotCornerRadius" }] : /* istanbul ignore next */ []));
+    /** Render the faint full-height cell track behind the `dot` values. */
+    showDotTrack = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDotTrack" }] : /* istanbul ignore next */ []));
+    barClick = output();
+    /**
+     * The shared cartesian scaffolding: geometry, the layout effect, and the click
+     * plus active-point plus aria-label handlers. No `viewport` here, so the bar
+     * chart always renders its whole dataset and `resolveDatumIndex` is the
+     * identity.
+     *
+     * Declared before `layout` because the layout computed reads its geometry.
+     */
+    cx = setupCartesianChart({
+        data: () => this.data(),
+        margin: () => this.plotMargin(),
+        cartesian: { context: this.cart, orientation: () => this.orientation() },
+        publishLayout: () => {
+            const layout = this.layout();
+            this.cart.categoryScale.set(layout.categoryScale);
+            this.cart.valueScale.set(layout.valueScale);
+            this.cart.categories.set(layout.categories);
+        },
+        click: {
+            emit: (event) => this.barClick.emit(event),
+            payload: (bar, datumIndex, datum) => ({
+                seriesKey: bar.seriesKey,
+                datumIndex,
+                category: bar.category,
+                value: bar.value,
+                datum,
+            }),
+        },
+        ariaLabel: (bar, label) => `${label} in ${bar.category}: ${bar.value}`,
+    });
+    /** Bar corner radius; an unset input follows the live theme-radius axis. */
+    resolvedCornerRadius = computed(() => this.cornerRadius() ?? this.themeRadius.px(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedCornerRadius" }] : /* istanbul ignore next */ []));
+    /** Dot-cell corner radius; an unset input follows the theme-radius axis (smaller, SVG clamps to half the cell). */
+    resolvedDotCornerRadius = computed(() => this.dotCornerRadius() ?? Math.min(this.themeRadius.px() * 0.5, 4), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDotCornerRadius" }] : /* istanbul ignore next */ []));
+    layout = computed(() => computeBarLayout({
+        data: this.data(),
+        xKey: this.xKey(),
+        seriesKeys: this.root.visibleSeriesKeys(),
+        variant: this.variant(),
+        orientation: this.orientation(),
+        innerWidth: this.cx.innerWidth(),
+        innerHeight: this.cx.innerHeight(),
+        bandPadding: this.bandPadding(),
+        groupPadding: this.groupPadding(),
+        colorKey: this.colorKey(),
+        activeKey: this.activeKey(),
+        activeValue: this.activeValue(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    bars = computed(() => this.layout().bars, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
+    dotLayout = computed(() => {
+        if (this.chartStyle() !== 'dot') {
+            return null;
+        }
+        const layout = this.layout();
+        return computeBarDotCells({
+            bars: layout.bars,
+            orientation: this.orientation(),
+            innerWidth: this.cx.innerWidth(),
+            innerHeight: this.cx.innerHeight(),
+            baseline: layout.valueScale(0),
+            dotSize: this.dotSize(),
+            dotGap: this.dotGap(),
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dotLayout" }] : /* istanbul ignore next */ []));
+    dotTrackCells = computed(() => this.showDotTrack() ? (this.dotLayout()?.track ?? []) : [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dotTrackCells" }] : /* istanbul ignore next */ []));
+    dotValueCells = computed(() => this.dotLayout()?.values ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dotValueCells" }] : /* istanbul ignore next */ []));
+    ariaSummary = computed(() => {
+        const keys = this.root.visibleSeriesKeys();
+        const n = this.data().length;
+        return `Bar chart, ${n} categories, ${keys.length} series: ${keys.join(', ')}.`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
+    visibleSeriesKeys = computed(() => this.root.visibleSeriesKeys(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleSeriesKeys" }] : /* istanbul ignore next */ []));
+    dataColumns = computed(() => [this.xKey(), ...this.visibleSeriesKeys()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataColumns" }] : /* istanbul ignore next */ []));
+    barOpacity(bar) {
+        return this.emphasisOpacity(bar.active);
+    }
+    dotCellOpacity(cell) {
+        return this.emphasisOpacity(cell.active);
+    }
+    /** In `dot` style the bar rect stays as an invisible interaction target. */
+    barFill(bar) {
+        return this.chartStyle() === 'dot' ? 'transparent' : bar.color;
+    }
+    emphasisOpacity(active) {
+        return this.activeKey() && this.activeValue() !== undefined ? (active ? 1 : 0.42) : 1;
+    }
+    formatValueLabel(bar) {
+        return this.valueLabelFormat()(bar.value);
+    }
+    barLabelX(bar) {
+        if (this.orientation() === 'vertical') {
+            return bar.x + bar.width / 2;
+        }
+        return bar.value >= 0 ? bar.x + bar.width + 6 : bar.x - 6;
+    }
+    barLabelY(bar) {
+        if (this.orientation() === 'vertical') {
+            return bar.value >= 0 ? bar.y - 8 : bar.y + bar.height + 10;
+        }
+        return bar.y + bar.height / 2;
+    }
+    barLabelAnchor(bar) {
+        if (this.orientation() === 'vertical') {
+            return 'middle';
+        }
+        return bar.value >= 0 ? 'start' : 'end';
+    }
+    onKeydown(event, index) {
+        const key = event.key;
+        let targetIndex = -1;
+        if (key === 'ArrowRight' || key === 'ArrowDown') {
+            targetIndex = index + 1;
+        }
+        else if (key === 'ArrowLeft' || key === 'ArrowUp') {
+            targetIndex = index - 1;
+        }
+        if (targetIndex >= 0 && targetIndex < this.bars().length) {
+            event.preventDefault();
+            const svgEl = event.currentTarget;
+            const parent = svgEl.parentElement;
+            if (parent) {
+                const rects = parent.querySelectorAll('.chart-bar');
+                const targetRect = rects[targetIndex];
+                if (targetRect) {
+                    targetRect.focus();
+                }
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: BarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: BarChart, isStandalone: true, selector: "ChartBar", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, xKey: { classPropertyName: "xKey", publicName: "xKey", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, styleVariant: { classPropertyName: "styleVariant", publicName: "styleVariant", isSignal: true, isRequired: false, transformFunction: null }, styles: { classPropertyName: "styles", publicName: "styles", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, bandPadding: { classPropertyName: "bandPadding", publicName: "bandPadding", isSignal: true, isRequired: false, transformFunction: null }, groupPadding: { classPropertyName: "groupPadding", publicName: "groupPadding", isSignal: true, isRequired: false, transformFunction: null }, cornerRadius: { classPropertyName: "cornerRadius", publicName: "cornerRadius", isSignal: true, isRequired: false, transformFunction: null }, colorKey: { classPropertyName: "colorKey", publicName: "colorKey", isSignal: true, isRequired: false, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, activeValue: { classPropertyName: "activeValue", publicName: "activeValue", isSignal: true, isRequired: false, transformFunction: null }, showValueLabels: { classPropertyName: "showValueLabels", publicName: "showValueLabels", isSignal: true, isRequired: false, transformFunction: null }, valueLabelFormat: { classPropertyName: "valueLabelFormat", publicName: "valueLabelFormat", isSignal: true, isRequired: false, transformFunction: null }, dotSize: { classPropertyName: "dotSize", publicName: "dotSize", isSignal: true, isRequired: false, transformFunction: null }, dotGap: { classPropertyName: "dotGap", publicName: "dotGap", isSignal: true, isRequired: false, transformFunction: null }, dotCornerRadius: { classPropertyName: "dotCornerRadius", publicName: "dotCornerRadius", isSignal: true, isRequired: false, transformFunction: null }, showDotTrack: { classPropertyName: "showDotTrack", publicName: "showDotTrack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { barClick: "barClick" }, host: { properties: { "attr.data-style": "chartStyle()" }, classAttribute: "relative block h-full w-full" }, providers: [CartesianContext], ngImport: i0, template: `
+    <svg:svg
+      ChartPointerTracker
+      ChartRovingFocus
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="cx.viewBox()"
+      preserveAspectRatio="none"
+      role="img"
+      [attr.aria-label]="ariaSummary()"
+    >
+      <svg:g [attr.transform]="cx.innerTransform()">
+        <ng-content select="svg\\:g[ChartGrid]" />
+        <svg:g class="chart-bars">
+          @if (chartStyle() === 'dot') {
+            <svg:g class="chart-bar-dots" aria-hidden="true">
+              @for (cell of dotTrackCells(); track cell.key) {
+                <svg:rect
+                  class="chart-bar-dot-track"
+                  [attr.x]="cell.x"
+                  [attr.y]="cell.y"
+                  [attr.width]="cell.width"
+                  [attr.height]="cell.height"
+                  [attr.rx]="resolvedDotCornerRadius()"
+                  [attr.ry]="resolvedDotCornerRadius()"
+                  fill="hsl(var(--muted))"
+                />
+              }
+              @for (cell of dotValueCells(); track cell.key) {
+                <svg:rect
+                  class="chart-bar-dot-value"
+                  [attr.x]="cell.x"
+                  [attr.y]="cell.y"
+                  [attr.width]="cell.width"
+                  [attr.height]="cell.height"
+                  [attr.rx]="resolvedDotCornerRadius()"
+                  [attr.ry]="resolvedDotCornerRadius()"
+                  [attr.fill]="cell.color"
+                  [attr.opacity]="dotCellOpacity(cell)"
+                />
+              }
+            </svg:g>
+          }
+          @for (bar of bars(); track bar.key; let idx = $index) {
+            <svg:rect
+              ChartMarkFocus
+              class="chart-bar cursor-pointer transition-opacity hover:opacity-80"
+              [attr.x]="bar.x"
+              [attr.y]="bar.y"
+              [attr.width]="bar.width"
+              [attr.height]="bar.height"
+              [attr.rx]="resolvedCornerRadius()"
+              [attr.ry]="resolvedCornerRadius()"
+              [attr.fill]="barFill(bar)"
+              [attr.opacity]="barOpacity(bar)"
+              [attr.stroke]="bar.active ? 'hsl(var(--foreground))' : null"
+              [attr.stroke-width]="bar.active ? 1.5 : null"
+              [attr.aria-label]="cx.pointAriaLabel(bar)"
+              role="img"
+              tabindex="0"
+              (focus)="cx.setActivePoint($event, bar)"
+              (blur)="cx.clearActivePoint()"
+              (click)="cx.emitClick(bar)"
+              (keydown.enter)="cx.emitClick(bar)"
+              (keydown.space)="cx.emitClick(bar); $event.preventDefault()"
+              (keydown)="onKeydown($event, idx)"
+            />
+            @if (showValueLabels() && bar.height > 0 && bar.width > 0) {
+              <svg:text
+                class="chart-bar-value pointer-events-none fill-muted-foreground text-2xs"
+                [attr.x]="barLabelX(bar)"
+                [attr.y]="barLabelY(bar)"
+                [attr.text-anchor]="barLabelAnchor(bar)"
+                dominant-baseline="middle"
+              >
+                {{ formatValueLabel(bar) }}
+              </svg:text>
+            }
+          }
+        </svg:g>
+        <ng-content select="svg\\:g[ChartAxisX]" />
+        <ng-content select="svg\\:g[ChartAxisY]" />
+        <ng-content select="svg\\:g[ChartCrosshair]" />
+        <ng-content />
+      </svg:g>
+    </svg:svg>
+    <ng-content select="ChartTooltip" />
+    <ng-content select="ChartLegend" />
+
+    <ChartDataTable
+      [data]="data()"
+      [columns]="dataColumns()"
+      [rowHeaderKey]="xKey()"
+      [label]="ariaSummary()"
+    />
+  `, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[ChartPointerTracker]" }, { kind: "directive", type: ChartRovingFocus, selector: "svg[ChartRovingFocus]" }, { kind: "directive", type: ChartMarkFocus, selector: "[ChartMarkFocus]" }, { kind: "component", type: ChartDataTable, selector: "ChartDataTable", inputs: ["data", "columns", "label", "rowHeaderKey"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: BarChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ChartBar',
+                    providers: [CartesianContext],
+                    imports: [ChartPointerTracker, ChartRovingFocus, ChartMarkFocus, ChartDataTable],
+                    host: { class: 'relative block h-full w-full', '[attr.data-style]': 'chartStyle()' },
+                    template: `
+    <svg:svg
+      ChartPointerTracker
+      ChartRovingFocus
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="cx.viewBox()"
+      preserveAspectRatio="none"
+      role="img"
+      [attr.aria-label]="ariaSummary()"
+    >
+      <svg:g [attr.transform]="cx.innerTransform()">
+        <ng-content select="svg\\:g[ChartGrid]" />
+        <svg:g class="chart-bars">
+          @if (chartStyle() === 'dot') {
+            <svg:g class="chart-bar-dots" aria-hidden="true">
+              @for (cell of dotTrackCells(); track cell.key) {
+                <svg:rect
+                  class="chart-bar-dot-track"
+                  [attr.x]="cell.x"
+                  [attr.y]="cell.y"
+                  [attr.width]="cell.width"
+                  [attr.height]="cell.height"
+                  [attr.rx]="resolvedDotCornerRadius()"
+                  [attr.ry]="resolvedDotCornerRadius()"
+                  fill="hsl(var(--muted))"
+                />
+              }
+              @for (cell of dotValueCells(); track cell.key) {
+                <svg:rect
+                  class="chart-bar-dot-value"
+                  [attr.x]="cell.x"
+                  [attr.y]="cell.y"
+                  [attr.width]="cell.width"
+                  [attr.height]="cell.height"
+                  [attr.rx]="resolvedDotCornerRadius()"
+                  [attr.ry]="resolvedDotCornerRadius()"
+                  [attr.fill]="cell.color"
+                  [attr.opacity]="dotCellOpacity(cell)"
+                />
+              }
+            </svg:g>
+          }
+          @for (bar of bars(); track bar.key; let idx = $index) {
+            <svg:rect
+              ChartMarkFocus
+              class="chart-bar cursor-pointer transition-opacity hover:opacity-80"
+              [attr.x]="bar.x"
+              [attr.y]="bar.y"
+              [attr.width]="bar.width"
+              [attr.height]="bar.height"
+              [attr.rx]="resolvedCornerRadius()"
+              [attr.ry]="resolvedCornerRadius()"
+              [attr.fill]="barFill(bar)"
+              [attr.opacity]="barOpacity(bar)"
+              [attr.stroke]="bar.active ? 'hsl(var(--foreground))' : null"
+              [attr.stroke-width]="bar.active ? 1.5 : null"
+              [attr.aria-label]="cx.pointAriaLabel(bar)"
+              role="img"
+              tabindex="0"
+              (focus)="cx.setActivePoint($event, bar)"
+              (blur)="cx.clearActivePoint()"
+              (click)="cx.emitClick(bar)"
+              (keydown.enter)="cx.emitClick(bar)"
+              (keydown.space)="cx.emitClick(bar); $event.preventDefault()"
+              (keydown)="onKeydown($event, idx)"
+            />
+            @if (showValueLabels() && bar.height > 0 && bar.width > 0) {
+              <svg:text
+                class="chart-bar-value pointer-events-none fill-muted-foreground text-2xs"
+                [attr.x]="barLabelX(bar)"
+                [attr.y]="barLabelY(bar)"
+                [attr.text-anchor]="barLabelAnchor(bar)"
+                dominant-baseline="middle"
+              >
+                {{ formatValueLabel(bar) }}
+              </svg:text>
+            }
+          }
+        </svg:g>
+        <ng-content select="svg\\:g[ChartAxisX]" />
+        <ng-content select="svg\\:g[ChartAxisY]" />
+        <ng-content select="svg\\:g[ChartCrosshair]" />
+        <ng-content />
+      </svg:g>
+    </svg:svg>
+    <ng-content select="ChartTooltip" />
+    <ng-content select="ChartLegend" />
+
+    <ChartDataTable
+      [data]="data()"
+      [columns]="dataColumns()"
+      [rowHeaderKey]="xKey()"
+      [label]="ariaSummary()"
+    />
+  `,
+                }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], xKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "xKey", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], styleVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleVariant", required: false }] }], styles: [{ type: i0.Input, args: [{ isSignal: true, alias: "styles", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], bandPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "bandPadding", required: false }] }], groupPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupPadding", required: false }] }], cornerRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "cornerRadius", required: false }] }], colorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorKey", required: false }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: false }] }], activeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeValue", required: false }] }], showValueLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueLabels", required: false }] }], valueLabelFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueLabelFormat", required: false }] }], dotSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotSize", required: false }] }], dotGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotGap", required: false }] }], dotCornerRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotCornerRadius", required: false }] }], showDotTrack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDotTrack", required: false }] }], barClick: [{ type: i0.Output, args: ["barClick"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { BarChart, computeBarDotCells, computeBarLayout };