@watermarkinsights/ripple 0.0.0 → 0.1.0-alpha.0

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

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