diff --git a/e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js b/e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js index c2e46566d4..8d83e62c39 100644 --- a/e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js +++ b/e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js @@ -26,7 +26,11 @@ necessarily be used for reference when writing new tests in this area. */ const { test, expect } = require('../../../../pluginFixtures'); -const { createDomainObjectWithDefaults, selectInspectorTab } = require('../../../../appActions'); +const { + createDomainObjectWithDefaults, + selectInspectorTab, + waitForPlotsToRender +} = require('../../../../appActions'); test.describe('Stacked Plot', () => { let stackedPlot; @@ -227,4 +231,45 @@ test.describe('Stacked Plot', () => { page.locator('[aria-label="Plot Series Properties"] .c-object-label') ).toContainText(swgC.name); }); + + test('the legend toggles between aggregate and per child', async ({ page }) => { + await page.goto(stackedPlot.url); + + // Go into edit mode + await page.click('button[title="Edit"]'); + + await selectInspectorTab(page, 'Config'); + + let legendProperties = await page.locator('[aria-label="Legend Properties"]'); + await legendProperties.locator('[title="Display legends per sub plot."]~div input').uncheck(); + + await assertAggregateLegendIsVisible(page); + + // Save (exit edit mode) + await page.locator('button[title="Save"]').click(); + await page.locator('li[title="Save and Finish Editing"]').click(); + + await assertAggregateLegendIsVisible(page); + + await page.reload(); + + await assertAggregateLegendIsVisible(page); + }); }); + +/** + * Asserts that aggregate stacked plot legend is visible + * @param {import('@playwright/test').Page} page + */ +async function assertAggregateLegendIsVisible(page) { + // Wait for plot series data to load + await waitForPlotsToRender(page); + // Wait for plot legend to be shown + await page.waitForSelector('.js-stacked-plot-legend', { state: 'attached' }); + // There should be 3 legend items + expect( + await page + .locator('.js-stacked-plot-legend .c-plot-legend__wrapper div.plot-legend-item') + .count() + ).toBe(3); +} diff --git a/src/plugins/plot/MctPlot.vue b/src/plugins/plot/MctPlot.vue index 899af22c72..cb23e0c505 100644 --- a/src/plugins/plot/MctPlot.vue +++ b/src/plugins/plot/MctPlot.vue @@ -77,6 +77,7 @@

    Legend

    +
  • +
    + Show legend per plot +
    +
    {{ showLegendsForChildren ? 'Yes' : 'No' }}
    +
  • -
      +

        Legend

      diff --git a/src/plugins/plot/inspector/forms/LegendForm.vue b/src/plugins/plot/inspector/forms/LegendForm.vue index 5c72b1a382..d30a501832 100644 --- a/src/plugins/plot/inspector/forms/LegendForm.vue +++ b/src/plugins/plot/inspector/forms/LegendForm.vue @@ -21,6 +21,16 @@ -->