@watermarkinsights/ripple 5.23.0-alpha.8 → 5.23.0

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

@@ -1,155 +0,0 @@
-import { h, Host } from "@stencil/core";
-export class ChartLegend {
-    constructor() {
-        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);
-        }
-    }
-    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 });
-    }
-    renderLegendItems() {
-        return this.processedData.map((item, idx) => (h("div", { class: "legend-item", key: item.barLegend, onClick: () => this.handleLegendItemClick(idx) }, h("div", { class: "color", style: { "--color": `var(--${item.color})` } }), h("div", { class: "label" }, item.barLegend), h("span", { class: `print-value ${this.printMode ? "force-visible" : ""}` }, "(", item.printValue, ")"))));
-    }
-    render() {
-        return (h(Host, { key: 'f8c8c56e0a679b0f8ba7cb3af815276cb766b2fc' }, h("div", { key: '29ab0bebb0e7489a822da43959f08ba5848344e4', 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": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "wmChartBarHighlighted",
-                "method": "handleChartBarHighlighted",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }];
-    }
-}

package/dist/collection/dev/chart-bar.js

@@ -1,137 +0,0 @@
-const barChart1 = document.getElementById("bar-chart-1");
-const barChart2 = document.getElementById("bar-chart-2");
-
-// Event listener for popover button triggered
-barChart1.addEventListener("wmPopoverButtonClick", (ev) => {
-    console.log("wmPopoverButtonClick: ", ev.detail);
-    document.body.style.backgroundColor = `var(--${ev.detail.color})`;
-});
-
-barChart2.addEventListener("wmPopoverButtonClick", (ev) => {
-    console.log("wmPopoverButtonClick: ", ev.detail);
-    document.body.style.backgroundColor = `var(--${ev.detail.color})`;
-});
-
-// Setup chart data
-setTimeout(() => {
-
-    barChart1.config = {
-      label: "Number of Students by Department",
-      subinfo: "University of Education",
-      valueAxisLabel: "Students",
-      categoryAxisLabel: "University Departments",
-      printMode: true,
-      printModeFormat: "percentage",
-      gridMax: 2000,
-      popoverTitle: "Config Title",
-      popoverText: "Description set by the config",
-    };
-
-    barChart1.data = [
-      { barLegend: "Marine Biology", amount: 250, whatever: "whatever", color: "wmcolor-border" },
-      { barLegend: "Organic Chemistry", amount: 500 },
-      { barLegend: "Aeronautical Engineering", amount: 982 },
-      { barLegend: "Pure Mathematics", amount: 100, },
-      { barLegend: "Astrophysics", amount: 500, popoverTitle: "Astrophysics", popoverText: "Astrophysics description set by the data", popoverButtonText: "View Astrophysics Details" },
-      { barLegend: "Social Psychology", amount: 900 },
-      { barLegend: "Urban Sociology", amount: 500 },
-      { barLegend: "Behavioral Economics & Economy Sciences", amount: 250 },
-    ];
-
-    barChart2.config = {
-      label: "Number of Students by Department",
-      subinfo: "University of Education",
-      valueAxisLabel: "Students",
-      categoryAxisLabel: "University Departments",
-      printMode: true,
-      printModeFormat: "percentage",
-      gridMax: 2000,
-      popoverTitle: "Config Title",
-      popoverText: "Description set by the config",
-      popoverButtonText: "View Details",
-    };
-
-    barChart2.data = [
-      { barLegend: "Marine Biology", amount: 250, whatever: "whatever", color: "wmcolor-border" },
-      { barLegend: "Organic Chemistry", amount: 500 },
-      { barLegend: "Aeronautical Engineering", amount: 982 },
-      { barLegend: "Pure Mathematics", amount: 100 },
-      { barLegend: "Astrophysics", amount: 500, popoverTitle: "Astrophysics", popoverText: "Astrophysics description set by the data", popoverButtonText: "View Astrophysics Details" },
-      { barLegend: "Social Psychology", amount: 900 },
-      { barLegend: "Urban Sociology", amount: 500 },
-      { barLegend: "Behavioral Economics & Economy Sciences", amount: 250 },
-    ];
-}, 1000);
-
-////////////////////////////////////////////////////////////
-// Control Panel
-////////////////////////////////////////////////////////////
-
-// Value format control
-const valueFormatAmount = document.getElementById("value-format-amount");
-const valueFormatPercentage = document.getElementById("value-format-percentage");
-
-valueFormatAmount.addEventListener("change", () => {
-    barChart1.config = {...barChart1.config, valueFormat: "amount"};
-});
-
-valueFormatPercentage.addEventListener("change", () => {
-    barChart1.config = {...barChart1.config, valueFormat: "percentage"};
-});
-
-// Pattern control
-const patternDiscrete = document.getElementById("pattern-discrete");
-const patternSemantic = document.getElementById("pattern-semantic");
-
-patternDiscrete.addEventListener("change", () => {
-    barChart1.config = {...barChart1.config, colors: "discrete"};
-});
-
-patternSemantic.addEventListener("change", () => {
-    barChart1.config = {...barChart1.config, colors: "semantic"};
-});
-
-// Sort control
-const sortAscending = document.getElementById("sort-ascending");
-const sortDescending = document.getElementById("sort-descending");
-sortAscending.addEventListener("change", updateSort);
-sortDescending.addEventListener("change", updateSort);
-
-function updateSort() {
-    barChart1.config = {...barChart1.config, sort: document.querySelector("input[name='sort']:checked").value};
-}
-
-const sortNone = document.getElementById("sort-none");
-
-sortNone.addEventListener("change", () => {
-    barChart1.config = {...barChart1.config, sort: null};
-});
-
-// Chart label control
-const chartLabelInput = document.getElementById("chart-label-input");
-chartLabelInput.addEventListener("change", (ev) => {
-    barChart1.config = {...barChart1.config, label: ev.target.value};
-});
-
-// Axis label control
-const axisLabelInput = document.getElementById("axis-label-input");
-axisLabelInput.addEventListener("change", (ev) => {
-    barChart1.config = {...barChart1.config, valueAxisLabel: ev.target.value};
-});
-
-// Legend position control
-function updateLegendPosition() {
-    barChart1.config = {...barChart1.config, showLegend: document.querySelector("input[name='legend']:checked").value};
-}
-
-const legendTop = document.getElementById("legend-top");
-const legendBottom = document.getElementById("legend-bottom");
-const legendLeft = document.getElementById("legend-left");
-const legendRight = document.getElementById("legend-right");
-const legendNone = document.getElementById("legend-none");
-
-legendTop.addEventListener("change", updateLegendPosition);
-legendBottom.addEventListener("change", updateLegendPosition);
-legendLeft.addEventListener("change", updateLegendPosition);
-legendRight.addEventListener("change", updateLegendPosition);
-legendNone.addEventListener("change", updateLegendPosition);