@watermarkinsights/ripple 3.24.0 → 3.24.1

package/dist/esm/{chartFunctions-e22110b8.js → chartFunctions-b0a9e440.js}

@@ -1,592 +1,597 @@
 import { h } from './index-84a6ae22.js';
-import { i as intl, c as checkForActiveElInShadow, b as getPosition, f as findParentWithScrollbar, d as debounce } from './functions-c58046f2.js';
+import { i as intl, c as checkForActiveElInShadow, b as getPosition, f as findParentWithScrollbar, d as debounce } from './functions-1c41e984.js';
 
-const colors = {
-  salmon: "#ff5f4e",
-  cyan: "#19a1a9",
-  forest: "#088000",
-  sleet: "#7f97ad",
-  midnight: "#2e1b46",
-  lavender: "#8b86ca",
-  periwinkle: "#575195",
-  gray: "#6b6b6b",
-};
-const allChartsDetails = {
-  // for progress monitor
-  doughnut: {
-    size: 155,
-    colors: [colors.forest, colors.gray],
-    thickness: 0.73,
-    padding: 25,
-    category: "doughnut",
-  },
-  // deprecated hybrid chart type, should use Progress Indicator's "doughnut" instead
-  doughnut0: {
-    size: 155,
-    colors: [colors.forest, colors.gray],
-    thickness: 0.73,
-    padding: 25,
-    category: "doughnut",
-  },
-  doughnut1: {
-    size: 130,
-    colors: [colors.lavender, colors.midnight, colors.gray],
-    thickness: 0.5,
-    padding: 90,
-    category: "doughnut",
-  },
-  doughnut2: {
-    size: 130,
-    colors: [colors.cyan, colors.salmon, colors.gray],
-    thickness: 0.5,
-    padding: 90,
-    category: "doughnut",
-  },
-  // an internal type only for use when doughnut 2 is populated with 4 slices
-  // in this case, the first slice is colored purple
-  doughnut2plus: {
-    size: 130,
-    colors: [colors.periwinkle, colors.cyan, colors.salmon, colors.gray],
-    thickness: 0.5,
-    padding: 90,
-    category: "doughnut",
-  },
-  doughnut3: {
-    size: 130,
-    colors: [colors.lavender, colors.midnight, "#0089e4", colors.forest, "#ea8500", "#d54f41", "#146ca9"],
-    thickness: 0.5,
-    padding: 90,
-    category: "doughnut",
-  },
-  // for progress monitor
-  bar: {
-    size: 350,
-    colors: [colors.forest, colors.gray],
-    padding: 0,
-    category: "stackedBar",
-  },
-  // deprecated hybrid chart type, should use Progress Indicator's "bar" instead
-  bar1: {
-    size: 350,
-    colors: [colors.forest, colors.gray],
-    padding: 0,
-    category: "stackedBar",
-  },
-  bar2: {
-    size: 400,
-    colors: [colors.gray, colors.periwinkle, colors.cyan, colors.salmon],
-    padding: 0,
-    category: "stackedBar",
-  },
-  bar3: {
-    size: 300,
-    colors: ["#0d696e", colors.cyan, "#8e4129", colors.salmon],
-    padding: 0,
-    category: "stackedBar",
-  },
-  bar4: {
-    size: 400,
-    colors: [colors.salmon, colors.cyan, colors.periwinkle],
-    padding: 0,
-    category: "stackedBar",
-  },
-  bar5: {
-    size: 400,
-    colors: [
-      colors.gray,
-      colors.lavender,
-      colors.midnight,
-      "#0089e4",
-      colors.forest,
-      "#ea8500",
-      "#d54f41",
-      "#146ca9",
-    ],
-    padding: 0,
-    category: "stackedBar",
-  },
-  bar6: {
-    size: 400,
-    colors: [colors.lavender],
-    padding: 0,
-    category: "simpleBar",
-  },
-  bar7: {
-    size: 400,
-    colors: [colors.periwinkle, colors.cyan, colors.salmon, colors.gray],
-    padding: 0,
-    category: "simpleBar",
-  },
-};
-function showValue(valueFormat) {
-  return valueFormat === "percentage" || valueFormat === "amount" ? "show-values" : "";
-}
-const textHiddenMessage = intl.formatMessage({
-  id: "chart.hiddenValues",
-  defaultMessage: "Values are not shown when too close to each other.",
-  description: "Text displayed when a chart has some values hidden",
-});
-const seeDetailsMessage = intl.formatMessage({
-  id: "chart.clickToSeeDetails",
-  defaultMessage: "Click or use arrow keys to see details.",
-  description: "Text displayed, guiding user to interact to see more details.",
-});
-function abbrNumber(num) {
-  return num > 999 ? Math.round(num / 100) / 10 + "K" : num;
-}
-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 scale(val, inMin, inMax, outMin, outMax) {
-  let scaled = ((val - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
-  // clip the values so that whatever is passed in the output is never smaller than outMin or greater than outMax
-  return scaled < outMin ? outMin : scaled > outMax ? outMax : scaled;
-}
-function minSpacing(width) {
-  // minimum spacing between 2 ticks, in px
-  return scale(width, 300, 900, 70, 150);
-}
-function getMaxTicks(width) {
-  return Math.round(width / minSpacing(width));
-}
-function getInterval(largest, maxticks) {
-  const minimum = largest / maxticks;
-  const magnitude = 10 ** Math.floor(Math.log10(minimum));
-  const residual = minimum / magnitude;
-  let interval;
-  if (residual > 5) {
-    interval = 10 * magnitude;
-  }
-  else if (residual > 3) {
-    interval = 5 * magnitude;
-  }
-  else if (residual > 2) {
-    interval = 3 * magnitude;
-  }
-  else if (residual > 1.5) {
-    interval = 2 * magnitude;
-  }
-  else if (residual > 1) {
-    interval = 1.5 * magnitude;
-  }
-  else {
-    interval = magnitude;
-  }
-  return interval;
-}
-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;
-      this.userIsNavigating = 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) {
-    this.userIsNavigating = true;
-    if (this.popoverEl) {
-      this.popoverEl.open = false;
-    }
-    // set tabindex of the wrapper to -1 while slices are being focused, to allow for shft-tabbing out of the component directly
-    this.componentWrapperEl.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
-    });
-  this.userIsNavigating = false;
-  // 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(() => {
-    this.componentWrapperEl.tabIndex = 0;
-    // @ts-ignore
-    this.el.focusable = true; // for Edge
-    if (this.popoverEl) {
-      this.popoverEl.open = false;
-    }
-  }, 100);
-}
-async function getDetails(chartType) {
-  this.slicesDetails = [];
-  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);
-    let colorIndex = i;
-    // for bar5, first color should be skipped unless notStartedColor is set to true
-    if (chartType === "bar5") {
-      colorIndex = this.notStartedColor ? i : i + 1;
-    }
-    // bars in bar6 are all the same color
-    if (chartType === "bar6") {
-      colorIndex = 0;
-    }
-    const color = allChartsDetails[chartType].colors[colorIndex];
-    const sliceDetails = {
-      amount: amount,
-      perc: perc,
-      legend: c.getAttribute("legend"),
-      color: color || colors.gray,
-      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: false,
-    };
-    acc += amount;
-    this.slicesDetails.push(sliceDetails);
-  });
-}
-function sortSlicesDetails(slicesDetails, total) {
-  // sort slices by decreasing amount
-  let sortedSlicesDetails = [...slicesDetails].sort((a, b) => a.amount === b.amount ? 0 : a.amount > b.amount ? -1 : 1);
-  let acc = 0;
-  sortedSlicesDetails.forEach((s, idx) => {
-    const prev = sortedSlicesDetails[idx === 0 ? sortedSlicesDetails.length - 1 : idx - 1];
-    const next = sortedSlicesDetails[idx === sortedSlicesDetails.length - 1 ? 0 : idx + 1];
-    const prevPerc = amountToPercent(prev.amount, total, true);
-    const nextPerc = amountToPercent(next.amount, total, true);
-    s.offset = acc;
-    acc += s.amount;
-    s.inSmallCluster = isInSmallCluster(prevPerc, s.perc, s.amount, nextPerc);
-  });
-  return sortedSlicesDetails;
-}
-function isInSmallCluster(prevPerc, perc, amount, nextPerc) {
-  // determine whether the slice is in a cluster of small values
-  // to avoid percentage text overlap for small values
-  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;
-  }
-  return inSmallCluster;
-}
-function getPathData(amount, offset, chartType) {
-  const startAngle = amountToDegree(offset, this.total) - 90; // start at noon, not at 3 o'clock
-  const activeAngle = (amount / this.total) * 360;
-  let endAngle = startAngle + activeAngle;
-  const largeArcFlagOuter = activeAngle > 180 ? "1 1" : "0 1";
-  const largeArcFlagInner = activeAngle > 180 ? "1 0" : "0 0";
-  const half = this.chartDetails.size / 2;
-  const innerRadius = this.chartDetails.thickness;
-  const outerRadius = 1;
-  const isHybridDoughnut = chartType === "doughnut0" || chartType === "doughnut";
-  const outerSeparatorOffset = 1.5;
-  const innerSeparatorOffset = isHybridDoughnut ? 2.25 : 3;
-  if (activeAngle === 360) {
-    // fix to avoid bad svg shape when the path goes all around (100%)
-    endAngle -= 0.01;
-  }
-  const outerCoords = polarToCartesian(half, outerRadius, startAngle + outerSeparatorOffset, // Addition for slice separator
-  endAngle);
-  const innerCoords = polarToCartesian(half, innerRadius, startAngle + innerSeparatorOffset, // Addition for slice separator
-  endAngle);
-  const moveTo = `M ${outerCoords.x1}, ${outerCoords.y1} `;
-  const arc1 = getArc(outerRadius, largeArcFlagOuter, outerCoords.x2, outerCoords.y2, this.chartDetails.size);
-  const line = ` L ${innerCoords.x2}, ${innerCoords.y2} `;
-  const arc2 = getArc(innerRadius, largeArcFlagInner, innerCoords.x1, innerCoords.y1, this.chartDetails.size);
-  return moveTo + arc1 + line + arc2 + " z";
-}
-function renderInstructionsText() {
-  const chartInstructions = intl.formatMessage({
-    id: "chart.instructions",
-    defaultMessage: "Use arrow keys to browse elements, press Tab to exit.",
-    description: "For screen readers only, instructions on how to interact with the chart component",
-  });
-  return h("div", { id: "chart-instructions" }, chartInstructions);
-}
-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.chartDetails.size + this.chartDetails.padding;
-  const isHybridDoughnut = chartType === "doughnut0" || chartType === "doughnut";
-  // no sorting in progress indicators
-  let slicesDetails = isHybridDoughnut ? this.slicesDetails : sortSlicesDetails(this.slicesDetails, this.total);
-  return (h("div", { class: "chart-wrapper doughnut-wrapper" },
-    h("svg", { width: outerSize + "px", height: outerSize + "px", id: `graphic-${this.uid}`, class: "doughnut-svg" },
-      renderFilter(),
-      slicesDetails.map((s) => renderPath.call(this, s, chartType)),
-      isHybridDoughnut ? (h("text", { class: "value", x: "50%", y: "50%", "font-size": "1.5rem", "font-weight": "500", "text-anchor": "middle", "dominant-baseline": "middle" }, amountToPercent(slicesDetails[0].amount, this.total, true) + "%")) : (h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})`, "text-anchor": "middle", "dominant-baseline": "middle" }, slicesDetails.map((s) => s.amount > 0 && !s.inSmallCluster ? renderDoughnutText.call(this, s) : ""))))));
-}
-function renderPath(s, chartType) {
-  return (h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})` },
-    h("path", { id: s.id, class: "segment doughnut-segment", fill: s.amount ? s.color : "transparent", d: getPathData.call(this, s.amount, s.offset, chartType), 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) {
-  const arcMiddle = amountToDegree(s.offset + s.amount / 2, this.total);
-  let { x, y } = polarToCartesian(this.chartDetails.size / 2, 1.4, arcMiddle - 90);
-  return (h("text", { class: "value", x: x + "px", y: y + "px" }, `${s.perc > 0 ? s.perc : "<1"}%`));
-}
-function renderStackedBar(chartType) {
-  const isHybridBar = chartType === "bar1" || chartType === "bar";
-  return (h("div", { class: "chart-wrapper bar-wrapper" },
-    isHybridBar ? (h("div", { class: "single-perc" }, amountToPercent(this.slicesDetails[0].amount, this.total, true) + "%")) : (""),
-    this.chartType === "bar3" && this.drawAxis(),
-    h("div", { class: `inner-stacked-bar-wrapper ${showValue(this.tempValueFormat)}` },
-      !isHybridBar ? (h("div", { class: "values" }, this.slicesDetails.map((s, idx) => this.renderBarText(s, idx)))) : (""),
-      h("div", { class: "stacked-bar-segments-wrapper" }, this.slicesDetails.map((s, idx) => renderStackedBarSegment.call(this, s, idx))),
-      isHybridBar ? renderCompletionMessage.call(this) : "")));
-}
-function renderStackedBarSegment(s, idx) {
-  const isLastSlice = idx !== this.slicesDetails.length - 1;
-  const width = `calc(${amountToPercent(s.amount, this.total, false)}%${isLastSlice ? " - 2px" : ""})`;
-  return (h("div", { class: `segment stacked-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("span", { class: "sr-only" }, s.legend)));
-}
-function renderSimpleBar(chartType) {
-  // find largest number and get interval, numTicks, chartMaxVal for all.
-  const largest = this.slicesDetails
-    .map((s) => s.amount)
-    .reduce((a, b) => {
-    return a > b ? a : b;
-  });
-  let numTicks = getMaxTicks(this.el.getBoundingClientRect().width);
-  let interval = getInterval(largest, numTicks);
-  // after the algorithm finds an interval, remove extra ticks so that the greater number is always between the last tick and the one before that
-  const lastTickVal = numTicks * interval;
-  const extraTicks = Math.floor((lastTickVal - largest) / interval);
-  numTicks -= extraTicks;
-  this.el.style.setProperty("--backgroundSize", 100 / numTicks + "%");
-  this.el.style.setProperty("--labelWidth", this.labelWidth);
-  if (chartType === "bar7" && !this.showBarLegend) {
-    this.el.style.setProperty("--labelWidth", "0px");
-  }
-  // we have to prep the data here rather than iterate directly in the return statement
-  // because CSS grid needs a flat structure, and return functions must
-  // have a single parent element
-  const rows = [];
-  this.slicesDetails.forEach((s) => {
-    s.legend && rows.push(renderSimpleBarLegend(s.legend, this.showBarLegend, chartType));
-    rows.push(renderSimpleBarItem.call(this, s, interval, numTicks, largest));
-  });
-  const ticks = [];
-  for (let i = 1; i <= numTicks; i++) {
-    const tickVal = abbrNumber(i * interval);
-    ticks.push(h("div", { class: "tick" },
-      h("span", null, tickVal)));
-  }
-  const showGrid = chartType === "bar6" && this.showGrid && this.el.getBoundingClientRect().width > 300;
-  return (h("div", { class: "chart-wrapper simple-bar-wrapper" },
-    h("div", { class: `chart ${showValue(this.tempValueFormat)}` },
-      showGrid && h("div", { class: "gridlines" }),
-      h("div", { class: "rows" }, rows)),
-    showGrid && (h("div", { class: "x-axis", "aria-hidden": "true" },
-      h("div", { class: "zero" },
-        h("span", null, "0")),
-      ticks))));
-}
-function renderSimpleBarLegend(legend, show, chartType) {
-  // not sure how to collapse the left column to 0 width with CSS grid. text should still be available to SR.
-  const hidden = chartType === "bar7" && !show ? " hidden" : "";
-  return h("label", { class: `label${hidden}` }, legend);
-}
-function renderSimpleBarItem(s, interval, ticks, largest) {
-  const chartMaxVal = this.currentChartType === "bar6" ? interval * ticks : largest;
-  const width = amountToPercent(s.amount, chartMaxVal, false);
-  const amt = abbrNumber(s.amount);
-  let displayValue = this.tempValueFormat === "amount" ? amt : "";
-  if (this.currentChartType === "bar6" && this.tempValueFormat === "percentage") {
-    displayValue = s.amount + "%";
-  }
-  else if (this.currentChartType === "bar7" && this.tempValueFormat === "percentage") {
-    displayValue = amountToPercent(s.amount, this.total, true) + "%";
-  }
-  return (h("div", { class: "bar segment", 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("div", { class: "value" }, displayValue)));
-}
-function renderLegend(chartType) {
-  // legend is hidden for bar1 and bar6 types regardless of showLegend value
-  if (this.showLegend) {
-    const hasCluster = !this.chartDetails.isBar &&
-      this.slicesDetails.reduce((hasCluster, cur) => (hasCluster = cur.inSmallCluster ? true : hasCluster), false);
-    return (h("div", { class: "legend-wrapper" },
-      h("div", { class: `legend ${chartType} ${this.mode === "bar" ? "--top" : "--bottom"}`, "aria-hidden": "true" }, this.total > 0
-        ? this.slicesDetails.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 renderLegendItem({ key: s.legend, color: s.color });
-          }
-        })
-        : ""),
-      hasCluster && renderHiddenValuesMessage()));
-  }
-}
-function renderLegendItem(legendItem) {
-  return (h("div", { class: "legend-item" },
-    h("div", { class: "legend-color", style: { backgroundColor: legendItem.color } }),
-    h("div", { class: "legend-text" }, legendItem.key)));
-}
-function renderCompletionMessage() {
-  if (this.completionMessage) {
-    return h("div", { class: "completion-message" }, this.completionMessage);
-  }
-}
-function renderHiddenValuesMessage() {
-  return (h("div", { class: "hidden-values-warning" },
-    textHiddenMessage,
-    h("br", null),
-    seeDetailsMessage));
+const colors = {
+  salmon: "#ff5f4e",
+  cyan: "#19a1a9",
+  forest: "#088000",
+  sleet: "#7f97ad",
+  midnight: "#2e1b46",
+  lavender: "#8b86ca",
+  periwinkle: "#575195",
+  gray: "#6b6b6b",
+};
+const allChartsDetails = {
+  // for progress monitor
+  doughnut: {
+    size: 155,
+    colors: [colors.forest, colors.gray],
+    thickness: 0.73,
+    padding: 25,
+    category: "doughnut",
+  },
+  // deprecated hybrid chart type, should use Progress Indicator's "doughnut" instead
+  doughnut0: {
+    size: 155,
+    colors: [colors.forest, colors.gray],
+    thickness: 0.73,
+    padding: 25,
+    category: "doughnut",
+  },
+  doughnut1: {
+    size: 130,
+    colors: [colors.lavender, colors.midnight, colors.gray],
+    thickness: 0.5,
+    padding: 90,
+    category: "doughnut",
+  },
+  doughnut2: {
+    size: 130,
+    colors: [colors.cyan, colors.salmon, colors.gray],
+    thickness: 0.5,
+    padding: 90,
+    category: "doughnut",
+  },
+  // an internal type only for use when doughnut 2 is populated with 4 slices
+  // in this case, the first slice is colored purple
+  doughnut2plus: {
+    size: 130,
+    colors: [colors.periwinkle, colors.cyan, colors.salmon, colors.gray],
+    thickness: 0.5,
+    padding: 90,
+    category: "doughnut",
+  },
+  doughnut3: {
+    size: 130,
+    colors: [colors.lavender, colors.midnight, "#0089e4", colors.forest, "#ea8500", "#d54f41", "#146ca9"],
+    thickness: 0.5,
+    padding: 90,
+    category: "doughnut",
+  },
+  // for progress monitor
+  bar: {
+    size: 350,
+    colors: [colors.forest, colors.gray],
+    padding: 0,
+    category: "stackedBar",
+  },
+  // deprecated hybrid chart type, should use Progress Indicator's "bar" instead
+  bar1: {
+    size: 350,
+    colors: [colors.forest, colors.gray],
+    padding: 0,
+    category: "stackedBar",
+  },
+  bar2: {
+    size: 400,
+    colors: [colors.gray, colors.periwinkle, colors.cyan, colors.salmon],
+    padding: 0,
+    category: "stackedBar",
+  },
+  bar3: {
+    size: 300,
+    colors: ["#0d696e", colors.cyan, "#8e4129", colors.salmon],
+    padding: 0,
+    category: "stackedBar",
+  },
+  bar4: {
+    size: 400,
+    colors: [colors.salmon, colors.cyan, colors.periwinkle],
+    padding: 0,
+    category: "stackedBar",
+  },
+  bar5: {
+    size: 400,
+    colors: [
+      colors.gray,
+      colors.lavender,
+      colors.midnight,
+      "#0089e4",
+      colors.forest,
+      "#ea8500",
+      "#d54f41",
+      "#146ca9",
+    ],
+    padding: 0,
+    category: "stackedBar",
+  },
+  bar6: {
+    size: 400,
+    colors: [colors.lavender],
+    padding: 0,
+    category: "simpleBar",
+  },
+  bar7: {
+    size: 400,
+    colors: [colors.periwinkle, colors.cyan, colors.salmon, colors.gray],
+    padding: 0,
+    category: "simpleBar",
+  },
+};
+function showValue(valueFormat) {
+  return valueFormat === "percentage" || valueFormat === "amount" ? "show-values" : "";
+}
+const textHiddenMessage = intl.formatMessage({
+  id: "chart.hiddenValues",
+  defaultMessage: "Values are not shown when too close to each other.",
+  description: "Text displayed when a chart has some values hidden",
+});
+const seeDetailsMessage = intl.formatMessage({
+  id: "chart.clickToSeeDetails",
+  defaultMessage: "Click or use arrow keys to see details.",
+  description: "Text displayed, guiding user to interact to see more details.",
+});
+function abbrNumber(num) {
+  return num > 999 ? Math.round(num / 100) / 10 + "K" : num;
+}
+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 scale(val, inMin, inMax, outMin, outMax) {
+  let scaled = ((val - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
+  // clip the values so that whatever is passed in the output is never smaller than outMin or greater than outMax
+  return scaled < outMin ? outMin : scaled > outMax ? outMax : scaled;
+}
+function minSpacing(width) {
+  // minimum spacing between 2 ticks, in px
+  return scale(width, 300, 900, 70, 150);
+}
+function getMaxTicks(width) {
+  return Math.round(width / minSpacing(width));
+}
+function getInterval(largest, maxticks) {
+  const minimum = largest / maxticks;
+  const magnitude = 10 ** Math.floor(Math.log10(minimum));
+  const residual = minimum / magnitude;
+  let interval;
+  if (residual > 5) {
+    interval = 10 * magnitude;
+  }
+  else if (residual > 3) {
+    interval = 5 * magnitude;
+  }
+  else if (residual > 2) {
+    interval = 3 * magnitude;
+  }
+  else if (residual > 1.5) {
+    interval = 2 * magnitude;
+  }
+  else if (residual > 1) {
+    interval = 1.5 * magnitude;
+  }
+  else {
+    interval = magnitude;
+  }
+  return interval;
+}
+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;
+      this.userIsNavigating = 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) {
+    this.userIsNavigating = true;
+    if (this.popoverEl) {
+      this.popoverEl.open = false;
+    }
+    // set tabindex of the wrapper to -1 while slices are being focused, to allow for shft-tabbing out of the component directly
+    this.componentWrapperEl.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
+    });
+  this.userIsNavigating = false;
+  // 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(() => {
+    this.componentWrapperEl.tabIndex = 0;
+    // @ts-ignore
+    this.el.focusable = true; // for Edge
+    if (this.popoverEl) {
+      this.popoverEl.open = false;
+    }
+  }, 100);
+}
+async function getDetails(chartType) {
+  this.slicesDetails = [];
+  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);
+    let colorIndex = i;
+    // for bar5, first color should be skipped unless notStartedColor is set to true
+    if (chartType === "bar5") {
+      colorIndex = this.notStartedColor ? i : i + 1;
+    }
+    // bars in bar6 are all the same color
+    if (chartType === "bar6") {
+      colorIndex = 0;
+    }
+    const color = allChartsDetails[chartType].colors[colorIndex];
+    const sliceDetails = {
+      amount: amount,
+      perc: perc,
+      legend: c.getAttribute("legend"),
+      color: color || colors.gray,
+      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: false,
+    };
+    acc += amount;
+    this.slicesDetails.push(sliceDetails);
+  });
+}
+function sortSlicesDetails(slicesDetails, total) {
+  // sort slices by decreasing amount
+  let sortedSlicesDetails = [...slicesDetails].sort((a, b) => a.amount === b.amount ? 0 : a.amount > b.amount ? -1 : 1);
+  let acc = 0;
+  sortedSlicesDetails.forEach((s, idx) => {
+    const prev = sortedSlicesDetails[idx === 0 ? sortedSlicesDetails.length - 1 : idx - 1];
+    const next = sortedSlicesDetails[idx === sortedSlicesDetails.length - 1 ? 0 : idx + 1];
+    const prevPerc = amountToPercent(prev.amount, total, true);
+    const nextPerc = amountToPercent(next.amount, total, true);
+    s.offset = acc;
+    acc += s.amount;
+    s.inSmallCluster = isInSmallCluster(prevPerc, s.perc, s.amount, nextPerc);
+  });
+  return sortedSlicesDetails;
+}
+function isInSmallCluster(prevPerc, perc, amount, nextPerc) {
+  // determine whether the slice is in a cluster of small values
+  // to avoid percentage text overlap for small values
+  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;
+  }
+  return inSmallCluster;
+}
+function getPathData(amount, offset, chartType) {
+  const startAngle = amountToDegree(offset, this.total) - 90; // start at noon, not at 3 o'clock
+  const activeAngle = (amount / this.total) * 360;
+  let endAngle = startAngle + activeAngle;
+  const largeArcFlagOuter = activeAngle > 180 ? "1 1" : "0 1";
+  const largeArcFlagInner = activeAngle > 180 ? "1 0" : "0 0";
+  const half = this.chartDetails.size / 2;
+  const innerRadius = this.chartDetails.thickness;
+  const outerRadius = 1;
+  const isHybridDoughnut = chartType === "doughnut0" || chartType === "doughnut";
+  const outerSeparatorOffset = 1.5;
+  const innerSeparatorOffset = isHybridDoughnut ? 2.25 : 3;
+  if (activeAngle === 360) {
+    // fix to avoid bad svg shape when the path goes all around (100%)
+    endAngle -= 0.01;
+  }
+  const outerCoords = polarToCartesian(half, outerRadius, startAngle + outerSeparatorOffset, // Addition for slice separator
+  endAngle);
+  const innerCoords = polarToCartesian(half, innerRadius, startAngle + innerSeparatorOffset, // Addition for slice separator
+  endAngle);
+  const moveTo = `M ${outerCoords.x1}, ${outerCoords.y1} `;
+  const arc1 = getArc(outerRadius, largeArcFlagOuter, outerCoords.x2, outerCoords.y2, this.chartDetails.size);
+  const line = ` L ${innerCoords.x2}, ${innerCoords.y2} `;
+  const arc2 = getArc(innerRadius, largeArcFlagInner, innerCoords.x1, innerCoords.y1, this.chartDetails.size);
+  return moveTo + arc1 + line + arc2 + " z";
+}
+function renderInstructionsText() {
+  const chartInstructions = intl.formatMessage({
+    id: "chart.instructions",
+    defaultMessage: "Use arrow keys to browse elements, press Tab to exit.",
+    description: "For screen readers only, instructions on how to interact with the chart component",
+  });
+  return h("div", { id: "chart-instructions" }, chartInstructions);
+}
+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.chartDetails.size + this.chartDetails.padding;
+  const isHybridDoughnut = chartType === "doughnut0" || chartType === "doughnut";
+  // no sorting in progress indicators
+  let slicesDetails = isHybridDoughnut ? this.slicesDetails : sortSlicesDetails(this.slicesDetails, this.total);
+  return (h("div", { class: "chart-wrapper doughnut-wrapper" },
+    h("svg", { width: outerSize + "px", height: outerSize + "px", id: `graphic-${this.uid}`, class: "doughnut-svg" },
+      renderFilter(),
+      slicesDetails.map((s) => renderPath.call(this, s, chartType)),
+      isHybridDoughnut ? (h("text", { class: "value", x: "50%", y: "50%", "font-size": "1.5rem", "font-weight": "500", "text-anchor": "middle", "dominant-baseline": "middle" }, amountToPercent(slicesDetails[0].amount, this.total, true) + "%")) : (h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})`, "text-anchor": "middle", "dominant-baseline": "middle" }, slicesDetails.map((s) => s.amount > 0 && !s.inSmallCluster ? renderDoughnutText.call(this, s) : ""))))));
+}
+function renderPath(s, chartType) {
+  return (h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})` },
+    h("path", { id: s.id, class: "segment doughnut-segment", fill: s.amount ? s.color : "transparent", d: getPathData.call(this, s.amount, s.offset, chartType), 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) {
+  const arcMiddle = amountToDegree(s.offset + s.amount / 2, this.total);
+  let { x, y } = polarToCartesian(this.chartDetails.size / 2, 1.4, arcMiddle - 90);
+  return (h("text", { class: "value", x: x + "px", y: y + "px" }, `${s.perc > 0 ? s.perc : "<1"}%`));
+}
+function renderStackedBar(chartType) {
+  const isHybridBar = chartType === "bar1" || chartType === "bar";
+  return (h("div", { class: "chart-wrapper bar-wrapper" },
+    isHybridBar ? (h("div", { class: "single-perc" }, amountToPercent(this.slicesDetails[0].amount, this.total, true) + "%")) : (""),
+    this.chartType === "bar3" && this.drawAxis(),
+    h("div", { class: `inner-stacked-bar-wrapper ${showValue(this.tempValueFormat)}` },
+      !isHybridBar ? (h("div", { class: "values" }, this.slicesDetails.map((s, idx) => this.renderBarText(s, idx)))) : (""),
+      h("div", { class: "stacked-bar-segments-wrapper" }, this.slicesDetails.map((s, idx) => renderStackedBarSegment.call(this, s, idx))),
+      isHybridBar ? renderCompletionMessage.call(this) : "")));
+}
+function renderStackedBarSegment(s, idx) {
+  const isLastSlice = idx !== this.slicesDetails.length - 1;
+  const width = `calc(${amountToPercent(s.amount, this.total, false)}%${isLastSlice ? " - 2px" : ""})`;
+  return (h("div", { class: `segment stacked-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("span", { class: "sr-only" }, s.legend)));
+}
+function renderSimpleBar(chartType) {
+  // find largest number and get interval, numTicks, chartMaxVal for all.
+  const largest = this.slicesDetails
+    .map((s) => s.amount)
+    .reduce((a, b) => {
+    return a > b ? a : b;
+  });
+  const labelWidth = parseInt(getComputedStyle(this.el).getPropertyValue("--labelWidth"), 10);
+  const chartPadding = 48;
+  const componentWidth = this.el.getBoundingClientRect().width;
+  const chartWidth = componentWidth - labelWidth - chartPadding;
+  let numTicks = getMaxTicks(chartWidth);
+  let interval = getInterval(largest, numTicks);
+  // after the algorithm finds an interval, remove extra ticks so that the greater number is always between the last tick and the one before that
+  const lastTickVal = numTicks * interval;
+  const extraTicks = Math.floor((lastTickVal - largest) / interval);
+  numTicks -= extraTicks;
+  this.el.style.setProperty("--backgroundSize", 100 / numTicks + "%");
+  this.el.style.setProperty("--labelWidth", this.labelWidth);
+  if (chartType === "bar7" && !this.showBarLegend) {
+    this.el.style.setProperty("--labelWidth", "0px");
+  }
+  // we have to prep the data here rather than iterate directly in the return statement
+  // because CSS grid needs a flat structure, and return functions must
+  // have a single parent element
+  const rows = [];
+  this.slicesDetails.forEach((s) => {
+    s.legend && rows.push(renderSimpleBarLegend(s.legend, this.showBarLegend, chartType));
+    rows.push(renderSimpleBarItem.call(this, s, interval, numTicks, largest));
+  });
+  const ticks = [];
+  for (let i = 1; i <= numTicks; i++) {
+    const tickVal = abbrNumber(i * interval);
+    ticks.push(h("div", { class: "tick" },
+      h("span", null, tickVal)));
+  }
+  const showGrid = chartType === "bar6" && this.showGrid && this.el.getBoundingClientRect().width > 300;
+  return (h("div", { class: "chart-wrapper simple-bar-wrapper" },
+    h("div", { class: `chart ${showValue(this.tempValueFormat)}` },
+      showGrid && h("div", { class: "gridlines" }),
+      h("div", { class: "rows" }, rows)),
+    showGrid && (h("div", { class: "x-axis", "aria-hidden": "true" },
+      h("div", { class: "zero" },
+        h("span", null, "0")),
+      ticks))));
+}
+function renderSimpleBarLegend(legend, show, chartType) {
+  // not sure how to collapse the left column to 0 width with CSS grid. text should still be available to SR.
+  const hidden = chartType === "bar7" && !show ? " hidden" : "";
+  return h("label", { class: `label${hidden}` }, legend);
+}
+function renderSimpleBarItem(s, interval, ticks, largest) {
+  const chartMaxVal = this.currentChartType === "bar6" ? interval * ticks : largest;
+  const width = amountToPercent(s.amount, chartMaxVal, false);
+  const cssWidth = width ? width + "%" : "1px";
+  const amt = abbrNumber(s.amount);
+  let displayValue = this.tempValueFormat === "amount" ? amt : "";
+  if (this.currentChartType === "bar6" && this.tempValueFormat === "percentage") {
+    displayValue = s.amount + "%";
+  }
+  else if (this.currentChartType === "bar7" && this.tempValueFormat === "percentage") {
+    displayValue = amountToPercent(s.amount, this.total, true) + "%";
+  }
+  return (h("div", { class: "bar segment", style: {
+      backgroundColor: s.color,
+      width: cssWidth,
+    }, onClick: (ev) => handleSliceClick.call(this, ev, s), onFocus: (ev) => handleSliceFocus.call(this, ev, s), onKeyDown: (ev) => handleSliceKeyDown.call(this, ev) },
+    h("div", { class: "value" }, displayValue)));
+}
+function renderLegend(chartType) {
+  // legend is hidden for bar1 and bar6 types regardless of showLegend value
+  if (this.showLegend) {
+    const hasCluster = !this.chartDetails.isBar &&
+      this.slicesDetails.reduce((hasCluster, cur) => (hasCluster = cur.inSmallCluster ? true : hasCluster), false);
+    return (h("div", { class: "legend-wrapper" },
+      h("div", { class: `legend ${chartType} ${this.mode === "bar" ? "--top" : "--bottom"}`, "aria-hidden": "true" }, this.total > 0
+        ? this.slicesDetails.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 renderLegendItem({ key: s.legend, color: s.color });
+          }
+        })
+        : ""),
+      hasCluster && renderHiddenValuesMessage()));
+  }
+}
+function renderLegendItem(legendItem) {
+  return (h("div", { class: "legend-item" },
+    h("div", { class: "legend-color", style: { backgroundColor: legendItem.color } }),
+    h("div", { class: "legend-text" }, legendItem.key)));
+}
+function renderCompletionMessage() {
+  if (this.completionMessage) {
+    return h("div", { class: "completion-message" }, this.completionMessage);
+  }
+}
+function renderHiddenValuesMessage() {
+  return (h("div", { class: "hidden-values-warning" },
+    textHiddenMessage,
+    h("br", null),
+    seeDetailsMessage));
 }
 
 export { allChartsDetails as a, amountToPercent as b, renderSimpleBar as c, renderDoughnut as d, renderInstructionsText as e, renderLegend as f, getDetails as g, handleChartKeydown as h, renderCompletionMessage as i, renderHiddenValuesMessage as j, exitChart as k, renderLegendItem as l, renderStackedBar as r };
 
-//# sourceMappingURL=chartFunctions-e22110b8.js.map
+//# sourceMappingURL=chartFunctions-b0a9e440.js.map