@watermarkinsights/ripple 0.0.0 → 0.1.0-alpha.0

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

@@ -1,710 +0,0 @@
-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
-    }]; }
-}