@ojiepermana/angular-chart 22.0.27

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

@@ -0,0 +1,674 @@
+import * as i0 from '@angular/core';
+import { inject, input, output, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { seriesColorVar, ChartContext, CartesianContext, elementClientCenter } 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';
+
+/** Read a numeric value from a datum, tolerating strings. */
+function readNumber(datum, key) {
+    const raw = datum[key];
+    if (typeof raw === 'number' && Number.isFinite(raw)) {
+        return raw;
+    }
+    if (typeof raw === 'string') {
+        const n = Number(raw);
+        return Number.isFinite(n) ? n : 0;
+    }
+    return 0;
+}
+function resolveBarColor(datum, seriesKey, colorKey) {
+    if (!colorKey) {
+        return seriesColorVar(seriesKey);
+    }
+    const raw = datum[colorKey];
+    if (typeof raw !== 'string' || raw.length === 0) {
+        return seriesColorVar(seriesKey);
+    }
+    if (raw.startsWith('var(') ||
+        raw.startsWith('#') ||
+        raw.startsWith('rgb') ||
+        raw.startsWith('hsl') ||
+        raw.includes('(')) {
+        return raw;
+    }
+    return seriesColorVar(raw);
+}
+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 = Math.min(0, minValue);
+    const domainMax = Math.max(0, maxValue, domainMin === 0 ? 1 : 0);
+    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);
+    const maxTotal = max(series[series.length - 1] ?? [], (p) => p[1]) ?? 0;
+    valueScale
+        .domain([0, maxTotal === 0 ? 1 : maxTotal])
+        .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);
+            const rect = isVertical
+                ? {
+                    key: `${datumIndex}-${seriesKey}`,
+                    seriesKey,
+                    datumIndex,
+                    category,
+                    value,
+                    x: bandStart,
+                    y: valueScale(upper),
+                    width: categoryScale.bandwidth(),
+                    height: valueScale(lower) - valueScale(upper),
+                    color,
+                    active,
+                }
+                : {
+                    key: `${datumIndex}-${seriesKey}`,
+                    seriesKey,
+                    datumIndex,
+                    category,
+                    value,
+                    x: valueScale(lower),
+                    y: bandStart,
+                    width: valueScale(upper) - valueScale(lower),
+                    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.
+        let 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 DEFAULT_MARGIN = { top: 8, right: 8, bottom: 24, left: 40 };
+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);
+    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 */ []));
+    styles = input('base', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []));
+    margin = input(DEFAULT_MARGIN, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    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(4, /* @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(2, /* @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();
+    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
+    layout = computed(() => computeBarLayout({
+        data: this.data(),
+        xKey: this.xKey(),
+        seriesKeys: this.root.visibleSeriesKeys(),
+        variant: this.variant(),
+        orientation: this.orientation(),
+        innerWidth: this.innerWidth(),
+        innerHeight: this.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.styles() !== 'dot') {
+            return null;
+        }
+        const layout = this.layout();
+        return computeBarDotCells({
+            bars: layout.bars,
+            orientation: this.orientation(),
+            innerWidth: this.innerWidth(),
+            innerHeight: this.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 */ []));
+    viewBox = computed(() => {
+        const { width, height } = this.root.dimensions();
+        return `0 0 ${Math.max(0, width)} ${Math.max(0, height)}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* 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 */ []));
+    constructor() {
+        effect(() => {
+            const layout = this.layout();
+            this.cart.orientation.set(this.orientation());
+            this.cart.margin.set(this.margin());
+            this.cart.innerWidth.set(this.innerWidth());
+            this.cart.innerHeight.set(this.innerHeight());
+            this.cart.categoryScale.set(layout.categoryScale);
+            this.cart.valueScale.set(layout.valueScale);
+            this.cart.categories.set(layout.categories);
+        });
+    }
+    emitClick(bar) {
+        this.barClick.emit({
+            seriesKey: bar.seriesKey,
+            datumIndex: bar.datumIndex,
+            category: bar.category,
+            value: bar.value,
+            datum: this.data()[bar.datumIndex],
+        });
+    }
+    setActivePoint(event, bar) {
+        const center = elementClientCenter(event.currentTarget);
+        this.root.activePoint.set({
+            index: bar.datumIndex,
+            seriesKey: bar.seriesKey,
+            clientX: center?.clientX,
+            clientY: center?.clientY,
+        });
+    }
+    clearActivePoint() {
+        this.root.activePoint.set(null);
+    }
+    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.styles() === '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';
+    }
+    barAriaLabel(bar) {
+        const label = this.root.config()[bar.seriesKey]?.label ?? bar.seriesKey;
+        return `${label} in ${bar.category}: ${bar.value}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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 }, 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": "styles()" }, classAttribute: "relative block h-full w-full" }, providers: [CartesianContext], ngImport: i0, template: `
+    <svg:svg
+      ChartPointerTracker
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="viewBox()"
+      preserveAspectRatio="none"
+      role="img"
+      [attr.aria-label]="ariaSummary()">
+      <svg:g [attr.transform]="innerTransform()">
+        <ng-content select="svg\\:g[ChartGrid]" />
+        <svg:g class="chart-bars">
+          @if (styles() === '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]="dotCornerRadius()"
+                  [attr.ry]="dotCornerRadius()"
+                  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]="dotCornerRadius()"
+                  [attr.ry]="dotCornerRadius()"
+                  [attr.fill]="cell.color"
+                  [attr.opacity]="dotCellOpacity(cell)" />
+              }
+            </svg:g>
+          }
+          @for (bar of bars(); track bar.key) {
+            <svg:rect
+              class="chart-bar cursor-pointer outline-none transition-opacity hover:opacity-80"
+              [attr.x]="bar.x"
+              [attr.y]="bar.y"
+              [attr.width]="bar.width"
+              [attr.height]="bar.height"
+              [attr.rx]="cornerRadius()"
+              [attr.ry]="cornerRadius()"
+              [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]="barAriaLabel(bar)"
+              tabindex="0"
+              (focus)="setActivePoint($event, bar)"
+              (blur)="clearActivePoint()"
+              (click)="emitClick(bar)"
+              (keydown.enter)="emitClick(bar)"
+              (keydown.space)="emitClick(bar); $event.preventDefault()" />
+            @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" />
+  `, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[ChartPointerTracker]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BarChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ChartBar',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [CartesianContext],
+                    imports: [ChartPointerTracker],
+                    host: { class: 'relative block h-full w-full', '[attr.data-style]': 'styles()' },
+                    template: `
+    <svg:svg
+      ChartPointerTracker
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="viewBox()"
+      preserveAspectRatio="none"
+      role="img"
+      [attr.aria-label]="ariaSummary()">
+      <svg:g [attr.transform]="innerTransform()">
+        <ng-content select="svg\\:g[ChartGrid]" />
+        <svg:g class="chart-bars">
+          @if (styles() === '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]="dotCornerRadius()"
+                  [attr.ry]="dotCornerRadius()"
+                  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]="dotCornerRadius()"
+                  [attr.ry]="dotCornerRadius()"
+                  [attr.fill]="cell.color"
+                  [attr.opacity]="dotCellOpacity(cell)" />
+              }
+            </svg:g>
+          }
+          @for (bar of bars(); track bar.key) {
+            <svg:rect
+              class="chart-bar cursor-pointer outline-none transition-opacity hover:opacity-80"
+              [attr.x]="bar.x"
+              [attr.y]="bar.y"
+              [attr.width]="bar.width"
+              [attr.height]="bar.height"
+              [attr.rx]="cornerRadius()"
+              [attr.ry]="cornerRadius()"
+              [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]="barAriaLabel(bar)"
+              tabindex="0"
+              (focus)="setActivePoint($event, bar)"
+              (blur)="clearActivePoint()"
+              (click)="emitClick(bar)"
+              (keydown.enter)="emitClick(bar)"
+              (keydown.space)="emitClick(bar); $event.preventDefault()" />
+            @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" />
+  `,
+                }]
+        }], ctorParameters: () => [], 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 }] }], 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 };
+//# sourceMappingURL=ojiepermana-angular-chart-bar.mjs.map