@watermarkinsights/ripple 0.0.0 → 0.1.0-alpha.0

package/dist/esm/chartFunctions-4bc77b76.js

@@ -0,0 +1,883 @@
+import { h } from './index-ef50bc01.js';
+import { i as intl, c as checkForActiveElInShadow, e as safeMultiplyFloat, f as getPosition } from './functions-de887809.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",
+    },
+    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" : "";
+}
+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",
+});
+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 || 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) {
+        this.componentWrapperEl.classList.toggle("interactive-popover", !!s.buttonText);
+        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.componentWrapperEl.classList.toggle("interactive-popover", !!s.buttonText);
+        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);
+    }
+}
+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(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);
+    }
+}
+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);
+}
+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";
+}
+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;
+}
+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) : ""))))));
+}
+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");
+        }
+    });
+}
+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));
+}
+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}`)));
+}
+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)));
+}
+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()));
+    }
+}
+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))));
+}
+function renderCompletionMessage() {
+    if (this.completionMessage) {
+        return h("div", { class: "completion-message" }, this.completionMessage);
+    }
+}
+function renderHiddenValuesMessage() {
+    return (h("div", { class: "hidden-values-warning hidden" },
+        textHiddenMessage,
+        h("br", null),
+        seeDetailsMessage));
+}
+function formatDisplayValue(amount, amountTotal, valueFormat, decimalPlaces = 0) {
+    switch (valueFormat) {
+        case "amount":
+            return amount.toFixed(decimalPlaces);
+        case "percentage":
+            const percentage = (amount / amountTotal) * 100;
+            if (amount > 0 && percentage < 1)
+                return "<1%";
+            if (percentage > 99 && amount !== amountTotal)
+                return ">99%";
+            return `${Math.round(percentage).toFixed(0)}%`;
+        default:
+        case "none":
+            return "";
+    }
+}
+function isNiceInterval(interval, niceValues = [1, 1.5, 2, 2.5, 3, 5, 10]) {
+    const magnitude = Math.pow(10, Math.floor(Math.log10(interval)));
+    const normalized = interval / magnitude;
+    const normalizedComparision = niceValues.some((nice) => Math.abs(normalized - nice) < 0.0001); // check equality with floating point tolerance
+    return normalizedComparision;
+}
+function inferDecimalPlacesFromFloat(value) {
+    // Trims floating point noise and returns significant decimal places, or return 2 for non-terminating values (2/3)
+    if (value === 0 || !Number.isFinite(value))
+        return 0;
+    const maxPlaces = 15;
+    let scaled = Math.abs(value);
+    for (let n = 0; n <= maxPlaces; n++) {
+        // Each iteration, compare the scaled value to the nearest whole number
+        // If the difference is less than the noise margin, return the number of times scaled (decimal places)
+        // Otherwise scale up by 10 and loop
+        const nearest = Math.round(scaled);
+        const noiseMargin = 1e-9;
+        if (Math.abs(scaled - nearest) < noiseMargin) {
+            return n;
+        }
+        scaled *= 10;
+    }
+    return 2;
+}
+function inferDecimalPlacesForUnitValue(value) {
+    // Works with units K and M. Returns decimal places taking unit conversion into account
+    if (value === 0 || !Number.isFinite(value))
+        return 0;
+    const abs = Math.abs(value);
+    let displayUnitValue = abs;
+    if (abs >= 1000000) {
+        displayUnitValue = abs / 1000000;
+    }
+    else if (abs >= 1000) {
+        displayUnitValue = abs / 1000;
+    }
+    return Math.max(inferDecimalPlacesFromFloat(abs), inferDecimalPlacesFromFloat(displayUnitValue));
+}
+function suffixNumber(value, decimalPlaces) {
+    const hasDecimalPlaces = decimalPlaces !== undefined;
+    if (value >= 1000000) {
+        const scaled = value / 1000000;
+        if (hasDecimalPlaces) {
+            return `${scaled.toFixed(decimalPlaces)}M`;
+        }
+        return `${scaled.toFixed(value % 1000000 === 0 ? 0 : 1)}M`;
+    }
+    if (value >= 1000) {
+        const scaled = value / 1000;
+        if (hasDecimalPlaces) {
+            return `${scaled.toFixed(decimalPlaces)}K`;
+        }
+        return `${scaled.toFixed(value % 1000 === 0 ? 0 : 1)}K`;
+    }
+    if (hasDecimalPlaces) {
+        return value.toFixed(decimalPlaces);
+    }
+    return value.toString();
+}
+function findLargestNiceInterval(maxIntervals, total) {
+    // Given a max number of intervals and a total, iterate down until a nice way to divide the total is found.
+    // Otherwise, return 1 interval
+    for (let intervals = maxIntervals; intervals >= 1; intervals--) {
+        const candidateInterval = total / intervals;
+        if (isNiceInterval(candidateInterval)) {
+            return { numIntervals: intervals, interval: candidateInterval };
+        }
+    }
+    return { numIntervals: 1, interval: total };
+}
+function findNiceRoundNumber(value) {
+    // Given a value, find the next "nice" round number >= that value.
+    // Examples: 982 → 1000, 45 → 50, 1234 → 1500, 7 → 10
+    if (value <= 0)
+        return 0;
+    const niceValues = [1, 1.5, 2, 2.5, 3, 5, 10];
+    const magnitude = Math.pow(10, Math.floor(Math.log10(value)));
+    const normalized = value / magnitude;
+    // Find the smallest nice value that is >= the normalized value
+    for (const nice of niceValues) {
+        if (nice >= normalized) {
+            return nice * magnitude;
+        }
+    }
+    // Fallback: next order of magnitude
+    return 10 * magnitude;
+}
+function computeLegendData(data) {
+    const seen = new Set();
+    const result = [];
+    data.forEach((groupItems) => {
+        groupItems.forEach((item) => {
+            if (!seen.has(item.barLegend)) {
+                seen.add(item.barLegend);
+                result.push(item);
+            }
+        });
+    });
+    return result;
+}
+function groupProcessedData(data, defaultGroupName) {
+    const groups = new Map();
+    data.forEach((item) => {
+        let groupName = item.groupName;
+        if (!groupName) {
+            groupName = defaultGroupName;
+        }
+        if (!groups.has(groupName)) {
+            groups.set(groupName, []);
+        }
+        groups.get(groupName).push(item);
+    });
+    return groups;
+}
+function sortGroupedData(data) {
+    const barData = [...data];
+    // Determine group order and barLegend order by first occurrences
+    const groupOrder = [];
+    barData.forEach((item) => {
+        if (item.groupName && !groupOrder.includes(item.groupName)) {
+            groupOrder.push(item.groupName);
+        }
+    });
+    const barLegendOrder = barData
+        .filter((item) => item.groupName === groupOrder[0])
+        .map((item) => item.barLegend);
+    // Two step sorting: sort by group order, then by barLegend order
+    const sortedBarData = barData.sort((a, b) => {
+        const groupIndexA = groupOrder.indexOf(a.groupName || "");
+        const groupIndexB = groupOrder.indexOf(b.groupName || "");
+        if (groupIndexA !== groupIndexB) {
+            return groupIndexA - groupIndexB;
+        }
+        const legendIndexA = barLegendOrder.indexOf(a.barLegend);
+        const legendIndexB = barLegendOrder.indexOf(b.barLegend);
+        return legendIndexA - legendIndexB;
+    });
+    return sortedBarData;
+}
+
+export { allChartsDetails as a, renderSimpleBar as b, renderStackedBar as c, renderDoughnut as d, renderInstructionsText as e, renderLegend as f, getDetails as g, handleChartKeydown as h, renderHiddenValuesMessage as i, exitChart as j, amountToPercent as k, renderCompletionMessage as l, renderLegendItem as m, findNiceRoundNumber as n, groupProcessedData as o, computeLegendData as p, formatDisplayValue as q, removeSegmentInfoHighlight as r, sortGroupedData as s, findLargestNiceInterval as t, suffixNumber as u, getMaxTicks as v, inferDecimalPlacesForUnitValue as w, getInterval as x };