@watermarkinsights/ripple 3.8.2 → 3.9.0-2

package/dist/collection/lang/missing.js

@@ -1,39 +1,39 @@
-/* This script is useful when we translate internally, so we know which keys to translate.
- * Currently Martin Maugeais translates to French and Kristian Manrique to Spanish.
- * This script should be run with `npm run missing`. It may fail otherwise, as fs paths are relative to project root.
- */
-
-const fs = require("fs");
-const en = require("./en.json");
-const fr = require("./fr.json");
-const es = require("./es.json");
-
-const keys = Object.keys(en);
-
-let missingFR = {};
-let missingES = {};
-
-keys.map((key) => {
-  if (!fr[key]) {
-    missingFR[key] = en[key];
-  }
-
-  if (!es[key]) {
-    missingES[key] = en[key];
-  }
-});
-
-const dataFR = JSON.stringify(missingFR, null, 2);
-const dataES = JSON.stringify(missingES, null, 2);
-
-if (Object.entries(missingFR).length > 0) {
-  fs.writeFile("src/lang/missingTranslationsFR.json", dataFR, (err) => {
-    !!err && console.log(err);
-  });
-}
-
-if (Object.entries(missingES).length > 0) {
-  fs.writeFile("missingTranslationsES.json", dataES, (err) => {
-    !!err && console.log(err);
-  });
-}
+/* This script is useful when we translate internally, so we know which keys to translate.
+ * Currently Martin Maugeais translates to French and Kristian Manrique to Spanish.
+ * This script should be run with `npm run missing`. It may fail otherwise, as fs paths are relative to project root.
+ */
+
+const fs = require("fs");
+const en = require("./en.json");
+const fr = require("./fr.json");
+const es = require("./es.json");
+
+const keys = Object.keys(en);
+
+let missingFR = {};
+let missingES = {};
+
+keys.map((key) => {
+  if (!fr[key]) {
+    missingFR[key] = en[key];
+  }
+
+  if (!es[key]) {
+    missingES[key] = en[key];
+  }
+});
+
+const dataFR = JSON.stringify(missingFR, null, 2);
+const dataES = JSON.stringify(missingES, null, 2);
+
+if (Object.entries(missingFR).length > 0) {
+  fs.writeFile("src/lang/missingTranslationsFR.json", dataFR, (err) => {
+    !!err && console.log(err);
+  });
+}
+
+if (Object.entries(missingES).length > 0) {
+  fs.writeFile("missingTranslationsES.json", dataES, (err) => {
+    !!err && console.log(err);
+  });
+}

package/dist/collection/lang/piglatin.js

