@watermarkinsights/ripple 3.8.2 → 3.9.0-2

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

@@ -0,0 +1,332 @@
+import { Component, Element, h, Host, Prop, State, Listen } from "@stencil/core";
+import { forceUpdate } from "@stencil/core";
+import { debounce, generateId, intl } from "../../../global/functions";
+import { amountToPercent, handleChartKeydown, getData, renderBar, renderCompletionMessage, renderDoughnut, renderLegend, types, } from "../../../global/chartFunctions";
+export class Chart {
+  constructor() {
+    this.chartType = "doughnut1";
+    this.showLegend = true;
+    this.notStartedColor = false;
+    // 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.uid = generateId();
+    this.slicesData = [];
+    this.chartLabelMessage = intl.formatMessage({
+      id: "chart.interactiveChart",
+      defaultMessage: "Interactive chart. Use arrow keys to browse elements, press Tab to exit.",
+    });
+    /* LIFECYCLE METHODS + EVENTS FROM THE CHILDREN */
+    this.debouncedResize = debounce(async () => {
+      await getData.call(this, this.currentChartType);
+      forceUpdate(this.el);
+    }, 10);
+    this.debouncedSliceUpdate = debounce(async () => {
+      await getData.call(this, this.currentChartType);
+      forceUpdate(this.el);
+    }, 100);
+  }
+  get tempValueFormat() {
+    // use of this getter should be replaced with dateFormat when showValues is fully phased out
+    return this.valueFormat || this.showValues || "none";
+  }
+  get hybridType() {
+    return window.innerWidth > 1340 ? "doughnut0" : "bar1";
+  }
+  get popoverEl() {
+    return this.el.shadowRoot.querySelector("priv-chart-popover");
+  }
+  get sliceEls() {
+    const isBarType = this.currentChartType.includes("bar");
+    const isDoughnutType = this.currentChartType.includes("doughnut");
+    return isBarType
+      ? Array.from(this.el.shadowRoot.querySelectorAll(".bar-segment"))
+      : isDoughnutType
+        ? Array.from(this.el.shadowRoot.querySelectorAll(".doughnut-segment"))
+        : undefined;
+  }
+  get currentChartType() {
+    return this.chartType === "hybrid" ? this.hybridType : this.chartType;
+  }
+  get chartData() {
+    return types[this.currentChartType];
+  }
+  get ariaLabelText() {
+    let text = `${this.label}, ${this.chartLabelMessage}`;
+    if (this.subinfo) {
+      text += ` ${this.subinfo}`;
+    }
+    return text;
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  handleKeydown(ev) {
+    handleChartKeydown.call(this, ev);
+  }
+  handleResize() {
+    if (this.chartType === "hybrid") {
+      this.debouncedResize();
+    }
+  }
+  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.");
+    }
+    if (this.showValues) {
+      console.warn("wm-chart: show-values has been deprecated as of v3.1.0. Please use value-format instead.");
+    }
+    await getData.call(this, this.currentChartType);
+  }
+  handleSliceUpdate() {
+    this.debouncedSliceUpdate();
+  }
+  /* RENDERING */
+  renderBarText(s, idx) {
+    let val;
+    if (this.tempValueFormat === "percentage") {
+      val = s.perc + "%";
+    }
+    else if (this.tempValueFormat === "amount") {
+      val = s.amount;
+    }
+    else {
+      return;
+    }
+    return (h("span", { class: "value", style: {
+        width: `calc(${amountToPercent(s.amount, this.total, false)}%
+        ${idx !== this.slicesData.length - 1 ? " - 2px" : ""}`,
+      } }, 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("text", { x: "0.5", y: "-6" }, "0%"),
+        h("line", { class: "tick", x1: "100%", x2: "100%", y1: "0", y2: "6" }),
+        h("text", { x: "100%", y: "-6" }, "100%")));
+    }
+  }
+  render() {
+    return (h(Host, { role: "application", "aria-label": this.ariaLabelText, tabindex: "0" },
+      h("div", { class: `component-wrapper ${this.currentChartType} ${this.isTabbing ? "user-is-tabbing" : ""} ${this.labelPosition === "left" && this.chartType === "bar4" ? "left-label" : ""}` },
+        h("label", { class: "label", id: `label-${this.uid}`, htmlFor: `graphic-${this.uid}` },
+          h("span", { class: "label-text" }, this.label),
+          this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""),
+        this.chartData.isBar ? renderLegend.call(this) : "",
+        this.total > 0 && this.chartData.isBar
+          ? renderBar.call(this, this.currentChartType)
+          : renderDoughnut.call(this, this.currentChartType),
+        !this.chartData.isBar ? renderLegend.call(this) : "",
+        h("priv-chart-popover", { class: this.isTabbing ? "user-is-tabbing" : "" }),
+        this.currentChartType === "doughnut0" ? renderCompletionMessage.call(this) : "")));
+  }
+  static get is() { return "wm-chart"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["wm-chart.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["wm-chart.css"]
+  }; }
+  static get properties() { return {
+    "chartType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"doughnut1\" | \"doughnut2\" | \"doughnut3\" | \"hybrid\" | \"bar1\" | \"bar2\" | \"bar3\" | \"bar4\" | \"bar5\"",
+        "resolved": "\"bar1\" | \"bar2\" | \"bar3\" | \"bar4\" | \"bar5\" | \"doughnut1\" | \"doughnut2\" | \"doughnut3\" | \"hybrid\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "chart-type",
+      "reflect": false,
+      "defaultValue": "\"doughnut1\""
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "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
+    },
+    "completionMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "completion-message",
+      "reflect": false
+    },
+    "valueFormat": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"percentage\" | \"amount\"",
+        "resolved": "\"amount\" | \"percentage\" | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value-format",
+      "reflect": false
+    },
+    "showValues": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"percentage\" | \"amount\"",
+        "resolved": "\"amount\" | \"percentage\" | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-values",
+      "reflect": false
+    },
+    "showLegend": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-legend",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "notStartedColor": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "not-started-color",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "labelPosition": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"left\" | \"top\"",
+        "resolved": "\"left\" | \"top\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label-position",
+      "reflect": false,
+      "defaultValue": "\"top\""
+    }
+  }; }
+  static get states() { return {
+    "isTabbing": {}
+  }; }
+  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": "resize",
+      "method": "handleResize",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "wmChartSliceUpdated",
+      "method": "handleSliceUpdate",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}