npm - @watermarkinsights/ripple - Versions diffs - 5.11.0-1 → 5.11.0-11 - Mend

@watermarkinsights/ripple 5.11.0-1 → 5.11.0-11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (430) hide show

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

@@ -0,0 +1,176 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("wm-line-chart", () => {
+    let page;
+    async function createPageHelper() {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+    <wm-line-chart
+          label="Regional Job Trends"
+          description="View job trends for your region compared to national tends from the past 3 years with a 3 year projection"
+          x-axis-label="Year"
+          y-axis-label="Change Since 2020"
+          line-data='{"Regional": {"2020": 5, "2021": 10, "2022": 13, "2023": null, "2024": 20, "2025": 23, "2026": 25, "2027": 32, "2028": 35, "2029": 40, "2030": 42, "2031": 52, "2032": 54, "2033": 61}, "National": {"2020": 8, "2021": 13, "2022": 16, "2023": 21, "2024": 23, "2025": 26, "2026": 28, "2027": 29, "2028": 32, "2029": 35, "2030": 39, "2031": 49, "2032": 51, "2033": 58} }'
+          units="year,%"
+          show-deltas="true"
+          y-range="0,25,50,75,100"
+          highlight-start="2026"
+          visibility-toggles="true"
+        >
+        </wm-line-chart>
+  </main></body></html>`);
+    }
+    it("passes Axe tests", async () => {
+        await createPageHelper();
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("has keyboard navigation for legend", async () => {
+        await createPageHelper();
+        // first focus goes to first button
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        let activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        await page.waitForChanges();
+        expect(activeElId).toBe("visibility-button-0");
+        // wraps right
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        await page.waitForChanges();
+        expect(activeElId).toBe("visibility-button-1");
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        await page.waitForChanges();
+        expect(activeElId).toBe("visibility-button-0");
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        await page.waitForChanges();
+        expect(activeElId).toBe("visibility-button-1");
+        // wraps left
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        await page.waitForChanges();
+        expect(activeElId).toBe("visibility-button-0");
+    });
+    it("has keyboard navigation for data points", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+    <wm-line-chart
+          label="Regional Job Trends"
+          description="View job trends for your region compared to national tends from the past 3 years with a 3 year projection"
+          x-axis-label="Year"
+          y-axis-label="Change Since 2020"
+          line-data='{"Regional": {"2020": 5, "2021": 10, "2022": 13}, "National": {"2020": 8, "2021": null, "2022": 16}}'
+          y-range="0,25,50,75,100"
+        >
+        </wm-line-chart>
+  </main></body></html>`);
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        let activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-0");
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        await page.waitForChanges();
+        expect(activeElId).toBe("Regional-1");
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-2");
+        // wraps left
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-0");
+        // wraps Left
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-2");
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-1");
+        // next line
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("National-0");
+        // skips null data point
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("National-2");
+        // wraps to first line
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-0");
+        // wraps to last line
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("National-0");
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-0");
+    });
+    it("visibility toggle hides lines, data points are skipped by navigation", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+    <wm-line-chart
+          label="Regional Job Trends"
+          description="View job trends for your region compared to national tends from the past 3 years with a 3 year projection"
+          x-axis-label="Year"
+          y-axis-label="Change Since 2020"
+          line-data='{"Regional": {"2020": 5, "2021": 10, "2022": 13}, "National": {"2020": 8, "2021": 12, "2022": 16}, "International": {"2020": 8, "2021": 12, "2022": 16}}'
+          visibility-toggles="true"
+        >
+        </wm-line-chart>
+  </main></body></html>`);
+        const allLineEls = await page.findAll("wm-line-chart >>> .line");
+        expect(allLineEls[0]).not.toHaveClass("hidden");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        // Enter key toggles button
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(allLineEls[0]).toHaveClass("hidden");
+        // Space key toggles button
+        await page.keyboard.press("Space");
+        await page.waitForChanges();
+        expect(allLineEls[0]).not.toHaveClass("hidden");
+        await page.keyboard.press("Space");
+        await page.waitForChanges();
+        expect(allLineEls[0]).toHaveClass("hidden");
+        // tab focuses first visible data point
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        let activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("National-0");
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("International-0");
+        // data point nav skips hidden line
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("National-0");
+        // data point nav skips hidden line
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("International-0");
+    });
+});

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

@@ -11,13 +11,13 @@ export class LineChart {
         this.displayedXIntervals = [];
         this.yIntervals = [];
         this.lineStyles = [
-            { color: "#8b86ca", icon: "f536" }, // lavender, triangle
-            { color: "#2e1b46", icon: "f12f" }, // midnight, circle
-            { color: "#0089e4", icon: "f763" }, // blue, square
-            { color: "#088000", icon: "f4ce" }, // forest, star
-            { color: "#ea8500", icon: "f70a" }, // orange, rhombus
-            { color: "#d54f41", icon: "f536" }, // red, upside down triangle
-            { color: "#146ca9", icon: "f6ff" }, // blue, upside down triangle
+            { color: "#8b86ca", icon: "triangle" },
+            { color: "#2e1b46", icon: "circle" },
+            { color: "#0089e4", icon: "square" },
+            { color: "#088000", icon: "star" },
+            { color: "#ea8500", icon: "rhombus" },
+            { color: "#d54f41", icon: "triangle-inverted" },
+            { color: "#146ca9", icon: "pentagon" }, // blue
         ];
         this.debouncedResize = debounce(async () => {
             this.displayedXIntervals = this.determineDisplayedXIntervals();
@@ -301,16 +301,11 @@ export class LineChart {
         })));
     }
     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.popoverIndex = -1) }));
+        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 ? "#hide" : "#show", onClick: () => this.toggleLineVisibility(lineIdx), onKeyDown: (ev) => this.handleVisibilityToggleKeydown(ev, lineIdx), onFocus: () => (this.popoverIndex = -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 });
+        return h("div", { style: { color: color }, class: `svg-icon svg-shape-${icon}` });
     }
     renderXIntervals() {
         const gridStyle = {
@@ -336,11 +331,9 @@ export class LineChart {
                 const { color, icon } = this.lineStyles[lineIdx];
                 const firstPointTabIndex = lineIdx === 0 && pointIdx === 0 ? 0 : undefined;
                 const iconStyle = {
-                    "--icon": `"\\${icon}"`,
-                    "--iconColor": color,
+                    color: 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) {
@@ -348,7 +341,7 @@ export class LineChart {
                     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-pointidx": pointIdx, "data-xvalue": xValue, onKeyDown: (ev) => this.handleDataPointKeydown(ev), onFocus: () => (this.popoverIndex = pointIdx), onClick: (ev) => this.focusDataPointByEl(ev.target), onMouseEnter: () => (this.popoverIndex = pointIdx) }));
+                return (h("span", { id: `${lineLabel}-${pointIdx}`, role: "img", "aria-label": ariaLabel, tabIndex: firstPointTabIndex, class: `point svg-icon svg-shape-${icon}`, style: iconStyle, "data-lineidx": lineIdx, "data-pointidx": pointIdx, "data-xvalue": xValue, onKeyDown: (ev) => this.handleDataPointKeydown(ev), onFocus: () => (this.popoverIndex = pointIdx), onClick: (ev) => this.focusDataPointByEl(ev.target), onMouseEnter: () => (this.popoverIndex = pointIdx) }, h("span", { class: `point-bg svg-icon svg-shape-${icon}` })));
             }
         })));
     }
@@ -403,7 +396,7 @@ export class LineChart {
             popoverStyle = {
                 "--leftPosition": `0%`,
                 "--topPosition": "0%",
-                maxWidth: Math.min(this.el.clientWidth - 2, 400) + "px", // take up no more max-width than is visually available
+                maxWidth: Math.min(this.el.clientWidth - 2, 400) + "px",
                 transform: `translateX(calc(${displaceLeft}))`, // align with left edge of component
             };
         }
@@ -443,9 +436,9 @@ export class LineChart {
         return h("div", { class: "highlight", style: highlightStyle });
     }
     render() {
-        return (h(Host, { key: '5a7e6e4c3e644053ad733255c7973d5554a82923', onBlur: () => this.resetDataPointFocus(), onMouseLeave: () => (this.popoverIndex = -1) }, h("div", { key: '6fa6f50f75654c7959b24d5a1e0a16f91e1e265d', class: "component-wrapper", role: "application", "aria-roledescription": chartMessages.interactiveChart, "aria-label": this.label, "aria-describedby": "chart-description" }, this.renderLegend(), h("div", { key: '21e0e796d079678eb8b9012907491a014fb6d0c6', class: "chart-wrapper" }, h("div", { key: '3f9306f5d4f4a7a35187669dd0526d6ed8839521', class: "chart-label --y-axis", style: { "--labelWidth": this.labelWidth } }, this.yAxisLabel, this.parsedUnits[1] && ` (${this.parsedUnits[1]})`), this.renderYIntervals(), h("div", { key: '15e94d7886b6aa320a83cb8352655c4e65dba13b', ref: (el) => (this.plotAreaEl = el), class: `plot-area ${this.hasPartialInterval ? "" : "right-border"}`, style: {
+        return (h(Host, { onBlur: () => this.resetDataPointFocus(), onMouseLeave: () => (this.popoverIndex = -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.popoverIndex !== -1 && this.renderHoverIndicator(), this.popoverIndex !== -1 && this.renderPopover(), this.renderXIntervals(), h("div", { key: 'd30088ab428ec61c9ee395d0ca30876422ffab15', class: "chart-label --x-axis" }, this.xAxisLabel, this.parsedUnits[0] && ` (${this.parsedUnits[0]})`)), h("div", { key: 'dd89ddbb408b35625315be2c77257a9c76f93557', id: "chart-description", class: "sr-only" }, `${lineChartMessages.instructions} ${this.description}`), h("div", { key: '153a8e77d758fe3161c0f2ca0a722de8753ec217', ref: (el) => (this.liveRegionEl = el), "aria-live": "polite", class: "sr-only" }, this.announcement))));
+            } }, this.highlightStart && this.renderHighlight(), this.renderData(), this.renderHoverAreas()), this.popoverIndex !== -1 && this.renderHoverIndicator(), this.popoverIndex !== -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"; }

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

@@ -0,0 +1,163 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { LineChart } from "./wm-line-chart";
+// import * as globalFuncs from "../../../global/functions";
+// jest.spyOn(globalFuncs, "generateId");
+// // @ts-ignore
+// globalFuncs.generateId.mockImplementation(() => "random-id");
+// mock ResizeObserver
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}));
+async function createPageHelper() {
+    return await newSpecPage({
+        components: [LineChart],
+        html: `<wm-line-chart
+    label="Regional Job Trends"
+    description="View job trends for your region compared to national tends from the past 3 years with a 3 year projection"
+    x-axis-label="Year"
+    y-axis-label="Change Since 2020"
+    line-data='{"Regional": {"2020": 5, "2021": 10, "2022": 13, "2023": null, "2024": 20, "2025": 23, "2026": 25, "2027": 32, "2028": 35, "2029": 40, "2030": 42, "2031": 52, "2032": 54, "2033": 61}, "National": {"2020": 8, "2021": 13, "2022": 16, "2023": 21, "2024": 23, "2025": 26, "2026": 28, "2027": 29, "2028": 32, "2029": 35, "2030": 39, "2031": 49, "2032": 51, "2033": 58} }'
+    units="year,%"
+    show-deltas="true"
+    y-range="0,25,50,75,100"
+    highlight-start="2026"
+  >
+  </wm-line-chart>`,
+    });
+}
+describe("Line Chart", () => {
+    let page;
+    it("builds", async () => {
+        page = await createPageHelper();
+        expect(page.root).toMatchSnapshot();
+    });
+    it("has proper aria properties and attributes", async () => {
+        page = await createPageHelper();
+        const componentWrapperEl = await page.root.shadowRoot.querySelector(".component-wrapper");
+        expect(componentWrapperEl).toEqualAttribute("role", "application");
+        expect(componentWrapperEl).toEqualAttribute("aria-roledescription", "Interactive chart");
+        expect(componentWrapperEl).toEqualAttribute("aria-label", "Regional Job Trends");
+        expect(componentWrapperEl).toEqualAttribute("aria-describedby", "chart-description");
+        const firstPointEl = await page.root.shadowRoot.querySelector(".point");
+        expect(firstPointEl).toEqualAttribute("role", "img");
+    });
+    it("plots all non-null data points", async () => {
+        page = await newSpecPage({
+            components: [LineChart],
+            html: `<wm-line-chart
+      label="Regional Job Trends"
+      description="View job trends for your region compared to national tends from the past 3 years with a 3 year projection"
+      x-axis-label="Year"
+      y-axis-label="Change Since 2020"
+      line-data='{"Regional": {"2020": 5, "2021": 10, "2022": 13, "2023": 15, "2024": 20}, "National": {"2020": 8, "2021": 13, "2022": null, "2023": 21, "2024": 23}, "International": {"2020": 8, "2021": null, "2022": null, "2023": 21, "2024": 23} }'
+    >
+    </wm-line-chart>`,
+        });
+        const allPointEls = await page.root.shadowRoot.querySelectorAll(".point");
+        const allLineEls = await page.root.shadowRoot.querySelectorAll(".line");
+        const firstLinePointEls = await allLineEls[0].querySelectorAll(".point");
+        const firstLineLineEls = await allLineEls[0].querySelectorAll("line");
+        const secondLinePointEls = await allLineEls[1].querySelectorAll(".point");
+        const secondLineLineEls = await allLineEls[1].querySelectorAll("line");
+        const thirdLinePointEls = await allLineEls[2].querySelectorAll(".point");
+        const thirdLineLineEls = await allLineEls[2].querySelectorAll("line");
+        // each line has 5 intervals
+        // first line has 0 nulls
+        // second line has 1 null
+        // third line has 2 nulls
+        expect(allPointEls.length).toBe(12);
+        expect(firstLinePointEls.length).toBe(5);
+        expect(firstLineLineEls.length).toBe(4);
+        expect(secondLinePointEls.length).toBe(4);
+        expect(secondLineLineEls.length).toBe(2);
+        expect(thirdLinePointEls.length).toBe(3);
+        expect(thirdLineLineEls.length).toBe(1);
+    });
+    it("calculates deltas correctly", async () => {
+        const component = await new LineChart();
+        let previousPoint = {
+            lineLabel: "fake label",
+            xValue: "2020",
+            yValue: 999,
+            xPositionPercent: 0,
+            yPositionPercent: 10,
+            highlighted: false,
+        };
+        let currentPoint = {
+            lineLabel: "fake label",
+            xValue: "2021",
+            yValue: 999,
+            xPositionPercent: 20,
+            yPositionPercent: 12,
+            highlighted: false,
+        };
+        previousPoint.yValue = 10;
+        currentPoint.yValue = 12;
+        expect(component.calcDelta(currentPoint, previousPoint)).toBe("+20%");
+        previousPoint.yValue = 10;
+        currentPoint.yValue = 7;
+        expect(component.calcDelta(currentPoint, previousPoint)).toBe("-30%");
+        previousPoint.yValue = 12;
+        currentPoint.yValue = 10;
+        expect(component.calcDelta(currentPoint, previousPoint)).toBe("-16.67%");
+        previousPoint.yValue = 0;
+        currentPoint.yValue = 1;
+        expect(component.calcDelta(currentPoint, previousPoint)).toBe("-");
+        previousPoint.yValue = 17;
+        currentPoint.yValue = 0;
+        expect(component.calcDelta(currentPoint, previousPoint)).toBe("-100%");
+    });
+    it("uses label-width to set y-axis label width", async () => {
+        page = await newSpecPage({
+            components: [LineChart],
+            html: `<wm-line-chart
+      label="Regional Job Trends"
+      description="View job trends for your region compared to national tends from the past 3 years with a 3 year projection"
+      x-axis-label="Year"
+      y-axis-label="Change Since 2020"
+      line-data='{"Regional": {"2020": 5, "2021": 10, "2022": 13, "2023": null, "2024": 20, "2025": 23, "2026": 25, "2027": 32, "2028": 35, "2029": 40, "2030": 42, "2031": 52, "2032": 54, "2033": 61}, "National": {"2020": 8, "2021": 13, "2022": 16, "2023": 21, "2024": 23, "2025": 26, "2026": 28, "2027": 29, "2028": 32, "2029": 35, "2030": 39, "2031": 49, "2032": 51, "2033": 58} }'
+    >
+    </wm-line-chart>`,
+        });
+        let yAxisLabel = await page.root.shadowRoot.querySelector(".--y-axis");
+        expect(yAxisLabel.style.cssText).toBe("--labelWidth: 120px;");
+        page = await newSpecPage({
+            components: [LineChart],
+            html: `<wm-line-chart
+      label="Regional Job Trends"
+      description="View job trends for your region compared to national tends from the past 3 years with a 3 year projection"
+      x-axis-label="Year"
+      y-axis-label="Change Since 2020"
+      line-data='{"Regional": {"2020": 5, "2021": 10, "2022": 13, "2023": null, "2024": 20, "2025": 23, "2026": 25, "2027": 32, "2028": 35, "2029": 40, "2030": 42, "2031": 52, "2032": 54, "2033": 61}, "National": {"2020": 8, "2021": 13, "2022": 16, "2023": 21, "2024": 23, "2025": 26, "2026": 28, "2027": 29, "2028": 32, "2029": 35, "2030": 39, "2031": 49, "2032": 51, "2033": 58} }'
+      label-width="23%"
+    >
+    </wm-line-chart>`,
+        });
+        yAxisLabel = await page.root.shadowRoot.querySelector(".--y-axis");
+        expect(yAxisLabel.style.cssText).toBe("--labelWidth: 23%;");
+    });
+    it("sets custom y-range if provided, abbreviates y-axis numbers of thousands", async () => {
+        page = await newSpecPage({
+            components: [LineChart],
+            html: `<wm-line-chart
+      label="Regional Job Trends"
+      description="View job trends for your region compared to national tends from the past 3 years with a 3 year projection"
+      x-axis-label="Year"
+      y-axis-label="Change Since 2020"
+      line-data='{"Regional": {"2020": -10000, "2021": 10900, "2022": 40200} }'
+      y-range="-13300,0,100,10000,20945,30099,40520"
+    >
+    </wm-line-chart>`,
+        });
+        const yIntervals = await page.root.shadowRoot.querySelectorAll(".y-interval");
+        expect(yIntervals[0].textContent).toBe("40.5K");
+        expect(yIntervals[1].textContent).toBe("30.1K");
+        expect(yIntervals[2].textContent).toBe("20.9K");
+        expect(yIntervals[3].textContent).toBe("10K");
+        expect(yIntervals[4].textContent).toBe("100");
+        expect(yIntervals[5].textContent).toBe("0");
+        expect(yIntervals[6].textContent).toBe("-13.3K");
+    });
+});