@watermarkinsights/ripple 0.0.1 → 0.1.0-alpha.1

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

@@ -0,0 +1,914 @@
+import { h, Host, forceUpdate, } from "@stencil/core";
+import { chartPalettes, patternKey, } from "../../../global/interfaces";
+import { suffixNumber, renderInstructionsText, findLargestNiceInterval, getMaxTicks, findNiceRoundNumber, formatDisplayValue, groupProcessedData, computeLegendData, sortGroupedData, inferDecimalPlacesForUnitValue, } from "../chartFunctions";
+import { chartMessages } from "../../../global/intl";
+import { isElOrChild, debounce } from "../../../global/functions";
+/**
+ * Renders a vertical column chart for comparing values across nominal categories or showing
+ * distribution across interval/ratio ranges. 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 columns.
+ *
+ * **Preferred** over wm-chart's bar subtypes for comparison and distribution use cases.
+ * Use this component (or wm-chart-bar) instead of `<wm-chart chart-type="bar*">`. When
+ * columns exceed available width, the chart scrolls horizontally.
+ *
+ * @category Data Visualization
+ * @displayName Column Chart
+ *
+ * @keyboardInteraction
+ * - **Tab**: Enters the chart wrapper.
+ * - **Arrow Down / Right**: Focuses the first column; subsequent presses cycle to the next.
+ * - **Arrow Up / Left**: Cycles to the previous column.
+ * - **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 column 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`.
+ * - Use `print-width` to fix chart width for exported PDFs or print stylesheets (accepts `px`,
+ *   `in`, or `cm`). The chart will wrap columns across multiple plots when they exceed the
+ *   available `print-width`.
+ * - For grouped charts, each `ChartData` item must include a `groupName` field.
+ *
+ * @example {html} Single-color column chart
+ * <wm-chart-column id="enrollment-chart"></wm-chart-column>
+ * <script>
+ *   const chart = document.querySelector('#enrollment-chart');
+ *   chart.config = { label: 'Enrollment by term', gridMax: 'auto', valueFormat: 'amount',
+ *     categoryAxisLabel: 'Term', valueAxisLabel: 'Students' };
+ *   chart.data = [{ barLegend: 'Fall 2023', amount: 310 }, { barLegend: 'Spring 2024', amount: 280 }];
+ * </script>
+ *
+ * @example {react} Single-color column chart
+ * <WmChartColumn ref={chartRef} />
+ * // In useEffect: chartRef.current.config = {...}; chartRef.current.data = [...];
+ *
+ * @example {html} Grouped column chart
+ * <wm-chart-column id="grouped-chart"></wm-chart-column>
+ * <script>
+ *   const chart = document.querySelector('#grouped-chart');
+ *   chart.config = { label: 'Enrollment by term and program', gridMax: 'auto',
+ *     showLegend: 'bottom' };
+ *   chart.data = [
+ *     { barLegend: 'Biology', amount: 120, groupName: 'Fall 2023' },
+ *     { barLegend: 'English', amount: 95, groupName: 'Fall 2023' },
+ *   ];
+ * </script>
+ *
+ * @example {react} Grouped column chart
+ * <WmChartColumn ref={chartRef} />
+ * // In useEffect: chartRef.current.config = {...}; chartRef.current.data = [...];
+ *
+ */
+export class ChartColumn {
+    constructor() {
+        this.gridMax = 0;
+        this.isGrouped = false;
+        this.legendData = [];
+        this.plotColumnWidth = 0;
+        this.plotDivisions = 1; // the number of vertical divisions that can fit in a single plot. Divisions refer to either bars or groups depending on chart configuration
+        this.userIsPrinting = false;
+        this.debouncedAdjustLayout = debounce(() => {
+            if (this.config && this.processedData) {
+                this.gridInfo = this.calculateGridInfo();
+                this.updateSpacing();
+                requestAnimationFrame(() => {
+                    if (this.isPlotWidthLimited) {
+                        this.determinePlots();
+                        forceUpdate(this.el);
+                    }
+                    if (!this.isPlotWidthLimited) {
+                        const allPlotAreaEls = this.el.shadowRoot.querySelectorAll(".plot-area");
+                        allPlotAreaEls.forEach((plotAreaEl) => this.updateScrollFade(plotAreaEl));
+                    }
+                });
+            }
+        }, 20);
+        this.config = undefined;
+        this.data = undefined;
+        this.printWidth = 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();
+    }
+    get columnCount() {
+        if (this.isGrouped) {
+            return this.processedData.size;
+        }
+        let count = 0;
+        this.processedData.forEach((items) => {
+            count += items.length;
+        });
+        return count;
+    }
+    get isPlotWidthLimited() {
+        var _a;
+        return !!((this.printMode || ((_a = this.config) === null || _a === void 0 ? void 0 : _a.printMode) || this.userIsPrinting) && this.printWidth);
+    }
+    get printWidthPx() {
+        var _a, _b, _c;
+        const PPI = 96;
+        const inchToCm = 1 / 2.54;
+        if ((_a = this.printWidth) === null || _a === void 0 ? void 0 : _a.endsWith("px")) {
+            return parseFloat(this.printWidth.replace("px", ""));
+        }
+        else if ((_b = this.printWidth) === null || _b === void 0 ? void 0 : _b.endsWith("in")) {
+            return parseFloat(this.printWidth.replace("in", "")) * PPI;
+        }
+        else if ((_c = this.printWidth) === null || _c === void 0 ? void 0 : _c.endsWith("cm")) {
+            return parseFloat(this.printWidth.replace("cm", "")) * PPI * inchToCm;
+        }
+        return 0;
+    }
+    getAvailablePlotWidth(padding) {
+        // Returns the width available to render columns within, given a total chart width of `printWidth`
+        var _a;
+        const componentWidth = this.printWidthPx;
+        const plotAreaEl = this.el.shadowRoot.querySelector(".plot-area");
+        const plotWidth = (_a = plotAreaEl === null || plotAreaEl === void 0 ? void 0 : plotAreaEl.getBoundingClientRect().width) !== null && _a !== void 0 ? _a : 0;
+        const plotChromeHorizontal = Math.max(0, componentWidth - plotWidth);
+        return Math.max(0, componentWidth - plotChromeHorizontal - 2 * padding);
+    }
+    // #endregion getters
+    ////////////////////////////////////////////////////////////
+    // #region Component lifecycle
+    ////////////////////////////////////////////////////////////
+    componentDidLoad() {
+        const resizeObserver = new ResizeObserver(() => this.debouncedAdjustLayout());
+        resizeObserver.observe(this.componentWrapperEl);
+        if (this.config && this.data) {
+            this.handleConfigDataChange();
+        }
+    }
+    updateSpacing() {
+        if (this.isGrouped) {
+            // In grouped charts, label-overhang determines the spacing between columns within a group, AND space between groups themselves
+            const valueElements = this.el.shadowRoot.querySelectorAll(".value");
+            const maxLabelWidth = Array.from(valueElements).reduce((max, el) => Math.max(max, el.offsetWidth), 0);
+            const barWidth = 24;
+            let labelOverhang = Math.max(0, (maxLabelWidth - barWidth) / 2);
+            this.componentWrapperEl.style.setProperty("--label-overhang", `${labelOverhang}px`);
+        }
+        else {
+            // In ungrouped charts, column spacing is determined by the width of the longest x-axis label
+            const measureLabelEls = this.el.shadowRoot.querySelectorAll(".--measure-width");
+            const longestLabelWidth = Array.from(measureLabelEls).reduce((max, el) => Math.max(max, el.offsetWidth), 0);
+            // Cap at 120px max
+            this.plotColumnWidth = Math.min(longestLabelWidth + 1, 120); // add 1px buffer for subpixel rendering
+            const chartCenterEl = this.el.shadowRoot.querySelector(".chart-center");
+            chartCenterEl === null || chartCenterEl === void 0 ? void 0 : chartCenterEl.style.setProperty("--plot-column-width", `${this.plotColumnWidth}px`);
+        }
+    }
+    // #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.plotDivisions = this.isGrouped ? this.processedData.size : this.data.length; // default to total number of items in chart, or number of groups in grouped charts
+            this.legendData = this.isGrouped
+                ? computeLegendData(this.processedData).map((item) => (Object.assign(Object.assign({}, item), { printValue: "" })))
+                : computeLegendData(this.processedData);
+            this.propagateExternalLegendData();
+            this.debouncedAdjustLayout();
+        }
+    }
+    buildProcessedData() {
+        var _a, _b, _c, _d;
+        if (!this.data) {
+            return new Map();
+        }
+        let processedData = [];
+        const defaultValueFormat = "amount";
+        const defaultPrintModeFormat = "amount";
+        const fallbackColor = "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] || fallbackColor;
+            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) ? "vertical" : undefined;
+            }
+        });
+    }
+    calculateGridInfo() {
+        var _a, _b, _c;
+        const firstBarAreaEl = this.el.shadowRoot.querySelector(".bar-area");
+        const barAreaHeight = (_a = firstBarAreaEl === null || firstBarAreaEl === void 0 ? void 0 : firstBarAreaEl.getBoundingClientRect().height) !== null && _a !== void 0 ? _a : 0;
+        const maxTicks = barAreaHeight > 0 ? getMaxTicks(barAreaHeight) : 1;
+        const { numIntervals, interval } = findLargestNiceInterval(maxTicks, this.gridMax);
+        const tickLabels = [];
+        for (let i = 1; i <= numIntervals; i++) {
+            const tickValue = i * interval;
+            const decimalPlaces = (_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.decimalPlaces) !== null && _c !== void 0 ? _c : inferDecimalPlacesForUnitValue(tickValue);
+            tickLabels.push(suffixNumber(tickValue, decimalPlaces));
+        }
+        return {
+            numTicks: numIntervals,
+            interval: interval,
+            backgroundSize: `${100 / numIntervals}%`,
+            tickLabels: tickLabels,
+        };
+    }
+    determinePlotDivisions(divisionWidth, divisionGap, availableWidth) {
+        // Given a uniform division width and gap, determines how many divisions can fit in a row
+        let divisionsPerRow = Math.floor((availableWidth + divisionGap) / (divisionWidth + divisionGap));
+        if (divisionsPerRow <= 0)
+            divisionsPerRow = 1; // In the event no divisions can fit in a row force at least one
+        return divisionsPerRow;
+    }
+    determinePlots() {
+        var _a, _b;
+        this.componentWrapperEl.style.setProperty("--forced-width", `${this.printWidthPx}px`); // Wrapper width needs to be set so accurate measurements are taken
+        if (this.isGrouped) {
+            const groupedEdgePadding = 32;
+            const availablePlotWidth = this.getAvailablePlotWidth(groupedEdgePadding);
+            // By design, each group has the same number of columns and therefore the same width
+            const firstGroupEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".bar-area.grouped .group-columns");
+            const groupWidth = (_b = firstGroupEl === null || firstGroupEl === void 0 ? void 0 : firstGroupEl.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0;
+            const firstBarAreaEl = this.el.shadowRoot.querySelector(".bar-area");
+            const groupGap = firstBarAreaEl ? parseFloat(getComputedStyle(firstBarAreaEl).columnGap) : 0;
+            this.plotDivisions = this.determinePlotDivisions(groupWidth, groupGap, availablePlotWidth);
+        }
+        else {
+            const columnGap = 24;
+            const availablePlotWidth = Math.round(this.getAvailablePlotWidth(0));
+            this.plotDivisions = this.determinePlotDivisions(this.plotColumnWidth, columnGap, availablePlotWidth);
+        }
+    }
+    // #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) {
+        if (ev.target.nodeName === "WM-CHART-LEGEND") {
+            const legendEl = ev.target;
+            if (legendEl.chartIds.includes(this.el.id)) {
+                this.handleLegendFocus(ev.detail.idx);
+                this.scrollToBar(ev.detail.idx);
+            }
+        }
+    }
+    handleLegendItemHover(ev) {
+        if (ev.target.nodeName === "WM-CHART-LEGEND") {
+            const legendEl = ev.target;
+            if (legendEl.chartIds.includes(this.el.id)) {
+                this.handleLegendFocus(ev.detail.idx);
+            }
+        }
+    }
+    handleBeforePrint() {
+        if (this.printWidth) {
+            this.userIsPrinting = true;
+            this.handleConfigDataChange();
+        }
+    }
+    handleAfterPrint() {
+        if (this.printWidth) {
+            this.userIsPrinting = false;
+            this.handleConfigDataChange();
+        }
+    }
+    handleLegendFocus(idx) {
+        var _a;
+        if (idx == -1) {
+            this.clearHighlights();
+        }
+        else {
+            const barLegend = (_a = this.legendData[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();
+        }
+    }
+    updateScrollFade(plotAreaEl) {
+        const fadeDistance = 42;
+        if (plotAreaEl.scrollLeft > 0) {
+            plotAreaEl.style.setProperty("--left-fade-distance", `${fadeDistance}px`);
+        }
+        else {
+            plotAreaEl.style.setProperty("--left-fade-distance", "0px");
+        }
+        if (plotAreaEl.scrollLeft + plotAreaEl.clientWidth + 1 < plotAreaEl.scrollWidth) {
+            plotAreaEl.style.setProperty("--right-fade-distance", `${fadeDistance}px`);
+        }
+        else {
+            plotAreaEl.style.setProperty("--right-fade-distance", "0px");
+        }
+    }
+    // #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,
+            });
+        }
+    }
+    scrollToBar(barIdx) {
+        const labelEls = this.el.shadowRoot.querySelectorAll(`.x-axis .bar-legend`);
+        const labelToFocus = labelEls[barIdx];
+        const plotAreaParent = labelToFocus === null || labelToFocus === void 0 ? void 0 : labelToFocus.closest(".plot-area");
+        if (labelToFocus && plotAreaParent) {
+            const labelLeft = labelToFocus.offsetLeft;
+            const labelRight = labelLeft + labelToFocus.offsetWidth;
+            const scrollLeft = plotAreaParent.scrollLeft;
+            const visibleRight = scrollLeft + plotAreaParent.clientWidth;
+            const isLabelVisible = labelLeft >= scrollLeft && labelRight <= visibleRight;
+            if (!isLabelVisible) {
+                plotAreaParent.scrollTo({
+                    left: labelToFocus.offsetLeft - 12,
+                    behavior: "smooth",
+                });
+            }
+        }
+    }
+    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;
+            if (((_a = this.flattenedData[idx]) === null || _a === void 0 ? void 0 : _a.barLegend) === barLegend) {
+                barItem.classList.remove("faded");
+            }
+            else {
+                barItem.classList.add("faded");
+            }
+        });
+    }
+    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 vertical", style: { "--offset": `calc(${barPercent}% + 12px)` } }, 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), ")"))));
+    }
+    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 } });
+    }
+    renderYAxis() {
+        var _a, _b;
+        const numTicks = ((_a = this.gridInfo) === null || _a === void 0 ? void 0 : _a.numTicks) || 1;
+        return (h("div", { class: `y-axis ${this.isGrouped ? "grouped" : ""}`, "aria-hidden": "true" }, (_b = this.gridInfo) === null || _b === void 0 ? void 0 :
+            _b.tickLabels.map((label, idx) => {
+                const percentFromTop = 100 - ((idx + 1) / numTicks) * 100;
+                return (h("div", { class: "tick", key: label, style: { "--offset": `${percentFromTop}%` } }, h("span", null, label)));
+            }), h("div", { class: "tick zero" }, h("span", null, "0"))));
+    }
+    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) ? "vertical" : undefined, onWmLegendItemClick: (ev) => this.handleLegendItemClick(ev), onWmLegendItemHover: (ev) => this.handleLegendItemHover(ev) })));
+    }
+    renderPlotContainers() {
+        const totalDivisions = this.isGrouped ? this.processedData.size : this.flattenedData.length;
+        const plotCount = Math.ceil(totalDivisions / this.plotDivisions);
+        return (h("div", { class: "chart-center", style: {
+                "--plot-column-count": this.plotDivisions.toString(),
+                "--plot-column-width": this.isGrouped ? "1fr" : `${this.plotColumnWidth}px`,
+            } }, Array.from({ length: plotCount }, (_, plotIdx) => this.renderPlot(plotIdx, totalDivisions))));
+    }
+    renderPlot(plotIdx, totalDivisions) {
+        var _a, _b;
+        const indexStart = plotIdx * this.plotDivisions;
+        const indexSpan = Math.min(this.plotDivisions, totalDivisions - indexStart);
+        const columnIndices = Array.from({ length: indexSpan }, (_, j) => indexStart + j);
+        return (h("div", { class: "plot-container", key: `plot-container-${plotIdx}` }, h("div", { class: "left-axis-label" }, h("span", { class: "axis-label-text" }, (_a = this.config) === null || _a === void 0 ? void 0 : _a.valueAxisLabel)), this.gridVisible && this.renderYAxis(), h("div", { class: `plot-area ${this.isGrouped ? "grouped" : ""} ${this.isPlotWidthLimited ? "no-scroll" : ""}`, onScroll: (ev) => (this.isPlotWidthLimited ? undefined : this.updateScrollFade(ev.target)), tabindex: "-1" }, this.gridVisible && this.renderGrid(), h("div", { class: `bar-area ${this.isKeying ? "user-is-keying" : ""} ${this.isGrouped ? "grouped" : ""}` }, ((_b = this.config) === null || _b === void 0 ? void 0 : _b.gridMax) != undefined && this.renderColumns(columnIndices)), h("div", { class: `x-axis ${this.isGrouped ? "grouped" : ""}` }, this.renderXAxis(columnIndices)), this.isPlotWidthLimited && this.renderCategoryAxisLabel()), !this.isPlotWidthLimited && this.renderCategoryAxisLabel()));
+    }
+    renderCategoryAxisLabel() {
+        var _a;
+        return (h("div", { class: "bottom-axis-label" }, h("span", { class: "axis-label-text" }, (_a = this.config) === null || _a === void 0 ? void 0 : _a.categoryAxisLabel)));
+    }
+    renderColumns(indices) {
+        // indices refers to bar index or group index, depending on chart configuration
+        const columnEls = [];
+        const groupKeys = [...this.processedData.keys()];
+        indices.forEach((idx) => {
+            if (this.isGrouped) {
+                const groupName = groupKeys[idx];
+                const items = this.processedData.get(groupName);
+                columnEls.push(h("div", { key: `group-${groupName}`, class: "group-columns" }, items.map((item) => this.renderBar(item, idx)), h("div", { class: "group-underline" })));
+            }
+            else {
+                const item = this.flattenedData[idx];
+                columnEls.push(this.renderBar(item, idx));
+            }
+        });
+        return columnEls;
+    }
+    renderBar(item, idx) {
+        var _a, _b, _c, _d;
+        if (!this.gridInfo)
+            return;
+        const effectiveGridMax = this.gridInfo.numTicks * this.gridInfo.interval;
+        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}-${idx}`, class: "bar-wrapper" }, this.renderBarValue(item, barPercent), h("div", { class: `bar ${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}` })));
+    }
+    renderXAxis(indices) {
+        const legends = [];
+        if (this.isGrouped) {
+            const groupNames = [...this.processedData.keys()];
+            indices.forEach((idx) => {
+                const groupName = groupNames[idx];
+                legends.push(h("div", { key: `legend-${groupName}`, class: "group-legend" }, h("span", null, groupName)));
+            });
+        }
+        else {
+            const flatData = this.flattenedData;
+            indices.forEach((idx) => {
+                const item = flatData[idx];
+                if (!item)
+                    return;
+                legends.push(h("div", { key: `legend-${idx}-${item.barLegend}`, class: "bar-legend" }, h("span", null, item.barLegend), h("div", { class: "--measure-wrapper" }, h("span", { class: "--measure-width" }, item.barLegend))));
+            });
+        }
+        return legends;
+    }
+    // #endregion rendering
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        return (h(Host, { key: '9d479e3ec4009da93674780ef3acbfdc3d843cc2' }, h("div", { key: '3073e31e87ae929ea4d338159d7c47f9df7916e7', class: "popover-wrapper" }, h("priv-chart-popover", { key: 'ab816b2f99987b30abc0b5bc87256b7e86ade640', ref: (el) => (this.popoverEl = el), onIntChartPopoverToggled: (ev) => this.handlePopoverToggled(ev) })), h("div", { key: '097ff1a745cb73af419d723865daec586c107c17', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${((_a = this.printMode) !== null && _a !== void 0 ? _a : (_b = this.config) === null || _b === void 0 ? void 0 : _b.printMode) ? "print-mode" : ""}`, style: this.isPlotWidthLimited ? { "--forced-width": `${this.printWidthPx}px` } : undefined, tabindex: "0", role: "application", onKeyDown: (ev) => this.handleChartKeyDown(ev), onBlur: (ev) => this.handleComponentBlur(ev), "aria-roledescription": chartMessages.interactiveChart, "aria-describedby": "chart-instructions", "aria-label": (_c = this.config) === null || _c === void 0 ? void 0 : _c.label }, ((_e = (_d = this.config) === null || _d === void 0 ? void 0 : _d.showLabel) !== null && _e !== void 0 ? _e : true) && (h("label", { key: '5cd67325246ce2d354e46e535ec0a12ec804e9fb', id: "label", class: "label" }, h("span", { key: '70636108033bb273dce23bfb20c3a95b230eada7', class: "label-text" }, (_f = this.config) === null || _f === void 0 ? void 0 : _f.label), this.subinfoText ? h("span", { class: "subinfo" }, this.subinfoText) : "")), this.showLegend === "top" && this.renderLegend("horizontal"), h("div", { key: 'f358d1ebcc925a05f26a49ba0350cc7e937575f3', class: "chart-wrapper" }, h("div", { key: 'f7187f76ae1833a492fc1f7e3e1fd02443246ebe', class: "chart-left-side" }, this.showLegend === "left" && this.renderLegend("vertical")), this.data && this.renderPlotContainers(), h("div", { key: '4b8cce2f3b29a95a4f4cc2ff5e4011080d857c35', class: "chart-right-side" }, this.showLegend === "right" && this.renderLegend("vertical"))), this.showLegend === "bottom" && this.renderLegend("horizontal"), renderInstructionsText())));
+    }
+    static get is() { return "wm-chart-column"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-chart-column.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-chart-column.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": ""
+                }
+            },
+            "printWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fixed chart width for print or PDF export. Accepts `px`, `in`, or `cm` (e.g.\n`\"7.5in\"`). When set alongside `print-mode` or during `window.print()`, columns that\nexceed the available width wrap across multiple plot rows."
+                        }],
+                    "text": ""
+                },
+                "attribute": "print-width",
+                "reflect": false
+            },
+            "printMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "When true, column 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 columns 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 column 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"
+            }, {
+                "propName": "printWidth",
+                "methodName": "handleConfigDataChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "wmLegendItemClick",
+                "method": "handleLegendItemClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmLegendItemHover",
+                "method": "handleLegendItemHover",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "beforeprint",
+                "method": "handleBeforePrint",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "afterprint",
+                "method": "handleAfterPrint",
+                "target": "window",
+                "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
+            }];
+    }
+}