@watermarkinsights/ripple 5.22.0-alpha.4 → 5.22.0

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

@@ -1,423 +0,0 @@
-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";
-export class ChartBar {
-    constructor() {
-        this.gridMax = 0;
-        this.config = undefined;
-        this.data = undefined;
-        this.printMode = undefined;
-        this.subinfo = undefined;
-        this.processedData = [];
-        this.gridInfo = undefined;
-    }
-    ////////////////////////////////////////////////////////////
-    // #region Getters
-    ////////////////////////////////////////////////////////////
-    get colorPalette() {
-        var _a, _b;
-        let palette = chartPaletteDiscrete; // default to discrete palette
-        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;
-        }
-        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;
-        }
-    }
-    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";
-        return this.data.map((item, index) => ({
-            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: item.color || (index < this.colorPalette.length ? this.colorPalette[index] : defaultColor),
-            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
-    ////////////////////////////////////////////////////////////
-    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;
-        }
-        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: '0f82b57689d5de9f34d1fb2ea87789d84074c293' }, h("div", { key: 'fd9fe549a2b47456e5d20ee83aea0ca0e70d01cb', class: "component-wrapper", tabindex: "0", role: "application", onKeyDown: (ev) => this.handleChartKeyDown(ev), onBlur: () => this.clearFocus(), "aria-roledescription": chartMessages.interactiveChart, "aria-describedby": "chart-instructions", "aria-label": (_a = this.config) === null || _a === void 0 ? void 0 : _a.label }, h("div", { key: '953243f03efeb1e5f32e5f6009ad5194b21c6cba', class: "popover-wrapper" }, h("priv-chart-popover", { key: '94d6fee18be1b2fe7b8fbfdcc0e9bb50c3f3c4d4', ref: (el) => (this.popoverEl = el), onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) })), h("label", { key: '6058b7bbb9611712bd5e2e27506b9351059e3b5b', id: "label", class: `label --${(_b = this.config) === null || _b === void 0 ? void 0 : _b.labelPosition}` }, h("span", { key: '33b1894e82130d95538f9fc1972f6514ac172ea5', 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: '291776c96a78d58b9a8de6d1ccf19fb50f9da1b9', class: "chart-wrapper" }, h("div", { key: 'c93c357c6dc21f65854bdabfefb87fb6212a7dcc', class: "chart-left-side" }, this.showLegend === "left" && this.renderLegend("vertical"), h("div", { key: '80d55c2a55738e4f1c4ef86719896b4defebf02c', class: "category-axis-label" }, h("span", { key: '44e43a5721b32446e3947f95596cc3450909832b', class: "axis-label-text" }, (_d = this.config) === null || _d === void 0 ? void 0 : _d.categoryAxisLabel))), h("div", { key: '631d8f398a748e4f5443c0ac990771ac1cfacbd3', class: "chart-center" }, h("div", { key: '23ad663df36824c05d9cc9cd0a1bc1c5d483612b', class: "chart-area", style: { "--row-count": rowCount.toString() } }, this.processedData && this.renderBarLegends(), h("div", { key: '4d6c68f1a3524bc0ede3abeda145a144442f36ae', class: "bar-area", 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: 'ece79d8b04cb8d3cca95ef1df38f6abd3dd24a7a', class: "value-axis-label" }, h("span", { key: 'c06ddae664f516a6f06118c5903526008056c96c', 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: '44c3d8572a7c30ff4b04202cf08251b18882547f', 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?: \"discrete\" | \"semantic\" | 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": {}
-        };
-    }
-    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
-            }];
-    }
-}