@watermarkinsights/ripple 4.1.0 → 4.2.0-0

package/dist/cjs/wm-line-chart.cjs.entry.js

@@ -2,464 +2,464 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fae02cd7.js');
-const functions = require('./functions-d50fc2d0.js');
-const chartFunctions = require('./chartFunctions-75a17e36.js');
-const intl = require('./intl-f2685d0f.js');
+const index = require('./index-f8ef86de.js');
+const functions = require('./functions-4208c444.js');
+const chartFunctions = require('./chartFunctions-cecf8134.js');
+const intl = require('./intl-3fafc6d1.js');
 
 const wmLineChartCss = ":host{--wmcolor-linechart-currentposition:var(--wmcolor-lavender);--wmcolor-linechart-delta-text-negative:var(--wmcolor-text-negative);--wmcolor-linechart-delta-text-positive:var(--wmcolor-text-positive);--wmcolor-linechart-gridline:var(--wmcolor-chart-gridline);--wmcolor-linechart-highlight-background:var(--wmcolor-background-highlight);--wmcolor-linechart-popover-background:var(--wmcolor-chart-popover-background);display:block;height:500px;width:100%;font-size:14px;overflow-y:visible;overflow-x:auto}:host .component-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:562px;width:100%;height:100%;outline:none}:host .icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;position:relative;color:var(--iconColor);-webkit-transform:var(--translation, unset);transform:var(--translation, unset)}:host .icon:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:var(--icon);padding:0 3px;z-index:1}:host .icon:after{color:white;position:absolute;left:3px;-webkit-transform:scale(180%);transform:scale(180%);display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:var(--icon);z-index:0}:host .legend{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:8px 16px;margin-top:4px;margin-bottom:16px}:host .legend .legend-label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;cursor:default;font-weight:600}:host .legend .legend-label.faded{opacity:0.3}:host .legend .legend-label .icon{margin-right:4px}:host .legend .visibility-toggle{margin-left:4px}:host .chart-wrapper{position:relative;-ms-flex-positive:1;flex-grow:1;display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:1fr auto auto;margin-right:16px}:host .chart-label{font-size:14px;font-weight:600}:host .chart-label.--y-axis{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:var(--labelWidth);align-self:center;margin-right:16px;grid-area:1/1/2/2;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}:host .chart-label.--x-axis{margin-top:16px;text-align:center;grid-area:3/3/4/4}:host .y-intervals{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;grid-area:1/2/2/3;margin-right:4px}:host .y-intervals .y-interval{text-align:right}:host .x-intervals{display:grid;grid-template-columns:var(--columns);grid-area:2/3/3/4;line-height:1;margin-top:4px}:host .x-intervals .x-interval{text-align:center}:host .x-intervals .x-interval:first-child{text-align:left}:host .x-intervals .x-interval:last-child{text-align:right}:host .x-intervals .x-interval.hidden{visibility:hidden}:host .plot-area{position:relative;grid-area:1/3/2/4;background-image:linear-gradient(90deg, var(--wmcolor-linechart-gridline) 1px, transparent 1px);border-bottom:1px solid var(--wmcolor-linechart-gridline);background-size:var(--backgroundSize)}:host .plot-area.right-border{border-right:1px solid var(--wmcolor-linechart-gridline)}:host .line{position:absolute;width:100%;height:100%}:host .line .icon{position:absolute;-webkit-transform:var(--translation);transform:var(--translation);left:var(--xPosition);top:var(--yPosition);z-index:1}:host .line .icon:focus{z-index:2;outline:none}:host .line .icon:focus:before{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-interactive-focus);-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-interactive-focus);box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-interactive-focus);border-radius:3px}:host .line .icon:focus:before::-moz-focus-inner{border:0}:host .line .line-svg{height:100%;width:100%}:host .line.faded{opacity:0.3}:host .line.focused{z-index:1}:host .line.hidden{visibility:hidden}:host .hover-area-wrapper{position:absolute;width:100%;height:100%;top:0;left:0;display:grid;grid-template-rows:1fr;grid-template-columns:var(--columns)}:host .hover-indicator{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;height:100%;width:2px;border:1px solid var(--wmcolor-linechart-currentposition);-webkit-transform:translateX(-50%);transform:translateX(-50%);left:var(--xPosition);grid-column:3/4;grid-row:1/2;pointer-events:none}:host .popover{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:400px;background-color:var(--wmcolor-linechart-popover-background);position:absolute;top:var(--topPosition, 0);left:var(--leftPosition, unset);right:var(--rightPosition, unset);padding:16px;border-radius:5px;-webkit-box-shadow:0px 2px 10px 0px rgba(0, 0, 0, 0.09);box-shadow:0px 2px 10px 0px rgba(0, 0, 0, 0.09);-webkit-transform:translateY(-50%);transform:translateY(-50%);line-height:1;z-index:3;grid-column:3/4;grid-row:1/2;pointer-events:none;-webkit-box-sizing:border-box;box-sizing:border-box}:host .popover .title{font-size:16px;font-weight:600}:host .popover .comparison-title{font-style:italic;margin-top:4px}:host .popover .unit{font-size:12px;font-weight:600}:host .popover .unit.--x{margin-left:4px}:host .popover .popover-table{margin-top:16px}:host .popover .popover-table .popover-row{line-height:1}:host .popover .popover-table .popover-row:not(:last-child) td{padding-bottom:8px}:host .popover .popover-table .popover-row .row-label{font-weight:600;padding-right:16px;overflow-wrap:anywhere}:host .popover .popover-table .popover-row .row-label .icon{margin-right:4px}:host .popover .popover-table .popover-row .row-value,:host .popover .popover-table .popover-row .delta{text-align:right;white-space:nowrap}:host .popover .popover-table .popover-row .delta{padding-left:12px;font-weight:600}:host .popover .popover-table .popover-row .delta.--positive{color:var(--wmcolor-linechart-delta-text-positive)}:host .popover .popover-table .popover-row .delta.--negative{color:var(--wmcolor-linechart-delta-text-negative)}:host .highlight{position:absolute;height:100%;background-color:color-mix(in srgb, var(--wmcolor-linechart-highlight-background) 60%, transparent);left:var(--startPercentage);right:var(--endPercentage)}:host .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}";
 
 const LineChart = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.minTickWidth = 120;
-    this.popoverData = [];
-    this.focusedDataPoint = [0, 0];
-    this.dataPointMatrix = [];
-    this.xIntervals = [];
-    this.displayedXIntervals = [];
-    this.yIntervals = [];
-    this.lineStyles = [
-      { color: "#8b86ca", icon: "f536" },
-      { color: "#2e1b46", icon: "f12f" },
-      { color: "#0089e4", icon: "f763" },
-      { color: "#088000", icon: "f4ce" },
-      { color: "#ea8500", icon: "f70a" },
-      { color: "#d54f41", icon: "f536" },
-      { color: "#146ca9", icon: "f6ff" }, // blue, upside down triangle
-    ];
-    this.debouncedResize = functions.debounce(async () => {
-      this.displayedXIntervals = this.determineDisplayedXIntervals();
-    }, 100);
-    this.label = undefined;
-    this.description = "";
-    this.xAxisLabel = undefined;
-    this.yAxisLabel = undefined;
-    this.lineData = undefined;
-    this.units = "null,null";
-    this.labelWidth = "120px";
-    this.highlightQualifier = "highlighted";
-    this.highlightStart = undefined;
-    this.highlightEnd = undefined;
-    this.visibilityToggles = false;
-    this.showDeltas = false;
-    this.yRange = undefined;
-    this.parsedLineData = {};
-    this.displayedPopover = -1;
-    this.focusedLine = -1;
-    this.hiddenLines = [];
-    this.isTabbing = false;
-    this.intervalSkip = 0;
-    this.announcement = "";
-  }
-  parseData() {
-    this.parsedLineData = JSON.parse(this.lineData);
-    this.yIntervals = this.calcYIntervals().reverse(); // needed before building dataPointMatrix
-    this.xIntervals = Object.keys(Object.values(this.parsedLineData)[0]);
-    this.displayedXIntervals = this.determineDisplayedXIntervals();
-    this.dataPointMatrix = Object.entries(this.parsedLineData).map((entry) => this.buildLineDataPointDetails(entry[0], entry[1]));
-    this.popoverData = functions.transposeMatrix(this.dataPointMatrix);
-  }
-  handleIntervalSkip() {
-    // if intervalSkip ever changes, dataPointMatrix must be regenerated to account for chart spacers
-    this.parseData();
-  }
-  get hasPartialInterval() {
-    // if chart width is too small, an odd # of intervals like 1,2,3,4,5,6,7 can be shortened to 1,3,5,7 or 1,4,7
-    // but an even # like 1,2,3,4,5,6,7,8 will be shortened to 1,3,5,7 (can't show first and last interval)
-    // in these cases, show a partial interval must be shown in order to still provide space to plot the 8th data point
-    // e.g intervals will be 1-3, 3-5, 5-7, 7-8
-    return this.intervalSkip > 0 && this.xIntervals.length % 2 === 0;
-  }
-  get parsedUnits() {
-    return functions.csvToArray(this.units).map((unit) => (unit === "null" ? null : unit));
-  }
-  get visibilityToggleEls() {
-    return this.legendEl.querySelectorAll("wm-button");
-  }
-  get lineEls() {
-    return this.plotAreaEl.querySelectorAll(".line");
-  }
-  get firstVisibleLineIdx() {
-    let firstVisibleLineIdx = 0;
-    while (this.hiddenLines.includes(firstVisibleLineIdx)) {
-      firstVisibleLineIdx++;
-    }
-    return firstVisibleLineIdx < this.dataPointMatrix.length ? firstVisibleLineIdx : -1;
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  componentWillLoad() {
-    this.parseData();
-  }
-  componentDidLoad() {
-    const resizeObserver = new ResizeObserver(() => this.debouncedResize());
-    resizeObserver.observe(this.el);
-  }
-  handleVisibilityToggleKeydown(ev, toggleIdx) {
-    switch (ev.key) {
-      case "Tab":
-        if (!ev.shiftKey && this.firstVisibleLineIdx !== -1) {
-          ev.preventDefault();
-          this.announce(this.lineFocusMessage(this.firstVisibleLineIdx));
-          this.focusDataPoint(this.firstVisibleLineIdx, 0);
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.minTickWidth = 120;
+        this.popoverData = [];
+        this.focusedDataPoint = [0, 0];
+        this.dataPointMatrix = [];
+        this.xIntervals = [];
+        this.displayedXIntervals = [];
+        this.yIntervals = [];
+        this.lineStyles = [
+            { color: "#8b86ca", icon: "f536" },
+            { color: "#2e1b46", icon: "f12f" },
+            { color: "#0089e4", icon: "f763" },
+            { color: "#088000", icon: "f4ce" },
+            { color: "#ea8500", icon: "f70a" },
+            { color: "#d54f41", icon: "f536" },
+            { color: "#146ca9", icon: "f6ff" }, // blue, upside down triangle
+        ];
+        this.debouncedResize = functions.debounce(async () => {
+            this.displayedXIntervals = this.determineDisplayedXIntervals();
+        }, 100);
+        this.label = undefined;
+        this.description = "";
+        this.xAxisLabel = undefined;
+        this.yAxisLabel = undefined;
+        this.lineData = undefined;
+        this.units = "null,null";
+        this.labelWidth = "120px";
+        this.highlightQualifier = "highlighted";
+        this.highlightStart = undefined;
+        this.highlightEnd = undefined;
+        this.visibilityToggles = false;
+        this.showDeltas = false;
+        this.yRange = undefined;
+        this.parsedLineData = {};
+        this.displayedPopover = -1;
+        this.focusedLine = -1;
+        this.hiddenLines = [];
+        this.isTabbing = false;
+        this.intervalSkip = 0;
+        this.announcement = "";
+    }
+    parseData() {
+        this.parsedLineData = JSON.parse(this.lineData);
+        this.yIntervals = this.calcYIntervals().reverse(); // needed before building dataPointMatrix
+        this.xIntervals = Object.keys(Object.values(this.parsedLineData)[0]);
+        this.displayedXIntervals = this.determineDisplayedXIntervals();
+        this.dataPointMatrix = Object.entries(this.parsedLineData).map((entry) => this.buildLineDataPointDetails(entry[0], entry[1]));
+        this.popoverData = functions.transposeMatrix(this.dataPointMatrix);
+    }
+    handleIntervalSkip() {
+        // if intervalSkip ever changes, dataPointMatrix must be regenerated to account for chart spacers
+        this.parseData();
+    }
+    get hasPartialInterval() {
+        // if chart width is too small, an odd # of intervals like 1,2,3,4,5,6,7 can be shortened to 1,3,5,7 or 1,4,7
+        // but an even # like 1,2,3,4,5,6,7,8 will be shortened to 1,3,5,7 (can't show first and last interval)
+        // in these cases, show a partial interval must be shown in order to still provide space to plot the 8th data point
+        // e.g intervals will be 1-3, 3-5, 5-7, 7-8
+        return this.intervalSkip > 0 && this.xIntervals.length % 2 === 0;
+    }
+    get parsedUnits() {
+        return functions.csvToArray(this.units).map((unit) => (unit === "null" ? null : unit));
+    }
+    get visibilityToggleEls() {
+        return this.legendEl.querySelectorAll("wm-button");
+    }
+    get lineEls() {
+        return this.plotAreaEl.querySelectorAll(".line");
+    }
+    get firstVisibleLineIdx() {
+        let firstVisibleLineIdx = 0;
+        while (this.hiddenLines.includes(firstVisibleLineIdx)) {
+            firstVisibleLineIdx++;
+        }
+        return firstVisibleLineIdx < this.dataPointMatrix.length ? firstVisibleLineIdx : -1;
+    }
+    toggleTabbingOn() {
+        this.isTabbing = true;
+    }
+    toggleTabbingOff() {
+        this.isTabbing = false;
+    }
+    componentWillLoad() {
+        this.parseData();
+    }
+    componentDidLoad() {
+        const resizeObserver = new ResizeObserver(() => this.debouncedResize());
+        resizeObserver.observe(this.el);
+    }
+    handleVisibilityToggleKeydown(ev, toggleIdx) {
+        switch (ev.key) {
+            case "Tab":
+                if (!ev.shiftKey && this.firstVisibleLineIdx !== -1) {
+                    ev.preventDefault();
+                    this.announce(this.lineFocusMessage(this.firstVisibleLineIdx));
+                    this.focusDataPoint(this.firstVisibleLineIdx, 0);
+                }
+                break;
+            case "ArrowUp":
+            case "ArrowLeft":
+                ev.preventDefault();
+                const prevToggleIdx = functions.wrapAround(toggleIdx, -1, this.dataPointMatrix.length - 1);
+                this.visibilityToggleEls[prevToggleIdx].focus();
+                break;
+            case "ArrowDown":
+            case "ArrowRight":
+                ev.preventDefault();
+                const nextToggleIdx = functions.wrapAround(toggleIdx, 1, this.dataPointMatrix.length - 1);
+                this.visibilityToggleEls[nextToggleIdx].focus();
+                break;
+        }
+    }
+    handleDataPointKeydown(ev) {
+        const [lineIdx, pointIdx] = this.focusedDataPoint;
+        const lineLength = this.lineEls[lineIdx].querySelectorAll(".point").length;
+        const numLines = this.dataPointMatrix.length;
+        switch (ev.key) {
+            case "Tab":
+                if (ev.shiftKey && this.visibilityToggles) {
+                    ev.preventDefault();
+                    this.visibilityToggleEls[0].focus();
+                }
+                break;
+            case "ArrowUp":
+                ev.preventDefault();
+                let prevLineIdx = lineIdx;
+                do
+                    prevLineIdx = functions.wrapAround(prevLineIdx, -1, numLines - 1);
+                while (this.hiddenLines.includes(prevLineIdx));
+                this.announce(this.lineFocusMessage(prevLineIdx));
+                this.focusDataPoint(prevLineIdx, pointIdx);
+                break;
+            case "ArrowDown":
+                ev.preventDefault();
+                let nextLineIdx = lineIdx;
+                do
+                    nextLineIdx = functions.wrapAround(nextLineIdx, 1, numLines - 1);
+                while (this.hiddenLines.includes(nextLineIdx));
+                this.announce(this.lineFocusMessage(nextLineIdx));
+                this.focusDataPoint(nextLineIdx, pointIdx);
+                break;
+            case "ArrowLeft":
+                ev.preventDefault();
+                const prevPointIdx = functions.wrapAround(pointIdx, -1, lineLength - 1);
+                this.focusDataPoint(lineIdx, prevPointIdx);
+                break;
+            case "ArrowRight":
+                ev.preventDefault();
+                const nextPointIdx = functions.wrapAround(pointIdx, 1, lineLength - 1);
+                this.focusDataPoint(lineIdx, nextPointIdx);
+                break;
+        }
+    }
+    announce(message) {
+        // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
+        if (this.liveRegionEl.textContent === message) {
+            message += "\u00A0";
+        }
+        this.announcement = message;
+    }
+    lineFocusMessage(lineIdx) {
+        const label = this.dataPointMatrix[lineIdx][0].lineLabel;
+        const numDataPoints = this.dataPointMatrix[lineIdx].filter((datapoint) => datapoint.yValue !== null).length;
+        return `${label}, line ${lineIdx + 1} of ${this.dataPointMatrix.length} with ${numDataPoints} data points`;
+    }
+    focusDataPoint(lineIdx, pointIdx) {
+        const lineEl = this.lineEls[lineIdx];
+        const pointEl = lineEl.querySelectorAll(".point")[pointIdx];
+        const allPoints = this.plotAreaEl.querySelectorAll(".point");
+        allPoints.forEach((point) => (point.tabIndex = -1));
+        pointEl.tabIndex = 0;
+        pointEl.focus();
+        this.focusedDataPoint = [lineIdx, pointIdx];
+    }
+    focusDataPointByEl(pointEl) {
+        const lineIdx = parseInt(pointEl.dataset.lineidx);
+        const pointIdx = Array.from(pointEl.parentElement.querySelectorAll(".point")).indexOf(pointEl);
+        const allPoints = this.plotAreaEl.querySelectorAll(".point");
+        allPoints.forEach((point) => (point.tabIndex = -1));
+        pointEl.tabIndex = 0;
+        pointEl.focus();
+        this.focusedDataPoint = [lineIdx, pointIdx];
+    }
+    calcYIntervals() {
+        let yIntervals = [];
+        if (this.yRange) {
+            yIntervals = functions.csvToArray(this.yRange).map((val) => parseInt(val));
+        }
+        else {
+            // gather all yValues
+            let allYValues = [];
+            const lines = Object.values(this.parsedLineData).flat();
+            lines.forEach((line) => allYValues.push(...Object.values(line)));
+            const filteredYValues = allYValues.filter((val) => val !== null);
+            // get max and min yValues in data
+            let minYValue = Math.min(...filteredYValues);
+            const maxYValue = Math.max(...filteredYValues);
+            // calculate neat yInterval
+            let interval = chartFunctions.getInterval(maxYValue - minYValue, 4);
+            // find new min below smallest yValue that divides cleanly by interval
+            let counter = interval;
+            while (minYValue % interval !== 0 && counter > 0) {
+                minYValue--;
+                counter--;
+            }
+            // calculate new interval using new min
+            interval = chartFunctions.getInterval(maxYValue - minYValue, 4);
+            let current = minYValue;
+            // determine top interval, no more than one tick above max yValue
+            while (current <= maxYValue + interval) {
+                yIntervals.push(current);
+                current += interval;
+            }
+        }
+        return yIntervals;
+    }
+    determineDisplayedXIntervals() {
+        // if component has display: none, plotAreaEl is truthy, but it's clientWidth is 0. This caused a crash when component was hidden in a tab
+        const maxTicks = this.plotAreaEl && this.plotAreaEl.clientWidth > 0
+            ? Math.round(this.plotAreaEl.clientWidth / this.minTickWidth)
+            : this.xIntervals.length;
+        const { skipInterval, skippedList } = functions.getSmallestSkipInterval(this.xIntervals, maxTicks);
+        this.intervalSkip = skipInterval;
+        return skippedList;
+    }
+    buildLineDataPointDetails(lineLabel, line) {
+        let dataPointDetailsList = [];
+        const lineDataPoints = Object.entries(line);
+        let isHighlighted;
+        lineDataPoints.forEach((entry, pointIdx) => {
+            const [xValue, yValue] = entry;
+            let xPositionPercent = (100 / (lineDataPoints.length - 1)) * pointIdx;
+            const yPositionPercent = yValue === null
+                ? null
+                : 100 - functions.calcPercentageInRange(yValue, this.yIntervals[this.yIntervals.length - 1], this.yIntervals[0]);
+            // add space between first points and y-axis
+            if (pointIdx === 0) {
+                xPositionPercent +=
+                    this.plotAreaEl && this.plotAreaEl.clientWidth > 0 ? (8 / this.plotAreaEl.clientWidth) * 100 : 1;
+            }
+            if (xValue === this.highlightStart && !isHighlighted) {
+                isHighlighted = true;
+            }
+            dataPointDetailsList.push({
+                lineLabel: lineLabel,
+                xValue: xValue,
+                yValue: yValue,
+                xPositionPercent: xPositionPercent,
+                yPositionPercent: yPositionPercent,
+                highlighted: isHighlighted,
+            });
+            // because highlight range is inclusive, disable after pushing details
+            if (xValue === this.highlightEnd && isHighlighted) {
+                isHighlighted = false;
+            }
+        });
+        return dataPointDetailsList;
+    }
+    toggleLineVisibility(lineIdx) {
+        if (this.hiddenLines.includes(lineIdx)) {
+            this.hiddenLines = this.hiddenLines.filter((num) => num !== lineIdx);
+        }
+        else {
+            this.hiddenLines.push(lineIdx);
+        }
+        index.forceUpdate(this.el);
+    }
+    resetDataPointFocus() {
+        this.displayedPopover = -1;
+        const allPoints = this.plotAreaEl.querySelectorAll(".point");
+        allPoints.forEach((point) => (point.tabIndex = -1));
+        if (this.firstVisibleLineIdx !== -1) {
+            const lineEl = this.lineEls[this.firstVisibleLineIdx];
+            const pointEl = lineEl.querySelectorAll(".point")[0];
+            pointEl.tabIndex = 0;
+            this.focusedDataPoint = [this.firstVisibleLineIdx, 0];
+        }
+    }
+    calcDelta(dataPoint, prevDataPoint) {
+        let delta;
+        if (dataPoint.yValue === null || prevDataPoint.yValue === null) {
+            // display "No data" when either of the datapoints is missing
+            delta = intl.lineChartMessages.noData;
+        }
+        else if (dataPoint.yValue == prevDataPoint.yValue) {
+            // display "0%" if datapoints are equal
+            delta = "0%";
         }
-        break;
-      case "ArrowUp":
-      case "ArrowLeft":
-        ev.preventDefault();
-        const prevToggleIdx = functions.wrapAround(toggleIdx, -1, this.dataPointMatrix.length - 1);
-        this.visibilityToggleEls[prevToggleIdx].focus();
-        break;
-      case "ArrowDown":
-      case "ArrowRight":
-        ev.preventDefault();
-        const nextToggleIdx = functions.wrapAround(toggleIdx, 1, this.dataPointMatrix.length - 1);
-        this.visibilityToggleEls[nextToggleIdx].focus();
-        break;
-    }
-  }
-  handleDataPointKeydown(ev) {
-    const [lineIdx, pointIdx] = this.focusedDataPoint;
-    const lineLength = this.lineEls[lineIdx].querySelectorAll(".point").length;
-    const numLines = this.dataPointMatrix.length;
-    switch (ev.key) {
-      case "Tab":
-        if (ev.shiftKey && this.visibilityToggles) {
-          ev.preventDefault();
-          this.visibilityToggleEls[0].focus();
+        else if (prevDataPoint.yValue == 0) {
+            // display "-" for % increase if prev data point is 0, as the technical number would be infinity
+            delta = "-";
         }
-        break;
-      case "ArrowUp":
-        ev.preventDefault();
-        let prevLineIdx = lineIdx;
-        do
-          prevLineIdx = functions.wrapAround(prevLineIdx, -1, numLines - 1);
-        while (this.hiddenLines.includes(prevLineIdx));
-        this.announce(this.lineFocusMessage(prevLineIdx));
-        this.focusDataPoint(prevLineIdx, pointIdx);
-        break;
-      case "ArrowDown":
-        ev.preventDefault();
-        let nextLineIdx = lineIdx;
-        do
-          nextLineIdx = functions.wrapAround(nextLineIdx, 1, numLines - 1);
-        while (this.hiddenLines.includes(nextLineIdx));
-        this.announce(this.lineFocusMessage(nextLineIdx));
-        this.focusDataPoint(nextLineIdx, pointIdx);
-        break;
-      case "ArrowLeft":
-        ev.preventDefault();
-        const prevPointIdx = functions.wrapAround(pointIdx, -1, lineLength - 1);
-        this.focusDataPoint(lineIdx, prevPointIdx);
-        break;
-      case "ArrowRight":
-        ev.preventDefault();
-        const nextPointIdx = functions.wrapAround(pointIdx, 1, lineLength - 1);
-        this.focusDataPoint(lineIdx, nextPointIdx);
-        break;
-    }
-  }
-  announce(message) {
-    // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
-    if (this.liveRegionEl.textContent === message) {
-      message += "\u00A0";
-    }
-    this.announcement = message;
-  }
-  lineFocusMessage(lineIdx) {
-    const label = this.dataPointMatrix[lineIdx][0].lineLabel;
-    const numDataPoints = this.dataPointMatrix[lineIdx].filter((datapoint) => datapoint.yValue !== null).length;
-    return `${label}, line ${lineIdx + 1} of ${this.dataPointMatrix.length} with ${numDataPoints} data points`;
-  }
-  focusDataPoint(lineIdx, pointIdx) {
-    const lineEl = this.lineEls[lineIdx];
-    const pointEl = lineEl.querySelectorAll(".point")[pointIdx];
-    const allPoints = this.plotAreaEl.querySelectorAll(".point");
-    allPoints.forEach((point) => (point.tabIndex = -1));
-    pointEl.tabIndex = 0;
-    pointEl.focus();
-    this.focusedDataPoint = [lineIdx, pointIdx];
-  }
-  focusDataPointByEl(pointEl) {
-    const lineIdx = parseInt(pointEl.dataset.lineidx);
-    const pointIdx = Array.from(pointEl.parentElement.querySelectorAll(".point")).indexOf(pointEl);
-    const allPoints = this.plotAreaEl.querySelectorAll(".point");
-    allPoints.forEach((point) => (point.tabIndex = -1));
-    pointEl.tabIndex = 0;
-    pointEl.focus();
-    this.focusedDataPoint = [lineIdx, pointIdx];
-  }
-  calcYIntervals() {
-    let yIntervals = [];
-    if (this.yRange) {
-      yIntervals = functions.csvToArray(this.yRange).map((val) => parseInt(val));
-    }
-    else {
-      // gather all yValues
-      let allYValues = [];
-      const lines = Object.values(this.parsedLineData).flat();
-      lines.forEach((line) => allYValues.push(...Object.values(line)));
-      const filteredYValues = allYValues.filter((val) => val !== null);
-      // get max and min yValues in data
-      let minYValue = Math.min(...filteredYValues);
-      const maxYValue = Math.max(...filteredYValues);
-      // calculate neat yInterval
-      let interval = chartFunctions.getInterval(maxYValue - minYValue, 4);
-      // find new min below smallest yValue that divides cleanly by interval
-      let counter = interval;
-      while (minYValue % interval !== 0 && counter > 0) {
-        minYValue--;
-        counter--;
-      }
-      // calculate new interval using new min
-      interval = chartFunctions.getInterval(maxYValue - minYValue, 4);
-      let current = minYValue;
-      // determine top interval, no more than one tick above max yValue
-      while (current <= maxYValue + interval) {
-        yIntervals.push(current);
-        current += interval;
-      }
-    }
-    return yIntervals;
-  }
-  determineDisplayedXIntervals() {
-    // if component has display: none, plotAreaEl is truthy, but it's clientWidth is 0. This caused a crash when component was hidden in a tab
-    const maxTicks = this.plotAreaEl && this.plotAreaEl.clientWidth > 0
-      ? Math.round(this.plotAreaEl.clientWidth / this.minTickWidth)
-      : this.xIntervals.length;
-    const { skipInterval, skippedList } = functions.getSmallestSkipInterval(this.xIntervals, maxTicks);
-    this.intervalSkip = skipInterval;
-    return skippedList;
-  }
-  buildLineDataPointDetails(lineLabel, line) {
-    let dataPointDetailsList = [];
-    const lineDataPoints = Object.entries(line);
-    let isHighlighted;
-    lineDataPoints.forEach((entry, pointIdx) => {
-      const [xValue, yValue] = entry;
-      let xPositionPercent = (100 / (lineDataPoints.length - 1)) * pointIdx;
-      const yPositionPercent = yValue === null
-        ? null
-        : 100 - functions.calcPercentageInRange(yValue, this.yIntervals[this.yIntervals.length - 1], this.yIntervals[0]);
-      // add space between first points and y-axis
-      if (pointIdx === 0) {
-        xPositionPercent +=
-          this.plotAreaEl && this.plotAreaEl.clientWidth > 0 ? (8 / this.plotAreaEl.clientWidth) * 100 : 1;
-      }
-      if (xValue === this.highlightStart && !isHighlighted) {
-        isHighlighted = true;
-      }
-      dataPointDetailsList.push({
-        lineLabel: lineLabel,
-        xValue: xValue,
-        yValue: yValue,
-        xPositionPercent: xPositionPercent,
-        yPositionPercent: yPositionPercent,
-        highlighted: isHighlighted,
-      });
-      // because highlight range is inclusive, disable after pushing details
-      if (xValue === this.highlightEnd && isHighlighted) {
-        isHighlighted = false;
-      }
-    });
-    return dataPointDetailsList;
-  }
-  toggleLineVisibility(lineIdx) {
-    if (this.hiddenLines.includes(lineIdx)) {
-      this.hiddenLines = this.hiddenLines.filter((num) => num !== lineIdx);
-    }
-    else {
-      this.hiddenLines.push(lineIdx);
-    }
-    index.forceUpdate(this.el);
-  }
-  resetDataPointFocus() {
-    this.displayedPopover = -1;
-    const allPoints = this.plotAreaEl.querySelectorAll(".point");
-    allPoints.forEach((point) => (point.tabIndex = -1));
-    if (this.firstVisibleLineIdx !== -1) {
-      const lineEl = this.lineEls[this.firstVisibleLineIdx];
-      const pointEl = lineEl.querySelectorAll(".point")[0];
-      pointEl.tabIndex = 0;
-      this.focusedDataPoint = [this.firstVisibleLineIdx, 0];
-    }
-  }
-  calcDelta(dataPoint, prevDataPoint) {
-    let delta;
-    if (dataPoint.yValue === null || prevDataPoint.yValue === null) {
-      // display "No data" when either of the datapoints is missing
-      delta = intl.lineChartMessages.noData;
-    }
-    else if (dataPoint.yValue == prevDataPoint.yValue) {
-      // display "0%" if datapoints are equal
-      delta = "0%";
-    }
-    else if (prevDataPoint.yValue == 0) {
-      // display "-" for % increase if prev data point is 0, as the technical number would be infinity
-      delta = "-";
-    }
-    else {
-      const changePercent = ((dataPoint.yValue - prevDataPoint.yValue) / prevDataPoint.yValue) * 100;
-      const roundedPercent = Math.round(changePercent * 100) / 100;
-      delta = `${roundedPercent > 0 ? "+" : ""}${roundedPercent}%`;
-    }
-    return delta;
-  }
-  renderLegend() {
-    const lineLabels = Object.keys(this.parsedLineData);
-    return (index.h("div", { ref: (el) => (this.legendEl = el), class: "legend" }, lineLabels.map((lineLabel, lineIdx) => {
-      const isHidden = this.hiddenLines.includes(lineIdx);
-      const isFaded = this.focusedLine !== -1 && this.focusedLine !== lineIdx;
-      return (index.h("div", { id: `legend-label-${lineIdx}`, class: `legend-label ${isFaded ? "faded" : ""}`, onMouseEnter: () => (this.focusedLine = isHidden ? -1 : lineIdx), onMouseLeave: () => (this.focusedLine = -1) }, this.renderIcon(lineIdx), lineLabel, this.visibilityToggles && this.renderVisibilityToggle(lineLabel, lineIdx, isHidden)));
-    })));
-  }
-  renderVisibilityToggle(lineLabel, lineIdx, isHidden) {
-    return (index.h("wm-button", { id: `visibility-button-${lineIdx}`, class: "visibility-toggle", "label-for-identical-buttons": `${lineIdx === 0 ? `Toggle line visibility list with ${this.dataPointMatrix.length} items` : ""} ${isHidden ? intl.globalMessages.show : intl.globalMessages.hide} ${lineLabel} toggle ${isHidden ? "pressed" : ""}`, "button-type": "navigational", tooltip: isHidden ? intl.globalMessages.show : intl.globalMessages.hide, tooltipPosition: "bottom", icon: isHidden ? "f209" : "f208", onClick: () => this.toggleLineVisibility(lineIdx), onKeyDown: (ev) => this.handleVisibilityToggleKeydown(ev, lineIdx), onFocus: () => (this.displayedPopover = -1) }));
-  }
-  renderIcon(lineIdx) {
-    const { color, icon } = this.lineStyles[lineIdx];
-    const iconStyle = {
-      "--iconColor": color,
-      "--icon": `"\\${icon}"`,
-      "--translation": lineIdx === 5 ? "rotate(180deg)" : "unset",
-    };
-    return index.h("span", { class: "icon", style: iconStyle });
-  }
-  renderXIntervals() {
-    const gridStyle = {
-      "--columns": `.5fr repeat(${this.xIntervals.length - 2}, 1fr) .5fr`,
-    };
-    return (index.h("div", { class: "x-intervals", style: gridStyle }, this.xIntervals.map((interval) => (index.h("span", { class: `x-interval ${this.displayedXIntervals.includes(interval) ? "" : "hidden"}` }, interval)))));
-  }
-  renderYIntervals() {
-    return (index.h("div", { ref: (el) => (this.yIntervalsEl = el), class: "y-intervals" }, this.yIntervals.map((yInterval) => (index.h("span", { class: "y-interval" }, chartFunctions.abbrNumber(yInterval))))));
-  }
-  renderData() {
-    return this.dataPointMatrix.map((_, lineIdx) => {
-      let focusState = this.focusedLine === lineIdx ? "focused" : "faded";
-      const isHidden = this.hiddenLines.includes(lineIdx);
-      return (index.h("div", { class: `line ${this.focusedLine !== -1 ? focusState : ""} ${isHidden ? "hidden" : ""}` }, this.renderLines(lineIdx), this.renderPoints(lineIdx)));
-    });
-  }
-  renderPoints(lineIdx) {
-    const lineDataPoints = this.dataPointMatrix[lineIdx];
-    return (index.h("div", { class: "line-icons" }, lineDataPoints.map((dataPoint, pointIdx) => {
-      const { lineLabel, xValue, yValue, xPositionPercent, yPositionPercent, highlighted } = dataPoint;
-      if (yValue !== null) {
+        else {
+            const changePercent = ((dataPoint.yValue - prevDataPoint.yValue) / prevDataPoint.yValue) * 100;
+            const roundedPercent = Math.round(changePercent * 100) / 100;
+            delta = `${roundedPercent > 0 ? "+" : ""}${roundedPercent}%`;
+        }
+        return delta;
+    }
+    renderLegend() {
+        const lineLabels = Object.keys(this.parsedLineData);
+        return (index.h("div", { ref: (el) => (this.legendEl = el), class: "legend" }, lineLabels.map((lineLabel, lineIdx) => {
+            const isHidden = this.hiddenLines.includes(lineIdx);
+            const isFaded = this.focusedLine !== -1 && this.focusedLine !== lineIdx;
+            return (index.h("div", { id: `legend-label-${lineIdx}`, class: `legend-label ${isFaded ? "faded" : ""}`, onMouseEnter: () => (this.focusedLine = isHidden ? -1 : lineIdx), onMouseLeave: () => (this.focusedLine = -1) }, this.renderIcon(lineIdx), lineLabel, this.visibilityToggles && this.renderVisibilityToggle(lineLabel, lineIdx, isHidden)));
+        })));
+    }
+    renderVisibilityToggle(lineLabel, lineIdx, isHidden) {
+        return (index.h("wm-button", { id: `visibility-button-${lineIdx}`, class: "visibility-toggle", "label-for-identical-buttons": `${lineIdx === 0 ? `Toggle line visibility list with ${this.dataPointMatrix.length} items` : ""} ${isHidden ? intl.globalMessages.show : intl.globalMessages.hide} ${lineLabel} toggle ${isHidden ? "pressed" : ""}`, "button-type": "navigational", tooltip: isHidden ? intl.globalMessages.show : intl.globalMessages.hide, tooltipPosition: "bottom", icon: isHidden ? "f209" : "f208", onClick: () => this.toggleLineVisibility(lineIdx), onKeyDown: (ev) => this.handleVisibilityToggleKeydown(ev, lineIdx), onFocus: () => (this.displayedPopover = -1) }));
+    }
+    renderIcon(lineIdx) {
         const { color, icon } = this.lineStyles[lineIdx];
-        const firstPointTabIndex = lineIdx === 0 && pointIdx === 0 ? 0 : undefined;
         const iconStyle = {
-          "--icon": `"\\${icon}"`,
-          "--iconColor": color,
-          "--xPosition": xPositionPercent + "%",
-          "--yPosition": yPositionPercent + "%",
-          "--translation": lineIdx === 5 ? "translate(-50%, -50%) rotate(180deg)" : "translate(-50%, -50%)",
+            "--iconColor": color,
+            "--icon": `"\\${icon}"`,
+            "--translation": lineIdx === 5 ? "rotate(180deg)" : "unset",
+        };
+        return index.h("span", { class: "icon", style: iconStyle });
+    }
+    renderXIntervals() {
+        const gridStyle = {
+            "--columns": `.5fr repeat(${this.xIntervals.length - 2}, 1fr) .5fr`,
         };
-        let ariaLabel = `${lineLabel} ${highlighted ? this.highlightQualifier : ""} ${this.xAxisLabel} ${xValue + (this.parsedUnits[0] ? this.parsedUnits[0] : "")}, ${this.yAxisLabel}: ${yValue + (this.parsedUnits[1] ? this.parsedUnits[1] : "")}`;
-        if (this.showDeltas && pointIdx > 0) {
-          const prevDataPoint = lineDataPoints[pointIdx - 1];
-          const changeSinceMessage = intl.lineChartMessages.getChangeSince(prevDataPoint.xValue);
-          ariaLabel += `, ${changeSinceMessage} ${this.calcDelta(dataPoint, prevDataPoint)}`;
+        return (index.h("div", { class: "x-intervals", style: gridStyle }, this.xIntervals.map((interval) => (index.h("span", { class: `x-interval ${this.displayedXIntervals.includes(interval) ? "" : "hidden"}` }, interval)))));
+    }
+    renderYIntervals() {
+        return (index.h("div", { ref: (el) => (this.yIntervalsEl = el), class: "y-intervals" }, this.yIntervals.map((yInterval) => (index.h("span", { class: "y-interval" }, chartFunctions.abbrNumber(yInterval))))));
+    }
+    renderData() {
+        return this.dataPointMatrix.map((_, lineIdx) => {
+            let focusState = this.focusedLine === lineIdx ? "focused" : "faded";
+            const isHidden = this.hiddenLines.includes(lineIdx);
+            return (index.h("div", { class: `line ${this.focusedLine !== -1 ? focusState : ""} ${isHidden ? "hidden" : ""}` }, this.renderLines(lineIdx), this.renderPoints(lineIdx)));
+        });
+    }
+    renderPoints(lineIdx) {
+        const lineDataPoints = this.dataPointMatrix[lineIdx];
+        return (index.h("div", { class: "line-icons" }, lineDataPoints.map((dataPoint, pointIdx) => {
+            const { lineLabel, xValue, yValue, xPositionPercent, yPositionPercent, highlighted } = dataPoint;
+            if (yValue !== null) {
+                const { color, icon } = this.lineStyles[lineIdx];
+                const firstPointTabIndex = lineIdx === 0 && pointIdx === 0 ? 0 : undefined;
+                const iconStyle = {
+                    "--icon": `"\\${icon}"`,
+                    "--iconColor": color,
+                    "--xPosition": xPositionPercent + "%",
+                    "--yPosition": yPositionPercent + "%",
+                    "--translation": lineIdx === 5 ? "translate(-50%, -50%) rotate(180deg)" : "translate(-50%, -50%)",
+                };
+                let ariaLabel = `${lineLabel} ${highlighted ? this.highlightQualifier : ""} ${this.xAxisLabel} ${xValue + (this.parsedUnits[0] ? this.parsedUnits[0] : "")}, ${this.yAxisLabel}: ${yValue + (this.parsedUnits[1] ? this.parsedUnits[1] : "")}`;
+                if (this.showDeltas && pointIdx > 0) {
+                    const prevDataPoint = lineDataPoints[pointIdx - 1];
+                    const changeSinceMessage = intl.lineChartMessages.getChangeSince(prevDataPoint.xValue);
+                    ariaLabel += `, ${changeSinceMessage} ${this.calcDelta(dataPoint, prevDataPoint)}`;
+                }
+                return (index.h("span", { id: `${lineLabel}-${pointIdx}`, role: "img", "aria-label": ariaLabel, tabIndex: firstPointTabIndex, class: "point icon", style: iconStyle, "data-lineidx": lineIdx, "data-xvalue": xValue, onKeyDown: (ev) => this.handleDataPointKeydown(ev), onFocus: () => (this.displayedPopover = pointIdx), onClick: (ev) => this.focusDataPointByEl(ev.target), onMouseEnter: () => (this.displayedPopover = pointIdx) }));
+            }
+        })));
+    }
+    renderLines(lineIdx) {
+        const lineDataPoints = this.dataPointMatrix[lineIdx];
+        return (index.h("svg", { class: "line-svg" }, lineDataPoints.map((dataPoint, pointIdx) => {
+            const shouldDraw = dataPoint.yValue !== null &&
+                pointIdx !== lineDataPoints.length - 1 &&
+                lineDataPoints[pointIdx + 1].yValue !== null;
+            if (shouldDraw) {
+                const { color } = this.lineStyles[lineIdx];
+                const { xPositionPercent: xStart, yPositionPercent: yStart } = dataPoint;
+                const { xPositionPercent: xEnd, yPositionPercent: yEnd } = lineDataPoints[pointIdx + 1];
+                return (index.h("line", { x1: xStart + "%", y1: yStart + "%", x2: xEnd + "%", y2: yEnd + "%", stroke: color, "stroke-width": "2px" }));
+            }
+        })));
+    }
+    renderHoverAreas() {
+        const hoverAreaStyle = { "--columns": `.5fr repeat(${this.xIntervals.length - 2}, 1fr) .5fr` };
+        return (index.h("div", { class: "hover-area-wrapper", style: hoverAreaStyle, onMouseLeave: () => (this.displayedPopover = -1) }, this.xIntervals.map((_, idx) => (index.h("div", { onMouseEnter: () => (this.displayedPopover = idx) })))));
+    }
+    renderPopover() {
+        const displayedPopoverData = this.popoverData[this.displayedPopover];
+        const xPosition = displayedPopoverData[0].xPositionPercent;
+        const yPositions = displayedPopoverData
+            .map((point) => point.yPositionPercent)
+            .filter((yPosition) => yPosition !== null);
+        const averageYPosition = yPositions.reduce((acc, cur) => acc + cur, 0) / yPositions.length;
+        const referencePointEl = this.plotAreaEl.querySelector(`.point[data-xvalue="${this.dataPointMatrix[0][this.displayedPopover].xValue}"]`);
+        const componentBoundingClientRect = this.el.getBoundingClientRect();
+        const referencePointBoundingClientRect = referencePointEl.getBoundingClientRect();
+        const rightSpaceAvailable = componentBoundingClientRect.right - referencePointBoundingClientRect.right;
+        const leftSpaceAvailable = referencePointBoundingClientRect.left - componentBoundingClientRect.left;
+        const hasRoomRight = rightSpaceAvailable >= (this.popoverEl ? Math.min(this.popoverEl.clientWidth, 400) : 400);
+        const hasRoomLeft = leftSpaceAvailable >= (this.popoverEl ? Math.min(this.popoverEl.clientWidth, 400) : 400);
+        const percentMargin = (8 / this.plotAreaEl.clientWidth) * 100;
+        let popoverStyle = {
+            "--leftPosition": hasRoomRight ? xPosition + percentMargin + "%" : "unset",
+            "--rightPosition": hasRoomLeft ? 100 - xPosition + percentMargin + "%" : "unset",
+            "--topPosition": averageYPosition + "%",
+            transform: "translateY(-50%)", // vertically center for averageYPosition
+        };
+        if (!hasRoomLeft && !hasRoomRight) {
+            // if there's not enough room to the left and right, position "detached" from the data points towards the top of the chart
+            const displaceLeft = `0px - ${this.labelWidth} - 20px - ${this.yIntervalsEl.clientWidth + "px"} + ${this.el.scrollLeft + "px"} + 2px`;
+            popoverStyle = {
+                "--leftPosition": `0%`,
+                "--topPosition": "0%",
+                maxWidth: Math.min(this.el.clientWidth - 2, 400) + "px",
+                transform: `translateX(calc(${displaceLeft}))`, // align with left edge of component
+            };
         }
-        return (index.h("span", { id: `${lineLabel}-${pointIdx}`, role: "img", "aria-label": ariaLabel, tabIndex: firstPointTabIndex, class: "point icon", style: iconStyle, "data-lineidx": lineIdx, "data-xvalue": xValue, onKeyDown: (ev) => this.handleDataPointKeydown(ev), onFocus: () => (this.displayedPopover = pointIdx), onClick: (ev) => this.focusDataPointByEl(ev.target), onMouseEnter: () => (this.displayedPopover = pointIdx) }));
-      }
-    })));
-  }
-  renderLines(lineIdx) {
-    const lineDataPoints = this.dataPointMatrix[lineIdx];
-    return (index.h("svg", { class: "line-svg" }, lineDataPoints.map((dataPoint, pointIdx) => {
-      const shouldDraw = dataPoint.yValue !== null &&
-        pointIdx !== lineDataPoints.length - 1 &&
-        lineDataPoints[pointIdx + 1].yValue !== null;
-      if (shouldDraw) {
-        const { color } = this.lineStyles[lineIdx];
-        const { xPositionPercent: xStart, yPositionPercent: yStart } = dataPoint;
-        const { xPositionPercent: xEnd, yPositionPercent: yEnd } = lineDataPoints[pointIdx + 1];
-        return (index.h("line", { x1: xStart + "%", y1: yStart + "%", x2: xEnd + "%", y2: yEnd + "%", stroke: color, "stroke-width": "2px" }));
-      }
-    })));
-  }
-  renderHoverAreas() {
-    const hoverAreaStyle = { "--columns": `.5fr repeat(${this.xIntervals.length - 2}, 1fr) .5fr` };
-    return (index.h("div", { class: "hover-area-wrapper", style: hoverAreaStyle, onMouseLeave: () => (this.displayedPopover = -1) }, this.xIntervals.map((_, idx) => (index.h("div", { onMouseEnter: () => (this.displayedPopover = idx) })))));
-  }
-  renderPopover() {
-    const displayedPopoverData = this.popoverData[this.displayedPopover];
-    const xPosition = displayedPopoverData[0].xPositionPercent;
-    const yPositions = displayedPopoverData
-      .map((point) => point.yPositionPercent)
-      .filter((yPosition) => yPosition !== null);
-    const averageYPosition = yPositions.reduce((acc, cur) => acc + cur, 0) / yPositions.length;
-    const referencePointEl = this.plotAreaEl.querySelector(`.point[data-xvalue="${this.dataPointMatrix[0][this.displayedPopover].xValue}"]`);
-    const componentBoundingClientRect = this.el.getBoundingClientRect();
-    const referencePointBoundingClientRect = referencePointEl.getBoundingClientRect();
-    const rightSpaceAvailable = componentBoundingClientRect.right - referencePointBoundingClientRect.right;
-    const leftSpaceAvailable = referencePointBoundingClientRect.left - componentBoundingClientRect.left;
-    const hasRoomRight = rightSpaceAvailable >= (this.popoverEl ? Math.min(this.popoverEl.clientWidth, 400) : 400);
-    const hasRoomLeft = leftSpaceAvailable >= (this.popoverEl ? Math.min(this.popoverEl.clientWidth, 400) : 400);
-    const percentMargin = (8 / this.plotAreaEl.clientWidth) * 100;
-    let popoverStyle = {
-      "--leftPosition": hasRoomRight ? xPosition + percentMargin + "%" : "unset",
-      "--rightPosition": hasRoomLeft ? 100 - xPosition + percentMargin + "%" : "unset",
-      "--topPosition": averageYPosition + "%",
-      transform: "translateY(-50%)", // vertically center for averageYPosition
-    };
-    if (!hasRoomLeft && !hasRoomRight) {
-      // if there's not enough room to the left and right, position "detached" from the data points towards the top of the chart
-      const displaceLeft = `0px - ${this.labelWidth} - 20px - ${this.yIntervalsEl.clientWidth + "px"} + ${this.el.scrollLeft + "px"} + 2px`;
-      popoverStyle = {
-        "--leftPosition": `0%`,
-        "--topPosition": "0%",
-        maxWidth: Math.min(this.el.clientWidth - 2, 400) + "px",
-        transform: `translateX(calc(${displaceLeft}))`, // align with left edge of component
-      };
-    }
-    return (index.h("div", { ref: (el) => (this.popoverEl = el), class: "popover", style: popoverStyle }, index.h("div", { class: "title" }, displayedPopoverData[0].xValue, this.parsedUnits[0] && index.h("span", { class: "unit --x" }, "(", this.parsedUnits[0], ")")), this.showDeltas && this.displayedPopover > 0 && (index.h("div", { class: "comparison-title" }, intl.lineChartMessages.getChangeSince(this.popoverData[this.displayedPopover - 1][0].xValue))), this.renderPopoverTable()));
-  }
-  renderPopoverTable() {
-    const displayedPopoverData = this.popoverData[this.displayedPopover];
-    return (index.h("table", { class: "popover-table" }, displayedPopoverData.map((dataPoint, lineIdx) => {
-      if (!this.hiddenLines.includes(lineIdx)) {
-        const { lineLabel, yValue } = dataPoint;
-        const prevDataPoint = this.displayedPopover > 0 ? this.popoverData[this.displayedPopover - 1][lineIdx] : null;
-        const localizedYValue = yValue !== null ? new Intl.NumberFormat().format(yValue) : null;
-        return (index.h("tr", { class: "popover-row" }, index.h("td", null, this.renderIcon(lineIdx)), index.h("td", { class: "row-label" }, lineLabel), index.h("td", { class: "row-value" }, yValue === null ? intl.lineChartMessages.noData : localizedYValue, yValue !== null && this.parsedUnits[1] && index.h("span", { class: "unit --y" }, this.parsedUnits[1])), this.showDeltas && prevDataPoint && this.renderDeltas(dataPoint, prevDataPoint)));
-      }
-    })));
-  }
-  renderDeltas(dataPoint, prevDataPoint) {
-    const delta = this.calcDelta(dataPoint, prevDataPoint);
-    const deltaColor = delta.toString()[0] == "+" || delta == "-" ? "positive" : delta.toString()[0] == "-" ? "negative" : "";
-    return prevDataPoint && index.h("td", { class: `delta --${deltaColor}` }, delta);
-  }
-  renderHoverIndicator() {
-    const xPosition = this.dataPointMatrix[0][this.displayedPopover].xPositionPercent;
-    const indicatorStyle = { "--xPosition": xPosition + "%" };
-    return index.h("div", { class: "hover-indicator", style: indicatorStyle });
-  }
-  renderHighlight() {
-    const startPercentage = this.dataPointMatrix[0][this.xIntervals.indexOf(this.highlightStart)].xPositionPercent;
-    const endPercentage = this.highlightEnd
-      ? 100 - this.dataPointMatrix[0][this.xIntervals.indexOf(this.highlightEnd)].xPositionPercent
-      : 0;
-    const highlightStyle = { "--startPercentage": startPercentage + "%", "--endPercentage": endPercentage + "%" };
-    return index.h("div", { class: "highlight", style: highlightStyle });
-  }
-  render() {
-    return (index.h(index.Host, { onBlur: () => this.resetDataPointFocus(), onMouseLeave: () => (this.displayedPopover = -1) }, index.h("div", { class: "component-wrapper", role: "application", "aria-roledescription": intl.chartMessages.interactiveChart, "aria-label": this.label, "aria-describedby": "chart-description" }, this.renderLegend(), index.h("div", { class: "chart-wrapper" }, index.h("div", { class: "chart-label --y-axis", style: { "--labelWidth": this.labelWidth } }, this.yAxisLabel, this.parsedUnits[1] && ` (${this.parsedUnits[1]})`), this.renderYIntervals(), index.h("div", { ref: (el) => (this.plotAreaEl = el), class: `plot-area ${this.hasPartialInterval ? "" : "right-border"}`, style: {
-        "--backgroundSize": `${this.dataPointMatrix[0][this.xIntervals.indexOf(this.displayedXIntervals[1])].xPositionPercent}%`,
-      } }, this.highlightStart && this.renderHighlight(), this.renderData(), this.renderHoverAreas()), this.displayedPopover !== -1 && this.renderHoverIndicator(), this.displayedPopover !== -1 && this.renderPopover(), this.renderXIntervals(), index.h("div", { class: "chart-label --x-axis" }, this.xAxisLabel, this.parsedUnits[0] && ` (${this.parsedUnits[0]})`)), index.h("div", { id: "chart-description", class: "sr-only" }, `${intl.lineChartMessages.instructions} ${this.description}`), index.h("div", { ref: (el) => (this.liveRegionEl = el), "aria-live": "polite", class: "sr-only" }, this.announcement))));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "lineData": ["parseData"],
-    "intervalSkip": ["handleIntervalSkip"]
-  }; }
+        return (index.h("div", { ref: (el) => (this.popoverEl = el), class: "popover", style: popoverStyle }, index.h("div", { class: "title" }, displayedPopoverData[0].xValue, this.parsedUnits[0] && index.h("span", { class: "unit --x" }, "(", this.parsedUnits[0], ")")), this.showDeltas && this.displayedPopover > 0 && (index.h("div", { class: "comparison-title" }, intl.lineChartMessages.getChangeSince(this.popoverData[this.displayedPopover - 1][0].xValue))), this.renderPopoverTable()));
+    }
+    renderPopoverTable() {
+        const displayedPopoverData = this.popoverData[this.displayedPopover];
+        return (index.h("table", { class: "popover-table" }, displayedPopoverData.map((dataPoint, lineIdx) => {
+            if (!this.hiddenLines.includes(lineIdx)) {
+                const { lineLabel, yValue } = dataPoint;
+                const prevDataPoint = this.displayedPopover > 0 ? this.popoverData[this.displayedPopover - 1][lineIdx] : null;
+                const localizedYValue = yValue !== null ? new Intl.NumberFormat().format(yValue) : null;
+                return (index.h("tr", { class: "popover-row" }, index.h("td", null, this.renderIcon(lineIdx)), index.h("td", { class: "row-label" }, lineLabel), index.h("td", { class: "row-value" }, yValue === null ? intl.lineChartMessages.noData : localizedYValue, yValue !== null && this.parsedUnits[1] && index.h("span", { class: "unit --y" }, this.parsedUnits[1])), this.showDeltas && prevDataPoint && this.renderDeltas(dataPoint, prevDataPoint)));
+            }
+        })));
+    }
+    renderDeltas(dataPoint, prevDataPoint) {
+        const delta = this.calcDelta(dataPoint, prevDataPoint);
+        const deltaColor = delta.toString()[0] == "+" || delta == "-" ? "positive" : delta.toString()[0] == "-" ? "negative" : "";
+        return prevDataPoint && index.h("td", { class: `delta --${deltaColor}` }, delta);
+    }
+    renderHoverIndicator() {
+        const xPosition = this.dataPointMatrix[0][this.displayedPopover].xPositionPercent;
+        const indicatorStyle = { "--xPosition": xPosition + "%" };
+        return index.h("div", { class: "hover-indicator", style: indicatorStyle });
+    }
+    renderHighlight() {
+        const startPercentage = this.dataPointMatrix[0][this.xIntervals.indexOf(this.highlightStart)].xPositionPercent;
+        const endPercentage = this.highlightEnd
+            ? 100 - this.dataPointMatrix[0][this.xIntervals.indexOf(this.highlightEnd)].xPositionPercent
+            : 0;
+        const highlightStyle = { "--startPercentage": startPercentage + "%", "--endPercentage": endPercentage + "%" };
+        return index.h("div", { class: "highlight", style: highlightStyle });
+    }
+    render() {
+        return (index.h(index.Host, { onBlur: () => this.resetDataPointFocus(), onMouseLeave: () => (this.displayedPopover = -1) }, index.h("div", { class: "component-wrapper", role: "application", "aria-roledescription": intl.chartMessages.interactiveChart, "aria-label": this.label, "aria-describedby": "chart-description" }, this.renderLegend(), index.h("div", { class: "chart-wrapper" }, index.h("div", { class: "chart-label --y-axis", style: { "--labelWidth": this.labelWidth } }, this.yAxisLabel, this.parsedUnits[1] && ` (${this.parsedUnits[1]})`), this.renderYIntervals(), index.h("div", { ref: (el) => (this.plotAreaEl = el), class: `plot-area ${this.hasPartialInterval ? "" : "right-border"}`, style: {
+                "--backgroundSize": `${this.dataPointMatrix[0][this.xIntervals.indexOf(this.displayedXIntervals[1])].xPositionPercent}%`,
+            } }, this.highlightStart && this.renderHighlight(), this.renderData(), this.renderHoverAreas()), this.displayedPopover !== -1 && this.renderHoverIndicator(), this.displayedPopover !== -1 && this.renderPopover(), this.renderXIntervals(), index.h("div", { class: "chart-label --x-axis" }, this.xAxisLabel, this.parsedUnits[0] && ` (${this.parsedUnits[0]})`)), index.h("div", { id: "chart-description", class: "sr-only" }, `${intl.lineChartMessages.instructions} ${this.description}`), index.h("div", { ref: (el) => (this.liveRegionEl = el), "aria-live": "polite", class: "sr-only" }, this.announcement))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "lineData": ["parseData"],
+        "intervalSkip": ["handleIntervalSkip"]
+    }; }
 };
 LineChart.style = wmLineChartCss;