@watermarkinsights/ripple 3.27.0 → 3.27.1

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

@@ -1,450 +1,450 @@
-import { h, Host } from "@stencil/core";
-import { forceUpdate } from "@stencil/core";
-import { debounce, generateId, intl } from "../../../global/functions";
-import { amountToPercent, exitChart, getDetails, handleChartKeydown, renderStackedBar, renderSimpleBar, renderCompletionMessage, renderDoughnut, renderHiddenValuesMessage, renderInstructionsText, renderLegend, allChartsDetails, } from "../chartFunctions";
-export class Chart {
-  constructor() {
-    this.uid = generateId();
-    this.slicesDetails = [];
-    this.handleStackedBarResize = debounce(async () => {
-      let hasHiddenBarValue = false;
-      // if any value text overlaps with another, hide it and display warning
-      const valueEls = this.el.shadowRoot.querySelectorAll(".value");
-      if (valueEls.length) {
-        let lastVisibleRightEdge = valueEls.length ? valueEls[0].getBoundingClientRect().right : 0;
-        let margin = 4;
-        valueEls.forEach((valueEl, idx) => {
-          // checks are to the left of each valueEl, so skip the first one
-          if (idx > 0) {
-            const bounds = valueEl.getBoundingClientRect();
-            if (bounds.left - margin < lastVisibleRightEdge) {
-              // left edge of current value is overlapping right edge of last visible value
-              valueEl.classList.add("hidden");
-              hasHiddenBarValue = true;
-            }
-            else {
-              valueEl.classList.remove("hidden");
-              lastVisibleRightEdge = bounds.right;
-            }
-          }
-        });
-      }
-      this.hasHiddenBarValue = hasHiddenBarValue;
-    }, 100);
-    this.debouncedUpdate = debounce(async () => {
-      forceUpdate(this.el);
-    }, 10);
-    this.debouncedSliceUpdate = debounce(async () => {
-      await getDetails.call(this, this.currentChartType);
-      forceUpdate(this.el);
-    }, 100);
-    this.chartType = "doughnut1";
-    this.label = undefined;
-    this.labelWidth = "150px";
-    this.subinfo = undefined;
-    this.completionMessage = undefined;
-    this.valueFormat = undefined;
-    this.showValues = undefined;
-    this.showGrid = true;
-    this.showLegend = true;
-    this.showBarLegend = false;
-    this.notStartedColor = false;
-    this.labelPosition = "top";
-    this.isTabbing = false;
-    this.userIsNavigating = false;
-    this.hasHiddenBarValue = false;
-  }
-  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() {
-    return Array.from(this.el.shadowRoot.querySelectorAll(".segment"));
-  }
-  get currentChartType() {
-    let current = this.chartType;
-    if (this.chartType === "hybrid") {
-      current = this.hybridType;
-    }
-    else if (this.chartType === "doughnut2" && this.el.children.length > 3) {
-      // render an internal type (that includes an additional color) if doughnut2 has more than 3 slices
-      current = "doughnut2b";
-    }
-    else if (this.chartType === "bar2" && this.el.children.length > 4) {
-      // render an internal type (that includes an additional color) if bar2 has more than 4 slices ("conditonally met" color)
-      current = "bar2b";
-    }
-    return current;
-  }
-  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;
-  }
-  get chartRoleDescription() {
-    return intl.formatMessage({
-      id: "chart.roleDescription",
-      defaultMessage: "Interactive chart",
-      description: "For screen readers only, a description clarifying the role of the chart widget",
-    });
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  handleKeydown(ev) {
-    handleChartKeydown.call(this, ev);
-  }
-  /* 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.");
-    }
-    if (this.showValues) {
-      console.warn("wm-chart: show-values has been deprecated as of v3.1.0. Please use value-format instead.");
-    }
-    await getDetails.call(this, this.currentChartType);
-    // rerender on resize
-    // unnecessary for doughnuts (except hybrid) as layout doesn't change
-    if (this.chartType === "hybrid" || !this.isDoughnut) {
-      const resizeObserver = new ResizeObserver(() => {
-        this.isStackedBar ? this.handleStackedBarResize() : this.debouncedUpdate();
-      });
-      resizeObserver.observe(this.el);
-    }
-  }
-  handleSliceUpdate() {
-    this.debouncedSliceUpdate();
-  }
-  /* RENDERING */
-  renderBarText(s, idx) {
-    let val;
-    if (this.tempValueFormat === "percentage") {
-      // if segment has an amount, but "0" percentage (it's below 0.5% and rounded down), still display it as <1%
-      val = s.perc === 0 && s.amount > 0 ? "<1%" : `${s.perc}%`;
-    }
-    else if (this.tempValueFormat === "amount") {
-      val = s.amount;
-    }
-    // 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", style: {
-        width: `calc(${amountToPercent(s.amount, this.total, false)}%
-        ${idx !== this.slicesDetails.length - 1 ? " - 2px" : ""}`,
-      } }, h("span", { class: "value" }, 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("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%")));
-    }
-  }
-  renderChart() {
-    if (this.total > 0) {
-      if (this.isStackedBar) {
-        return renderStackedBar.call(this, this.currentChartType);
-      }
-      else if (this.isSimpleBar) {
-        return renderSimpleBar.call(this, this.currentChartType);
-      }
-      else if (this.isDoughnut) {
-        return renderDoughnut.call(this, this.currentChartType);
-      }
-    }
-  }
-  render() {
-    return (h(Host, { onBlur: () => exitChart.call(this) }, h("div", { 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": this.chartRoleDescription, "aria-describedby": "chart-instructions" }, 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.isBar && renderLegend.call(this, this.currentChartType), this.renderChart(), this.isDoughnut && renderLegend.call(this, this.currentChartType), h("priv-chart-popover", { class: this.isTabbing ? "user-is-tabbing" : "" }), this.currentChartType === "doughnut0" ? renderCompletionMessage.call(this) : "", this.hasHiddenBarValue && 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",
-        "mutable": false,
-        "complexType": {
-          "original": "ChartType | \"hybrid\"",
-          "resolved": "\"bar\" | \"bar1\" | \"bar2\" | \"bar2b\" | \"bar3\" | \"bar4\" | \"bar5\" | \"bar6\" | \"bar7\" | \"doughnut\" | \"doughnut0\" | \"doughnut1\" | \"doughnut2\" | \"doughnut2b\" | \"doughnut3\" | \"hybrid\"",
-          "references": {
-            "ChartType": {
-              "location": "import",
-              "path": "../../../global/interfaces"
-            }
-          }
-        },
-        "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
-      },
-      "labelWidth": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label-width",
-        "reflect": false,
-        "defaultValue": "\"150px\""
-      },
-      "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
-      },
-      "showGrid": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-grid",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "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"
-      },
-      "showBarLegend": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-bar-legend",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "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": {},
-      "userIsNavigating": {},
-      "hasHiddenBarValue": {}
-    };
-  }
-  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
-      }];
-  }
-}
+import { h, Host } from "@stencil/core";
+import { forceUpdate } from "@stencil/core";
+import { debounce, generateId, intl } from "../../../global/functions";
+import { amountToPercent, exitChart, getDetails, handleChartKeydown, renderStackedBar, renderSimpleBar, renderCompletionMessage, renderDoughnut, renderHiddenValuesMessage, renderInstructionsText, renderLegend, allChartsDetails, } from "../chartFunctions";
+export class Chart {
+  constructor() {
+    this.uid = generateId();
+    this.slicesDetails = [];
+    this.handleStackedBarResize = debounce(async () => {
+      let hasHiddenBarValue = false;
+      // if any value text overlaps with another, hide it and display warning
+      const valueEls = this.el.shadowRoot.querySelectorAll(".value");
+      if (valueEls.length) {
+        let lastVisibleRightEdge = valueEls.length ? valueEls[0].getBoundingClientRect().right : 0;
+        let margin = 4;
+        valueEls.forEach((valueEl, idx) => {
+          // checks are to the left of each valueEl, so skip the first one
+          if (idx > 0) {
+            const bounds = valueEl.getBoundingClientRect();
+            if (bounds.left - margin < lastVisibleRightEdge) {
+              // left edge of current value is overlapping right edge of last visible value
+              valueEl.classList.add("hidden");
+              hasHiddenBarValue = true;
+            }
+            else {
+              valueEl.classList.remove("hidden");
+              lastVisibleRightEdge = bounds.right;
+            }
+          }
+        });
+      }
+      this.hasHiddenBarValue = hasHiddenBarValue;
+    }, 100);
+    this.debouncedUpdate = debounce(async () => {
+      forceUpdate(this.el);
+    }, 10);
+    this.debouncedSliceUpdate = debounce(async () => {
+      await getDetails.call(this, this.currentChartType);
+      forceUpdate(this.el);
+    }, 100);
+    this.chartType = "doughnut1";
+    this.label = undefined;
+    this.labelWidth = "150px";
+    this.subinfo = undefined;
+    this.completionMessage = undefined;
+    this.valueFormat = undefined;
+    this.showValues = undefined;
+    this.showGrid = true;
+    this.showLegend = true;
+    this.showBarLegend = false;
+    this.notStartedColor = false;
+    this.labelPosition = "top";
+    this.isTabbing = false;
+    this.userIsNavigating = false;
+    this.hasHiddenBarValue = false;
+  }
+  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() {
+    return Array.from(this.el.shadowRoot.querySelectorAll(".segment"));
+  }
+  get currentChartType() {
+    let current = this.chartType;
+    if (this.chartType === "hybrid") {
+      current = this.hybridType;
+    }
+    else if (this.chartType === "doughnut2" && this.el.children.length > 3) {
+      // render an internal type (that includes an additional color) if doughnut2 has more than 3 slices
+      current = "doughnut2b";
+    }
+    else if (this.chartType === "bar2" && this.el.children.length > 4) {
+      // render an internal type (that includes an additional color) if bar2 has more than 4 slices ("conditonally met" color)
+      current = "bar2b";
+    }
+    return current;
+  }
+  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;
+  }
+  get chartRoleDescription() {
+    return intl.formatMessage({
+      id: "chart.roleDescription",
+      defaultMessage: "Interactive chart",
+      description: "For screen readers only, a description clarifying the role of the chart widget",
+    });
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  handleKeydown(ev) {
+    handleChartKeydown.call(this, ev);
+  }
+  /* 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.");
+    }
+    if (this.showValues) {
+      console.warn("wm-chart: show-values has been deprecated as of v3.1.0. Please use value-format instead.");
+    }
+    await getDetails.call(this, this.currentChartType);
+    // rerender on resize
+    // unnecessary for doughnuts (except hybrid) as layout doesn't change
+    if (this.chartType === "hybrid" || !this.isDoughnut) {
+      const resizeObserver = new ResizeObserver(() => {
+        this.isStackedBar ? this.handleStackedBarResize() : this.debouncedUpdate();
+      });
+      resizeObserver.observe(this.el);
+    }
+  }
+  handleSliceUpdate() {
+    this.debouncedSliceUpdate();
+  }
+  /* RENDERING */
+  renderBarText(s, idx) {
+    let val;
+    if (this.tempValueFormat === "percentage") {
+      // if segment has an amount, but "0" percentage (it's below 0.5% and rounded down), still display it as <1%
+      val = s.perc === 0 && s.amount > 0 ? "<1%" : `${s.perc}%`;
+    }
+    else if (this.tempValueFormat === "amount") {
+      val = s.amount;
+    }
+    // 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", style: {
+        width: `calc(${amountToPercent(s.amount, this.total, false)}%
+        ${idx !== this.slicesDetails.length - 1 ? " - 2px" : ""}`,
+      } }, h("span", { class: "value" }, 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("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%")));
+    }
+  }
+  renderChart() {
+    if (this.total > 0) {
+      if (this.isStackedBar) {
+        return renderStackedBar.call(this, this.currentChartType);
+      }
+      else if (this.isSimpleBar) {
+        return renderSimpleBar.call(this, this.currentChartType);
+      }
+      else if (this.isDoughnut) {
+        return renderDoughnut.call(this, this.currentChartType);
+      }
+    }
+  }
+  render() {
+    return (h(Host, { onBlur: () => exitChart.call(this) }, h("div", { 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": this.chartRoleDescription, "aria-describedby": "chart-instructions" }, 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.isBar && renderLegend.call(this, this.currentChartType), this.renderChart(), this.isDoughnut && renderLegend.call(this, this.currentChartType), h("priv-chart-popover", { class: this.isTabbing ? "user-is-tabbing" : "" }), this.currentChartType === "doughnut0" ? renderCompletionMessage.call(this) : "", this.hasHiddenBarValue && 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",
+        "mutable": false,
+        "complexType": {
+          "original": "ChartType | \"hybrid\"",
+          "resolved": "\"bar\" | \"bar1\" | \"bar2\" | \"bar2b\" | \"bar3\" | \"bar4\" | \"bar5\" | \"bar6\" | \"bar7\" | \"doughnut\" | \"doughnut0\" | \"doughnut1\" | \"doughnut2\" | \"doughnut2b\" | \"doughnut3\" | \"hybrid\"",
+          "references": {
+            "ChartType": {
+              "location": "import",
+              "path": "../../../global/interfaces"
+            }
+          }
+        },
+        "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
+      },
+      "labelWidth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label-width",
+        "reflect": false,
+        "defaultValue": "\"150px\""
+      },
+      "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
+      },
+      "showGrid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-grid",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "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"
+      },
+      "showBarLegend": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-bar-legend",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "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": {},
+      "userIsNavigating": {},
+      "hasHiddenBarValue": {}
+    };
+  }
+  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
+      }];
+  }
+}