@watermarkinsights/ripple 3.26.1-2 → 3.26.1

package/dist/collection/components/charts/chartFunctions.js

@@ -1,562 +1,562 @@
-import { h } from "@stencil/core";
-import { checkForActiveElInShadow, debounce, findParentWithScrollbar, getPosition, intl } from "../../global/functions";
-const colors = {
-  salmon: "#ff5f4e",
-  cyan: "#19a1a9",
-  forest: "#088000",
-  sleet: "#7f97ad",
-  midnight: "#2e1b46",
-  lavender: "#8b86ca",
-  periwinkle: "#575195",
-  gray: "#6b6b6b",
-};
-export 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
-  doughnut2b: {
-    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",
-  },
-  bar2b: {
-    size: 400,
-    colors: [colors.gray, colors.periwinkle, colors.midnight, 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" : "";
-}
-export 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",
-});
-export 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;
-}
-export function amountToPercent(val, total, asInt) {
-  return asInt ? Math.round((val * 100) / total) : Math.round((val * 10000) / total) / 100; // with 2 decimals
-}
-export function amountToDegree(val, total) {
-  // In a circle of {total}, determine degrees of slice {val}
-  return (val * 360) / total;
-}
-export function toFixed(number) {
-  return parseFloat((Math.floor(number * 100) / 100).toFixed(2));
-}
-export 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();
-  }
-}
-export 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);
-  }
-}
-export 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;
-  }
-}
-export 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);
-  }
-}
-export 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);
-}
-export 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";
-}
-export 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" })))));
-}
-export 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"}%`));
-}
-export 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)));
-}
-export 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)));
-}
-export 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()));
-  }
-}
-export 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)));
-}
-export function renderCompletionMessage() {
-  if (this.completionMessage) {
-    return h("div", { class: "completion-message" }, this.completionMessage);
-  }
-}
-export function renderHiddenValuesMessage() {
-  return (h("div", { class: "hidden-values-warning" }, textHiddenMessage, h("br", null), seeDetailsMessage));
-}
+import { h } from "@stencil/core";
+import { checkForActiveElInShadow, debounce, findParentWithScrollbar, getPosition, intl } from "../../global/functions";
+const colors = {
+  salmon: "#ff5f4e",
+  cyan: "#19a1a9",
+  forest: "#088000",
+  sleet: "#7f97ad",
+  midnight: "#2e1b46",
+  lavender: "#8b86ca",
+  periwinkle: "#575195",
+  gray: "#6b6b6b",
+};
+export 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
+  doughnut2b: {
+    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",
+  },
+  bar2b: {
+    size: 400,
+    colors: [colors.gray, colors.periwinkle, colors.midnight, 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" : "";
+}
+export 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",
+});
+export 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;
+}
+export function amountToPercent(val, total, asInt) {
+  return asInt ? Math.round((val * 100) / total) : Math.round((val * 10000) / total) / 100; // with 2 decimals
+}
+export function amountToDegree(val, total) {
+  // In a circle of {total}, determine degrees of slice {val}
+  return (val * 360) / total;
+}
+export function toFixed(number) {
+  return parseFloat((Math.floor(number * 100) / 100).toFixed(2));
+}
+export 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();
+  }
+}
+export 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);
+  }
+}
+export 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;
+  }
+}
+export 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);
+  }
+}
+export 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);
+}
+export 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";
+}
+export 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" })))));
+}
+export 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"}%`));
+}
+export 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)));
+}
+export 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)));
+}
+export 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()));
+  }
+}
+export 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)));
+}
+export function renderCompletionMessage() {
+  if (this.completionMessage) {
+    return h("div", { class: "completion-message" }, this.completionMessage);
+  }
+}
+export function renderHiddenValuesMessage() {
+  return (h("div", { class: "hidden-values-warning" }, textHiddenMessage, h("br", null), seeDetailsMessage));
+}