@watermarkinsights/ripple 0.0.1 → 0.1.0-alpha.0

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

@@ -0,0 +1,688 @@
+import { h, Host } from "@stencil/core";
+import { chartPalettes, } 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";
+export class ChartColumn {
+    constructor() {
+        this.gridMax = 0;
+        this.isGrouped = false;
+        this.legendData = [];
+        this.ungroupedDataName = "_ungrouped";
+        this.debouncedHandleResize = debounce(() => {
+            if (this.processedData) {
+                this.gridInfo = this.calculateGridInfo();
+                // Only update column width for ungrouped - grouped gap is based on label content which doesn't change on resize
+                if (!this.isGrouped) {
+                    this.updateColumnWidth();
+                }
+                this.applyScrollFade();
+            }
+        }, 20);
+        this.config = undefined;
+        this.data = undefined;
+        this.printMode = undefined;
+        this.subinfo = undefined;
+        this.processedData = new Map();
+        this.gridInfo = undefined;
+        this.isKeying = false;
+    }
+    ////////////////////////////////////////////////////////////
+    // #region Getters
+    ////////////////////////////////////////////////////////////
+    get colorPalette() {
+        var _a, _b, _c, _d;
+        // Default to discrete palette for grouped charts, single color for ungrouped
+        let palette = this.isGrouped ? chartPalettes.discrete : ["wmcolor-dataviz-discrete-01"];
+        if (((_a = this.config) === null || _a === void 0 ? void 0 : _a.colors) === "semantic") {
+            palette = chartPalettes.semantic;
+        }
+        else if (((_b = this.config) === null || _b === void 0 ? void 0 : _b.colors) == "discrete") {
+            palette = chartPalettes.discrete;
+        }
+        else if ((_d = (_c = this.config) === null || _c === void 0 ? void 0 : _c.colors) === null || _d === void 0 ? void 0 : _d.startsWith("wmcolor-")) {
+            palette = [this.config.colors];
+        }
+        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;
+    }
+    // #endregion getters
+    ////////////////////////////////////////////////////////////
+    // #region Component lifecycle
+    ////////////////////////////////////////////////////////////
+    componentDidLoad() {
+        const resizeObserver = new ResizeObserver(() => this.debouncedHandleResize());
+        resizeObserver.observe(this.barAreaEl);
+        resizeObserver.observe(this.el);
+        if (this.config && this.data) {
+            this.handleConfigDataChange();
+        }
+    }
+    updateColumnWidth() {
+        if (!this.scrollableAreaEl)
+            return;
+        const measureElements = this.el.shadowRoot.querySelectorAll(".--measure-width");
+        const maxWidth = Array.from(measureElements).reduce((max, el) => Math.max(max, el.offsetWidth), 0);
+        // Cap at 120px max
+        const columnWidth = Math.min(maxWidth + 1, 120); // add 1px buffer for subpixel rendering
+        this.scrollableAreaEl.style.setProperty("--column-width", `${columnWidth}px`);
+    }
+    updateGroupedColumnGap() {
+        if (!this.barAreaEl)
+            return;
+        const valueElements = this.el.shadowRoot.querySelectorAll(".value");
+        const maxLabelWidth = Array.from(valueElements).reduce((max, el) => Math.max(max, el.offsetWidth), 0);
+        const barWidth = 24;
+        const minGap = 12;
+        const labelOverhang = (maxLabelWidth - barWidth) / 2;
+        const requiredGap = Math.max(minGap, labelOverhang + minGap);
+        this.barAreaEl.style.setProperty("--grouped-column-gap", `${requiredGap}px`);
+        this.scrollableAreaEl.style.setProperty("--column-group-gap", `${requiredGap + 20}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);
+            let processedItems = this.processChartData();
+            if (this.isGrouped) {
+                processedItems = sortGroupedData(processedItems);
+            }
+            else if (this.sort === "ascending") {
+                processedItems.sort((a, b) => a.amount - b.amount);
+            }
+            else if (this.sort === "descending") {
+                processedItems.sort((a, b) => b.amount - a.amount);
+            }
+            this.processedData = groupProcessedData(processedItems, this.ungroupedDataName);
+            // Temporary fix to remove print values for grouped charts
+            this.legendData = this.isGrouped
+                ? computeLegendData(this.processedData).map((item) => (Object.assign(Object.assign({}, item), { printValue: "" })))
+                : computeLegendData(this.processedData);
+            this.gridInfo = this.calculateGridInfo();
+            // Wait for render then measure labels
+            requestAnimationFrame(() => {
+                if (this.isGrouped) {
+                    this.updateGroupedColumnGap();
+                }
+                else {
+                    this.updateColumnWidth();
+                }
+                this.applyScrollFade();
+            });
+        }
+    }
+    processChartData() {
+        var _a, _b, _c, _d;
+        if (!this.data) {
+            return [];
+        }
+        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 isUniformConfigColor = this.colorPalette.length === 1;
+        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++;
+                }
+            });
+        }
+        return this.data.map((item, index) => {
+            const colorIndex = this.isGrouped ? barLegendColorMap.get(item.barLegend) || 0 : index;
+            const barColor = item.color
+                ? item.color
+                : isUniformConfigColor
+                    ? 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,
+            };
+        });
+    }
+    propagateExternalLegendData() {
+        document.querySelectorAll("wm-chart-legend").forEach((legend) => {
+            if (legend.chartIds.split(" ").includes(this.el.id)) {
+                legend.processedData = this.legendData;
+            }
+        });
+    }
+    calculateGridInfo() {
+        var _a, _b;
+        const barAreaHeight = this.barAreaEl.getBoundingClientRect().height;
+        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 = (_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) {
+        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);
+            }
+        }
+    }
+    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();
+        }
+    }
+    applyScrollFade() {
+        const fadeDistance = 42;
+        if (this.scrollableAreaEl.scrollLeft > 0) {
+            this.scrollableAreaEl.style.setProperty("--left-fade-distance", `${fadeDistance}px`);
+        }
+        else {
+            this.scrollableAreaEl.style.setProperty("--left-fade-distance", "0px");
+        }
+        if (this.scrollableAreaEl.scrollLeft + this.scrollableAreaEl.clientWidth + 1 < this.scrollableAreaEl.scrollWidth) {
+            this.scrollableAreaEl.style.setProperty("--right-fade-distance", `${fadeDistance}px`);
+        }
+        else {
+            this.scrollableAreaEl.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 labelToFocus = this.el.shadowRoot.querySelector(`.x-axis .bar-legend:nth-child(${barIdx + 1})`);
+        if (labelToFocus) {
+            const labelLeft = labelToFocus.offsetLeft;
+            const labelRight = labelLeft + labelToFocus.offsetWidth;
+            const scrollLeft = this.scrollableAreaEl.scrollLeft;
+            const visibleRight = scrollLeft + this.scrollableAreaEl.clientWidth;
+            const isLabelVisible = labelLeft >= scrollLeft && labelRight <= visibleRight;
+            if (!isLabelVisible) {
+                this.scrollableAreaEl.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.barAreaEl.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
+    ////////////////////////////////////////////////////////////
+    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;
+    }
+    renderColumns() {
+        if (!this.gridInfo || !this.processedData) {
+            return;
+        }
+        // Use effective grid max (numTicks * interval) for accurate bar sizing
+        const effectiveGridMax = this.gridInfo.numTicks * this.gridInfo.interval;
+        const columns = [];
+        this.processedData.forEach((items) => {
+            items.forEach((item) => {
+                var _a;
+                const barPercent = effectiveGridMax > 0 ? (item.amount / effectiveGridMax) * 100 : 0;
+                columns.push(h("div", { key: `bar-${item.groupName}-${item.barLegend}`, class: "bar-wrapper" }, h("span", { class: "value", style: { insetBlockEnd: `calc(${barPercent}% + 12px)` } }, item.displayValue), h("div", { class: "bar", style: { flexBasis: `${barPercent}%`, backgroundColor: `var(--${item.color})` }, onClick: (ev) => this.handleBarClick(ev, item), onKeyDown: (ev) => this.handleBarKeyDown(ev, item), tabindex: "-1", "aria-label": `${(_a = this.config) === null || _a === void 0 ? void 0 : _a.categoryAxisLabel}, ${item.groupName ? `${item.groupName},` : ""} ${item.barLegend} ${item.displayValue}` })));
+            });
+        });
+        return columns;
+    }
+    renderXAxis() {
+        const legends = [];
+        this.processedData.forEach((items) => {
+            items.forEach((item) => {
+                legends.push(h("div", { key: `legend-${item.barLegend}`, class: "bar-legend" }, h("span", null, item.barLegend), h("div", { class: "--measure-wrapper" }, h("span", { class: "--measure-width" }, item.barLegend))));
+            });
+        });
+        return h("div", { class: "x-axis" }, legends);
+    }
+    renderGroupedXAxis() {
+        const legends = [];
+        this.processedData.forEach((_, groupName) => {
+            legends.push(h("div", { key: `legend-${groupName}`, class: "group-legend" }, h("span", null, groupName)));
+        });
+        return h("div", { class: "x-axis grouped" }, legends);
+    }
+    renderGroupedColumns() {
+        if (!this.gridInfo || !this.processedData) {
+            return;
+        }
+        const effectiveGridMax = this.gridInfo.numTicks * this.gridInfo.interval;
+        const groupedColumns = [];
+        this.processedData.forEach((items, groupName) => {
+            groupedColumns.push(h("div", { key: `group-${groupName}`, class: "group-columns" }, items.map((item) => {
+                var _a;
+                const barPercent = effectiveGridMax > 0 ? (item.amount / effectiveGridMax) * 100 : 0;
+                return (h("div", { key: `bar-${item.groupName}-${item.barLegend}`, class: "bar-wrapper" }, h("span", { class: "value", style: { insetBlockEnd: `calc(${barPercent}% + 12px)` } }, item.displayValue), h("div", { class: "bar", style: { flexBasis: `calc(${barPercent}% - 4px)`, backgroundColor: `var(--${item.color})` }, onClick: (ev) => this.handleBarClick(ev, item), onKeyDown: (ev) => this.handleBarKeyDown(ev, item), tabindex: "-1", "aria-label": `${(_a = this.config) === null || _a === void 0 ? void 0 : _a.categoryAxisLabel}, ${item.groupName ? `${item.groupName},` : ""} ${item.barLegend} ${item.displayValue}` })));
+            }), h("div", { class: "group-underline" })));
+        });
+        return groupedColumns;
+    }
+    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: { top: `${percentFromTop}%`, transform: "translateY(-50%)" } }, h("span", null, label)));
+            }), h("div", { class: "tick zero", style: { top: "100%", transform: "translateY(-50%)" } }, h("span", null, "0"))));
+    }
+    renderLegend(orientation) {
+        var _a, _b, _c;
+        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, onWmLegendItemClick: (ev) => this.handleLegendItemClick(ev), onWmLegendItemHover: (ev) => this.handleLegendItemHover(ev) })));
+    }
+    // #endregion rendering
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        return (h(Host, { key: 'dc5c91ca791d26c2063e91acc05489c99fb3e936' }, h("div", { key: '5c7b5fc5906186c991c4978e5ebd50faa18353ac', class: "popover-wrapper" }, h("priv-chart-popover", { key: '91839a648016f320aa0601cf38dffa8937214e3a', ref: (el) => (this.popoverEl = el), onIntChartPopoverToggled: (ev) => this.handlePopoverToggled(ev) })), h("div", { key: 'a1b0549bebe420cf12b946e0fc19e019900b43bb', ref: (el) => (this.componentWrapperEl = el), class: "component-wrapper", tabindex: "0", role: "application", onKeyDown: (ev) => this.handleChartKeyDown(ev), onBlur: (ev) => this.handleComponentBlur(ev), "aria-roledescription": chartMessages.interactiveChart, "aria-describedby": "chart-instructions", "aria-label": (_a = this.config) === null || _a === void 0 ? void 0 : _a.label }, ((_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.showLabel) !== null && _c !== void 0 ? _c : true) && (h("label", { key: 'e0a93f434719a059060022f3a206fe2991b41b6f', id: "label", class: "label" }, h("span", { key: '7d5fa4cc89fc64623d8d5f01cee5e87e90e0ed44', class: "label-text" }, (_d = this.config) === null || _d === void 0 ? void 0 : _d.label), this.subinfoText ? h("span", { class: "subinfo" }, this.subinfoText) : "")), this.showLegend === "top" && this.renderLegend("horizontal"), h("div", { key: '323f249a383d10653678b366753f672fcc379bfd', class: "chart-wrapper" }, h("div", { key: '1a89980e60449987f4d9c768720bd12fa5421dfe', class: "chart-left-side" }, this.showLegend === "left" && this.renderLegend("vertical"), h("div", { key: '808c31dc35dddb138e6c11c3aa91d506815ce810', class: "left-axis-label" }, h("span", { key: '98f2b1b9d25d7d2fce94ed1636da9fd9deffbf94', class: "axis-label-text" }, (_e = this.config) === null || _e === void 0 ? void 0 : _e.valueAxisLabel))), h("div", { key: '48b32d43e3d61ca02d9720861008764ae42b02e5', class: "chart-center" }, this.gridVisible && this.renderYAxis(), h("div", { key: '306e63906046ad42b804707c0c8e3f4677d49b34', class: `scrollable-area ${this.isGrouped ? "grouped" : ""}`, ref: (el) => (this.scrollableAreaEl = el), style: { "--column-count": this.columnCount.toString() }, onScroll: () => this.applyScrollFade(), tabindex: "-1" }, this.gridVisible && this.renderGrid(), h("div", { key: 'd2c5d43fe90fcc22d92bb7a59a6b9758b2842850', class: `bar-area ${this.isKeying ? "user-is-keying" : ""} ${this.isGrouped ? "grouped" : ""}`, ref: (el) => (this.barAreaEl = el) }, ((_f = this.config) === null || _f === void 0 ? void 0 : _f.gridMax) != undefined &&
+            (this.isGrouped ? this.renderGroupedColumns() : this.renderColumns())), this.isGrouped ? this.renderGroupedXAxis() : this.renderXAxis()), h("div", { key: '1c5e94786594c70aaabf2ad817000fb29da0fa43', class: "bottom-axis-label" }, h("span", { key: '73d4790a18157896f77efc1bfa853709ac9ef0e8', class: "axis-label-text" }, (_g = this.config) === null || _g === void 0 ? void 0 : _g.categoryAxisLabel))), h("div", { key: 'c9078b873177fac59579e146481472d419cdb669', 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; }",
+                    "references": {
+                        "ChartConfig": {
+                            "location": "import",
+                            "path": "../../../global/interfaces",
+                            "id": "src/global/interfaces.ts::ChartConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "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": [],
+                    "text": ""
+                }
+            },
+            "printMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "print-mode",
+                "reflect": false
+            },
+            "subinfo": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "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": [],
+                    "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": "processedData",
+                "methodName": "propagateExternalLegendData"
+            }];
+    }
+    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": "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
+            }];
+    }
+}