@watermarkinsights/ripple 3.4.0-2 → 3.4.0-3

package/dist/esm/wm-chart.entry.js

@@ -1,522 +1,522 @@
-import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-66f8130e.js';
-import { g as generateId, d as debounce, f as findParentWithScrollbar, b as getPosition, i as intl, c as checkForActiveElInShadow } from './functions-e528c934.js';
+import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-f8b130b6.js';
+import { g as generateId, d as debounce, f as findParentWithScrollbar, b as getPosition, i as intl, c as checkForActiveElInShadow } from './functions-5aebd578.js';
 
 const wmChartCss = ".component-wrapper{display:flex;flex-direction:column;align-items:center;font-size:0.875rem;position:relative;}.component-wrapper .label{display:block;margin:0;padding-bottom:0.25rem;font-weight:500;position:relative}.component-wrapper .label .subinfo{display:block;font-weight:normal;font-style:italic;bottom:0.25rem;width:100%;color:#6b6b6b}.component-wrapper .legend-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.component-wrapper .legend-wrapper .legend{display:flex;align-items:center;flex-wrap:wrap;text-align:center;padding-top:0.25rem;padding-bottom:0.75rem;box-sizing:border-box}.component-wrapper .legend-wrapper .legend.--top{margin-top:-0.75rem}.component-wrapper .legend-wrapper .legend.--top .legend-item{padding-top:0.75rem}.component-wrapper .legend-wrapper .legend.--top .legend-color{top:0.75rem}.component-wrapper .legend-wrapper .legend.--bottom{margin-bottom:-0.75rem}.component-wrapper .legend-wrapper .legend.--bottom .legend-item{padding-bottom:0.75rem}.component-wrapper .legend-wrapper .legend.--bottom .legend-color{top:-0.75rem}.component-wrapper .legend-wrapper .legend .legend-item{position:relative}.component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type){padding-right:1.25rem}.component-wrapper .legend-wrapper .legend .legend-text{padding-left:1rem;line-height:1}.component-wrapper .legend-wrapper .legend .legend-color{position:absolute;left:0;bottom:0;margin:auto;width:0.6875rem;height:0.6875rem}.component-wrapper .legend-wrapper .cluster-warning{font-size:0.75rem;font-style:italic;max-width:100%}.component-wrapper .chart-svg{overflow:visible}.component-wrapper .chart-svg:active,.component-wrapper .chart-svg:hover,.component-wrapper .chart-svg:focus{outline:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.component-wrapper .chart-svg::-moz-focus-inner{border:0;outline:none}.component-wrapper .chart-svg path:active,.component-wrapper .chart-svg path:hover,.component-wrapper .chart-svg path:focus,.component-wrapper .chart-svg rect:active,.component-wrapper .chart-svg rect:hover,.component-wrapper .chart-svg rect:focus{outline:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;filter:url(#wmHoverDropShadow)}.component-wrapper .chart-svg path::-moz-focus-inner,.component-wrapper .chart-svg rect::-moz-focus-inner{border:0;outline:none}.component-wrapper .bar-wrapper{flex-grow:1;width:100%}.component-wrapper .bar-wrapper rect{height:30px}.component-wrapper .doughnut-wrapper .chart-svg{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}.component-wrapper .completion-message-wrapper{position:relative;flex:1}.component-wrapper.doughnut1 label,.component-wrapper.doughnut1 .label-text,.component-wrapper.doughnut2 label,.component-wrapper.doughnut2 .label-text,.component-wrapper.doughnut3 label,.component-wrapper.doughnut3 .label-text{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.component-wrapper.doughnut0{align-items:center}.component-wrapper.doughnut0 label{text-align:center;width:100%;padding-bottom:1.5rem}.component-wrapper.doughnut0 label .subinfo{position:absolute}.component-wrapper.doughnut0 .legend{display:flex}.component-wrapper.doughnut0 .completion-message{padding-top:0.625rem}.component-wrapper .bar-svg{width:100%}.component-wrapper .bar-svg foreignObject{width:100%;height:30px;overflow:visible}.component-wrapper.bar1{padding:1.25rem;position:relative;align-items:flex-start}.component-wrapper.bar1 label{display:flex;flex-direction:column}.component-wrapper.bar1 label .subinfo{position:initial}.component-wrapper.bar1 .legend{display:none}.component-wrapper.bar1 .completion-message{position:absolute;right:0;top:30px;margin-top:4px}.component-wrapper.bar1 .bar-wrapper{display:flex;align-items:center}.component-wrapper.bar1 .bar-wrapper .single-perc{width:4rem;flex:none}.component-wrapper.bar1 .bar-wrapper .chart-svg{flex:1;height:30px}@media screen and (min-width: 768px){.component-wrapper.bar1{flex-direction:row;align-items:center}.component-wrapper.bar1 label{width:12rem;text-align:left;padding-right:1.25rem;padding-bottom:0;flex:none}.component-wrapper.bar1 .bar-wrapper{flex-direction:row-reverse}.component-wrapper.bar1 .bar-wrapper .single-perc{text-align:center;padding-left:0.5rem}}.component-wrapper.bar2,.component-wrapper.bar3,.component-wrapper.bar4,.component-wrapper.bar5{align-items:flex-start}.component-wrapper.bar2 .legend,.component-wrapper.bar4 .legend,.component-wrapper.bar5 .legend{padding-bottom:0}.component-wrapper.bar2 .chart-svg,.component-wrapper.bar4 .chart-svg,.component-wrapper.bar5 .chart-svg{height:30px;margin-top:20px;margin-bottom:0}.component-wrapper.bar2 .chart-svg.show-values,.component-wrapper.bar4 .chart-svg.show-values,.component-wrapper.bar5 .chart-svg.show-values{height:60px;margin-top:0;margin-bottom:0}.component-wrapper.bar2 .chart-svg .percs,.component-wrapper.bar4 .chart-svg .percs,.component-wrapper.bar5 .chart-svg .percs{transform:translateY(24px);text-anchor:middle}.component-wrapper.bar3 .legend{padding-bottom:1.25rem}.component-wrapper.bar3 .svg-wrapper{position:relative;height:100px}.component-wrapper.bar3 .svg-wrapper .chart-svg{position:absolute;top:35px;left:0;right:0;bottom:0;height:30px}.component-wrapper.bar3 .svg-wrapper .chart-svg text{fill:#4a4a4a}.component-wrapper.bar3 .svg-wrapper .chart-svg .percs{transform:translateY(-4px);text-anchor:middle}.component-wrapper.bar3 .svg-wrapper .axis{position:absolute;top:0;left:0;height:90px;width:100%;overflow:visible;transform:translateY(90px)}.component-wrapper.bar3 .svg-wrapper .axis line{stroke:#eeedf4;stroke-width:1px}.component-wrapper.bar3 .svg-wrapper .axis text{transform:translate(4px, 24px);text-anchor:middle}.component-wrapper.left-label{flex-direction:row}.component-wrapper.left-label .label{width:12rem;padding-right:1.25rem;flex:none;align-self:flex-end;min-height:30px;display:flex;align-items:center}:host(:focus){outline:none}:host(:focus) .chart-svg.user-is-tabbing:not(.show-values){-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host(:focus) .chart-svg.user-is-tabbing:not(.show-values)::-moz-focus-inner{border:0}:host(:focus) .chart-svg.user-is-tabbing.show-values .tabbing-focus{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;width:100%;height:30px}:host(:focus) .chart-svg.user-is-tabbing.show-values .tabbing-focus::-moz-focus-inner{border:0}:host(:focus) .chart-svg.user-is-tabbing.show-values .focus-offset{transform:translateY(30px)}";
 
-const Chart = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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("div", { class: "completion-message-wrapper" }, 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) : "")))) : ("")), this.renderCompletionMessage())));
-  }
-  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.hybridType === "doughnut0" ? this.renderCompletionMessage() : "")));
-  }
-  get el() { return getElement(this); }
-};
+const Chart = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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("div", { class: "completion-message-wrapper" }, 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) : "")))) : ("")), this.renderCompletionMessage())));
+  }
+  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.hybridType === "doughnut0" ? this.renderCompletionMessage() : "")));
+  }
+  get el() { return getElement(this); }
+};
 Chart.style = wmChartCss;
 
 export { Chart as wm_chart };