@watermarkinsights/ripple 0.0.0 → 0.1.0-alpha.0

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-monitor.js

@@ -0,0 +1,151 @@
+import { h, Host, forceUpdate } from "@stencil/core";
+import { csvToArray, debounce } from "../../../global/functions";
+import { renderLegendItem, allChartsDetails } from "../chartFunctions";
+export class ProgressMonitor {
+    constructor() {
+        this.doughnutWidth = 300;
+        this.modeInitialized = false;
+        this.debouncedUpdate = debounce(() => forceUpdate(this.el), 50);
+        this.breakpoint = undefined;
+        this.groupLegend = undefined;
+        this.barLabelsWidth = undefined;
+    }
+    get parsedBreakpoint() {
+        const asNumber = this.parseToNum(this.breakpoint || this.el.children.length);
+        // if number < 20, it is treated as width in terms of # of indicators. Otherwise it is a pixel value
+        // e.g. 4 -> 1200px, while 768 -> 768 px
+        const asPixels = asNumber >= 20 ? asNumber : asNumber * this.doughnutWidth;
+        return asPixels;
+    }
+    get mode() {
+        return this.el.clientWidth > this.parsedBreakpoint ? "doughnut" : "bar";
+    }
+    // here "doughnut" or "bar" refer to wm-chart, so wm-progress-monitor should answer false
+    // use this.mode to know the responsive state of the component 
+    get isBar() {
+        return false;
+    }
+    get isDoughnut() {
+        return false;
+    }
+    componentWillLoad() {
+        // rerender on resize in case layout needs to change
+        const resizeObserver = new ResizeObserver(() => this.debouncedUpdate());
+        resizeObserver.observe(this.el);
+    }
+    componentDidLoad() {
+        // emit initial mode for Indicators, must happen post-load as this.el measurement is needed
+        this.wmProgressMonitorModeChange.emit(this.mode);
+        this.modeInitialized = true;
+    }
+    componentWillUpdate() {
+        // store prevMode before every render except first to determine when it has changed
+        if (this.prevMode !== this.mode) {
+            this.wmProgressMonitorModeChange.emit(this.mode);
+        }
+        this.prevMode = this.mode;
+    }
+    parseToNum(num) {
+        const asString = num.toString();
+        const withoutPx = asString.replace("px", "");
+        return parseInt(withoutPx);
+    }
+    renderLegend() {
+        const keys = csvToArray(this.groupLegend);
+        const colors = allChartsDetails.bar.colors;
+        return (h("div", { class: "legend-wrapper" }, h("div", { class: "legend" }, keys.map((key, idx) => {
+            const legendItem = { key: key, color: colors[idx] };
+            return renderLegendItem.call(this, legendItem);
+        }))));
+    }
+    render() {
+        return (h(Host, { key: '47893c89926b06e5b7ce6559f442f0fafeff2632', class: this.mode === "doughnut" ? "row" : "column" }, this.modeInitialized && this.groupLegend && this.mode === "bar" && this.renderLegend(), this.modeInitialized && h("slot", { key: '5589d528337e24a0dd706e379c6ecccd9c5e6afb' })));
+    }
+    static get is() { return "wm-progress-monitor"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-progress-monitor.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-progress-monitor.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "breakpoint": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "breakpoint",
+                "reflect": false
+            },
+            "groupLegend": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "group-legend",
+                "reflect": false
+            },
+            "barLabelsWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "bar-labels-width",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmProgressMonitorModeChange",
+                "name": "wmProgressMonitorModeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-slice.js

@@ -0,0 +1,121 @@
+export class ProgressSlice {
+    constructor() {
+        this.legend = undefined;
+        this.amount = undefined;
+        this.popoverTitle = undefined;
+        this.popoverText = undefined;
+        this.popoverButtonText = undefined;
+    }
+    componentDidUpdate() {
+        this.wmProgressSliceUpdated.emit();
+    }
+    static get is() { return "wm-progress-slice"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "legend": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "legend",
+                "reflect": false
+            },
+            "amount": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "amount",
+                "reflect": false
+            },
+            "popoverTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "popover-title",
+                "reflect": false
+            },
+            "popoverText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "popover-text",
+                "reflect": false
+            },
+            "popoverButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "popover-button-text",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmProgressSliceUpdated",
+                "name": "wmProgressSliceUpdated",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}