@watermarkinsights/ripple 5.3.0-9 → 5.3.1-0

package/dist/collection/components/charts/screenshots.e2e.js

@@ -0,0 +1,96 @@
+import { newE2EPage } from "@stencil/core/testing";
+// split into different tests because screenshot functionality currently has a non-customizable, 600x600px viewport
+// see https://stenciljs.com/docs/screenshot-visual-diff
+describe("wm-chart", () => {
+    it("doughnut1 doesn't change", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<wm-chart id="doughnut1" chart-type="doughnut1" label="Type: doughnut1">
+      <wm-chart-slice amount="9" legend="Direct" popover-title="9/10" popover-text="Direct Measures"></wm-chart-slice>
+      <wm-chart-slice amount="1" legend="Indirect" popover-title="1/10" popover-text="Indirect Measures"></wm-chart-slice>
+      <wm-chart-slice amount="0" legend="Unspecified" popover-title="0/10" popover-text="Unspecified Measures"></wm-chart-slice>
+    </wm-chart>`);
+        const results = await page.compareScreenshot();
+        expect(results).toMatchScreenshot({ allowableMismatchedPixels: 10 });
+    });
+    it("doughnut2 & doughnut2b don't change", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<wm-chart id="doughnut2" chart-type="doughnut2" label="Type: doughnut2">
+      <wm-chart-slice amount="4" legend="Met" popover-title="4/15" popover-text="Objectives Met" popover-button-text="Direct Details"></wm-chart-slice>
+      <wm-chart-slice amount="5" legend="Not Met" popover-title="5/15" popover-text="Objectives Not Met" popover-button-text="Indirect Details"></wm-chart-slice>
+      <wm-chart-slice amount="6" legend="Not started" popover-title="6/15" popover-text="Objectives Not Started"></wm-chart-slice>
+    </wm-chart>
+
+    <wm-chart id="doughnut2b" chart-type="doughnut2" label="Type: doughnut2">
+      <wm-chart-slice amount="10" legend="Low Risk" popover-title="10/200" popover-text="Students at Low Risk"></wm-chart-slice>
+      <wm-chart-slice amount="115" legend="Medium Risk" popover-title="115/200" popover-text="Students at Medium Risk"></wm-chart-slice>
+      <wm-chart-slice amount="35" legend="High Risk" popover-title="35/200" popover-text="Students at High Risk"></wm-chart-slice>
+      <wm-chart-slice amount="40" legend="Not Indicated" popover-title="40/200" popover-text="Students Not Indicated"></wm-chart-slice>
+    </wm-chart>`);
+        const results = await page.compareScreenshot();
+        expect(results).toMatchScreenshot({ allowableMismatchedPixels: 10 });
+    });
+    it("doughnut3 doesn't change", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<wm-chart id="doughnut3" chart-type="doughnut3" label="Type: doughnut3">
+      <wm-chart-slice amount="1" legend="Non risus" popover-title="1/15" popover-text="Lorem"></wm-chart-slice>
+      <wm-chart-slice amount="2" legend="Non mi mattis" popover-title="2/15" popover-text="Ispum"></wm-chart-slice>
+      <wm-chart-slice amount="3" legend="Pulvinar" popover-title="3/15" popover-text="Dolor sit amet"></wm-chart-slice>
+      <wm-chart-slice amount="4" legend="Cras ut" popover-title="4/15" popover-text="Consectetur"></wm-chart-slice>
+      <wm-chart-slice amount="1" legend="Dui congue" popover-title="1/15" popover-text="Adipiscing elit"></wm-chart-slice>
+      <wm-chart-slice amount="2" legend="Ante faucibus" popover-title="2/15" popover-text="Duis vitae dapidus erat"></wm-chart-slice>
+      <wm-chart-slice amount="3" legend="Finibus" popover-title="3/15" popover-text="Cras"></wm-chart-slice>
+    </wm-chart>`);
+        const results = await page.compareScreenshot();
+        expect(results).toMatchScreenshot({ allowableMismatchedPixels: 10 });
+    });
+    it("bar2-5 don't change", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+  <wm-chart chart-type="bar2" label="An Example of a bar2 Chart" value-format="percentage">
+    <wm-chart-slice amount="4" legend="Not Started" popover-title="4/10" popover-text="Outcomes Not Started"></wm-chart-slice>
+    <wm-chart-slice amount="3" legend="In Progress" popover-title="3/10" popover-text="Outcomes In Progress"></wm-chart-slice>
+    <wm-chart-slice amount="1" legend="Met" popover-title="1/10" popover-text="Outcomes Met"></wm-chart-slice>
+    <wm-chart-slice amount="2" legend="Not Met" popover-title="2/10" popover-text="Outcomes Not Met"></wm-chart-slice>
+  </wm-chart>
+
+  <wm-chart chart-type="bar3" label="An Example of a bar3 Chart" value-format="percentage">
+    <wm-chart-slice amount="1" legend="Exceeded" popover-title="1/10" popover-text="Outcomes Exceeded" popover-button-text="Exceeded Details"></wm-chart-slice>
+    <wm-chart-slice amount="2" legend="Met" popover-title="2/10" popover-text="Outcomes Met" popover-button-text="Met Details"></wm-chart-slice>
+    <wm-chart-slice amount="3" legend="Approached" popover-title="3/10" popover-text="Outcomes Approached"></wm-chart-slice>
+    <wm-chart-slice amount="4" legend="Not Met" popover-title="4/10" popover-text="Outcomes Not Met"></wm-chart-slice>
+  </wm-chart>
+
+  <wm-chart chart-type="bar4" label="An Example of a bar4 Chart" value-format="none">
+    <wm-chart-slice amount="1" legend="Not started" popover-title="1/10" popover-text="Outcomes Not Started"></wm-chart-slice>
+    <wm-chart-slice amount="3" legend="In Progress" popover-title="3/10" popover-text="Outcomes In Progress"></wm-chart-slice>
+    <wm-chart-slice amount="6" legend="Completed" popover-title="6/10" popover-text="Completed Outcomes"></wm-chart-slice>
+  </wm-chart>
+
+  <wm-chart chart-type="bar5" label="An Example of a bar5 Chart" value-format="amount">
+    <wm-chart-slice amount="1" legend="Non risus" popover-title="1/15" popover-text="Lorem"></wm-chart-slice>
+    <wm-chart-slice amount="2" legend="Non mi mattis" popover-title="2/15" popover-text="Ispum"></wm-chart-slice>
+    <wm-chart-slice amount="3" legend="Pulvinar" popover-title="3/15" popover-text="Dolor sit amet"></wm-chart-slice>
+    <wm-chart-slice amount="4" legend="Cras ut" popover-title="4/15" popover-text="Consectetur"></wm-chart-slice>
+    <wm-chart-slice amount="1" legend="Dui congue" popover-title="1/15" popover-text="Adipiscing elit"></wm-chart-slice>
+    <wm-chart-slice amount="2" legend="Ante faucibus" popover-title="2/15" popover-text="Duis vitae dapidus erat"></wm-chart-slice>
+    <wm-chart-slice amount="3" legend="Finibus" popover-title="3/15" popover-text="Cras"></wm-chart-slice>
+  </wm-chart>`);
+        const results = await page.compareScreenshot();
+        expect(results).toMatchScreenshot({ allowableMismatchedPixels: 10 });
+    });
+    it("progress monitor doesn't change", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<wm-progress-monitor id="organization-progress" group-legend="Complete,Incomplete">
+  <wm-progress-indicator label="Learning Outcomes">
+    <wm-progress-slice amount="12" popover-title="12/20" popover-text="Organizations with outcomes" legend="Created"></wm-progress-slice>
+    <wm-progress-slice amount="8" popover-title="8/20" popover-text="Organizations without outcomes" legend="Not created"></wm-progress-slice>
+  </wm-progress-indicator>
+  <wm-progress-indicator label="Mapped to ILOs" completion-message="All mapped!">
+    <wm-progress-slice amount="20" popover-title="20/20" popover-text="Programs with a curriculum map" legend="Mapped"></wm-progress-slice>
+    <wm-progress-slice amount="0" popover-title="0/20" popover-text="Programs without a curriculum map" legend="Not mapped"></wm-progress-slice>
+  </wm-progress-indicator>
+</wm-progress-monitor>`);
+        const results = await page.compareScreenshot();
+        expect(results).toMatchScreenshot({ allowableMismatchedPixels: 10 });
+    });
+});

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

@@ -0,0 +1,213 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("wm-chart", () => {
+    let page, 
+    // @ts-ignore for some reason ts says it's unused
+    component, 
+    // slices: NodeList,
+    paths, svg;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-chart label="the label"><wm-chart-slice amount="70" legend="Created"></wm-chart-slice><wm-chart-slice amount="2" legend="Not Created"></wm-chart-slice></wm-chart>
+      </main></body></html>`);
+        component = await page.find("wm-chart");
+        svg = await page.find("wm-chart >>> svg");
+        // slices = await page.findAll("wm-chart-slice");
+        paths = await page.findAll("wm-chart >>> path");
+    });
+    it("passes Axe tests", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("renders", async () => {
+        expect(svg).toBeTruthy();
+    });
+    it("renders the right amount of slices and text", async () => {
+        let tmpPage = await newE2EPage();
+        await tmpPage.setContent(`<wm-chart label="the label">
+      <wm-chart-slice amount="100" legend="Created"></wm-chart-slice>
+      <wm-chart-slice amount="123" legend="Created"></wm-chart-slice>
+      <wm-chart-slice amount="0" legend="Maybe Created"></wm-chart-slice>
+      </wm-chart>`);
+        let tmpSlices = await tmpPage.findAll("wm-chart-slice");
+        let tmpPaths = await tmpPage.findAll("wm-chart >>> path");
+        let tmpTexts = await tmpPage.findAll("wm-chart >>> text.value");
+        expect(tmpSlices.length).toEqual(3);
+        // slices rendered even if amount === 0 for accessibility reasons
+        expect(tmpPaths.length).toEqual(tmpSlices.length);
+        expect(tmpTexts.length).toEqual(tmpSlices.length - 1);
+    });
+    it("hides clustered small numbers", async () => {
+        // rule: num < 4 && either neighbor < 5
+        let page = await newE2EPage();
+        await page.setContent(`<wm-chart id="one" label="the label" chart-type="doughnut3">
+        <wm-chart-slice amount="75" legend="A"></wm-chart-slice> // 89%
+        <wm-chart-slice amount="5" legend="B"></wm-chart-slice> // 6%
+        <wm-chart-slice amount="4" legend="C"></wm-chart-slice> // 5%
+      </wm-chart>
+      <wm-chart id="two" label="the label" chart-type="doughnut3">
+        <wm-chart-slice amount="65" legend="A"></wm-chart-slice> // 69%
+        <wm-chart-slice amount="14" legend="B"></wm-chart-slice> // 15%
+        <wm-chart-slice amount="4" legend="C"></wm-chart-slice> // 4%
+        <wm-chart-slice amount="4" legend="D"></wm-chart-slice> // 4%
+        <wm-chart-slice amount="4" legend="E"></wm-chart-slice> // 4%
+        <wm-chart-slice amount="3" legend="F"></wm-chart-slice> // 3%
+      </wm-chart>
+      <wm-chart id="three" label="the label" chart-type="doughnut3">
+        <wm-chart-slice amount="83" legend="A"></wm-chart-slice> // 83%
+        <wm-chart-slice amount="7" legend="B"></wm-chart-slice> // 7%
+        <wm-chart-slice amount="6" legend="C"></wm-chart-slice> // 6%
+        <wm-chart-slice amount="3" legend="D"></wm-chart-slice> // 3%
+        <wm-chart-slice amount="1" legend="E"></wm-chart-slice> // 1%
+        <wm-chart-slice amount="0" legend="F"></wm-chart-slice> // 0%
+      </wm-chart>`);
+        let [one, two, three] = await page.findAll("wm-chart");
+        let oneSlices = await one.findAll("wm-chart-slice");
+        let onePaths = await page.findAll("#one >>> path");
+        let oneTexts = await page.findAll("#one >>> text.value");
+        expect(onePaths.length).toEqual(oneSlices.length);
+        // All vals should show incl. small ones
+        // (they are not neighbors to other small vals)
+        expect(oneTexts.length).toEqual(oneSlices.length);
+        let twoSlices = await two.findAll("wm-chart-slice");
+        let twoPaths = await page.findAll("#two >>> path");
+        let twoTexts = await page.findAll("#two >>> text.value");
+        expect(twoPaths.length).toEqual(twoSlices.length);
+        // 1 small val should be hidden (3%)
+        // because it is < 4 and has a neighbor < 5
+        expect(twoTexts.length).toEqual(twoSlices.length - 1);
+        let threeSlices = await three.findAll("wm-chart-slice");
+        let threePaths = await page.findAll("#three >>> path");
+        let threeTexts = await page.findAll("#three >>> text.value");
+        // 3 small values should be hidden
+        expect(threePaths.length).toEqual(threeSlices.length);
+        expect(threeTexts.length).toEqual(threeSlices.length - 3);
+    });
+    it("handles percentages less than 1", async () => {
+        let page = await newE2EPage();
+        await page.setContent(`<wm-chart id="one" label="the label" chart-type="doughnut3">
+      // total 284
+        <wm-chart-slice amount="209" legend="A"></wm-chart-slice> // 74%
+        <wm-chart-slice amount="40" legend="B"></wm-chart-slice> // 14%
+        <wm-chart-slice amount="20" legend="C"></wm-chart-slice> // 7%
+        <wm-chart-slice amount="14" legend="D"></wm-chart-slice> // 5%
+        <wm-chart-slice amount="1" legend="E"></wm-chart-slice> // <1%
+      </wm-chart>
+      <wm-chart id="two" label="the label" chart-type="doughnut3">
+      // total 284
+        <wm-chart-slice amount="209" legend="A"></wm-chart-slice> // 73%
+        <wm-chart-slice amount="40" legend="B"></wm-chart-slice> // 14%
+        <wm-chart-slice amount="34" legend="C"></wm-chart-slice> // 12%
+        <wm-chart-slice amount="1" legend="D"></wm-chart-slice> // <1%
+      </wm-chart>`);
+        let [one, two] = await page.findAll("wm-chart");
+        let oneSlices = await one.findAll("wm-chart-slice");
+        let onePaths = await page.findAll("#one >>> path");
+        let oneTexts = await page.findAll("#one >>> text.value");
+        expect(oneSlices.length).toEqual(5);
+        // All paths are rendered
+        expect(onePaths.length).toEqual(oneSlices.length);
+        // E should be hidden because it borders a percentage < 8
+        expect(oneTexts.length).toEqual(oneSlices.length - 1);
+        let twoSlices = await two.findAll("wm-chart-slice");
+        let twoPaths = await page.findAll("#two >>> path");
+        let twoTexts = await page.findAll("#two >>> text.value");
+        expect(twoSlices.length).toEqual(4);
+        // All paths are rendered
+        expect(twoPaths.length).toEqual(twoSlices.length);
+        // Even D should be visible because it borders a percentage > 8
+        expect(twoTexts.length).toEqual(twoSlices.length);
+    });
+    it("sets the subinfo value", async () => {
+        const comp = await page.find("wm-chart");
+        comp.setProperty("subinfo", "subinfo text");
+        await page.waitForChanges();
+        const subinfo = await page.find("wm-chart >>> .subinfo");
+        expect(subinfo.textContent).toEqual("subinfo text");
+    });
+    it("changes the display values", async () => {
+        // type bar2 and bar3
+        const tmpPage = await newE2EPage();
+        await tmpPage.setContent(`<wm-chart id="bar2chart" chart-type="bar2" label="the label" value-format="percentage"><wm-chart-slice amount="10" legend="Created"></wm-chart-slice><wm-chart-slice amount="10" legend="Not Created"></wm-chart-slice></wm-chart>
+      <wm-chart id="bar3chart" chart-type="bar3" label="the label" value-format="amount"><wm-chart-slice amount="70" legend="Created"></wm-chart-slice><wm-chart-slice amount="10" legend="Not Created"></wm-chart-slice></wm-chart>`);
+        await tmpPage.waitForChanges();
+        const bar2val = await tmpPage.findAll("#bar2chart >>> .value");
+        expect(bar2val[0].textContent).toEqual("50%");
+        const bar3val = await tmpPage.findAll("#bar3chart >>> .value");
+        expect(bar3val[0].textContent).toEqual("70");
+    });
+    it("handles Arrows and Tab keys", async () => {
+        const componentWrapper = await page.find("wm-chart >>> .component-wrapper");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        paths = await page.findAll("wm-chart >>> path");
+        expect(componentWrapper).toEqualAttribute("tabindex", "-1");
+        expect(paths[0]).toEqualAttribute("tabindex", "0");
+        expect(paths[1]).toEqualAttribute("tabindex", "-1");
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        paths = await page.findAll("wm-chart >>> path");
+        expect(componentWrapper).toEqualAttribute("tabindex", "-1");
+        expect(paths[0]).toEqualAttribute("tabindex", "-1");
+        expect(paths[1]).toEqualAttribute("tabindex", "0");
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        paths = await page.findAll("wm-chart >>> path");
+        expect(componentWrapper).toEqualAttribute("tabindex", "-1");
+        expect(paths[0]).toEqualAttribute("tabindex", "0");
+        expect(paths[1]).toEqualAttribute("tabindex", "-1");
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        paths = await page.findAll("wm-chart >>> path");
+        expect(componentWrapper).toEqualAttribute("tabindex", "-1");
+        expect(paths[0]).toEqualAttribute("tabindex", "-1");
+        expect(paths[1]).toEqualAttribute("tabindex", "0");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        expect(componentWrapper).toEqualAttribute("tabindex", "0");
+        expect(paths[0]).toEqualAttribute("tabindex", "-1");
+        expect(paths[1]).toEqualAttribute("tabindex", "-1");
+    });
+    it("opens popover when slice clicked", async () => {
+        const tmpPage = await newE2EPage();
+        await tmpPage.setContent(`<wm-chart id="one" label="the label" chart-type="doughnut3">
+        <wm-chart-slice amount="95" popover-title="A" popover-text="Text A" popover-button-text="A Button" legend="A"></wm-chart-slice>
+        <wm-chart-slice amount="5" popover-title="B" popover-text="Text B" popover-button-text="B Button" legend="B"></wm-chart-slice>
+      </wm-chart>`);
+        await tmpPage.waitForChanges;
+        let hasPopover = await tmpPage.find("wm-chart >>> .popover");
+        const path = await tmpPage.find("wm-chart >>> path");
+        expect(hasPopover).toBeFalsy;
+        await path.click();
+        await tmpPage.waitForChanges();
+        hasPopover = await tmpPage.find("wm-chart >>> .popover");
+        expect(hasPopover).toBeTruthy;
+    });
+    it("activating popover button fires event", async () => {
+        const tmpPage = await newE2EPage();
+        await tmpPage.setContent(`<wm-chart id="one" label="the label" chart-type="doughnut3">
+      <wm-chart-slice amount="5" popover-title="A" popover-text="Text A" popover-button-text="A Button" legend="A"></wm-chart-slice>
+      <wm-chart-slice amount="95" popover-title="B" popover-text="Text B" popover-button-text="B Button" legend="B"></wm-chart-slice>
+      </wm-chart>
+      <div id="indicator"></div>`);
+        await tmpPage.waitForChanges;
+        await tmpPage.evaluate(async () => {
+            const component = await document.querySelector("wm-chart");
+            const indicator = await document.querySelector("#indicator");
+            await component.addEventListener("wmChartPopoverButtonTriggered", () => (indicator.textContent = "event heard"));
+        });
+        await tmpPage.waitForChanges;
+        const indicator = await tmpPage.find("#indicator");
+        expect(indicator.textContent).toBe("");
+        await tmpPage.keyboard.press("Tab");
+        await tmpPage.waitForChanges();
+        await tmpPage.keyboard.press("ArrowDown");
+        await tmpPage.waitForChanges();
+        await tmpPage.keyboard.press("Enter");
+        await tmpPage.waitForChanges();
+        expect(indicator.textContent).toBe("event heard");
+    });
+});

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

