mrc-5551 Show Time label on final graph only

app/static/src/app/components/WodinPlot.vue

@@ -119,9 +119,11 @@ export default defineComponent({
 
         const defaultLayout = (): Partial<Layout> => {
             // Get generic layout, which will be modifed dynamically as required
+            // Show Time label on final graph only
+            const xAxisTitle = props.fitPlot || props.graphIndex === store.state.graphs.config.length - 1 ? "Time" : "";
             const result = {
                 margin: { ...margin },
-                xaxis: { title: "Time" },
+                xaxis: { title: xAxisTitle },
                 yaxis: { type: yAxisType.value }
             };
             if (legendWidth.value) {

app/static/tests/e2e/fit.etest.ts

@@ -145,6 +145,8 @@ test.describe("Wodin App model fit tests", () => {
 
         const plotSelector = ".wodin-right .wodin-content div.mt-4 .js-plotly-plot";
 
+        await expect(await page.locator(".plotly .xtitle").textContent()).toBe("Time");
+
         // Test line is plotted for fit trace and data points
         const linesSelector = `${plotSelector} .scatterlayer .trace .lines path`;
         await expect((await page.locator(linesSelector).getAttribute("d"))!.startsWith("M")).toBe(true);

app/static/tests/e2e/run.etest.ts

@@ -47,4 +47,18 @@ test.describe("Run Tab", () => {
         // 3. Check - using x axis ticks - that the expected x axis values are shown on all three graphs.
         await expectXTicks(page, 3, [15, 20, 25, 30, 35, 40]);
     });
+
+    test("x axis Time label is shown for final plot only", async ({ page }) => {
+        await page.goto("/apps/day1");
+        await addGraphWithVariable(page, 1);
+        const firstGraph = page.locator(":nth-match(.plotly, 1)");
+        const secondGraph = page.locator(":nth-match(.plotly, 2)");
+
+        await expect(await firstGraph.locator(".xtitle")).not.toBeVisible();
+        await expect(await secondGraph.locator(".xtitle").textContent()).toBe("Time");
+
+        // Delete second config - the Time label should be shown on the first graph
+        await page.locator(":nth-match(button.delete-graph, 2)").click();
+        await expect(await firstGraph.locator(".xtitle").textContent()).toBe("Time");
+    });
 });

app/static/tests/unit/components/wodinPlot.test.ts

@@ -51,15 +51,16 @@ describe("WodinPlot", () => {
         }
     ];
     const mockPlotDataFn = jest.fn().mockReturnValue(mockPlotData);
+    const settings = defaultGraphSettings();
     const defaultProps = {
         fadePlot: false,
         endTime: 99,
         redrawWatches: [],
         plotData: mockPlotDataFn,
         placeholderMessage: "No data available",
         fitPlot: false,
-        graphIndex: 0,
-        graphConfig: { settings: defaultGraphSettings() }
+        graphIndex: 1,
+        graphConfig: { settings }
     };
 
     const mockSetYAxisRange = jest.fn();
@@ -71,7 +72,8 @@ describe("WodinPlot", () => {
                 graphs: {
                     namespaced: true,
                     state: {
-                        fitGraphSettings
+                        fitGraphSettings,
+                        config: [{ settings }, { settings }]
                     },
                     mutations: {
                         [GraphsMutation.SetYAxisRange]: mockSetYAxisRange,
@@ -501,7 +503,7 @@ describe("WodinPlot", () => {
         await nextTick();
         await wrapper.setProps({ redrawWatches: [{} as any] });
         await nextTick();
-        expect(mockSetYAxisRange.mock.calls[0][1]).toStrictEqual({ graphIndex: 0, value: [1, 2] });
+        expect(mockSetYAxisRange.mock.calls[0][1]).toStrictEqual({ graphIndex: 1, value: [1, 2] });
         expect(mockSetFitYAxisRange).not.toHaveBeenCalled();
     });
 
@@ -665,4 +667,43 @@ describe("WodinPlot", () => {
         expect(mockPlotDataFn.mock.calls[1][1]).toBe(5);
         expect(mockPlotDataFn.mock.calls[1][2]).toBe(1000);
     });
+
+    it("does not display Time xAxis label if not final config in array", async () => {
+        const store = getStore();
+        const wrapper = getWrapper(
+            {
+                graphIndex: 0
+            },
+            store
+        );
+        mockPlotElementOn(wrapper);
+
+        wrapper.setProps({ redrawWatches: [{} as any] });
+        await nextTick();
+        expect(mockPlotlyNewPlot.mock.calls[0][2]).toStrictEqual({
+            margin: { t: 25 },
+            xaxis: { title: "" },
+            yaxis: { type: "linear" }
+        });
+    });
+
+    it("does display Time xAxis label if fitPlot is true", async () => {
+        const store = getStore();
+        const wrapper = getWrapper(
+            {
+                graphIndex: 0,
+                fitPlot: true
+            },
+            store
+        );
+        mockPlotElementOn(wrapper);
+
+        wrapper.setProps({ redrawWatches: [{} as any] });
+        await nextTick();
+        expect(mockPlotlyNewPlot.mock.calls[0][2]).toStrictEqual({
+            margin: { t: 25 },
+            xaxis: { title: "Time" },
+            yaxis: { type: "linear" }
+        });
+    });
 });