@@ -1,93 +1,93 @@
-const fs = require("fs");
-const en = require("./en.json");
-
-const pig = {};
-Object.keys(en).map((k) => {
-  let string = en[k].defaultMessage;
-  const interpStart = string.indexOf("{");
-  const interpEnd = string.lastIndexOf("}") + 1;
-
-  // if there is an interpolation pattern
-  if (interpStart >= 0 && interpEnd > 2) {
-    let translInterp = translateSentence(string.slice(0, interpStart));
-
-    const interp = string.slice(interpStart, interpEnd);
-    // what's inside the braces shouldn't be translated
-    // unless it's in nested translated, and so on
-    // we can set flags to cut the string into pieces
-    // which should or should not be translated
-    const flags = [];
-    for (x = 0; x < interp.length; x++) {
-      if (interp[x] == "{") {
-        flags.push(x);
-      } else if (interp[x] == "}") {
-        flags.push(x);
-      }
-    }
-
-    splits = flags.map((_, i) => {
-      if (i < flags.length) return interp.slice(flags[i], flags[i + 1]);
-    });
-
-    splits.map((split, i) => {
-      translInterp += i % 2 ? translateSentence(split) : split; // only translate even ones (the odd ones are params)
-    });
-
-    translInterp += translateSentence(string.slice(interpEnd, string.length));
-
-    const dm = { defaultMessage: translInterp };
-    pig[k] = dm;
-  } else {
-    const dm = { defaultMessage: translateSentence(string) };
-    pig[k] = dm;
-  }
-});
-data = JSON.stringify(pig, null, 2);
-
-fs.writeFile("src/lang/pig.json", data, (err) => {
-  !!err && console.log(err);
-});
-
-function pigLatinize(word) {
-  const isVowel = (char) => ["a", "e", "i", "o", "u"].includes(char.toLowerCase());
-  const isLetter = (char) => RegExp(/^\p{L}/, "u").test(char);
-
-  const firstLetter = Array.from(word).reduce((l, char, i) => (isLetter(char) && l < 0 ? i : l), -1);
-
-  const lastLetter = Array.from(word).reduce((l, char, i) => (isLetter(char) ? i : l), -1);
-
-  if (firstLetter == -1 && lastLetter == -1) return word; // only special chars, don't translate
-
-  const specialKBefore = word.slice(0, firstLetter) || "";
-  const specialKAfter = word.slice(lastLetter + 1, word.length + 1) || "";
-  word = word.slice(firstLetter, lastLetter + 1) || "";
-
-  if (word) {
-    if (isVowel(word[0])) {
-      word += "yay";
-    } else {
-      const firstVowel = Array.from(word).reduce((firstV, char, i) => {
-        return isVowel(char) && firstV < 0 ? i : firstV;
-      }, -1);
-      if (word[0] == word[0].toUpperCase()) {
-        word =
-          word.substring(firstVowel, firstVowel + 1).toUpperCase() +
-          word.substring(firstVowel + 1, word.length) +
-          word.substring(0, firstVowel).toLowerCase() +
-          "ay";
-      } else {
-        word = word.substring(firstVowel, word.length) + word.substring(0, firstVowel) + "ay";
-      }
-    }
-  }
-  return specialKBefore + word + specialKAfter;
-}
-
-function translateSentence(string) {
-  let words = string.split(" ");
-  return words
-    .reduce((acc, word) => {
-      return acc + " " + pigLatinize(word);
-    }, "")
-    .substring(1); // rm leading space
-}
+const fs = require("fs");
+const en = require("./en.json");
+
+const pig = {};
+Object.keys(en).map((k) => {
+  let string = en[k].defaultMessage;
+  const interpStart = string.indexOf("{");
+  const interpEnd = string.lastIndexOf("}") + 1;
+
+  // if there is an interpolation pattern
+  if (interpStart >= 0 && interpEnd > 2) {
+    let translInterp = translateSentence(string.slice(0, interpStart));
+
+    const interp = string.slice(interpStart, interpEnd);
+    // what's inside the braces shouldn't be translated
+    // unless it's in nested translated, and so on
+    // we can set flags to cut the string into pieces
+    // which should or should not be translated
+    const flags = [];
+    for (x = 0; x < interp.length; x++) {
+      if (interp[x] == "{") {
+        flags.push(x);
+      } else if (interp[x] == "}") {
+        flags.push(x);
+      }
+    }
+
+    splits = flags.map((_, i) => {
+      if (i < flags.length) return interp.slice(flags[i], flags[i + 1]);
+    });
+
+    splits.map((split, i) => {
+      translInterp += i % 2 ? translateSentence(split) : split; // only translate even ones (the odd ones are params)
+    });
+
+    translInterp += translateSentence(string.slice(interpEnd, string.length));
+
+    const dm = { defaultMessage: translInterp };
+    pig[k] = dm;
+  } else {
+    const dm = { defaultMessage: translateSentence(string) };
+    pig[k] = dm;
+  }
+});
+data = JSON.stringify(pig, null, 2);
+
+fs.writeFile("src/lang/pig.json", data, (err) => {
+  !!err && console.log(err);
+});
+
+function pigLatinize(word) {
+  const isVowel = (char) => ["a", "e", "i", "o", "u"].includes(char.toLowerCase());
+  const isLetter = (char) => RegExp(/^\p{L}/, "u").test(char);
+
+  const firstLetter = Array.from(word).reduce((l, char, i) => (isLetter(char) && l < 0 ? i : l), -1);
+
+  const lastLetter = Array.from(word).reduce((l, char, i) => (isLetter(char) ? i : l), -1);
+
+  if (firstLetter == -1 && lastLetter == -1) return word; // only special chars, don't translate
+
+  const specialKBefore = word.slice(0, firstLetter) || "";
+  const specialKAfter = word.slice(lastLetter + 1, word.length + 1) || "";
+  word = word.slice(firstLetter, lastLetter + 1) || "";
+
+  if (word) {
+    if (isVowel(word[0])) {
+      word += "yay";
+    } else {
+      const firstVowel = Array.from(word).reduce((firstV, char, i) => {
+        return isVowel(char) && firstV < 0 ? i : firstV;
+      }, -1);
+      if (word[0] == word[0].toUpperCase()) {
+        word =
+          word.substring(firstVowel, firstVowel + 1).toUpperCase() +
+          word.substring(firstVowel + 1, word.length) +
+          word.substring(0, firstVowel).toLowerCase() +
+          "ay";
+      } else {
+        word = word.substring(firstVowel, word.length) + word.substring(0, firstVowel) + "ay";
+      }
+    }
+  }
+  return specialKBefore + word + specialKAfter;
+}
+
+function translateSentence(string) {
+  let words = string.split(" ");
+  return words
+    .reduce((acc, word) => {
+      return acc + " " + pigLatinize(word);
+    }, "")
+    .substring(1); // rm leading space
+}

