@watermarkinsights/ripple 4.2.0-1 → 4.2.0

package/dist/collection/components/charts/wm-line-chart/wm-line-chart.js

@@ -3,727 +3,727 @@ import { csvToArray, debounce, transposeMatrix, getSmallestSkipInterval, wrapAro
 import { abbrNumber, getInterval } from "../chartFunctions";
 import { chartMessages, globalMessages, lineChartMessages } from "../../../global/intl";
 export class LineChart {
-    constructor() {
-        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 = 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 = 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 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 = wrapAround(toggleIdx, -1, this.dataPointMatrix.length - 1);
-                this.visibilityToggleEls[prevToggleIdx].focus();
-                break;
-            case "ArrowDown":
-            case "ArrowRight":
-                ev.preventDefault();
-                const nextToggleIdx = 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 = 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 = 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 = wrapAround(pointIdx, -1, lineLength - 1);
-                this.focusDataPoint(lineIdx, prevPointIdx);
-                break;
-            case "ArrowRight":
-                ev.preventDefault();
-                const nextPointIdx = 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 = 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 = 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 = 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 } = 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 - 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);
-        }
-        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 = lineChartMessages.noData;
-        }
-        else if (dataPoint.yValue == prevDataPoint.yValue) {
-            // display "0%" if datapoints are equal
-            delta = "0%";
+  constructor() {
+    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 = 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 = 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 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);
         }
