@watermarkinsights/ripple 5.13.0-alpha.2 → 5.13.0-alpha.3

package/dist/components/chartFunctions.js

@@ -0,0 +1,714 @@
+import { h } from '@stencil/core/internal/client';
+import { i as intl, G as safeMultiplyFloat, A as checkForActiveElInShadow, H as getPosition } from './functions.js';
+
+const colors = {
+    salmon: "#ff5f4e",
+    cyan: "#19a1a9",
+    forest: "#088000",
+    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) {
+        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);
+    }
+}
+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) => (total += parseInt(slice.getAttribute("amount") || "0")), 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();
+    }
+    children.forEach((c, i) => {
+        const amount = parseInt(c.getAttribute("amount") || "0");
+        const perc = amountToPercent(amount, this.total, true);
+        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}-${i + 1}`,
+            title: c.getAttribute("popover-title"),
+            text: c.getAttribute("popover-text"),
+            buttonText: c.getAttribute("popover-button-text"),
+            sliceRef: c,
+            inSmallCluster: false,
+            index: i,
+        };
+        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
+        .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));
+}
+
+export { allChartsDetails as a, amountToPercent as b, renderSimpleBar as c, renderStackedBar as d, renderDoughnut as e, exitChart as f, getDetails as g, handleChartKeydown as h, renderLegend as i, renderHiddenValuesMessage as j, renderInstructionsText as k, getInterval as l, abbrNumber as m, renderCompletionMessage as n, renderLegendItem as o, removeSegmentInfoHighlight as r };