@watermarkinsights/ripple 0.0.1 → 0.1.0-alpha.1

package/dist/collection/components/charts/wm-chart-bar/wm-chart-bar.js

@@ -0,0 +1,725 @@
+import { h, Host } from "@stencil/core";
+import { chartPalettes, patternKey, } from "../../../global/interfaces";
+import { formatDisplayValue, suffixNumber, renderInstructionsText, findLargestNiceInterval, getMaxTicks, findNiceRoundNumber, groupProcessedData, computeLegendData, sortGroupedData, inferDecimalPlacesForUnitValue, } from "../chartFunctions";
+import { chartMessages } from "../../../global/intl";
+import { isElOrChild } from "../../../global/functions";
+/**
+ * Renders a horizontal bar chart for comparing values across nominal categories. Data and
+ * configuration are set via JavaScript properties (`chart.config` and `chart.data`) — not
+ * HTML attributes. Supports single-color, discrete palette, semantic palette, and grouped bars.
+ *
+ * **Preferred** over wm-chart's bar subtypes for all comparison and distribution use cases.
+ * Use this component (or wm-chart-column) instead of `<wm-chart chart-type="bar*">`.
+ *
+ * @category Data Visualization
+ * @displayName Bar Chart
+ *
+ * @keyboardInteraction
+ * - **Tab**: Enters the chart wrapper.
+ * - **Arrow Down / Right**: Focuses the first bar; subsequent presses cycle to the next bar.
+ * - **Arrow Up / Left**: Cycles to the previous bar.
+ * - **Enter**: Activates the popover button when the popover is open.
+ * - **Escape**: Closes the open popover.
+ * - **Tab** (from within): Exits the chart and clears focus.
+ *
+ * @accessibility
+ * - `config.label` is required — used as the chart's `aria-label`.
+ * - Each bar receives an `aria-label` composed of the category axis label, group name (if
+ *   grouped), bar legend, and display value.
+ * - The chart renders with `role="application"` and `aria-roledescription="Interactive chart"`.
+ * - In `print-mode`, keyboard interaction instructions are removed from the DOM.
+ *
+ * @usageNotes
+ * - Set `id` on the element to use with an external `wm-chart-legend` via `chart-ids`.
+ * - For grouped charts, each `ChartData` item must include a `groupName` field.
+ * - `config.gridMax: "auto"` calculates a "nice" round upper bound from the data.
+ * - Bars exceeding the `gridMax` are clipped — set an appropriate `gridMax` to avoid this.
+ *
+ * @example {html} Single-color bar chart
+ * <wm-chart-bar id="enrollment-chart"></wm-chart-bar>
+ * <script>
+ *   const chart = document.querySelector('#enrollment-chart');
+ *   chart.config = { label: 'Enrollment by program', gridMax: 'auto', valueFormat: 'amount' };
+ *   chart.data = [{ barLegend: 'Biology', amount: 310 }, { barLegend: 'English', amount: 280 }];
+ * </script>
+ *
+ * @example {react} Single-color bar chart
+ * // config and data must be set via JavaScript properties in useEffect -- not as JSX props.
+ * const singleRef = useRef(null);
+ *
+ * useEffect(() => {
+ *   singleRef.current.config = {
+ *     label: 'Enrollment by program',
+ *     gridMax: 'auto',
+ *     valueFormat: 'amount',
+ *     popoverTitle: 'Details',
+ *   };
+ *   singleRef.current.data = [
+ *     { barLegend: 'Biology', amount: 310, popoverText: '310 students enrolled' },
+ *     { barLegend: 'English', amount: 280, popoverText: '280 students enrolled' },
+ *     { barLegend: 'History', amount: 195, popoverText: '195 students enrolled' },
+ *     { barLegend: 'Chemistry', amount: 240, popoverText: '240 students enrolled' },
+ *   ];
+ * }, []);
+ *
+ * <WmChartBar ref={singleRef} />
+ *
+ * @example {html} Grouped bar chart
+ * <wm-chart-bar id="grouped-chart"></wm-chart-bar>
+ * <script>
+ *   const chart = document.querySelector('#grouped-chart');
+ *   chart.config = { label: 'Retention by cohort and program', gridMax: 'auto',
+ *     categoryAxisLabel: 'Cohort', valueAxisLabel: 'Students', showLegend: 'bottom' };
+ *   chart.data = [
+ *     { barLegend: 'Biology', amount: 120, groupName: '2022', popoverTitle: 'Biology — 2022', popoverText: '120 students retained' },
+ *     { barLegend: 'English', amount: 95, groupName: '2022', popoverTitle: 'English — 2022', popoverText: '95 students retained' },
+ *     { barLegend: 'Biology', amount: 135, groupName: '2023', popoverTitle: 'Biology — 2023', popoverText: '135 students retained' },
+ *     { barLegend: 'English', amount: 110, groupName: '2023', popoverTitle: 'English — 2023', popoverText: '110 students retained' },
+ *   ];
+ * </script>
+ *
+ * @example {react} Grouped bar chart
+ * // config and data must be set via JavaScript properties in useEffect -- not as JSX props.
+ * const groupedRef = useRef(null);
+ *
+ * useEffect(() => {
+ *   groupedRef.current.config = {
+ *     label: 'Retention by cohort and program',
+ *     gridMax: 'auto',
+ *     valueFormat: 'amount',
+ *     categoryAxisLabel: 'Cohort',
+ *     valueAxisLabel: 'Students',
+ *     showLegend: 'bottom',
+ *   };
+ *   groupedRef.current.data = [
+ *     { barLegend: 'Biology', amount: 120, groupName: '2022', popoverTitle: 'Biology — 2022', popoverText: '120 students retained' },
+ *     { barLegend: 'English', amount: 95, groupName: '2022', popoverTitle: 'English — 2022', popoverText: '95 students retained' },
+ *     { barLegend: 'History', amount: 80, groupName: '2022', popoverTitle: 'History — 2022', popoverText: '80 students retained' },
+ *     { barLegend: 'Biology', amount: 135, groupName: '2023', popoverTitle: 'Biology — 2023', popoverText: '135 students retained' },
+ *     { barLegend: 'English', amount: 110, groupName: '2023', popoverTitle: 'English — 2023', popoverText: '110 students retained' },
+ *     { barLegend: 'History', amount: 72, groupName: '2023', popoverTitle: 'History — 2023', popoverText: '72 students retained' },
+ *   ];
+ * }, []);
+ *
+ * <WmChartBar ref={groupedRef} />
+ *
+ */
+export class ChartBar {
+    constructor() {
+        this.gridMax = 0;
+        this.isGrouped = false;
+        this.legendData = [];
+        this.config = undefined;
+        this.data = undefined;
+        this.printMode = undefined;
+        this.patternMode = undefined;
+        this.subinfo = undefined;
+        this.processedData = new Map();
+        this.gridInfo = undefined;
+        this.isKeying = false;
+    }
+    ////////////////////////////////////////////////////////////
+    // #region Getters
+    ////////////////////////////////////////////////////////////
+    get colorPalette() {
+        var _a;
+        let defaultPaletteName = this.isGrouped ? "discrete" : "wmcolor-dataviz-discrete-01";
+        let paletteName = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.colors) || defaultPaletteName;
+        let palette = [];
+        if (paletteName === "semantic") {
+            palette = chartPalettes.semantic;
+        }
+        else if (paletteName === "discrete") {
+            palette = chartPalettes.discrete;
+        }
+        else if (paletteName.startsWith("wmcolor")) {
+            palette = [paletteName];
+        }
+        return palette;
+    }
+    get sort() {
+        var _a;
+        return ((_a = this.config) === null || _a === void 0 ? void 0 : _a.sort) || "none"; // default to none
+    }
+    get showLegend() {
+        var _a;
+        return ((_a = this.config) === null || _a === void 0 ? void 0 : _a.showLegend) || "none"; // default to none
+    }
+    get subinfoText() {
+        var _a;
+        return this.subinfo || ((_a = this.config) === null || _a === void 0 ? void 0 : _a.subinfo) || "";
+    }
+    get gridVisible() {
+        var _a, _b, _c;
+        return !!this.gridInfo && ((_a = this.config) === null || _a === void 0 ? void 0 : _a.gridMax) != undefined && ((_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.showGrid) !== null && _c !== void 0 ? _c : true);
+    }
+    get flattenedData() {
+        return [...this.processedData.values()].flat();
+    }
+    // #endregion getters
+    ////////////////////////////////////////////////////////////
+    // #region Component lifecycle
+    ////////////////////////////////////////////////////////////
+    componentDidLoad() {
+        const resizeObserver = new ResizeObserver(() => {
+            if (this.processedData) {
+                this.gridInfo = this.calculateGridInfo();
+            }
+        });
+        resizeObserver.observe(this.barAreaEl);
+        if (this.config && this.data) {
+            this.handleConfigDataChange();
+        }
+    }
+    // #endregion component lifecycle
+    ////////////////////////////////////////////////////////////
+    // #region Data processing
+    ////////////////////////////////////////////////////////////
+    handleConfigDataChange() {
+        if (this.config && this.data) {
+            const largest = Math.max(...this.data.map((item) => item.amount));
+            if (this.config.gridMax == "auto") {
+                this.gridMax = findNiceRoundNumber(largest);
+            }
+            else if (!!this.config.gridMax) {
+                this.gridMax = this.config.gridMax;
+            }
+            else {
+                // fallback to 1 and chart should not render
+                this.gridMax = 1;
+            }
+            this.isGrouped = this.data.some((item) => item.groupName);
+            this.processedData = this.buildProcessedData();
+            this.legendData = this.isGrouped
+                ? computeLegendData(this.processedData).map((item) => (Object.assign(Object.assign({}, item), { printValue: "" })))
+                : computeLegendData(this.processedData);
+            this.propagateExternalLegendData();
+            this.gridInfo = this.calculateGridInfo();
+        }
+    }
+    buildProcessedData() {
+        var _a, _b, _c, _d;
+        if (!this.data) {
+            return new Map();
+        }
+        let processedData = [];
+        const defaultValueFormat = "amount";
+        const defaultPrintModeFormat = "amount";
+        const defaultColor = "wmcolor-dataviz-discrete-01";
+        const itemTotal = this.data.reduce((acc, item) => acc + item.amount, 0);
+        const valueFormat = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.valueFormat) || defaultValueFormat;
+        const printModeFormat = ((_b = this.config) === null || _b === void 0 ? void 0 : _b.printModeFormat) || defaultPrintModeFormat;
+        const decimalPlaces = (_d = (_c = this.config) === null || _c === void 0 ? void 0 : _c.decimalPlaces) !== null && _d !== void 0 ? _d : 0;
+        // For grouped data, matching barLegends share color indices
+        const barLegendColorMap = new Map();
+        if (this.isGrouped) {
+            let incrementingIndex = 0;
+            this.data.forEach((item) => {
+                if (!barLegendColorMap.has(item.barLegend)) {
+                    barLegendColorMap.set(item.barLegend, incrementingIndex);
+                    incrementingIndex++;
+                }
+            });
+        }
+        processedData = this.data.map((item, index) => {
+            const colorIndex = this.isGrouped ? barLegendColorMap.get(item.barLegend) || 0 : index;
+            const barColor = item.color
+                ? item.color
+                : this.colorPalette.length === 1
+                    ? this.colorPalette[0]
+                    : this.colorPalette[colorIndex] || defaultColor;
+            const amount = decimalPlaces > 0 ? parseFloat(item.amount.toFixed(decimalPlaces)) : item.amount;
+            return {
+                barLegend: item.barLegend,
+                amount: amount,
+                gridPercent: (amount / this.gridMax) * 100,
+                displayValue: formatDisplayValue(amount, itemTotal, valueFormat, decimalPlaces),
+                printValue: formatDisplayValue(amount, itemTotal, printModeFormat, decimalPlaces),
+                color: barColor,
+                popoverTitle: item.popoverTitle,
+                popoverText: item.popoverText,
+                popoverButtonText: item.popoverButtonText,
+                groupName: item.groupName,
+            };
+        });
+        if (this.isGrouped) {
+            processedData = sortGroupedData(processedData);
+        }
+        else if (this.sort === "ascending") {
+            processedData.sort((a, b) => a.amount - b.amount);
+        }
+        else if (this.sort === "descending") {
+            processedData.sort((a, b) => b.amount - a.amount);
+        }
+        return groupProcessedData(processedData);
+    }
+    propagateExternalLegendData() {
+        document.querySelectorAll("wm-chart-legend").forEach((legend) => {
+            var _a, _b;
+            if (legend.chartIds.split(" ").includes(this.el.id)) {
+                legend.processedData = this.legendData;
+                legend.patternMode = ((_a = this.patternMode) !== null && _a !== void 0 ? _a : (_b = this.config) === null || _b === void 0 ? void 0 : _b.patternMode) ? "horizontal" : undefined;
+            }
+        });
+    }
+    calculateGridInfo() {
+        var _a, _b;
+        const barAreaWidth = this.barAreaEl.getBoundingClientRect().width;
+        const maxTicks = barAreaWidth > 0 ? getMaxTicks(barAreaWidth) : 1;
+        const { numIntervals, interval } = findLargestNiceInterval(maxTicks, this.gridMax);
+        const tickLabels = [];
+        for (let i = 1; i <= numIntervals; i++) {
+            const tickValue = i * interval;
+            const decimalPlaces = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.decimalPlaces) !== null && _b !== void 0 ? _b : inferDecimalPlacesForUnitValue(tickValue);
+            tickLabels.push(suffixNumber(tickValue, decimalPlaces));
+        }
+        return {
+            numTicks: numIntervals,
+            interval: interval,
+            backgroundSize: `${100 / numIntervals}%`,
+            tickLabels: tickLabels,
+        };
+    }
+    // #endregion data processing
+    ////////////////////////////////////////////////////////////
+    // #region Keyboard interaction and Event handling
+    ////////////////////////////////////////////////////////////
+    handleChartKeyDown(ev) {
+        switch (ev.key) {
+            case "ArrowDown":
+            case "ArrowRight":
+                ev.preventDefault();
+                if (this.el.shadowRoot.activeElement === this.componentWrapperEl) {
+                    this.focusBar(0);
+                }
+                break;
+            case "Tab":
+                this.clearFocus();
+                break;
+            case "Escape":
+                ev.preventDefault();
+                ev.stopPropagation();
+                if (this.popoverEl.open) {
+                    this.popoverEl.open = false;
+                }
+                break;
+        }
+    }
+    handleBarKeyDown(ev, item) {
+        const barIdx = this.flattenedData.indexOf(item);
+        switch (ev.key) {
+            case "ArrowUp":
+            case "ArrowLeft":
+                ev.preventDefault();
+                this.focusBar(barIdx - 1);
+                break;
+            case "ArrowDown":
+            case "ArrowRight":
+                ev.preventDefault();
+                this.focusBar(barIdx + 1);
+                break;
+            case "Enter":
+                if (this.popoverEl.open) {
+                    const popoverBtn = this.popoverEl.querySelector("button");
+                    popoverBtn && popoverBtn.click();
+                }
+                break;
+        }
+    }
+    handleBarClick(ev, item) {
+        this.openPopover(item, { x: ev.clientX, y: ev.clientY });
+        this.highlightBar(item);
+    }
+    handleLegendItemClick(ev) {
+        var _a;
+        if (ev.target.nodeName === "WM-CHART-LEGEND") {
+            // If event from an internal legend bubbles up to the chart, ignore it
+            const legendEl = ev.target;
+            if (legendEl.chartIds.includes(this.el.id)) {
+                if (ev.detail.idx == -1) {
+                    this.clearHighlights();
+                }
+                else {
+                    const barLegend = (_a = this.legendData[ev.detail.idx]) === null || _a === void 0 ? void 0 : _a.barLegend;
+                    if (barLegend) {
+                        this.highlightBarsByLegend(barLegend);
+                    }
+                }
+            }
+        }
+    }
+    handleDocumentClick(_ev) {
+        // Clear highlights when highlight is set from an external legend (not opening a popover)
+        if (!this.popoverEl.open) {
+            this.clearHighlights();
+        }
+    }
+    // #endregion keyboard interaction and event handling
+    ////////////////////////////////////////////////////////////
+    // #region Focus and Highlighting
+    ////////////////////////////////////////////////////////////
+    handleUserIsKeying() {
+        this.isKeying = true;
+    }
+    handleUserIsNotKeying() {
+        this.isKeying = false;
+    }
+    handleComponentBlur(ev) {
+        if (!isElOrChild(this.el, ev.relatedTarget)) {
+            this.clearFocus();
+        }
+    }
+    focusBar(barIdx) {
+        const bars = this.el.shadowRoot.querySelectorAll(".bar");
+        const wrappedIdx = ((barIdx % bars.length) + bars.length) % bars.length;
+        const barToFocus = bars[wrappedIdx];
+        barToFocus.focus();
+        const item = this.flattenedData[wrappedIdx];
+        if (item) {
+            this.highlightBar(item);
+            const cornerOffset = 12;
+            this.openPopover(item, {
+                x: barToFocus.getBoundingClientRect().left + cornerOffset,
+                y: barToFocus.getBoundingClientRect().top + cornerOffset,
+            });
+        }
+    }
+    handlePopoverToggled(_ev) {
+        setTimeout(() => {
+            // allow time for the popover to reopen if the click that closed it was on a bar, to prevent flash
+            if (this.popoverEl.open) {
+                const chartData = this.popoverEl.chartData;
+                const item = this.flattenedData.find((item) => item.barLegend === (chartData === null || chartData === void 0 ? void 0 : chartData.barLegend) && item.groupName === (chartData === null || chartData === void 0 ? void 0 : chartData.groupName));
+                item && this.highlightBar(item);
+            }
+            else {
+                this.clearHighlights();
+            }
+        }, 30);
+    }
+    openPopover(clickedProcessedData, coords) {
+        if (!this.data || !this.config) {
+            return;
+        }
+        let matchingChartData = this.data.find((item) => item.barLegend === clickedProcessedData.barLegend && item.groupName === clickedProcessedData.groupName);
+        if (matchingChartData) {
+            const popoverButtonText = matchingChartData.popoverButtonText || this.config.popoverButtonText || "";
+            this.componentWrapperEl.classList.toggle("hide-focus-ring", !!popoverButtonText);
+            this.popoverEl.chartData = matchingChartData;
+            this.popoverEl.header = matchingChartData.popoverTitle || this.config.popoverTitle || "";
+            this.popoverEl.text = matchingChartData.popoverText || this.config.popoverText || "";
+            this.popoverEl.buttonText = popoverButtonText;
+            this.popoverEl.coords = coords;
+            window.setTimeout(() => {
+                this.popoverEl.open = true;
+                this.popoverEl.announceContents();
+            }, 30);
+        }
+    }
+    clearHighlights() {
+        const barItems = this.el.shadowRoot.querySelectorAll(".bar-wrapper");
+        barItems.forEach((barItem) => {
+            barItem.classList.remove("faded");
+        });
+        this.wmChartBarHighlighted.emit({ idx: -1 });
+    }
+    highlightBar(item) {
+        const idx = this.flattenedData.indexOf(item);
+        const barItems = this.el.shadowRoot.querySelectorAll(".bar-wrapper");
+        barItems.forEach((barItem) => {
+            barItem.classList.add("faded");
+        });
+        barItems[idx].classList.remove("faded");
+        const legendIdx = this.legendData.findIndex((legendItem) => legendItem.barLegend === item.barLegend);
+        this.wmChartBarHighlighted.emit({ idx: legendIdx });
+    }
+    highlightBarsByLegend(barLegend) {
+        const barItems = this.el.shadowRoot.querySelectorAll(".bar-wrapper");
+        barItems.forEach((barItem, idx) => {
+            var _a;
+            barItem.classList.toggle("faded", ((_a = this.flattenedData[idx]) === null || _a === void 0 ? void 0 : _a.barLegend) !== barLegend);
+        });
+    }
+    clearFocus() {
+        if (this.popoverEl.open) {
+            this.popoverEl.open = false;
+        }
+        this.clearHighlights();
+    }
+    // #endregion focus and highlighting
+    ////////////////////////////////////////////////////////////
+    // #region Rendering
+    ////////////////////////////////////////////////////////////
+    renderBarValue(item, barPercent) {
+        var _a, _b, _c;
+        return (h("div", { class: "value horizontal", style: { "--offset": `${barPercent}%` } }, h("span", null, item.displayValue), ((_a = this.config) === null || _a === void 0 ? void 0 : _a.valueFormat) === "percentage" && this.isGrouped && (h("span", { class: "supplemental-value" }, "(", item.amount.toFixed((_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.decimalPlaces) !== null && _c !== void 0 ? _c : 0), ")"))));
+    }
+    renderBarLegends() {
+        const legends = [];
+        this.processedData.forEach((items) => {
+            items.forEach((item) => {
+                legends.push(h("div", { key: `legend-${item.barLegend}`, class: "bar-legend" }, item.barLegend));
+            });
+        });
+        return legends;
+    }
+    renderBar(item, effectiveGridMax) {
+        var _a, _b, _c, _d;
+        const barPercent = effectiveGridMax > 0 ? (item.amount / effectiveGridMax) * 100 : 0;
+        let patternClass = "";
+        if ((_a = this.patternMode) !== null && _a !== void 0 ? _a : (_b = this.config) === null || _b === void 0 ? void 0 : _b.patternMode) {
+            patternClass = (_c = patternKey[item.color]) !== null && _c !== void 0 ? _c : "";
+        }
+        return (h("div", { key: `bar-${item.groupName}-${item.barLegend}`, class: "bar-wrapper" }, h("div", { class: `bar horizontal ${patternClass}`, style: { "--bar-length": `${barPercent}%`, "--bar-color": `var(--${item.color})` }, onClick: (ev) => this.handleBarClick(ev, item), onKeyDown: (ev) => this.handleBarKeyDown(ev, item), tabindex: "-1", "aria-label": `${(_d = this.config) === null || _d === void 0 ? void 0 : _d.categoryAxisLabel}, ${item.groupName ? `${item.groupName},` : ""} ${item.barLegend} ${item.displayValue}` }), this.renderBarValue(item, barPercent)));
+    }
+    renderBars() {
+        if (!this.gridInfo || !this.processedData) {
+            return;
+        }
+        const effectiveGridMax = this.gridInfo.numTicks * this.gridInfo.interval;
+        const bars = [];
+        this.processedData.forEach((items) => {
+            items.forEach((item) => {
+                bars.push(this.renderBar(item, effectiveGridMax));
+            });
+        });
+        return bars;
+    }
+    renderGroupLegends() {
+        const legends = [];
+        this.processedData.forEach((_, groupName) => {
+            legends.push(h("div", { key: `legend-${groupName}`, class: "group-legend" }, groupName));
+        });
+        return legends;
+    }
+    renderGroupedBars() {
+        if (!this.gridInfo || !this.processedData) {
+            return;
+        }
+        const effectiveGridMax = this.gridInfo.numTicks * this.gridInfo.interval;
+        const groupedBars = [];
+        this.processedData.forEach((items, groupName) => {
+            groupedBars.push(h("div", { key: `group-${groupName}`, class: "group-bars" }, items.map((item) => this.renderBar(item, effectiveGridMax))));
+        });
+        return groupedBars;
+    }
+    renderXAxis() {
+        var _a;
+        return (h("div", { class: "x-axis", "aria-hidden": "true" }, h("div", { class: "tick zero" }, h("span", null, "0")), (_a = this.gridInfo) === null || _a === void 0 ? void 0 :
+            _a.tickLabels.map((label) => (h("div", { class: "tick", key: label }, h("span", null, label))))));
+    }
+    renderGrid() {
+        var _a;
+        const backgroundSize = (_a = this.gridInfo) === null || _a === void 0 ? void 0 : _a.backgroundSize;
+        return h("div", { class: "grid-lines", style: { "--background-size": backgroundSize } });
+    }
+    renderLegend(orientation) {
+        var _a, _b, _c, _d, _e;
+        return (h("div", { class: `legend --${orientation} --${this.showLegend}` }, h("wm-chart-legend", { orientation: orientation, chartIds: this.el.id, processedData: this.legendData, printMode: (_c = (_a = this.printMode) !== null && _a !== void 0 ? _a : (_b = this.config) === null || _b === void 0 ? void 0 : _b.printMode) !== null && _c !== void 0 ? _c : false, patternMode: ((_d = this.patternMode) !== null && _d !== void 0 ? _d : (_e = this.config) === null || _e === void 0 ? void 0 : _e.patternMode) ? "horizontal" : undefined, onWmLegendItemClick: (ev) => this.handleLegendItemClick(ev), onWmLegendItemHover: (ev) => this.handleLegendItemClick(ev) })));
+    }
+    // #endregion rendering
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const rowCount = (this.isGrouped ? this.processedData.size : (_a = this.processedData.get(null)) === null || _a === void 0 ? void 0 : _a.length) || 1; // processedData keys are the group names, ungrouped data belongs under a key of null
+        return (h(Host, { key: 'a25775e30b2232f51642600e8e08654771f10080' }, h("div", { key: '4c64407cce556bb37e35b7a131a806d9def2b914', class: "popover-wrapper" }, h("priv-chart-popover", { key: '6d65bcfbd8b24deff60d228ff836b747dd3d6c86', ref: (el) => (this.popoverEl = el), onIntChartPopoverToggled: (ev) => this.handlePopoverToggled(ev) })), h("div", { key: '3e1d1fe143f9ec973603c0afc1cbef53e9b660d5', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${((_b = this.printMode) !== null && _b !== void 0 ? _b : (_c = this.config) === null || _c === void 0 ? void 0 : _c.printMode) ? "print-mode" : ""}`, tabindex: "0", role: "application", onKeyDown: (ev) => this.handleChartKeyDown(ev), onBlur: (ev) => this.handleComponentBlur(ev), "aria-roledescription": chartMessages.interactiveChart, "aria-describedby": "chart-instructions", "aria-label": (_d = this.config) === null || _d === void 0 ? void 0 : _d.label }, ((_f = (_e = this.config) === null || _e === void 0 ? void 0 : _e.showLabel) !== null && _f !== void 0 ? _f : true) && (h("label", { key: 'e9db06b762219abeef90aa6d2174238e75ffc5d7', id: "label", class: "label" }, h("span", { key: 'dcae615b6ad3aad4e333bb3caf279c3b60c16c5a', class: "label-text" }, (_g = this.config) === null || _g === void 0 ? void 0 : _g.label), this.subinfoText ? h("span", { class: "subinfo" }, this.subinfoText) : "")), this.showLegend === "top" && this.renderLegend("horizontal"), h("div", { key: '26888544e48c9b5e722b4bd0623e1d9397b364bf', class: "chart-wrapper" }, h("div", { key: 'f90fa68d4060cecbe4c2001887d141f156e838ba', class: "chart-left-side" }, this.showLegend === "left" && this.renderLegend("vertical"), h("div", { key: 'bbdcc865c67bd878ae606cc305e5a43943fa181d', class: "left-axis-label" }, h("span", { key: '8a10637386b33369784a2332e373e012e2512872', class: "axis-label-text" }, (_h = this.config) === null || _h === void 0 ? void 0 : _h.categoryAxisLabel))), h("div", { key: '76f1b3ee1be4ebb6f0e4dd5c8621d50cb805abc8', class: "chart-center" }, h("div", { key: 'd70ee90082f88a611a2b95cbc6dab6e6d88a4577', class: "chart-area", style: { "--row-count": rowCount.toString() } }, this.processedData && (this.isGrouped ? this.renderGroupLegends() : this.renderBarLegends()), h("div", { key: '314bfa33d7fdd9cabb092dbfb8b977e46226c525', class: `bar-area ${this.isKeying ? "user-is-keying" : ""} ${this.isGrouped ? "grouped" : ""}`, ref: (el) => (this.barAreaEl = el) }, this.gridVisible && this.renderGrid(), ((_j = this.config) === null || _j === void 0 ? void 0 : _j.gridMax) != undefined && (this.isGrouped ? this.renderGroupedBars() : this.renderBars()))), h("div", { key: '18ebf5e67f030a017822fb4aac9d530ba615ff5a', class: "bottom-axis-label" }, h("span", { key: 'a9d7adf4eb823b8f9f1d7f5848fb9088acbf4957', class: "axis-label-text" }, (_k = this.config) === null || _k === void 0 ? void 0 : _k.valueAxisLabel)), this.gridVisible && this.renderXAxis()), h("div", { key: '54f0f4dad217156d37cc7dc187b78eb9a5c0bef4', class: "chart-right-side" }, this.showLegend === "right" && this.renderLegend("vertical"))), this.showLegend === "bottom" && this.renderLegend("horizontal"), renderInstructionsText())));
+    }
+    static get is() { return "wm-chart-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-chart-bar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-chart-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "config": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ChartConfig",
+                    "resolved": "undefined | { label: string; showLabel: boolean; valueAxisLabel: string; categoryAxisLabel: string; printMode: boolean; printModeFormat: \"amount\" | \"percentage\"; gridMax: number | \"auto\"; sort?: \"ascending\" | \"descending\" | \"none\" | undefined; showLegend?: \"top\" | \"bottom\" | \"left\" | \"right\" | \"none\" | undefined; showGrid?: boolean | undefined; subinfo?: string | undefined; valueFormat?: \"amount\" | \"percentage\" | \"none\" | undefined; colors?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; decimalPlaces?: number | undefined; patternMode?: boolean | undefined; }",
+                    "references": {
+                        "ChartConfig": {
+                            "location": "import",
+                            "path": "../../../global/interfaces",
+                            "id": "src/global/interfaces.ts::ChartConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Chart configuration object. Set via JavaScript property \u2014 not an HTML\nattribute. See the `ChartConfig` interface for the full list of options (label, gridMax,\nvalueFormat, colors, showLegend, etc.)."
+                        }],
+                    "text": ""
+                }
+            },
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ChartData[]",
+                    "resolved": "ChartData[] | undefined",
+                    "references": {
+                        "ChartData": {
+                            "location": "import",
+                            "path": "../../../global/interfaces",
+                            "id": "src/global/interfaces.ts::ChartData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Array of data items to render. Set via JavaScript property \u2014 not an HTML\nattribute. Each item must include at least `barLegend` and `amount`; grouped charts also\nrequire `groupName`. See the `ChartData` interface."
+                        }],
+                    "text": ""
+                }
+            },
+            "printMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "When true, bar values are included in the legend and keyboard interaction\ninstructions are removed from the DOM \u2014 suitable for printed output. Takes precedence over\n`config.printMode`."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": ""
+                },
+                "attribute": "print-mode",
+                "reflect": false
+            },
+            "patternMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "When true, applies a hatching pattern fill to bars in addition to color,\nimproving distinguishability for users with color vision deficiencies. Takes precedence\nover `config.patternMode`."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": ""
+                },
+                "attribute": "pattern-mode",
+                "reflect": false
+            },
+            "subinfo": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Optional secondary text displayed beneath the chart label. Takes precedence\nover `config.subinfo`."
+                        }],
+                    "text": ""
+                },
+                "attribute": "subinfo",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "processedData": {},
+            "gridInfo": {},
+            "isKeying": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmChartBarHighlighted",
+                "name": "wmChartBarHighlighted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "description",
+                            "text": "Internal signal used to synchronize bar highlight state with an external\nwm-chart-legend \u2014 not for application use."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ idx: number }",
+                    "resolved": "{ idx: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "config",
+                "methodName": "handleConfigDataChange"
+            }, {
+                "propName": "data",
+                "methodName": "handleConfigDataChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "wmLegendItemClick",
+                "method": "handleLegendItemClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "wmUserIsKeying",
+                "method": "handleUserIsKeying",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmUserIsNotTabbing",
+                "method": "handleUserIsNotKeying",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}