@watermarkinsights/ripple 3.0.1-0 → 3.0.2-0

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

@@ -0,0 +1,710 @@
+import { Component, Element, h, Host, Prop, State, Listen } from "@stencil/core";
+import { forceUpdate } from "@stencil/core";
+import { debounce, generateId, checkForActiveElInShadow, getPosition, intl, findParentWithScrollbar, } from "../../global/functions";
+export class Chart {
+  constructor() {
+    this.chartType = "doughnut1";
+    this.showLegend = true;
+    this.notStartedColor = false;
+    this.isTabbing = false;
+    this.uid = generateId();
+    this.slicesData = [];
+    this.colors = {
+      salmon: "#ff5f4e",
+      cyan: "#19a1a9",
+      sleet: "#7f97ad",
+      midnight: "#2e1b46",
+      lavender: "#8b86ca",
+    };
+    this.types = {
+      doughnut0: {
+        size: 155,
+        colors: [this.colors.cyan, "#bfbfbf"],
+        thickness: 0.73,
+        padding: 25,
+        isBar: false,
+      },
+      doughnut1: {
+        size: 130,
+        colors: [this.colors.lavender, this.colors.midnight, "#d4d4d4"],
+        thickness: 0.5,
+        padding: 90,
+        isBar: false,
+      },
+      doughnut2: {
+        size: 130,
+        colors: [this.colors.cyan, this.colors.salmon, "#d4d4d4"],
+        thickness: 0.5,
+        padding: 90,
+        isBar: false,
+      },
+      doughnut3: {
+        size: 130,
+        colors: [this.colors.lavender, this.colors.midnight, "#919834", "#c177cf", "#c16e00", "#029af2", "#2a6993"],
+        thickness: 0.5,
+        padding: 90,
+        isBar: false,
+      },
+      bar1: {
+        size: 350,
+        colors: [this.colors.cyan, "#bfbfbf"],
+        padding: 0,
+        isBar: true,
+      },
+      bar2: {
+        size: 400,
+        colors: ["#d4d4d4", this.colors.sleet, this.colors.cyan, this.colors.salmon],
+        padding: 0,
+        isBar: true,
+      },
+      bar3: {
+        size: 300,
+        colors: ["#0d696e", this.colors.cyan, "#8e4129", this.colors.salmon],
+        padding: 0,
+        isBar: true,
+      },
+      bar4: {
+        size: 400,
+        colors: ["#d4d4d4", this.colors.sleet, "#33a919"],
+        padding: 0,
+        isBar: true,
+      },
+      bar5: {
+        size: 400,
+        colors: [
+          "#d4d4d4",
+          this.colors.lavender,
+          this.colors.midnight,
+          "#919834",
+          "#c177cf",
+          "#c16e00",
+          "#029af2",
+          "#2a6993",
+        ],
+        padding: 0,
+        isBar: true,
+      },
+    };
+    /* LIFECYCLE METHODS + EVENTS FROM THE CHILDREN */
+    this.debouncedUpdate = debounce(async () => {
+      this.setHybridType();
+      await this.getData();
+      forceUpdate(this.el);
+    }, 30);
+    this.debouncedSliceUpdate = debounce(async () => {
+      await this.getData();
+      forceUpdate(this.el);
+    }, 100);
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  handleKeydown(ev) {
+    switch (ev.keyCode) {
+      // arrow up / left
+      case 37:
+      case 38:
+        ev.preventDefault();
+        this.isTabbing = true; // shd already be true. just in case user clicked on chart then pressed an arrow key
+        this.focusPrevious();
+        break;
+      // arrow right / down
+      case 39:
+      case 40:
+        ev.preventDefault();
+        this.isTabbing = true; // shd already be true. just in case user clicked on chart then pressed an arrow key
+        this.focusNext();
+        break;
+      // tab
+      case 9:
+        this.exitChart();
+        break;
+      case 27:
+        this.popoverEl.open = false;
+        break;
+    }
+  }
+  focusNext() {
+    const activeEl = checkForActiveElInShadow(document.activeElement);
+    const index = 
+    // if the active el is not in the array the first element gets focused
+    (this.sliceEls.indexOf(activeEl) + 1) % this.sliceEls.length;
+    this.focusSlice(index);
+  }
+  focusPrevious() {
+    if (this.sliceEls) {
+      const activeEl = checkForActiveElInShadow(document.activeElement);
+      let index = this.sliceEls.indexOf(activeEl);
+      if (index === -1) {
+        // not in the array : focus the first slice
+        index = 0;
+      }
+      else if (index === 0) {
+        // first slice : focus the last slice
+        index = this.sliceEls.length - 1;
+      }
+      else {
+        // anything else: focus previous
+        index -= 1;
+      }
+      this.focusSlice(index);
+    }
+  }
+  focusSlice(index) {
+    if (this.sliceEls && this.el) {
+      if (this.popoverEl) {
+        this.popoverEl.open = false;
+      }
+      this.el.tabIndex = -1;
+      // @ts-ignore
+      this.el.focusable = false; // for Edge
+      this.sliceEls.map((p) => {
+        p.tabIndex = -1;
+        // @ts-ignore
+        p.focusable = false; // for Edge
+      });
+      this.sliceEls[index].tabIndex = 0;
+      // @ts-ignore
+      this.sliceEls[index].focusable = true; // for Edge
+      this.sliceEls[index].focus();
+      window.setTimeout(() => {
+        if (this.popoverEl) {
+          this.popoverEl.open = true;
+        }
+      }, 10);
+    }
+  }
+  exitChart() {
+    this.sliceEls &&
+      this.sliceEls.map((p) => {
+        p.tabIndex = -1;
+        // @ts-ignore
+        p.focusable = false; // for Edge
+      });
+    // delay so that we can tab out of component before chart becomes focusable again
+    // and in case user was still pressing an arrow key when they pressed tab
+    window.setTimeout(() => {
+      if (this.el) {
+        this.el.tabIndex = 0;
+        // @ts-ignore
+        this.el.focusable = true; // for Edge
+        if (this.popoverEl) {
+          this.popoverEl.open = false;
+        }
+      }
+    }, 100);
+  }
+  openPopover(s) {
+    if (!!this.popoverEl && !!s.title && !!s.text) {
+      this.popoverEl.popoverTitle = s.title;
+      this.popoverEl.popoverText = s.text;
+      this.popoverEl.buttonText = s.buttonText;
+      this.popoverEl.coords = s.coords;
+      this.popoverEl.sliceRef = s.sliceRef;
+      window.setTimeout(() => {
+        if (this.popoverEl) {
+          this.popoverEl.open = true;
+        }
+      }, 30);
+      const debouncedClosePopover = debounce(async () => {
+        this.popoverEl.open = false;
+      }, 10);
+      // set up event listeners for scrolling
+      // to close popover on page scroll
+      document.addEventListener("scroll", () => {
+        debouncedClosePopover();
+      });
+      // ... and on parent scroll
+      const scrollableParent = findParentWithScrollbar(this.el);
+      if (!!scrollableParent) {
+        scrollableParent.addEventListener("scroll", () => {
+          debouncedClosePopover();
+        });
+      }
+    }
+  }
+  /* UTILS */
+  amountToPercent(val, asInt) {
+    return asInt ? Math.round((val * 100) / this.total) : Math.round((val * 10000) / this.total) / 100; // with 2 decimals
+  }
+  amountToDegree(val) {
+    return (val * 360) / this.total;
+  }
+  toFixed(number) {
+    var val = parseFloat((Math.floor(number * 100) / 100).toFixed(2));
+    return val;
+  }
+  polarToCartesian(half, radius, startAngle, endAngle) {
+    var x = this.toFixed(half + half * radius * Math.cos((Math.PI * startAngle) / 180));
+    var y = this.toFixed(half + half * radius * Math.sin((Math.PI * startAngle) / 180));
+    if (endAngle !== undefined) {
+      // if a 2nd angle value was passed, return 2 pairs of coords
+      var x2 = this.toFixed(half + half * radius * Math.cos((Math.PI * endAngle) / 180));
+      var y2 = this.toFixed(half + half * radius * Math.sin((Math.PI * endAngle) / 180));
+      return { x1: x, y1: y, x2, y2 };
+    }
+    return { x, y };
+  }
+  /* CRUNCH THE NUMBERS */
+  getPathData(amount, offset) {
+    var startAngle = this.amountToDegree(offset) - 90; // start at noon, not at 3 o'clock
+    var activeAngle = (amount / this.total) * 360;
+    var endAngle = startAngle + activeAngle;
+    var largeArcFlagOuter = activeAngle > 180 ? "1 1" : "0 1";
+    var largeArcFlagInner = activeAngle > 180 ? "1 0" : "0 0";
+    var half = this.chartData.size / 2;
+    var innerRadius = this.chartData.thickness;
+    var outerRadius = 1;
+    if (activeAngle === 360) {
+      // fix to avoid bad svg shape when the path goes all around (100%)
+      endAngle -= 0.01;
+    }
+    var outerCoords = this.polarToCartesian(half, outerRadius, startAngle + 1.5, // 1.5 for slice separator
+    endAngle);
+    var innerCoords = this.polarToCartesian(half, innerRadius, startAngle + 3, // 3 for slice separator
+    endAngle);
+    const moveTo = `M ${outerCoords.x1}, ${outerCoords.y1} `;
+    const arc1 = this.getArc(outerRadius, largeArcFlagOuter, outerCoords.x2, outerCoords.y2);
+    const line = ` L ${innerCoords.x2}, ${innerCoords.y2} `;
+    const arc2 = this.getArc(innerRadius, largeArcFlagInner, innerCoords.x1, innerCoords.y1);
+    return moveTo + arc1 + line + arc2 + " z";
+  }
+  getArc(radius, largeArcFlag, x, y) {
+    var z = this.toFixed((this.chartData.size / 2) * radius);
+    return `A ${z}, ${z} 0 ${largeArcFlag} ${this.toFixed(x)}, ${this.toFixed(y)}`;
+  }
+  setHybridType() {
+    this.hybridType = window.innerWidth > 1340 ? "doughnut0" : "bar1";
+  }
+  getType() {
+    return this.chartType === "hybrid" ? this.hybridType : this.chartType;
+  }
+  /* GET THE DATA */
+  async getData() {
+    this.slicesData = [];
+    let acc = 0;
+    const children = this.el.querySelectorAll("wm-chart-slice");
+    this.total = Array.from(children).reduce((total, slice) => (total += parseInt(slice.getAttribute("amount") || "0")), 0);
+    children.forEach((c, i) => {
+      const amount = parseInt(c.getAttribute("amount") || "0");
+      const perc = this.amountToPercent(amount, true);
+      // determine whether the slice is in a cluster of small values
+      // to avoid percentage text overlap for small values
+      const prev = children[i === 0 ? children.length - 1 : i - 1];
+      const prevPerc = this.amountToPercent(parseInt(prev.getAttribute("amount") || "0"), true);
+      const next = children[i === children.length - 1 ? 0 : i + 1];
+      const nextPerc = this.amountToPercent(parseInt(next.getAttribute("amount") || "0"), true);
+      const isSmall = perc < 4;
+      const prevIsSmall = prevPerc < 5;
+      const nextIsSmall = nextPerc < 5;
+      let inSmallCluster = isSmall && (prevIsSmall || nextIsSmall);
+      // because <1% slice percentage text has an additional character
+      // the inSmallCluster threshold needs to be widened for that slice only
+      const lessThanOnePerc = perc === 0 && amount > 0;
+      if (lessThanOnePerc && (nextPerc < 8 || prevPerc < 8)) {
+        inSmallCluster = true;
+      }
+      // for bar5, first color should be skipped unless notStartedColor is set to true
+      const ind = this.getType() === "bar5" ? (this.notStartedColor ? i : i + 1) : i;
+      const color = this.types[this.getType()].colors[ind];
+      const sliceData = {
+        amount: amount,
+        perc: perc,
+        legend: c.getAttribute("legend"),
+        color: color || "#d4d4d4",
+        offset: acc,
+        id: `${this.uid}-${i + 1}`,
+        title: c.getAttribute("popover-title"),
+        text: c.getAttribute("popover-text"),
+        buttonText: c.getAttribute("popover-button-text"),
+        sliceRef: c,
+        inSmallCluster: inSmallCluster,
+      };
+      acc += amount;
+      this.slicesData.push(sliceData);
+    });
+    this.chartData = this.types[this.getType()];
+  }
+  getSliceEls() {
+    if (this.svgEl) {
+      this.sliceEls = Array.from(this.svgEl.querySelectorAll(this.chartData.isBar ? "rect" : "path"));
+    }
+  }
+  handleResize() {
+    if (this.chartType === "hybrid") {
+      this.debouncedUpdate();
+    }
+  }
+  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.chartType === "hybrid") {
+      this.setHybridType();
+    }
+    await this.getData();
+  }
+  componentDidLoad() {
+    this.getSliceEls();
+  }
+  componentDidUpdate() {
+    this.getSliceEls();
+  }
+  handleSliceUpdate() {
+    this.debouncedSliceUpdate();
+  }
+  /* RENDERING */
+  renderFilter() {
+    return (h("defs", null,
+      h("filter", { id: "wmHoverDropShadow" },
+        h("feGaussianBlur", { stdDeviation: "3" }),
+        h("feOffset", { result: "offsetblur" }),
+        h("feFlood", { "flood-color": "#333" }),
+        h("feComposite", { operator: "in", in2: "offsetblur" }),
+        h("feMerge", null,
+          h("feMergeNode", null),
+          h("feMergeNode", { in: "SourceGraphic" })))));
+  }
+  // DOUGHNUT
+  renderDoughnut() {
+    const outerSize = this.chartData.size + this.chartData.padding;
+    return (h("div", { class: "svg-wrapper doughnut-wrapper" },
+      h("svg", { width: outerSize + "px", height: outerSize + "px", ref: (el) => (this.svgEl = el), id: `graphic-${this.uid}`, class: `chart-svg doughnut-svg ${this.isTabbing ? "user-is-tabbing" : ""}` },
+        this.renderFilter(),
+        this.slicesData.map((s) => this.renderPath(s)),
+        this.getType() === "doughnut0" ? (h("text", { class: "value", x: "50%", y: "50%", "font-size": "1.5rem", "font-weight": "500", "text-anchor": "middle", "dominant-baseline": "middle" }, this.amountToPercent(this.slicesData[0].amount, true) + "%")) : (h("g", { transform: `translate(${this.chartData.padding / 2}, ${this.chartData.padding / 2})`, "text-anchor": "middle", "dominant-baseline": "middle" }, this.slicesData.map((s) => (s.amount > 0 ? this.renderDoughnutText(s) : "")))))));
+  }
+  renderPath(s) {
+    return (h("g", { transform: `translate(${this.chartData.padding / 2}, ${this.chartData.padding / 2})` },
+      h("path", { id: s.id, fill: s.amount ? s.color : "transparent", d: this.getPathData(s.amount, s.offset), onClick: (ev) => {
+          if (this.popoverEl) {
+            if (!this.isTabbing) {
+              s.coords = { x: ev.clientX, y: ev.clientY };
+              this.openPopover(s);
+            }
+          }
+        }, onFocus: (ev) => {
+          if (this.popoverEl) {
+            if (this.isTabbing) {
+              s.coords = getPosition(ev.target);
+              this.openPopover(s);
+            }
+          }
+        }, onKeyDown: (ev) => {
+          if (this.popoverEl && this.popoverEl.open && ev.keyCode === 13) {
+            const popoverBtn = this.popoverEl.querySelector("button");
+            popoverBtn && popoverBtn.click();
+          }
+        } }),
+      h("text", { class: "sr-only" }, s.legend)));
+  }
+  renderDoughnutText(s) {
+    if (!s.inSmallCluster) {
+      const arcMiddle = this.amountToDegree(s.offset + s.amount / 2);
+      let { x, y } = this.polarToCartesian(this.chartData.size / 2, 1.4, arcMiddle - 90);
+      return (h("text", { class: "value", x: x + "px", y: y + "px" }, `${s.perc > 0 ? s.perc : "<1"}%`));
+    }
+  }
+  // BAR
+  renderBar() {
+    return (h("div", { class: "svg-wrapper bar-wrapper" },
+      this.getType() === "bar1" ? (h("div", { class: "single-perc" }, this.amountToPercent(this.slicesData[0].amount, true) + "%")) : (""),
+      this.drawAxis(),
+      h("svg", { ref: (el) => (this.svgEl = el), id: `graphic-${this.uid}`, class: {
+          "chart-svg bar-svg": true,
+          "user-is-tabbing": this.isTabbing,
+          "show-values": this.showValues === "percentage" || this.showValues === "amount",
+        } },
+        this.renderFilter(),
+        h("foreignObject", { class: this.getType() === "bar2" || this.getType() === "bar4" || this.getType() === "bar5" ? "focus-offset" : "" },
+          h("div", { 
+            // @ts-ignore
+            xmlns: "http://www.w3.org/1999/xhtml", class: "tabbing-focus" })),
+        this.slicesData.map((s, idx) => this.renderRect(s, idx)),
+        this.getType() !== "bar1" ? (h("g", { class: "percs" }, this.slicesData.map((s) => (s.perc > 0 ? this.renderBarText(s) : "")))) : (""))));
+  }
+  renderRect(s, idx) {
+    let y;
+    switch (this.getType()) {
+      case "bar2":
+      case "bar4":
+      case "bar5":
+        y = this.showValues === "percentage" || this.showValues === "amount" ? "30px" : "0";
+        break;
+      default:
+        y = "0";
+    }
+    return (h("g", { class: "barcontainer" },
+      h("style", null, ` #${s.id} {
+          fill:${s.color};
+          x: ${`${this.amountToPercent(s.offset, false)}%`};
+          y: ${y};
+          height: 30px;
+          width: calc(${this.amountToPercent(s.amount, false)}%${idx !== this.slicesData.length - 1 ? " - 2px" : ""});
+        }`),
+      h("rect", { id: s.id, onClick: (ev) => {
+          if (this.popoverEl) {
+            if (!this.isTabbing) {
+              s.coords = { x: ev.clientX, y: ev.clientY };
+              this.openPopover(s);
+            }
+          }
+        }, onFocus: (ev) => {
+          if (this.popoverEl) {
+            if (this.isTabbing) {
+              s.coords = getPosition(ev.target);
+              this.openPopover(s);
+            }
+          }
+        }, onKeyDown: (ev) => {
+          if (this.popoverEl && this.popoverEl.open && ev.keyCode === 13) {
+            const popoverBtn = this.popoverEl.querySelector("button");
+            popoverBtn && popoverBtn.click();
+          }
+        } }),
+      h("text", { class: "sr-only" }, s.legend)));
+  }
+  renderBarText(s) {
+    let val;
+    if (this.showValues === "percentage") {
+      val = s.perc + "%";
+    }
+    else if (this.showValues === "amount") {
+      val = s.amount;
+    }
+    else {
+      return;
+    }
+    return (h("text", { class: "value", x: `${this.amountToPercent(s.offset, false) + this.amountToPercent(s.amount, false) / 2}%` }, val));
+  }
+  drawAxis() {
+    if (this.getType() === "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%")));
+    }
+  }
+  renderCompletionMessage() {
+    if (this.chartType === "hybrid" && this.completionMessage) {
+      return h("span", { class: "completion-message" }, this.completionMessage);
+    }
+  }
+  renderLegend() {
+    // legend is hidden for bar1 type regardless of showLegend value
+    if (this.showLegend) {
+      const hasCluster = this.slicesData.reduce((hasCluster, cur) => (hasCluster = cur.inSmallCluster ? true : hasCluster), false);
+      return (h("div", { class: "legend-wrapper" },
+        h("div", { class: `legend ${this.chartData.isBar ? "--top" : "--bottom"}`, "aria-hidden": "true" }, this.total > 0
+          ? this.slicesData.map((s) => {
+            // when both legend and amount are omitted, the legend is not shown for that particular option (it's been deactivated by the user)
+            if (!!s.amount || !!s.legend) {
+              return (h("div", { class: "legend-item" },
+                h("div", { class: "legend-color", style: { "background-color": s.color } }),
+                h("div", { class: "legend-text" }, s.legend)));
+            }
+          })
+          : ""),
+        !this.chartData.isBar && hasCluster ? (h("div", { class: "cluster-warning" },
+          intl.formatMessage({
+            id: "chart.hiddenPercentages",
+            defaultMessage: "Percentages smaller than 5% are not shown when too close to each other.",
+          }),
+          h("br", null),
+          intl.formatMessage({
+            id: "chart.clickToSeeDetails",
+            defaultMessage: "Click or use arrow keys to see details.",
+          }))) : ("")));
+    }
+  }
+  render() {
+    return (h(Host, { role: "application", "aria-label": this.label +
+        ", " +
+        intl.formatMessage({
+          id: "chart.interactiveChart",
+          defaultMessage: "Interactive chart. Use arrow keys to browse elements, press Tab to exit.",
+        }), tabindex: "0" },
+      h("div", { class: `component-wrapper ${this.getType()}` },
+        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 ? this.renderLegend() : "",
+        this.total > 0 && this.chartData.isBar ? this.renderBar() : this.renderDoughnut(),
+        !this.chartData.isBar ? this.renderLegend() : "",
+        h("priv-chart-popover", { class: this.isTabbing ? "user-is-tabbing" : "", ref: (el) => (this.popoverEl = el) }),
+        this.renderCompletionMessage())));
+  }
+  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
+    },
+    "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"
+    }
+  }; }
+  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
+    }]; }
+}