@watermarkinsights/ripple 5.13.0-alpha.3 → 5.13.0-alpha.4

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

@@ -1,445 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { forceUpdate } from "@stencil/core";
-import { debounce, generateId } from "../../../global/functions";
-import { amountToPercent, exitChart, getDetails, handleChartKeydown, renderStackedBar, renderSimpleBar, renderDoughnut, renderHiddenValuesMessage, renderInstructionsText, renderLegend, allChartsDetails, removeSegmentInfoHighlight, } from "../chartFunctions";
-import { chartMessages } from "../../../global/intl";
-export class Chart {
-    constructor() {
-        this.chartType = "doughnut1";
-        this.labelWidth = "150px";
-        this.valueFormat = "none";
-        this.showGrid = true;
-        this.showLegend = true;
-        this.showBarLegend = false;
-        this.notStartedColor = false;
-        this.printMode = false;
-        this.printModeFormat = "amount";
-        // left labels are a temporary solution for the lack of a stacked bar chart and is undocumented
-        // it only works with bar4 and should be used without a legend
-        this.labelPosition = "top";
-        this.isTabbing = false;
-        this.userIsNavigating = false;
-        this.uid = generateId();
-        // @ts-ignore-- TS warns this is unused, but its needed in chartFunctions
-        this.slicesDetails = [];
-        this.debouncedSliceUpdate = debounce(async () => {
-            await getDetails.call(this, this.currentChartType);
-            forceUpdate(this.el);
-        }, 100);
-    }
-    get popoverEl() {
-        return this.el.shadowRoot.querySelector("priv-chart-popover");
-    }
-    get sliceEls() {
-        return Array.from(this.el.shadowRoot.querySelectorAll(".segment"));
-    }
-    get currentChartType() {
-        return this.chartType;
-    }
-    get chartDetails() {
-        return allChartsDetails[this.currentChartType];
-    }
-    get ariaLabelText() {
-        let text = `${this.label}`;
-        if (this.subinfo) {
-            text += ` ${this.subinfo}`;
-        }
-        return text;
-    }
-    get isDoughnut() {
-        return this.chartDetails.category === "doughnut";
-    }
-    get isStackedBar() {
-        return this.chartDetails.category === "stackedBar";
-    }
-    get isSimpleBar() {
-        return this.chartDetails.category === "simpleBar";
-    }
-    get isBar() {
-        return this.isStackedBar || this.isSimpleBar;
-    }
-    toggleTabbingOn() {
-        this.isTabbing = true;
-    }
-    toggleTabbingOff() {
-        this.isTabbing = false;
-    }
-    handleKeydown(ev) {
-        handleChartKeydown.call(this, ev);
-    }
-    showHiddenValuesMessage(showMsg) {
-        const msg = this.el.shadowRoot.querySelector(".hidden-values-warning");
-        if (msg) {
-            showMsg ? msg.classList.remove("hidden") : msg.classList.add("hidden");
-        }
-        else {
-            // if DOM isn't ready, try again later
-            requestAnimationFrame(() => this.showHiddenValuesMessage(showMsg));
-        }
-    }
-    /* LIFECYCLE METHODS + EVENTS FROM THE CHILDREN */
-    async componentWillLoad() {
-        if (!this.label) {
-            throw new Error("For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.");
-        }
-        await getDetails.call(this, this.currentChartType);
-        // rerender on resize
-        // unnecessary for doughnuts as layout doesn't change
-        if (!this.isDoughnut) {
-            const resizeObserver = new ResizeObserver(() => {
-                forceUpdate(this.el);
-            });
-            resizeObserver.observe(this.el);
-        }
-    }
-    handleSliceUpdate() {
-        this.debouncedSliceUpdate();
-    }
-    handlePopoverOpenChanged(ev) {
-        const isOpen = ev.detail;
-        if (!isOpen) {
-            const infoEls = Array.from(this.el.shadowRoot.querySelectorAll("[data-segmentindex]"));
-            removeSegmentInfoHighlight(infoEls);
-        }
-    }
-    /* RENDERING */
-    renderBarText(s, minimumWidth) {
-        let val;
-        if (this.valueFormat === "percentage") {
-            if (s.perc === 0 && s.amount > 0) {
-                val = "<1%";
-            }
-            else if (s.perc === 100 && s.amount < this.total) {
-                val = ">99%";
-            }
-            else {
-                val = s.perc + "%";
-            }
-        }
-        else if (this.valueFormat === "amount") {
-            val = s.amount;
-        }
-        const segmentPercentage = amountToPercent(s.amount, this.total, false);
-        const availableWidth = this.el.offsetWidth;
-        const meetsSizeMinimum = (segmentPercentage / 100) * availableWidth >= minimumWidth;
-        const renderedWidth = meetsSizeMinimum || s.amount == 0 ? `${segmentPercentage}%` : `${minimumWidth}px`;
-        // even though we do not display the value text if it has an amount of 0, we still want to render the value-wrapper
-        // in order to not disturb the positioning of the other value texts in the entire row
-        return (h("div", { class: `value-wrapper ${meetsSizeMinimum ? "" : "fixed-width"}`, style: { width: renderedWidth } }, h("span", { class: "value", "data-value": s.amount, "data-segmentindex": s.index }, s.amount > 0 && val)));
-    }
-    drawAxis() {
-        if (this.currentChartType === "bar3") {
-            return (h("svg", { class: "axis" }, h("line", { x1: "0", x2: "100%", y1: "0", y2: "0" }), h("line", { x1: "0", x2: "0", y1: "0", y2: "-85px" }), h("line", { class: "tick", x1: "0.5", x2: "0.5", y1: "0", y2: "6" }), h("line", { class: "tick", x1: "100%", x2: "100%", y1: "0", y2: "6" })));
-        }
-    }
-    renderChart() {
-        if (this.isSimpleBar) {
-            return renderSimpleBar.call(this, this.currentChartType);
-        }
-        else if (this.isStackedBar && this.total > 0) {
-            return renderStackedBar.call(this, this.currentChartType);
-        }
-        else if (this.isDoughnut && this.total > 0) {
-            return renderDoughnut.call(this, this.currentChartType);
-        }
-    }
-    render() {
-        return (h(Host, { key: '495e0455dbad63e662f11ea1c2f61713c9ad52b6', onBlur: () => exitChart.call(this) }, h("div", { key: '8a51cc400c25ea93797a01bb0ae2eb4fdbce8300', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.currentChartType} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""} ${this.labelPosition === "left" && this.currentChartType === "bar4" ? "left-label" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: 0, "aria-roledescription": chartMessages.interactiveChart, "aria-describedby": "chart-instructions" }, h("label", { key: 'c4cf7b324a1347e4fc2d97ca9b7c2e50d5526a63', id: `label-${this.uid}`, class: `label --${this.labelPosition}`, htmlFor: `graphic-${this.uid}` }, h("span", { key: '950e135dca88ae28d156047daee4618628753b49', class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.isBar && renderLegend.call(this, this.currentChartType), this.renderChart(), this.isDoughnut && renderLegend.call(this, this.currentChartType), h("priv-chart-popover", { key: '303b440f6098d37b8c1851b65d9e61d5792441ea', class: this.isTabbing ? "user-is-tabbing" : "", onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) }), this.isBar && !this.printMode && renderHiddenValuesMessage()), renderInstructionsText()));
-    }
-    static get is() { return "wm-chart"; }
-    static get encapsulation() { return "shadow"; }
-    static get delegatesFocus() { return true; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["wm-chart.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["wm-chart.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "chartType": {
-                "type": "string",
-                "attribute": "chart-type",
-                "mutable": false,
-                "complexType": {
-                    "original": "ChartType",
-                    "resolved": "\"bar\" | \"bar2\" | \"bar3\" | \"bar4\" | \"bar5\" | \"bar6\" | \"bar7\" | \"doughnut\" | \"doughnut1\" | \"doughnut2\" | \"doughnut3\"",
-                    "references": {
-                        "ChartType": {
-                            "location": "import",
-                            "path": "../../../global/interfaces",
-                            "id": "src/global/interfaces.ts::ChartType"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "\"doughnut1\""
-            },
-            "label": {
-                "type": "string",
-                "attribute": "label",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "labelWidth": {
-                "type": "string",
-                "attribute": "label-width",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "\"150px\""
-            },
-            "subinfo": {
-                "type": "string",
-                "attribute": "subinfo",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "valueFormat": {
-                "type": "string",
-                "attribute": "value-format",
-                "mutable": false,
-                "complexType": {
-                    "original": "\"percentage\" | \"amount\" | \"none\"",
-                    "resolved": "\"amount\" | \"none\" | \"percentage\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "\"none\""
-            },
-            "showGrid": {
-                "type": "boolean",
-                "attribute": "show-grid",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "true"
-            },
-            "showLegend": {
-                "type": "boolean",
-                "attribute": "show-legend",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "true"
-            },
-            "showBarLegend": {
-                "type": "boolean",
-                "attribute": "show-bar-legend",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "notStartedColor": {
-                "type": "boolean",
-                "attribute": "not-started-color",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "printMode": {
-                "type": "boolean",
-                "attribute": "print-mode",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "printModeFormat": {
-                "type": "string",
-                "attribute": "print-mode-format",
-                "mutable": false,
-                "complexType": {
-                    "original": "\"percentage\" | \"amount\"",
-                    "resolved": "\"amount\" | \"percentage\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "\"amount\""
-            },
-            "labelPosition": {
-                "type": "string",
-                "attribute": "label-position",
-                "mutable": false,
-                "complexType": {
-                    "original": "\"left\" | \"top\" | \"none\"",
-                    "resolved": "\"left\" | \"none\" | \"top\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "\"top\""
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isTabbing": {},
-            "userIsNavigating": {},
-            "focusedSliceId": {}
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "wmUserIsTabbing",
-                "method": "toggleTabbingOn",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "wmUserIsNotTabbing",
-                "method": "toggleTabbingOff",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "keydown",
-                "method": "handleKeydown",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "wmChartSliceUpdated",
-                "method": "handleSliceUpdate",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
-}