@@ -149,7 +149,7 @@ export class Chart {
         }
     }
     render() {
-        return (h(Host, { key: '5658836a6dc6d82e1ad8a4b50b9a138d51610a80', onBlur: () => exitChart.call(this) }, h("div", { key: '2105ff07fcad69e0175a2bde4f8fdfe08001174d', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.currentChartType} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""} ${this.labelPosition === "left" && this.currentChartType === "bar4" ? "left-label" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: 0, "aria-roledescription": chartMessages.interactiveChart, "aria-describedby": "chart-instructions" }, h("label", { key: 'e74a5954793ec614b54330fe630d3b27abfd269a', id: `label-${this.uid}`, class: `label --${this.labelPosition}`, htmlFor: `graphic-${this.uid}` }, h("span", { key: 'a93567158427b56fbdc1bf23142bda5805739a4c', class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.isBar && renderLegend.call(this, this.currentChartType), this.renderChart(), this.isDoughnut && renderLegend.call(this, this.currentChartType), h("priv-chart-popover", { key: 'fb213ab70496d4c9655bb51211ab4f8df7d4ab68', class: this.isTabbing ? "user-is-tabbing" : "", onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) }), this.isBar && !this.printMode && renderHiddenValuesMessage()), renderInstructionsText()));
+        return (h(Host, { onBlur: () => exitChart.call(this) }, h("div", { ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.currentChartType} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""} ${this.labelPosition === "left" && this.currentChartType === "bar4" ? "left-label" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: 0, "aria-roledescription": chartMessages.interactiveChart, "aria-describedby": "chart-instructions" }, h("label", { id: `label-${this.uid}`, class: `label --${this.labelPosition}`, htmlFor: `graphic-${this.uid}` }, h("span", { class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.isBar && renderLegend.call(this, this.currentChartType), this.renderChart(), this.isDoughnut && renderLegend.call(this, this.currentChartType), h("priv-chart-popover", { class: this.isTabbing ? "user-is-tabbing" : "", onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) }), this.isBar && !this.printMode && renderHiddenValuesMessage()), renderInstructionsText()));
     }
     static get is() { return "wm-chart"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,37 @@
+import { newSpecPage } from "@stencil/core/testing";
+import * as globalFuncs from "../../../global/functions";
+jest.spyOn(globalFuncs, "generateId");
+// @ts-ignore
+globalFuncs.generateId.mockImplementation(() => "random-id");
+import { Chart } from "./wm-chart";
+// mock ResizeObserver
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}));
+describe("wm-chart", () => {
+    it("builds", async () => {
+        const page = await newSpecPage({ components: [Chart], html: '<wm-chart label="charty"></wm-chart>' });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("properties and attributes", async () => {
+        const page = await newSpecPage({ components: [Chart], html: '<wm-chart label="charty"></wm-chart>' });
+        const componentWrapper = page.root.shadowRoot.querySelector(".component-wrapper");
+        expect(componentWrapper).toEqualAttribute("role", "application");
+        expect(componentWrapper).toEqualAttribute("aria-label", "charty");
+        expect(componentWrapper).toEqualAttribute("aria-roledescription", "Interactive chart");
+        expect(componentWrapper).toEqualAttribute("aria-describedby", "chart-instructions");
+    });
+    // needs refactoring before it can be tested
+    // it("generates the svg path", () => {
+    //   const chart = new Chart();
+    //   expect(chart.getPathData(122, 23)).toEqual("thing");
+    // })
+    // needs refactoring before it can be tested
+    // it("outputs the svg arc syntax", () => {
+    //   const chart = new Chart();
+    //   // the 2nd arc is set according to whether we're drawing the inner or outer arc, and whether it's concave or convex
+    //   expect(chart.getArc(23, "0 1", 34, 66)).toEqual("nene");
+    // })
+});

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

@@ -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

@@ -12,12 +12,12 @@ 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: "#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 () => {
@@ -413,7 +413,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
             };
         }
@@ -453,9 +453,9 @@ export class LineChart {
         return h("div", { class: "highlight", style: highlightStyle });
     }
     render() {
-        return (h(Host, { key: '9817eea8765cce513a0848cd222a6409c8f1f912', onBlur: () => this.resetDataPointFocus(), onMouseLeave: () => (this.popoverIndex = -1) }, h("div", { key: '60de41437bb425483be4b5a24fc2468c8e8f8d4e', class: "component-wrapper", role: "application", "aria-roledescription": chartMessages.interactiveChart, "aria-label": this.label, "aria-describedby": "chart-description" }, this.renderLegend(), h("div", { key: '2029ed03f09b8c133ee430f7b1d70c9dded326f3', class: "chart-wrapper" }, h("div", { key: '4e9123177b8c02cf1fef010d370b2b1a23b2015c', class: "chart-label --y-axis", style: { "--labelWidth": this.labelWidth } }, this.yAxisLabel, this.parsedUnits[1] && ` (${this.parsedUnits[1]})`), this.renderYIntervals(), h("div", { key: '3cbe51169818095cd830e7b8099d3a10980e3cf2', 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: 'dad130dfb9063769dd36316cb060c90a8f1c8cb8', class: "chart-label --x-axis" }, this.xAxisLabel, this.parsedUnits[0] && ` (${this.parsedUnits[0]})`)), h("div", { key: 'bb4ffc7fbae6ab63e6f3e16c1d7e8a98c382e243', id: "chart-description", class: "sr-only" }, `${lineChartMessages.instructions} ${this.description}`), h("div", { key: 'de40d0eecd0db387912b45fb2b4576b37e3876aa', 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"; }