-        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":
+      case "ArrowLeft":
+        ev.preventDefault();
+        const prevToggleIdx = wrapAround(toggleIdx, -1, this.dataPointMatrix.length - 1);
+        this.visibilityToggleEls[prevToggleIdx].focus();
+        break;
+      case "ArrowDown":
+      case "ArrowRight":
+        ev.preventDefault();
+        const nextToggleIdx = 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 {
-            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 (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 (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 (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 ? globalMessages.show : globalMessages.hide} ${lineLabel} toggle ${isHidden ? "pressed" : ""}`, "button-type": "navigational", tooltip: isHidden ? globalMessages.show : globalMessages.hide, tooltipPosition: "bottom", icon: isHidden ? "f209" : "f208", onClick: () => this.toggleLineVisibility(lineIdx), onKeyDown: (ev) => this.handleVisibilityToggleKeydown(ev, lineIdx), onFocus: () => (this.displayedPopover = -1) }));
-    }
-    renderIcon(lineIdx) {
+        break;
+      case "ArrowUp":
+        ev.preventDefault();
+        let prevLineIdx = lineIdx;
+        do
+          prevLineIdx = 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 = 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 = wrapAround(pointIdx, -1, lineLength - 1);
+        this.focusDataPoint(lineIdx, prevPointIdx);
+        break;
+      case "ArrowRight":
+        ev.preventDefault();
+        const nextPointIdx = 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 = 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 = 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 = 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 } = 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 - 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);
+    }
+    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 = 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 (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 (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 (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 ? globalMessages.show : globalMessages.hide} ${lineLabel} toggle ${isHidden ? "pressed" : ""}`, "button-type": "navigational", tooltip: isHidden ? globalMessages.show : 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 h("span", { class: "icon", style: iconStyle });
+  }
+  renderXIntervals() {
+    const gridStyle = {
+      "--columns": `.5fr repeat(${this.xIntervals.length - 2}, 1fr) .5fr`,
+    };
+    return (h("div", { class: "x-intervals", style: gridStyle }, this.xIntervals.map((interval) => (h("span", { class: `x-interval ${this.displayedXIntervals.includes(interval) ? "" : "hidden"}` }, interval)))));
+  }
+  renderYIntervals() {
+    return (h("div", { ref: (el) => (this.yIntervalsEl = el), class: "y-intervals" }, this.yIntervals.map((yInterval) => (h("span", { class: "y-interval" }, abbrNumber(yInterval))))));
+  }
+  renderData() {
+    return this.dataPointMatrix.map((_, lineIdx) => {
+      let focusState = this.focusedLine === lineIdx ? "focused" : "faded";
+      const isHidden = this.hiddenLines.includes(lineIdx);
+      return (h("div", { class: `line ${this.focusedLine !== -1 ? focusState : ""} ${isHidden ? "hidden" : ""}` }, this.renderLines(lineIdx), this.renderPoints(lineIdx)));
+    });
+  }
+  renderPoints(lineIdx) {
+    const lineDataPoints = this.dataPointMatrix[lineIdx];
+    return (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 = {
-            "--iconColor": color,
-            "--icon": `"\\${icon}"`,
-            "--translation": lineIdx === 5 ? "rotate(180deg)" : "unset",
-        };
-        return h("span", { class: "icon", style: iconStyle });
-    }
-    renderXIntervals() {
-        const gridStyle = {
-            "--columns": `.5fr repeat(${this.xIntervals.length - 2}, 1fr) .5fr`,
+          "--icon": `"\\${icon}"`,
+          "--iconColor": color,
+          "--xPosition": xPositionPercent + "%",
+          "--yPosition": yPositionPercent + "%",
+          "--translation": lineIdx === 5 ? "translate(-50%, -50%) rotate(180deg)" : "translate(-50%, -50%)",
         };
-        return (h("div", { class: "x-intervals", style: gridStyle }, this.xIntervals.map((interval) => (h("span", { class: `x-interval ${this.displayedXIntervals.includes(interval) ? "" : "hidden"}` }, interval)))));
-    }
-    renderYIntervals() {
-        return (h("div", { ref: (el) => (this.yIntervalsEl = el), class: "y-intervals" }, this.yIntervals.map((yInterval) => (h("span", { class: "y-interval" }, abbrNumber(yInterval))))));
-    }
-    renderData() {
-        return this.dataPointMatrix.map((_, lineIdx) => {
-            let focusState = this.focusedLine === lineIdx ? "focused" : "faded";
-            const isHidden = this.hiddenLines.includes(lineIdx);
-            return (h("div", { class: `line ${this.focusedLine !== -1 ? focusState : ""} ${isHidden ? "hidden" : ""}` }, this.renderLines(lineIdx), this.renderPoints(lineIdx)));
-        });
-    }
-    renderPoints(lineIdx) {
-        const lineDataPoints = this.dataPointMatrix[lineIdx];
-        return (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 = lineChartMessages.getChangeSince(prevDataPoint.xValue);
-                    ariaLabel += `, ${changeSinceMessage} ${this.calcDelta(dataPoint, prevDataPoint)}`;
-                }
-                return (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 (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 (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 (h("div", { class: "hover-area-wrapper", style: hoverAreaStyle, onMouseLeave: () => (this.displayedPopover = -1) }, this.xIntervals.map((_, idx) => (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
-            };
+        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 = lineChartMessages.getChangeSince(prevDataPoint.xValue);
+          ariaLabel += `, ${changeSinceMessage} ${this.calcDelta(dataPoint, prevDataPoint)}`;
         }
-        return (h("div", { ref: (el) => (this.popoverEl = el), class: "popover", style: popoverStyle }, h("div", { class: "title" }, displayedPopoverData[0].xValue, this.parsedUnits[0] && h("span", { class: "unit --x" }, "(", this.parsedUnits[0], ")")), this.showDeltas && this.displayedPopover > 0 && (h("div", { class: "comparison-title" }, lineChartMessages.getChangeSince(this.popoverData[this.displayedPopover - 1][0].xValue))), this.renderPopoverTable()));
-    }
-    renderPopoverTable() {
-        const displayedPopoverData = this.popoverData[this.displayedPopover];
-        return (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 (h("tr", { class: "popover-row" }, h("td", null, this.renderIcon(lineIdx)), h("td", { class: "row-label" }, lineLabel), h("td", { class: "row-value" }, yValue === null ? lineChartMessages.noData : localizedYValue, yValue !== null && this.parsedUnits[1] && 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 && h("td", { class: `delta --${deltaColor}` }, delta);
-    }
-    renderHoverIndicator() {
-        const xPosition = this.dataPointMatrix[0][this.displayedPopover].xPositionPercent;
-        const indicatorStyle = { "--xPosition": xPosition + "%" };
-        return 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 h("div", { class: "highlight", style: highlightStyle });
-    }
-    render() {
-        return (h(Host, { onBlur: () => this.resetDataPointFocus(), onMouseLeave: () => (this.displayedPopover = -1) }, h("div", { class: "component-wrapper", role: "application", "aria-roledescription": chartMessages.interactiveChart, "aria-label": this.label, "aria-describedby": "chart-description" }, this.renderLegend(), h("div", { class: "chart-wrapper" }, h("div", { class: "chart-label --y-axis", style: { "--labelWidth": this.labelWidth } }, this.yAxisLabel, this.parsedUnits[1] && ` (${this.parsedUnits[1]})`), this.renderYIntervals(), 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(), h("div", { class: "chart-label --x-axis" }, this.xAxisLabel, this.parsedUnits[0] && ` (${this.parsedUnits[0]})`)), h("div", { id: "chart-description", class: "sr-only" }, `${lineChartMessages.instructions} ${this.description}`), h("div", { ref: (el) => (this.liveRegionEl = el), "aria-live": "polite", class: "sr-only" }, this.announcement))));
-    }
-    static get is() { return "wm-line-chart"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["wm-line-chart.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["wm-line-chart.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "label",
-                "reflect": false
-            },
-            "description": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "description",
-                "reflect": false,
-                "defaultValue": "\"\""
-            },
-            "xAxisLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "x-axis-label",
-                "reflect": false
-            },
-            "yAxisLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "y-axis-label",
-                "reflect": false
-            },
-            "lineData": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "line-data",
-                "reflect": true
-            },
-            "units": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "units",
-                "reflect": false,
-                "defaultValue": "\"null,null\""
-            },
-            "labelWidth": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "label-width",
-                "reflect": false,
-                "defaultValue": "\"120px\""
-            },
-            "highlightQualifier": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "highlight-qualifier",
-                "reflect": false,
-                "defaultValue": "\"highlighted\""
-            },
-            "highlightStart": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "highlight-start",
-                "reflect": false
-            },
-            "highlightEnd": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "highlight-end",
-                "reflect": false
-            },
-            "visibilityToggles": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "visibility-toggles",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "showDeltas": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "show-deltas",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "yRange": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "y-range",
-                "reflect": false
-            }
-        };
-    }
-    static get states() {
-        return {
-            "parsedLineData": {},
-            "displayedPopover": {},
-            "focusedLine": {},
-            "hiddenLines": {},
-            "isTabbing": {},
-            "intervalSkip": {},
-            "announcement": {}
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "lineData",
-                "methodName": "parseData"
-            }, {
-                "propName": "intervalSkip",
-                "methodName": "handleIntervalSkip"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "wmUserIsTabbing",
-                "method": "toggleTabbingOn",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "wmUserIsNotTabbing",
-                "method": "toggleTabbingOff",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }];
-    }
+        return (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 (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 (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 (h("div", { class: "hover-area-wrapper", style: hoverAreaStyle, onMouseLeave: () => (this.displayedPopover = -1) }, this.xIntervals.map((_, idx) => (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 (h("div", { ref: (el) => (this.popoverEl = el), class: "popover", style: popoverStyle }, h("div", { class: "title" }, displayedPopoverData[0].xValue, this.parsedUnits[0] && h("span", { class: "unit --x" }, "(", this.parsedUnits[0], ")")), this.showDeltas && this.displayedPopover > 0 && (h("div", { class: "comparison-title" }, lineChartMessages.getChangeSince(this.popoverData[this.displayedPopover - 1][0].xValue))), this.renderPopoverTable()));
+  }
+  renderPopoverTable() {
+    const displayedPopoverData = this.popoverData[this.displayedPopover];
+    return (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 (h("tr", { class: "popover-row" }, h("td", null, this.renderIcon(lineIdx)), h("td", { class: "row-label" }, lineLabel), h("td", { class: "row-value" }, yValue === null ? lineChartMessages.noData : localizedYValue, yValue !== null && this.parsedUnits[1] && 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 && h("td", { class: `delta --${deltaColor}` }, delta);
+  }
+  renderHoverIndicator() {
+    const xPosition = this.dataPointMatrix[0][this.displayedPopover].xPositionPercent;
+    const indicatorStyle = { "--xPosition": xPosition + "%" };
+    return 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 h("div", { class: "highlight", style: highlightStyle });
+  }
+  render() {
+    return (h(Host, { onBlur: () => this.resetDataPointFocus(), onMouseLeave: () => (this.displayedPopover = -1) }, h("div", { class: "component-wrapper", role: "application", "aria-roledescription": chartMessages.interactiveChart, "aria-label": this.label, "aria-describedby": "chart-description" }, this.renderLegend(), h("div", { class: "chart-wrapper" }, h("div", { class: "chart-label --y-axis", style: { "--labelWidth": this.labelWidth } }, this.yAxisLabel, this.parsedUnits[1] && ` (${this.parsedUnits[1]})`), this.renderYIntervals(), 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(), h("div", { class: "chart-label --x-axis" }, this.xAxisLabel, this.parsedUnits[0] && ` (${this.parsedUnits[0]})`)), h("div", { id: "chart-description", class: "sr-only" }, `${lineChartMessages.instructions} ${this.description}`), h("div", { ref: (el) => (this.liveRegionEl = el), "aria-live": "polite", class: "sr-only" }, this.announcement))));
+  }
+  static get is() { return "wm-line-chart"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["wm-line-chart.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["wm-line-chart.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "description",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "xAxisLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "x-axis-label",
+        "reflect": false
+      },
+      "yAxisLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "y-axis-label",
+        "reflect": false
+      },
+      "lineData": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "line-data",
+        "reflect": true
+      },
+      "units": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "units",
+        "reflect": false,
+        "defaultValue": "\"null,null\""
+      },
+      "labelWidth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label-width",
+        "reflect": false,
+        "defaultValue": "\"120px\""
+      },
+      "highlightQualifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "highlight-qualifier",
+        "reflect": false,
+        "defaultValue": "\"highlighted\""
+      },
+      "highlightStart": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "highlight-start",
+        "reflect": false
+      },
+      "highlightEnd": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "highlight-end",
+        "reflect": false
+      },
+      "visibilityToggles": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "visibility-toggles",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "showDeltas": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-deltas",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "yRange": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "y-range",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "parsedLineData": {},
+      "displayedPopover": {},
+      "focusedLine": {},
+      "hiddenLines": {},
+      "isTabbing": {},
+      "intervalSkip": {},
+      "announcement": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "lineData",
+        "methodName": "parseData"
+      }, {
+        "propName": "intervalSkip",
+        "methodName": "handleIntervalSkip"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "wmUserIsTabbing",
+        "method": "toggleTabbingOn",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "wmUserIsNotTabbing",
+        "method": "toggleTabbingOff",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }