@watermarkinsights/ripple 0.0.0 → 0.1.0-alpha.0

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

@@ -0,0 +1,579 @@
+import { h, Host } from "@stencil/core";
+import { chartPalettes, } from "../../../global/interfaces";
+import { formatDisplayValue, suffixNumber, renderInstructionsText, findLargestNiceInterval, getMaxTicks, findNiceRoundNumber, groupProcessedData, computeLegendData, sortGroupedData, inferDecimalPlacesForUnitValue, } from "../chartFunctions";
+import { chartMessages } from "../../../global/intl";
+import { isElOrChild } from "../../../global/functions";
+export class ChartBar {
+    constructor() {
+        this.gridMax = 0;
+        this.isGrouped = false;
+        this.legendData = [];
+        this.ungroupedDataName = "_ungrouped";
+        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();
+    }
+    // #endregion getters
+    ////////////////////////////////////////////////////////////
+    // #region Component lifecycle
+    ////////////////////////////////////////////////////////////
+    componentDidLoad() {
+        const resizeObserver = new ResizeObserver(() => {
+            if (this.processedData) {
+                this.gridInfo = this.calculateGridInfo();
+            }
+        });
+        resizeObserver.observe(this.barAreaEl);
+        if (this.config && this.data) {
+            this.handleConfigDataChange();
+        }
+    }
+    // #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();
+        }
+    }
+    processChartData() {
+        var _a, _b, _c, _d;
+        if (!this.data) {
+            return [];
+        }
+        const defaultValueFormat = "amount";
+        const defaultPrintModeFormat = "amount";
+        const defaultColor = "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] || defaultColor;
+            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 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++) {
+            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) {
+        var _a;
+        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)) {
+                if (ev.detail.idx == -1) {
+                    this.clearHighlights();
+                }
+                else {
+                    const barLegend = (_a = this.legendData[ev.detail.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();
+        }
+    }
+    // #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,
+            });
+        }
+    }
+    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;
+    }
+    renderBar(item, effectiveGridMax) {
+        var _a;
+        const barPercent = effectiveGridMax > 0 ? (item.amount / effectiveGridMax) * 100 : 0;
+        return (h("div", { key: `bar-${item.groupName}-${item.barLegend}`, class: "bar-wrapper" }, 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}` }), h("span", { class: "value", style: { insetInlineStart: `${barPercent}%` } }, item.displayValue)));
+    }
+    renderBars() {
+        if (!this.gridInfo || !this.processedData) {
+            return;
+        }
+        const effectiveGridMax = this.gridInfo.numTicks * this.gridInfo.interval;
+        const bars = [];
+        this.processedData.forEach((items) => {
+            items.forEach((item) => {
+                bars.push(this.renderBar(item, effectiveGridMax));
+            });
+        });
+        return bars;
+    }
+    renderGroupLegends() {
+        const legends = [];
+        this.processedData.forEach((_, groupName) => {
+            legends.push(h("div", { key: `legend-${groupName}`, class: "group-legend" }, groupName));
+        });
+        return legends;
+    }
+    renderGroupedBars() {
+        if (!this.gridInfo || !this.processedData) {
+            return;
+        }
+        const effectiveGridMax = this.gridInfo.numTicks * this.gridInfo.interval;
+        const groupedBars = [];
+        this.processedData.forEach((items, groupName) => {
+            groupedBars.push(h("div", { key: `group-${groupName}`, class: "group-bars" }, items.map((item) => this.renderBar(item, effectiveGridMax))));
+        });
+        return groupedBars;
+    }
+    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.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.handleLegendItemClick(ev) })));
+    }
+    // #endregion rendering
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const rowCount = this.isGrouped
+            ? this.processedData.size || 1
+            : ((_a = this.processedData.get(this.ungroupedDataName)) === null || _a === void 0 ? void 0 : _a.length) || 1;
+        return (h(Host, { key: '3b74260fc064e4cf1df031ba5bb466c70f64aae7' }, h("div", { key: 'f307a461551ab86718daa7be15a9aa01df964f8e', class: "popover-wrapper" }, h("priv-chart-popover", { key: '125785411ad749ebff08956a7bb9f845079b6fe9', ref: (el) => (this.popoverEl = el), onIntChartPopoverToggled: (ev) => this.handlePopoverToggled(ev) })), h("div", { key: 'b7ea3733062adae46a95f29c62bd8fcbde267f85', 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": (_b = this.config) === null || _b === void 0 ? void 0 : _b.label }, ((_d = (_c = this.config) === null || _c === void 0 ? void 0 : _c.showLabel) !== null && _d !== void 0 ? _d : true) && (h("label", { key: 'fa3d8d0273babe8b59f0c0f47e6e01ce9ddcb1d0', id: "label", class: "label" }, h("span", { key: '2606d06a14473407cf124df7110c422629d86441', class: "label-text" }, (_e = this.config) === null || _e === void 0 ? void 0 : _e.label), this.subinfoText ? h("span", { class: "subinfo" }, this.subinfoText) : "")), this.showLegend === "top" && this.renderLegend("horizontal"), h("div", { key: 'f9c6279644985f9ee68033bb453bc58ba6e6f5e5', class: "chart-wrapper" }, h("div", { key: '6ba5a2264bb8a09eda99857618fd2ad9417867a9', class: "chart-left-side" }, this.showLegend === "left" && this.renderLegend("vertical"), h("div", { key: '4191034bfb04251c0929908bfbf0d0d0f12b1158', class: "left-axis-label" }, h("span", { key: '9f65ae5e36e6fb81e8836945e38361e5e763478d', class: "axis-label-text" }, (_f = this.config) === null || _f === void 0 ? void 0 : _f.categoryAxisLabel))), h("div", { key: 'cd8471f1dc5cbfd11f8140bca98bcf7712827a1a', class: "chart-center" }, h("div", { key: '452b0300834def5692c02995f512f367d9eb56cf', class: "chart-area", style: { "--row-count": rowCount.toString() } }, this.processedData && (this.isGrouped ? this.renderGroupLegends() : this.renderBarLegends()), h("div", { key: '28d76d67ec101ed82596368eb9b0a191664b63aa', class: `bar-area ${this.isKeying ? "user-is-keying" : ""} ${this.isGrouped ? "grouped" : ""}`, ref: (el) => (this.barAreaEl = el) }, this.gridVisible && this.renderGrid(), ((_g = this.config) === null || _g === void 0 ? void 0 : _g.gridMax) != undefined && (this.isGrouped ? this.renderGroupedBars() : this.renderBars()))), h("div", { key: '3eec1c1d4c36dee63755591865d502164e9e25b6', class: "bottom-axis-label" }, h("span", { key: '990f98d2f988aa9912e74c71cf3f1d795b9c2a8a', class: "axis-label-text" }, (_h = this.config) === null || _h === void 0 ? void 0 : _h.valueAxisLabel)), this.gridVisible && this.renderXAxis()), h("div", { key: '80d1dd23754497644483aa058f998ff3b830542b', 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 delegatesFocus() { return true; }
+    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; 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": "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
+            }];
+    }
+}