@watermarkinsights/ripple 0.0.1 → 0.1.0-alpha.0

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

@@ -0,0 +1,194 @@
+import { h, Host } from "@stencil/core";
+export class ChartLegend {
+    constructor() {
+        this.persistentHighlightIdx = -1;
+        this.chartIds = "";
+        this.orientation = "horizontal";
+        this.processedData = [];
+        this.printMode = false;
+    }
+    handleChartBarHighlighted(ev) {
+        if (this.chartIds.split(" ").includes(ev.target.id)) {
+            this.highlightLegendItem(ev.detail.idx);
+        }
+    }
+    handleDocumentClick(_ev) {
+        if (this.persistentHighlightIdx !== -1) {
+            this.persistentHighlightIdx = -1;
+        }
+    }
+    highlightLegendItem(highlightedIdx) {
+        const legendItems = this.el.shadowRoot.querySelectorAll(".legend-item");
+        legendItems.forEach((item, idx) => {
+            if (highlightedIdx === -1) {
+                item.classList.remove("faded");
+            }
+            else {
+                item.classList.toggle("faded", idx !== highlightedIdx);
+            }
+        });
+    }
+    handleLegendItemClick(idx) {
+        this.wmLegendItemClick.emit({ idx: idx });
+        this.persistentHighlightIdx = idx;
+    }
+    handleLegendItemMouseEnter(idx) {
+        this.wmLegendItemHover.emit({ idx: idx });
+    }
+    handleLegendItemMouseLeave() {
+        if (this.persistentHighlightIdx == -1) {
+            this.wmLegendItemClick.emit({ idx: -1 });
+        }
+        else {
+            this.wmLegendItemClick.emit({ idx: this.persistentHighlightIdx });
+        }
+    }
+    renderLegendItems() {
+        return this.processedData.map((item, idx) => (h("div", { class: "legend-item", key: item.barLegend, onClick: () => this.handleLegendItemClick(idx), onMouseEnter: () => this.handleLegendItemMouseEnter(idx), onMouseLeave: () => this.handleLegendItemMouseLeave() }, h("div", { class: "color", style: { "--color": `var(--${item.color})` } }), h("div", { class: "label" }, item.barLegend), item.printValue && (h("span", { class: `print-value ${this.printMode ? "force-visible" : ""}` }, "(", item.printValue, ")")))));
+    }
+    render() {
+        return (h(Host, { key: 'aa25d1633fb27289ca3de8178ab44237cb0fecdf' }, h("div", { key: '795ce22b4f00463f7258470347bb658ac3367688', class: `legend-container --${this.orientation}`, "aria-hidden": "true" }, this.renderLegendItems())));
+    }
+    static get is() { return "wm-chart-legend"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-chart-legend.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-chart-legend.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "chartIds": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "chart-ids",
+                "reflect": true,
+                "defaultValue": "\"\""
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"horizontal\" | \"vertical\"",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "orientation",
+                "reflect": false,
+                "defaultValue": "\"horizontal\""
+            },
+            "processedData": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "ProcessedChartData[]",
+                    "resolved": "ProcessedChartData[]",
+                    "references": {
+                        "ProcessedChartData": {
+                            "location": "import",
+                            "path": "../../../global/interfaces",
+                            "id": "src/global/interfaces.ts::ProcessedChartData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "[]"
+            },
+            "printMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "print-mode",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmLegendItemClick",
+                "name": "wmLegendItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ idx: number }",
+                    "resolved": "{ idx: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "wmLegendItemHover",
+                "name": "wmLegendItemHover",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ idx: number }",
+                    "resolved": "{ idx: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "wmChartBarHighlighted",
+                "method": "handleChartBarHighlighted",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }];
+    }
+}