@watermarkinsights/ripple 5.22.1-alpha.3 → 5.23.0-alpha.0

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

@@ -0,0 +1,471 @@
+import { h, Host } from "@stencil/core";
+import { chartPaletteDiscrete, chartPaletteSemantic, } from "../../../global/interfaces";
+import { formatDisplayValue, suffixNumber, renderInstructionsText, findLargestNiceInterval, getMaxTicks, } from "../chartFunctions";
+import { chartMessages } from "../../../global/intl";
+import { isElOrChild } from "../../../global/functions";
+export class ChartBar {
+    constructor() {
+        this.gridMax = 0;
+        this.config = undefined;
+        this.data = undefined;
+        this.printMode = undefined;
+        this.subinfo = undefined;
+        this.processedData = [];
+        this.gridInfo = undefined;
+        this.isKeying = false;
+    }
+    ////////////////////////////////////////////////////////////
+    // #region Getters
+    ////////////////////////////////////////////////////////////
+    get colorPalette() {
+        var _a, _b, _c, _d;
+        let palette = ["wmcolor-dataviz-discrete-01"]; // default to single color
+        if (((_a = this.config) === null || _a === void 0 ? void 0 : _a.colors) === "semantic") {
+            palette = chartPaletteSemantic;
+        }
+        else if (((_b = this.config) === null || _b === void 0 ? void 0 : _b.colors) == "discrete") {
+            palette = chartPaletteDiscrete;
+        }
+        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) || "";
+    }
+    // #endregion getters
+    ////////////////////////////////////////////////////////////
+    // #region Component lifecycle
+    ////////////////////////////////////////////////////////////
+    componentDidLoad() {
+        const resizeObserver = new ResizeObserver(() => {
+            if (this.processedData) {
+                this.gridInfo = this.calculateGridInfo();
+            }
+        });
+        resizeObserver.observe(this.barAreaEl);
+    }
+    // #endregion component lifecycle
+    ////////////////////////////////////////////////////////////
+    // #region Data processing
+    ////////////////////////////////////////////////////////////
+    processData() {
+        if (this.config && this.data) {
+            const itemTotal = this.data.reduce((acc, item) => acc + item.amount, 0);
+            const largest = Math.max(...this.data.map((item) => item.amount));
+            // Use config.gridMax if specified, otherwise calculate from data
+            // Even when the grid is not displayed (undefined), we need a gridMax to calculate the bar widths
+            this.gridMax =
+                this.config.gridMax === "auto" || this.config.gridMax === undefined ? largest : this.config.gridMax;
+            const processedItems = this.processItems(itemTotal);
+            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 = processedItems;
+            this.gridInfo = this.calculateGridInfo();
+        }
+    }
+    processItems(itemTotal) {
+        var _a, _b;
+        const valueFormat = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.valueFormat) || "amount"; // default to amount
+        const printModeFormat = ((_b = this.config) === null || _b === void 0 ? void 0 : _b.printModeFormat) || "amount"; // default to amount
+        const defaultColor = "wmcolor-dataviz-discrete-01";
+        const isUniformConfigColor = this.colorPalette.length === 1;
+        return this.data.map((item, index) => {
+            var _a;
+            const barColor = item.color || (isUniformConfigColor ? this.colorPalette[0] : (_a = this.colorPalette[index]) !== null && _a !== void 0 ? _a : defaultColor);
+            return {
+                label: item.label,
+                amount: item.amount,
+                gridPercent: (item.amount / this.gridMax) * 100,
+                displayValue: formatDisplayValue(item.amount, itemTotal, valueFormat),
+                printValue: formatDisplayValue(item.amount, itemTotal, printModeFormat),
+                color: barColor,
+                popoverTitle: item.popoverTitle,
+                popoverText: item.popoverText,
+                popoverButtonText: item.popoverButtonText,
+            };
+        });
+    }
+    propogateExternalLegendData() {
+        document.querySelectorAll("wm-chart-legend").forEach((legend) => {
+            if (legend.chartIds.includes(this.el.id)) {
+                legend.processedData = this.processedData;
+            }
+        });
+    }
+    calculateGridInfo() {
+        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++) {
+            tickLabels.push(suffixNumber(i * interval));
+        }
+        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":
+                ev.preventDefault();
+                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, barIdx) {
+        switch (ev.key) {
+            case "ArrowUp":
+                ev.preventDefault();
+                ev.stopPropagation();
+                this.focusBar(barIdx - 1);
+                break;
+            case "ArrowDown":
+                ev.preventDefault();
+                ev.stopPropagation();
+                this.focusBar(barIdx + 1);
+                break;
+            case "Enter":
+                if (this.popoverEl.open) {
+                    const popoverBtn = this.popoverEl.querySelector("button");
+                    popoverBtn && popoverBtn.click();
+                }
+                break;
+        }
+    }
+    handleBarClick(ev, idx) {
+        if (this.processedData) {
+            this.openPopover(this.processedData[idx], { x: ev.clientX, y: ev.clientY });
+            this.highlightBar(idx);
+        }
+    }
+    handleExternalLegendItemClick(ev) {
+        if (ev.target.nodeName === "WM-CHART-LEGEND") {
+            // Only considers external legends, event target of internal legends is the chart
+            const legendEl = ev.target;
+            if (legendEl.chartIds.includes(this.el.id)) {
+                this.highlightBar(ev.detail.idx);
+            }
+        }
+    }
+    handleInternalLegendItemClick(ev) {
+        const legendEl = ev.target;
+        if (legendEl.chartIds.includes(this.el.id)) {
+            this.highlightBar(ev.detail.idx);
+        }
+    }
+    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();
+        this.highlightBar(wrappedIdx);
+        const cornerOffset = 12;
+        const processedItem = this.processedData[wrappedIdx];
+        this.openPopover(processedItem, {
+            x: barToFocus.getBoundingClientRect().left + cornerOffset,
+            y: barToFocus.getBoundingClientRect().top + cornerOffset,
+        });
+    }
+    handlePopoverOpenChanged(_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) {
+                this.highlightBar(this.processedData.findIndex((item) => { var _a; return item.label === ((_a = this.popoverEl.chartData) === null || _a === void 0 ? void 0 : _a.label); }));
+            }
+            else {
+                this.clearHighlights();
+            }
+        }, 30);
+    }
+    openPopover(clickedProcessedData, coords) {
+        let matchingChartData = this.data.find((item) => item.label === clickedProcessedData.label);
+        if (matchingChartData) {
+            this.popoverEl.chartData = matchingChartData;
+            this.popoverEl.header = matchingChartData.popoverTitle || this.config.popoverTitle || "";
+            this.popoverEl.text = matchingChartData.popoverText || this.config.popoverText || "";
+            this.popoverEl.buttonText = matchingChartData.popoverButtonText || this.config.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(idx) {
+        const barItems = this.el.shadowRoot.querySelectorAll(".bar-wrapper");
+        barItems.forEach((barItem) => {
+            barItem.classList.add("faded");
+        });
+        barItems[idx].classList.remove("faded");
+        this.wmChartBarHighlighted.emit({ idx: idx });
+    }
+    clearFocus() {
+        if (this.popoverEl.open) {
+            this.popoverEl.open = false;
+            console.log("popover closed from clearFocus: ", this.popoverEl.open);
+        }
+        this.clearHighlights();
+    }
+    // #endregion focus and highlighting
+    ////////////////////////////////////////////////////////////
+    // #region Rendering
+    ////////////////////////////////////////////////////////////
+    renderBarLegends() {
+        return this.processedData.map((item) => (h("div", { key: `legend-${item.label}`, class: "bar-legend" }, item.label)));
+    }
+    renderBars() {
+        // Use effective grid max (numTicks * interval) for accurate bar sizing
+        const effectiveGridMax = this.gridInfo.numTicks * this.gridInfo.interval;
+        return this.processedData.map((item, idx) => {
+            const barPercent = effectiveGridMax > 0 ? (item.amount / effectiveGridMax) * 100 : 0;
+            return (h("div", { key: `bar-${item.label}`, class: "bar-wrapper" }, h("div", { class: "bar", style: { width: `${barPercent}%`, backgroundColor: `var(--${item.color})` }, onClick: (ev) => this.handleBarClick(ev, idx), onKeyDown: (ev) => this.handleBarKeyDown(ev, idx), tabindex: "-1", "aria-label": `${item.label} ${item.displayValue}` }), h("span", { class: "value", style: { insetInlineStart: `${barPercent}%` } }, item.displayValue)));
+        });
+    }
+    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() {
+        return h("div", { class: "grid-lines", style: { "--background-size": this.gridInfo.backgroundSize } });
+    }
+    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.processedData, 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.handleInternalLegendItemClick(ev) })));
+    }
+    // #endregion rendering
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const rowCount = this.processedData.length || 1;
+        return (h(Host, { key: 'af9ee18a445a32072133a4818a17543a9b642653' }, h("div", { key: '1ebd9b80b2546978f0819918abc7be5d71058315', 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 }, h("div", { key: 'fe01168cac52e5dba3f05b7fc51c8ef581c1422c', class: "popover-wrapper" }, h("priv-chart-popover", { key: '84dc52e1c81f3a978e2b4369cb675ef3969038cf', ref: (el) => (this.popoverEl = el), onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) })), h("label", { key: '0190875870d6e90915038a49c26343ee85f57a20', id: "label", class: `label --${(_b = this.config) === null || _b === void 0 ? void 0 : _b.labelPosition}` }, h("span", { key: '1d6900d5a62cecea8afab6f3348f9ed7305bed9f', class: "label-text" }, (_c = this.config) === null || _c === void 0 ? void 0 : _c.label), this.subinfoText ? h("span", { class: "subinfo" }, this.subinfoText) : ""), this.showLegend === "top" && this.renderLegend("horizontal"), h("div", { key: '1c22408dd8d89d988202eaa31279026641325f03', class: "chart-wrapper" }, h("div", { key: '11e1c3558f052f2f77f8b8e3f29503ca69a5f93d', class: "chart-left-side" }, this.showLegend === "left" && this.renderLegend("vertical"), h("div", { key: '96852f416f193b403dd2a1d55f8ef0d9181779ab', class: "category-axis-label" }, h("span", { key: '4c25a14518ea40222b2b965a319624ea35f87a84', class: "axis-label-text" }, (_d = this.config) === null || _d === void 0 ? void 0 : _d.categoryAxisLabel))), h("div", { key: '7dcd802835da086e4860ee3f09e256bcb925b7ad', class: "chart-center" }, h("div", { key: 'bc8e2bfc65afea16e352b61f77bd9483271af04b', class: "chart-area", style: { "--row-count": rowCount.toString() } }, this.processedData && this.renderBarLegends(), h("div", { key: '5bcfb85a9d3f13843edd8a4242473e29ff8373e7', class: `bar-area ${this.isKeying ? "user-is-keying" : ""}`, ref: (el) => (this.barAreaEl = el) }, this.gridInfo && ((_e = this.config) === null || _e === void 0 ? void 0 : _e.gridMax) != undefined && this.renderGrid(), this.gridInfo && this.processedData && this.renderBars())), h("div", { key: '8d7ea9e756430f0fc18db7a2114adca5dd0b13a0', class: "value-axis-label" }, h("span", { key: '5c6d15a4dc479179de31ab267dcbacf50bd6a918', class: "axis-label-text" }, (_f = this.config) === null || _f === void 0 ? void 0 : _f.valueAxisLabel)), this.gridInfo && ((_g = this.config) === null || _g === void 0 ? void 0 : _g.gridMax) != undefined && this.renderXAxis()), h("div", { key: '3cf6cf7f5574af218c366b00c3abfde6ad8d9204', 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 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; labelPosition: \"top\" | \"none\"; labelWidth: string; valueAxisLabel: string; categoryAxisLabel: string; printMode: boolean; printModeFormat: \"amount\" | \"percentage\"; gridMax?: number | \"auto\" | undefined; sort?: \"none\" | \"ascending\" | \"descending\" | undefined; showLegend?: \"top\" | \"bottom\" | \"left\" | \"right\" | \"none\" | undefined; subinfo?: string | undefined; completionMessage?: string | undefined; valueFormat?: \"none\" | \"amount\" | \"percentage\" | undefined; colors?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | 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": "processData"
+            }, {
+                "propName": "data",
+                "methodName": "processData"
+            }, {
+                "propName": "processedData",
+                "methodName": "propogateExternalLegendData"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "wmLegendItemClick",
+                "method": "handleExternalLegendItemClick",
+                "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": "wmUserIsTabbing",
+                "method": "handleUserIsKeying",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmUserIsNotKeying",
+                "method": "handleUserIsNotKeying",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmUserIsNotTabbing",
+                "method": "handleUserIsNotKeying",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}