@watermarkinsights/ripple 5.16.0-alpha.0 → 5.16.0-alpha.2

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

@@ -1,675 +0,0 @@
-import { h } from "@stencil/core";
-import { checkForActiveElInShadow, getPosition, intl, safeMultiplyFloat } 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",
-    },
-    doughnut1: {
-        size: 130,
-        colors: [colors.lavender, colors.midnight, colors.gray],
-        thickness: 0.5,
-        padding: 90,
-        category: "doughnut",
-    },
-    doughnut2: {
-        size: 130,
-        colors: [colors.periwinkle, colors.cyan, colors.midnight, 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",
-    },
-    bar2: {
-        size: 400,
-        colors: [colors.gray, colors.lavender, 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, // this is only used if prop notStartedColor is set
-            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 hidden when too close together.",
-    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.",
-});
-export function abbrNumber(num) {
-    return num > 999 || 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));
-}
-export 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(this.popoverEl, s);
-        highlightSegmentInfo(Array.from(this.el.shadowRoot.querySelectorAll("[data-segmentindex")), s);
-    }
-}
-function handleSliceFocus(ev, s) {
-    if (this.popoverEl && this.isTabbing) {
-        this.focusedSliceId = s.id;
-        s.coords = getPosition(ev.target);
-        s.coords.x = s.coords.x + 30;
-        s.coords.y = s.coords.y + 30;
-        openPopover(this.popoverEl, s);
-        highlightSegmentInfo(Array.from(this.el.shadowRoot.querySelectorAll("[data-segmentindex")), 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(popoverEl, s) {
-    popoverEl.open = false;
-    if (s.title && s.text) {
-        popoverEl.sliceDetails = Object.assign({}, s);
-        window.setTimeout(() => (popoverEl.open = true), 30);
-    }
-}
-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;
-        // 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();
-        // for keyboard focus on doughnuts
-        this.focusedSliceId = this.sliceEls[index].id;
-        window.setTimeout(() => {
-            if (this.popoverEl) {
-                this.popoverEl.open = true;
-            }
-        }, 10);
-    }
-}
-export function exitChart() {
-    this.focusedSliceId = undefined;
-    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) => {
-        const sliceAmount = parseInt(slice.getAttribute("amount") || "0");
-        return total + sliceAmount;
-    }, 0);
-    let chartColors = [...allChartsDetails[chartType].colors];
-    if (this.chartType === "bar2") {
-        if (children.length <= 5) {
-            // remove lavender
-            chartColors.splice(1, 1);
-        }
-        if (children.length <= 4) {
-            // remove midnight
-            chartColors.splice(2, 1);
-        }
-    }
-    // Set colors when bar3 has only 2 slices
-    if (chartType === "bar3" && children.length === 2) {
-        chartColors = [chartColors[1], chartColors[3]];
-    }
-    // Set colors when doughnut2 has less than 5 slices
-    // (rm 2nd neutral color midnight)
-    if (chartType === "doughnut2" && children.length < 5) {
-        chartColors.splice(2, 1);
-        // with 3 slices or less, also remove first color
-        // (only pos, neg and unknown remain)
-        if (children.length < 4) {
-            chartColors.shift();
-        }
-    }
-    // for bar5, first color should be skipped unless notStartedColor is set to true
-    if (chartType === "bar5" && !this.notStartedColor) {
-        chartColors.shift();
-    }
-    let visibleIndex = 0;
-    children.forEach((c, i) => {
-        const amountAttr = c.getAttribute("amount");
-        // Ignored slices are not added to slice data, but do occupy a color slot
-        if (amountAttr == null)
-            return;
-        const amount = parseInt(amountAttr || "0");
-        const perc = amountToPercent(amount, this.total, true);
-        // Use original index for color assignment to preserve color order, despite ignored slices
-        let colorIndex = i;
-        // bars in bar6 are all the same color
-        if (chartType === "bar6") {
-            colorIndex = 0;
-        }
-        const sliceDetails = {
-            amount: amount,
-            visualAmount: amount,
-            perc: perc,
-            legend: c.getAttribute("legend"),
-            color: chartColors[colorIndex] || colors.gray,
-            offset: acc,
-            id: `${this.uid}-${visibleIndex + 1}`,
-            title: c.getAttribute("popover-title"),
-            text: c.getAttribute("popover-text"),
-            buttonText: c.getAttribute("popover-button-text"),
-            sliceRef: c,
-            inSmallCluster: false,
-            index: visibleIndex,
-        };
-        acc += amount;
-        this.slicesDetails.push(sliceDetails);
-        visibleIndex++;
-    });
-}
-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
-        .filter((s) => s.amount > 0)
-        .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);
-        // determine whether the slice is in a cluster of small values
-        // to avoid percentage text overlap for small values
-        // because <1% slice percentage text has an additional character
-        // the inSmallCluster threshold needs to be widened for that slice only
-        const neighborLimit = s.perc === 0 ? 8 : 5;
-        const isSmall = s.perc < 4;
-        const prevIsSmall = prevPerc < neighborLimit;
-        const nextIsSmall = nextPerc < neighborLimit;
-        let inSmallCluster = isSmall && (prevIsSmall || nextIsSmall);
-        s.inSmallCluster = inSmallCluster;
-        s.offset = acc;
-        acc += s.amount;
-    });
-    return sortedSlicesDetails;
-}
-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 isProgressIndicator = chartType === "doughnut";
-    const outerSeparatorOffset = 1.5;
-    const innerSeparatorOffset = isProgressIndicator ? 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" })))));
-}
-function applyMinimumAngle(minimumAngle, slicesDetails, total) {
-    const allAngles = slicesDetails.map((s) => amountToDegree(s.amount, total));
-    const hasTooSmallAngle = allAngles.some((angle) => angle !== 0 && angle < minimumAngle);
-    if (hasTooSmallAngle) {
-        // all angles initially sum to 360
-        // increase all angles below minimum to meet minimum, sum should now exceed 360
-        // all unchanged angles should be proportionally reduced, so they sum to (360 - sum of changed angles)
-        // For Example:
-        // angles: 100 200 5 4 3 48 = 360, increasedAngles: 100 200 7 7 7 48 = 369
-        // unchangedAnglesSum = 348, changedAnglesSum = 21
-        // unchangedTargetSum: 360 - 21 = 339, targetDifference: 348 - 339 = 9
-        // reductionRatio = 9/339
-        // adjustedAngles: 97.345 194.69 7 7 7 46.725 = approx 360
-        const increasedAngles = allAngles.map((angle) => (angle == 0 ? angle : Math.max(angle, minimumAngle)));
-        const unchangedAnglesSum = increasedAngles.reduce((acc, cur) => acc + (cur > minimumAngle && cur !== 0 ? cur : 0), 0);
-        const changedAnglesSum = increasedAngles.reduce((acc, cur) => acc + (cur > minimumAngle && cur !== 0 ? 0 : cur), 0);
-        const unchangedTargetSum = 360 - changedAnglesSum;
-        const targetDifference = unchangedAnglesSum - unchangedTargetSum;
-        const reductionRatio = targetDifference / unchangedTargetSum;
-        const adjustedAngles = increasedAngles.map((angle) => angle > minimumAngle ? angle - reductionRatio * angle : angle == 0 ? 0 : minimumAngle);
-        // apply new amounts based on adjust angles
-        let offsetAcc = 0;
-        slicesDetails = slicesDetails.map((s, idx) => {
-            const visualAmount = (adjustedAngles[idx] / 360) * total;
-            const newOffset = offsetAcc;
-            offsetAcc += visualAmount;
-            return Object.assign(Object.assign({}, s), { visualAmount: visualAmount, offset: newOffset });
-        });
-    }
-    return slicesDetails;
-}
-export function renderDoughnut(chartType) {
-    const outerSize = this.chartDetails.size + this.chartDetails.padding;
-    const isProgressIndicator = chartType === "doughnut";
-    // no sorting in progress indicators
-    let slicesDetails = isProgressIndicator ? this.slicesDetails : sortSlicesDetails(this.slicesDetails, this.total);
-    slicesDetails = applyMinimumAngle(7, slicesDetails, this.total);
-    // perc is only for progress indicator
-    const amount = slicesDetails[0].amount;
-    let perc = amountToPercent(amount, this.total, true);
-    if (perc === 0 && amount > 0) {
-        perc = "<1%";
-    }
-    else if (perc === 100 && amount < this.total) {
-        perc = ">99%";
-    }
-    else {
-        perc = perc + "%";
-    }
-    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)), renderFocusOutline.call(this), isProgressIndicator ? (h("text", { class: "value", x: "50%", y: "50%", "font-size": "1.5rem", "font-weight": "500", "text-anchor": "middle", "dominant-baseline": "middle" }, perc)) : (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) : ""))))));
-}
-export function highlightSegmentInfo(infoEls, s) {
-    infoEls.forEach((el) => {
-        if (el.dataset.segmentindex && parseInt(el.dataset.segmentindex) !== s.index) {
-            el.classList.add("faded");
-        }
-        else {
-            el.classList.remove("faded");
-        }
-    });
-}
-export function removeSegmentInfoHighlight(infoEls) {
-    infoEls.forEach((el) => {
-        el.classList.remove("faded");
-    });
-}
-function renderPath(s, chartType) {
-    const percentageValue = amountToPercent(s.amount, this.total, true) + "%";
-    return (!isNaN(s.amount) && (h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})` }, h("path", { id: s.id, class: "segment doughnut-segment", fill: s.visualAmount ? s.color : "transparent", d: getPathData.call(this, s.visualAmount, 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}, ${percentageValue}`, "data-segmentindex": s.index }))));
-}
-function renderFocusOutline() {
-    return this.isTabbing ? (h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})` }, h("use", { tabindex: -1, id: "kfbg1", xlinkHref: `#${this.focusedSliceId}` }), h("use", { tabindex: -1, id: "kfstroke", xlinkHref: `#${this.focusedSliceId}` }), h("use", { tabindex: -1, id: "kfbg2", xlinkHref: `#${this.focusedSliceId}` }))) : ("");
-}
-function renderDoughnutText(s) {
-    const arcMiddle = amountToDegree(s.offset + s.visualAmount / 2, this.total);
-    let { x, y } = polarToCartesian(this.chartDetails.size / 2, 1.4, arcMiddle - 90);
-    let val;
-    if (s.perc === 0 && s.amount > 0) {
-        val = "<1%";
-    }
-    else if (s.perc === 100 && s.amount < this.total) {
-        val = ">99%";
-    }
-    else {
-        val = s.perc + "%";
-    }
-    return (h("text", { class: "value", x: x + "px", y: y + "px", "data-segmentindex": s.index }, val));
-}
-export function renderStackedBar(chartType) {
-    const isHybridBar = chartType === "bar";
-    // if the text for any value > 0 overlaps with another, hide it and display warning
-    const textEls = this.el.shadowRoot.querySelectorAll(".value");
-    // if DOM is not ready (no textEls), we need to rerender
-    // we don't have to do it here though, because it's already taken care of
-    // as a side effect of the observer in componentWillLoad
-    // (observers fire on init)
-    if (textEls.length > 0) {
-        requestAnimationFrame(() => {
-            let prevTextEls = [];
-            const margin = 4;
-            let showMsg = false;
-            textEls.forEach((textEl) => {
-                textEl.classList.remove("hidden");
-                const currentValue = parseInt(textEl.dataset.value);
-                // only proceed if there are prevTextEls to check for overlap, and current value is not 0
-                if (prevTextEls.length > 0 && currentValue != 0) {
-                    const currentLeftEdge = textEl.getBoundingClientRect().left - margin;
-                    // check for overlap with all prevTextEls & hide the smaller value if overlap occurs
-                    prevTextEls.forEach((prevTextEl) => {
-                        const prevValue = parseInt(prevTextEl.dataset.value);
-                        const valuesOverlap = prevTextEl.getBoundingClientRect().right > currentLeftEdge;
-                        if (valuesOverlap) {
-                            const smallerValueEl = currentValue < prevValue ? textEl : prevTextEl;
-                            smallerValueEl.classList.add("hidden");
-                            showMsg = true;
-                        }
-                    });
-                }
-                // prevTextEls only need to be checked if they are visible and have a non-zero value
-                if (!textEl.classList.contains("hidden") && currentValue > 0) {
-                    prevTextEls.push(textEl);
-                }
-            });
-            // progress monitor doesn't have this message
-            (this.isBar || this.isDoughnut) && this.showHiddenValuesMessage(showMsg);
-        });
-    }
-    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.valueFormat)}` }, !isHybridBar ? (h("div", { class: `values ${this.valueFormat}` }, this.slicesDetails.map((s) => this.renderBarText(s, 5)))) : (""), h("div", { class: "stacked-bar-segments-wrapper" }, this.slicesDetails.map((s) => renderStackedBarSegment.call(this, s, 5))), isHybridBar ? renderCompletionMessage.call(this) : ""), this.chartType === "bar3" ? (h("div", { class: "bar3-axis-label", "aria-hidden": "true" }, h("span", null, "0%"), h("span", null, "100%"))) : ("")));
-}
-function renderStackedBarSegment(s, minimumWidth) {
-    const segmentPercentage = amountToPercent(s.amount, this.total, false);
-    const barWrapper = this.el.shadowRoot.querySelector(".stacked-bar-segments-wrapper");
-    const availableWidth = barWrapper ? barWrapper.offsetWidth : this.el.offsetWidth;
-    const meetsSizeMinimum = (segmentPercentage / 100) * availableWidth >= minimumWidth;
-    const renderedWidth = meetsSizeMinimum || s.amount == 0 ? `${segmentPercentage}%` : `${minimumWidth}px`;
-    let segmentValue = "";
-    if (this.valueFormat == "percentage") {
-        segmentValue = `${amountToPercent(s.amount, this.total, true)} %`;
-    }
-    else if (this.valueFormat == "amount") {
-        segmentValue = s.amount.toString();
-    }
-    return (h("div", { class: `segment stacked-bar-segment ${amountToPercent(s.amount, this.total, false) === 0 ? "zero" : ""} ${meetsSizeMinimum ? "" : "fixed-width"}`, style: {
-            backgroundColor: s.color,
-            width: renderedWidth,
-        }, onClick: (ev) => handleSliceClick.call(this, ev, s), onFocus: (ev) => handleSliceFocus.call(this, ev, s), onKeyDown: (ev) => handleSliceKeyDown.call(this, ev), "data-segmentindex": s.index }, h("span", { class: "sr-only" }, `${s.legend} ${segmentValue}`)));
-}
-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(safeMultiplyFloat(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.valueFormat)}` }, 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.valueFormat === "amount" ? amt : "";
-    if (this.currentChartType === "bar6" && this.valueFormat === "percentage") {
-        displayValue = s.amount + "%";
-    }
-    else if (this.currentChartType === "bar7" && this.valueFormat === "percentage") {
-        displayValue = (this.total === 0 ? "0" : 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), "data-segmentindex": s.index }, 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 showMsg = this.slicesDetails.reduce((hasCluster, cur) => (hasCluster = cur.inSmallCluster ? true : hasCluster), false);
-        this.isDoughnut && this.showHiddenValuesMessage(showMsg);
-        return (h("div", { class: "legend-wrapper" }, h("div", { class: `legend ${chartType} ${this.mode === "bar" ? "--top" : "--bottom"}`, "aria-hidden": "true" }, this.slicesDetails.map((s) => {
-            const printValue = this.printModeFormat == "amount"
-                ? `${s.amount}/${this.total}`
-                : `${amountToPercent(s.amount, this.total, true)}%`;
-            // 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.call(this, { key: s.legend, color: s.color }, printValue, s);
-            }
-        })), this.isDoughnut && !this.printMode && renderHiddenValuesMessage()));
-    }
-}
-export function renderLegendItem(legendItem, printValue = "", s = null) {
-    const handleLegendItemClick = (ev) => {
-        if (s) {
-            s.coords = { x: ev.clientX, y: ev.clientY };
-            openPopover(this.popoverEl, s);
-            highlightSegmentInfo(Array.from(this.el.shadowRoot.querySelectorAll("[data-segmentindex")), s);
-        }
-    };
-    return (h("div", { class: "legend-item", onClick: (ev) => handleLegendItemClick(ev), "data-segmentindex": s ? s.index : null }, h("div", { class: "legend-color", style: { backgroundColor: legendItem.color } }), h("div", { class: "legend-text" }, legendItem.key, printValue && h("span", { class: `print-value ${this.printMode ? "force-visible" : ""}` }, ": ", printValue))));
-}
-export function renderCompletionMessage() {
-    if (this.completionMessage) {
-        return h("div", { class: "completion-message" }, this.completionMessage);
-    }
-}
-export function renderHiddenValuesMessage() {
-    return (h("div", { class: "hidden-values-warning hidden" }, textHiddenMessage, h("br", null), seeDetailsMessage));
-}