package/dist/esm/chartFunctions-fc11df2b.js

@@ -0,0 +1,420 @@
+import { h } from './index-d649a861.js';
+import { c as checkForActiveElInShadow, i as intl, b as getPosition, f as findParentWithScrollbar, d as debounce } from './functions-b478ef24.js';
+
+// Components wm-chart and wm-progress-indicator share a significant
+// portion of their code. It has been extracted here
+const colors = {
+  salmon: "#ff5f4e",
+  cyan: "#19a1a9",
+  forest: "#088000",
+  sleet: "#7f97ad",
+  midnight: "#2e1b46",
+  lavender: "#8b86ca",
+};
+const types = {
+  doughnut: {
+    size: 155,
+    colors: [colors.forest, "#bfbfbf"],
+    thickness: 0.73,
+    padding: 25,
+    isBar: false,
+  },
+  // deprecated hybrid chart type, should use Progress Indicator's "doughnut" instead
+  doughnut0: {
+    size: 155,
+    colors: [colors.forest, "#bfbfbf"],
+    thickness: 0.73,
+    padding: 25,
+    isBar: false,
+  },
+  doughnut1: {
+    size: 130,
+    colors: [colors.lavender, colors.midnight, "#d4d4d4"],
+    thickness: 0.5,
+    padding: 90,
+    isBar: false,
+  },
+  doughnut2: {
+    size: 130,
+    colors: [colors.cyan, colors.salmon, "#d4d4d4"],
+    thickness: 0.5,
+    padding: 90,
+    isBar: false,
+  },
+  doughnut3: {
+    size: 130,
+    colors: [colors.lavender, colors.midnight, "#919834", "#c177cf", "#c16e00", "#029af2", "#2a6993"],
+    thickness: 0.5,
+    padding: 90,
+    isBar: false,
+  },
+  bar: {
+    size: 350,
+    colors: [colors.forest, "#bfbfbf"],
+    padding: 0,
+    isBar: true,
+  },
+  // deprecated hybrid chart type, should use Progress Indicator's "bar" instead
+  bar1: {
+    size: 350,
+    colors: [colors.forest, "#bfbfbf"],
+    padding: 0,
+    isBar: true,
+  },
+  bar2: {
+    size: 400,
+    colors: ["#d4d4d4", colors.sleet, colors.cyan, colors.salmon],
+    padding: 0,
+    isBar: true,
+  },
+  bar3: {
+    size: 300,
+    colors: ["#0d696e", colors.cyan, "#8e4129", colors.salmon],
+    padding: 0,
+    isBar: true,
+  },
+  bar4: {
+    size: 400,
+    colors: ["#d4d4d4", colors.sleet, "#33a919"],
+    padding: 0,
+    isBar: true,
+  },
+  bar5: {
+    size: 400,
+    colors: [
+      "#d4d4d4",
+      colors.lavender,
+      colors.midnight,
+      "#919834",
+      "#c177cf",
+      "#c16e00",
+      "#029af2",
+      "#2a6993",
+    ],
+    padding: 0,
+    isBar: true,
+  },
+};
+function amountToPercent(val, total, asInt) {
+  return asInt ? Math.round((val * 100) / total) : Math.round((val * 10000) / total) / 100; // with 2 decimals
+}
+function amountToDegree(val, total) {
+  // In a circle of {total}, determine degrees of slice {val}
+  return (val * 360) / total;
+}
+function toFixed(number) {
+  return parseFloat((Math.floor(number * 100) / 100).toFixed(2));
+}
+function polarToCartesian(half, radius, startAngle, endAngle) {
+  var x = toFixed(half + half * radius * Math.cos((Math.PI * startAngle) / 180));
+  var y = 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 = toFixed(half + half * radius * Math.cos((Math.PI * endAngle) / 180));
+    var y2 = toFixed(half + half * radius * Math.sin((Math.PI * endAngle) / 180));
+    return { x1: x, y1: y, x2, y2 };
+  }
+  return { x, y };
+}
+function getArc(radius, largeArcFlag, x, y, chartSize) {
+  var z = toFixed((chartSize / 2) * radius);
+  return `A ${z}, ${z} 0 ${largeArcFlag} ${toFixed(x)}, ${toFixed(y)}`;
+}
+function handleSliceKeyDown(ev) {
+  if (this.popoverEl && this.popoverEl.open && ev.key === "Enter") {
+    const popoverBtn = this.popoverEl.querySelector("button");
+    popoverBtn && popoverBtn.click();
+  }
+}
+function handleSliceClick(ev, s) {
+  if (this.popoverEl && !this.isTabbing) {
+    s.coords = { x: ev.clientX, y: ev.clientY };
+    openPopover.call(this, s);
+  }
+}
+function handleSliceFocus(ev, s) {
+  if (this.popoverEl && this.isTabbing) {
+    s.coords = getPosition(ev.target);
+    openPopover.call(this, s);
+  }
+}
+function handleChartKeydown(ev) {
+  switch (ev.key) {
+    // arrow up / left
+    case "ArrowUp":
+    case "ArrowLeft":
+      ev.preventDefault();
+      this.isTabbing = true; // shd already be true. just in case user clicked on chart then pressed an arrow key
+      focusPrevious.call(this);
+      break;
+    // arrow right / down
+    case "ArrowRight":
+    case "ArrowDown":
+      ev.preventDefault();
+      this.isTabbing = true; // shd already be true. just in case user clicked on chart then pressed an arrow key
+      focusNext.call(this);
+      break;
+    // tab
+    case "Tab":
+      exitChart.call(this);
+      break;
+    case "Escape":
+      this.popoverEl.open = false;
+      break;
+  }
+}
+function 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();
+      });
+    }
+  }
+}
+function 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;
+  focusSlice.call(this, index);
+}
+function 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;
+    }
+    focusSlice.call(this, index);
+  }
+}
+function 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);
+  }
+}
+function 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);
+}
+async function getData(chartType) {
+  this.slicesData = [];
+  let acc = 0;
+  const children = Array.from(this.el.children);
+  this.total = children.reduce((total, slice) => (total += parseInt(slice.getAttribute("amount") || "0")), 0);
+  children.forEach((c, i) => {
+    const amount = parseInt(c.getAttribute("amount") || "0");
+    const perc = amountToPercent(amount, this.total, 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 = amountToPercent(parseInt(prev.getAttribute("amount") || "0"), this.total, true);
+    const next = children[i === children.length - 1 ? 0 : i + 1];
+    const nextPerc = amountToPercent(parseInt(next.getAttribute("amount") || "0"), this.total, 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 = chartType === "bar5" ? (this.notStartedColor ? i : i + 1) : i;
+    const color = types[chartType].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);
+  });
+}
+function getPathData(amount, offset) {
+  var startAngle = amountToDegree(offset, this.total) - 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 = polarToCartesian(half, outerRadius, startAngle + 1.5, // Addition for slice separator
+  endAngle);
+  var innerCoords = polarToCartesian(half, innerRadius, 
+  // Calculation below "just works", revisit
+  startAngle + 1.5 + (1 - innerRadius) * 3, // Addition for slice separator
+  endAngle);
+  const moveTo = `M ${outerCoords.x1}, ${outerCoords.y1} `;
+  const arc1 = getArc(outerRadius, largeArcFlagOuter, outerCoords.x2, outerCoords.y2, this.chartData.size);
+  const line = ` L ${innerCoords.x2}, ${innerCoords.y2} `;
+  const arc2 = getArc(innerRadius, largeArcFlagInner, innerCoords.x1, innerCoords.y1, this.chartData.size);
+  return moveTo + arc1 + line + arc2 + " z";
+}
+function 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" })))));
+}
+function renderDoughnut(chartType) {
+  const outerSize = this.chartData.size + this.chartData.padding;
+  const isHybridDoughnut = chartType === "doughnut0" || chartType === "doughnut";
+  return (h("div", { class: "chart-wrapper doughnut-wrapper" },
+    h("svg", { width: outerSize + "px", height: outerSize + "px", id: `graphic-${this.uid}`, class: "doughnut-svg" },
+      renderFilter(),
+      this.slicesData.map((s) => renderPath.call(this, s)),
+      isHybridDoughnut ? (h("text", { class: "value", x: "50%", y: "50%", "font-size": "1.5rem", "font-weight": "500", "text-anchor": "middle", "dominant-baseline": "middle" }, amountToPercent(this.slicesData[0].amount, this.total, 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 ? renderDoughnutText.call(this, s) : "")))))));
+}
+function renderPath(s) {
+  return (h("g", { transform: `translate(${this.chartData.padding / 2}, ${this.chartData.padding / 2})` },
+    h("path", { id: s.id, class: "doughnut-segment", fill: s.amount ? s.color : "transparent", d: getPathData.call(this, s.amount, s.offset), onClick: (ev) => handleSliceClick.call(this, ev, s), onFocus: (ev) => handleSliceFocus.call(this, ev, s), onKeyDown: (ev) => handleSliceKeyDown.call(this, ev), role: "img", "aria-label": s.legend })));
+}
+function renderDoughnutText(s) {
+  if (!s.inSmallCluster) {
+    const arcMiddle = amountToDegree(s.offset + s.amount / 2, this.total);
+    let { x, y } = 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"}%`));
+  }
+}
+function renderBar(chartType) {
+  const isHybridBar = chartType === "bar1" || chartType === "bar";
+  return (h("div", { class: "chart-wrapper bar-wrapper" },
+    isHybridBar ? (h("div", { class: "single-perc" }, amountToPercent(this.slicesData[0].amount, this.total, true) + "%")) : (""),
+    this.chartType === "bar3" && this.drawAxis(),
+    h("div", { class: {
+        "inner-bar-wrapper": true,
+        "show-values": this.tempValueFormat === "percentage" || this.tempValueFormat === "amount",
+      } },
+      !isHybridBar ? (h("div", { class: "values" }, this.slicesData.map((s, idx) => (s.perc > 0 ? this.renderBarText(s, idx) : "")))) : (""),
+      h("div", { class: "bar-segments-wrapper" }, this.slicesData.map((s, idx) => renderBarSegment.call(this, s, idx))),
+      isHybridBar ? renderCompletionMessage.call(this) : "")));
+}
+function renderBarSegment(s, idx) {
+  const isLastSlice = idx !== this.slicesData.length - 1;
+  const width = `calc(${amountToPercent(s.amount, this.total, false)}%${isLastSlice ? " - 2px" : ""})`;
+  return (h("div", { class: `bar-segment ${amountToPercent(s.amount, this.total, false) === 0 ? "zero" : ""}`, style: {
+      backgroundColor: s.color,
+      width: width,
+    }, onClick: (ev) => handleSliceClick.call(this, ev, s), onFocus: (ev) => handleSliceFocus.call(this, ev, s), onKeyDown: (ev) => handleSliceKeyDown.call(this, ev) },
+    h("text", { class: "sr-only" }, s.legend)));
+}
+function 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.mode === "bar" ? "--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.",
+        }))) : ("")));
+  }
+}
+function renderCompletionMessage() {
+  if (this.completionMessage) {
+    return h("div", { class: "completion-message" }, this.completionMessage);
+  }
+}
+
+export { renderBar as a, renderDoughnut as b, renderCompletionMessage as c, amountToPercent as d, getData as g, handleChartKeydown as h, renderLegend as r, types as t };