@watermarkinsights/ripple 3.3.1 → 3.4.0-0

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

@@ -1,761 +1,761 @@
-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;
-    // 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.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.debouncedResize = debounce(async () => {
-      if (this.chartType === "hybrid") {
-        this.setHybridType();
-        await this.getData();
-      }
-      forceUpdate(this.el);
-    }, 10);
-    this.debouncedSliceUpdate = debounce(async () => {
-      await this.getData();
-      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";
-  }
-  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() {
-    // handling resizing only needs to occur for bar charts (hybrid included)
-    if (this.chartType.includes("bar") || 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.");
-    }
-    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.tempValueFormat === "percentage" || this.tempValueFormat === "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.tempValueFormat === "percentage" || this.tempValueFormat === "amount" ? "30px" : "0";
-        break;
-      default:
-        y = "0";
-    }
-    // adjusting the width of the rect slightly ensures repainting on rerenders
-    // important for updating width accurate when resizing the page
-    const randomTinyNumber = Math.random() / 1000;
-    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) + randomTinyNumber}%${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.tempValueFormat === "percentage") {
-      val = s.perc + "%";
-    }
-    else if (this.tempValueFormat === "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()} ${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 ? 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
-    },
-    "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
-    }]; }
-}
+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;
+    // 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.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.debouncedResize = debounce(async () => {
+      if (this.chartType === "hybrid") {
+        this.setHybridType();
+        await this.getData();
+      }
+      forceUpdate(this.el);
+    }, 10);
+    this.debouncedSliceUpdate = debounce(async () => {
+      await this.getData();
+      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";
+  }
+  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() {
+    // handling resizing only needs to occur for bar charts (hybrid included)
+    if (this.chartType.includes("bar") || 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.");
+    }
+    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.tempValueFormat === "percentage" || this.tempValueFormat === "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.tempValueFormat === "percentage" || this.tempValueFormat === "amount" ? "30px" : "0";
+        break;
+      default:
+        y = "0";
+    }
+    // adjusting the width of the rect slightly ensures repainting on rerenders
+    // important for updating width accurate when resizing the page
+    const randomTinyNumber = Math.random() / 1000;
+    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) + randomTinyNumber}%${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.tempValueFormat === "percentage") {
+      val = s.perc + "%";
+    }
+    else if (this.tempValueFormat === "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()} ${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 ? 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
+    },
+    "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
+    }]; }
+}