@watermarkinsights/ripple 5.23.0-alpha.8 → 5.23.0

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

@@ -1,474 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { chartPalettes, } from "../../../global/interfaces";
-import { formatDisplayValue, suffixNumber, renderInstructionsText, findLargestNiceInterval, getMaxTicks, findNiceRoundNumber, } 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 = 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);
-    }
-    // #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));
-            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;
-            }
-            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;
-        if (!this.data) {
-            return [];
-        }
-        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 {
-                barLegend: item.barLegend,
-                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.split(" ").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();
-                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, barIdx) {
-        switch (ev.key) {
-            case "ArrowUp":
-                ev.preventDefault();
-                this.focusBar(barIdx - 1);
-                break;
-            case "ArrowDown":
-                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, idx) {
-        if (this.processedData) {
-            this.openPopover(this.processedData[idx], { x: ev.clientX, y: ev.clientY });
-            this.highlightBar(idx);
-        }
-    }
-    handleLegendItemClick(ev) {
-        if (ev.target.nodeName === "WM-CHART-LEGEND") {
-            // If event from an internal legend bubbles up to the chart, ignore it
-            const legendEl = ev.target;
-            if (legendEl.chartIds.includes(this.el.id)) {
-                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,
-        });
-    }
-    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) {
-                this.highlightBar(this.processedData.findIndex((item) => { var _a; return item.barLegend === ((_a = this.popoverEl.chartData) === null || _a === void 0 ? void 0 : _a.barLegend); }));
-            }
-            else {
-                this.clearHighlights();
-            }
-        }, 30);
-    }
-    openPopover(clickedProcessedData, coords) {
-        if (!this.data || !this.config) {
-            return;
-        }
-        let matchingChartData = this.data.find((item) => item.barLegend === clickedProcessedData.barLegend);
-        if (matchingChartData) {
-            this.barAreaEl.classList.toggle("hide-focus-ring", !!this.processedData[this.data.indexOf(matchingChartData)].popoverButtonText);
-            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;
-        }
-        this.clearHighlights();
-    }
-    // #endregion focus and highlighting
-    ////////////////////////////////////////////////////////////
-    // #region Rendering
-    ////////////////////////////////////////////////////////////
-    renderBarLegends() {
-        return this.processedData.map((item) => (h("div", { key: `legend-${item.barLegend}`, class: "bar-legend" }, item.barLegend)));
-    }
-    renderBars() {
-        if (!this.gridInfo || !this.processedData) {
-            return;
-        }
-        // 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.barLegend}`, 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.barLegend} ${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() {
-        var _a;
-        const backgroundSize = (_a = this.gridInfo) === null || _a === void 0 ? void 0 : _a.backgroundSize;
-        return h("div", { class: "grid-lines", style: { "--background-size": backgroundSize } });
-    }
-    renderLegend(orientation) {
-        var _a, _b, _c;
-        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.handleLegendItemClick(ev) })));
-    }
-    // #endregion rendering
-    render() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        const rowCount = this.processedData.length || 1;
-        return (h(Host, { key: 'db599581ae1ce77727e59c31c8f79ad45453793f' }, h("div", { key: 'fba1fdf838a142a79203d342f58c76bfea52590f', 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 }, h("div", { key: '8bee3881a7dd604f6f92182314a8372bb82ea7fc', class: "popover-wrapper" }, h("priv-chart-popover", { key: 'a73212d2e7899650912f5499c2438e431235673f', ref: (el) => (this.popoverEl = el), onIntChartPopoverToggled: (ev) => this.handlePopoverToggled(ev) })), ((_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.showLabel) !== null && _c !== void 0 ? _c : true) && (h("label", { key: '94a9c169f69c2cdb99bbcb0b4f6ea2fadf81fc70', id: "label", class: "label" }, h("span", { key: '7f578b98b3f6f8683e45044d3550f31ce8c1dfa5', 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: '039c8ab84c937b202ff64cf635d0a43c520ef1e5', class: "chart-wrapper" }, h("div", { key: 'e2258ad49760655014f15782840d0aef54d3508e', class: "chart-left-side" }, this.showLegend === "left" && this.renderLegend("vertical"), h("div", { key: 'd6e2fc50844808d6eec09ed24d5aa7ed058df5f5', class: "category-axis-label" }, h("span", { key: '888442ada456f96e0dd55cf676afb9d3133d26e8', class: "axis-label-text" }, (_e = this.config) === null || _e === void 0 ? void 0 : _e.categoryAxisLabel))), h("div", { key: 'c31c5ef9086dbbd74cb185475c6b47605e71d8fc', class: "chart-center" }, h("div", { key: '104c87c74b4409454dd33c373e3563a926094b11', class: "chart-area", style: { "--row-count": rowCount.toString() } }, this.processedData && this.renderBarLegends(), h("div", { key: 'ee1de453a3595c9e814f19413c4078aa57a3a852', class: `bar-area ${this.isKeying ? "user-is-keying" : ""}`, ref: (el) => (this.barAreaEl = el) }, this.gridVisible && this.renderGrid(), ((_f = this.config) === null || _f === void 0 ? void 0 : _f.gridMax) != undefined && this.renderBars())), h("div", { key: '7e1086c0305f9848493819156c7da5bed607f238', class: "value-axis-label" }, h("span", { key: 'abeeefaa2eae958b94ef5de9dada3780a4dd85aa', class: "axis-label-text" }, (_g = this.config) === null || _g === void 0 ? void 0 : _g.valueAxisLabel)), this.gridVisible && this.renderXAxis()), h("div", { key: '3037e4179e8c159a865218ea4cf680d348635777', 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; 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; }",
-                    "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": "handleLegendItemClick",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "click",
-                "method": "handleDocumentClick",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "wmUserIsKeying",
-                "method": "handleUserIsKeying",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "wmUserIsNotTabbing",
-                "method": "handleUserIsNotKeying",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }];
-    }
-}