Toggle between showing aggregate stacked plot legend or per-plot lege…

…nd (#6758) * New option to show/hide stacked plot aggregate legend - defaulted to not show. Use the Plot component in the StackedPlotItem component for simplicity and show/hide sub-legends as needed. * Fix position and expanded classes when children are showing their legends * Fix broken tests and ensure gridlines and cursorguides work. * Adds e2e test for new legend configuration for stacked plot * Address review comments - Remove commented out code, optimize property lookup, fix bug with staleness * Remove the isStale icon in the legend when a plot is inside a stacked plot. --------- Co-authored-by: Jamie V <jamie.j.vigliotta@nasa.gov>
nasa · Jul 11, 2023 · d08ea62 · d08ea62
1 parent 293f25d
commit d08ea62
Show file tree

Hide file tree

Showing 13 changed files with 243 additions and 68 deletions.
diff --git 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
@@ -77,6 +77,7 @@
             <mct-chart
               :rectangles="rectangles"
               :highlights="highlights"
+              :show-limit-line-labels="limitLineLabels"
               :annotated-points="annotatedPoints"
               :annotation-selections="annotationSelections"
               :hidden-y-axis-ids="hiddenYAxisIds"
@@ -231,7 +232,7 @@ export default {
     limitLineLabels: {
       type: Object,
       default() {
-        return {};
+        return undefined;
       }
     },
     colorPalette: {

diff --git a/src/plugins/plot/Plot.vue b/src/plugins/plot/Plot.vue
@@ -33,18 +33,23 @@
       />
       <mct-plot
         :class="[plotLegendExpandedStateClass, plotLegendPositionClass]"
-        :init-grid-lines="gridLines"
+        :init-grid-lines="gridLinesProp"
         :init-cursor-guide="cursorGuide"
         :options="options"
-        :limit-line-labels="limitLineLabels"
+        :limit-line-labels="limitLineLabelsProp"
+        :parent-y-tick-width="parentYTickWidth"
+        :color-palette="colorPalette"
         @loadingUpdated="loadingUpdated"
         @statusUpdated="setStatus"
         @configLoaded="updateReady"
         @lockHighlightPoint="lockHighlightPointUpdated"
         @highlights="highlightsUpdated"
+        @plotYTickWidth="onYTickWidthChange"
+        @cursorGuide="onCursorGuideChange"
+        @gridLines="onGridLinesChange"
       >
         <plot-legend
-          v-if="configReady"
+          v-if="configReady && hideLegend === false"
           :cursor-locked="lockHighlightPoint"
           :highlights="highlights"
           @legendHoverChanged="legendHoverChanged"
@@ -79,14 +84,50 @@ export default {
           compact: false
         };
       }
+    },
+    gridLines: {
+      type: Boolean,
+      default() {
+        return true;
+      }
+    },
+    cursorGuide: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    parentLimitLineLabels: {
+      type: Object,
+      default() {
+        return undefined;
+      }
+    },
+    colorPalette: {
+      type: Object,
+      default() {
+        return undefined;
+      }
+    },
+    parentYTickWidth: {
+      type: Object,
+      default() {
+        return {
+          leftTickWidth: 0,
+          rightTickWidth: 0,
+          hasMultipleLeftAxes: false
+        };
+      }
+    },
+    hideLegend: {
+      type: Boolean,
+      default() {
+        return false;
+      }
     }
   },
   data() {
     return {
-      //Don't think we need this as it appears to be stacked plot specific
-      // hideExportButtons: false
-      cursorGuide: false,
-      gridLines: !this.options.compact,
       loading: false,
       status: '',
       staleObjects: [],
@@ -99,6 +140,12 @@ export default {
     };
   },
   computed: {
+    limitLineLabelsProp() {
+      return this.parentLimitLineLabels ?? this.limitLineLabels;
+    },
+    gridLinesProp() {
+      return this.gridLines ?? !this.options.compact;
+    },
     staleClass() {
       if (this.staleObjects.length !== 0) {
         return 'is-stale';
@@ -117,6 +164,14 @@ export default {
       }
     }
   },
+  watch: {
+    gridLines(newGridLines) {
+      this.gridLines = newGridLines;
+    },
+    cursorGuide(newCursorGuide) {
+      this.cursorGuide = newCursorGuide;
+    }
+  },
   mounted() {
     eventHelpers.extend(this);
     this.imageExporter = new ImageExporter(this.openmct);
@@ -188,6 +243,7 @@ export default {
     },
     loadingUpdated(loading) {
       this.loading = loading;
+      this.$emit('loadingUpdated', ...arguments);
     },
     destroy() {
       if (this.stalenessSubscription) {
@@ -223,9 +279,11 @@ export default {
     },
     lockHighlightPointUpdated(data) {
       this.lockHighlightPoint = data;
+      this.$emit('lockHighlightPoint', ...arguments);
     },
     highlightsUpdated(data) {
       this.highlights = data;
+      this.$emit('highlights', ...arguments);
     },
     legendHoverChanged(data) {
       this.limitLineLabels = data;
@@ -238,6 +296,16 @@ export default {
     },
     updateReady(ready) {
       this.configReady = ready;
+      this.$emit('configLoaded', ...arguments);
+    },
+    onYTickWidthChange() {
+      this.$emit('plotYTickWidth', ...arguments);
+    },
+    onCursorGuideChange() {
+      this.$emit('cursorGuide', ...arguments);
+    },
+    onGridLinesChange() {
+      this.$emit('gridLines', ...arguments);
     }
   }
 };

diff --git a/src/plugins/plot/chart/MctChart.vue b/src/plugins/plot/chart/MctChart.vue
@@ -114,7 +114,7 @@ export default {
     showLimitLineLabels: {
       type: Object,
       default() {
-        return {};
+        return undefined;
       }
     },
     hiddenYAxisIds: {
@@ -725,7 +725,7 @@ export default {
       });
     },
     showLabels(seriesKey) {
-      return this.showLimitLineLabels.seriesKey && this.showLimitLineLabels.seriesKey === seriesKey;
+      return this.showLimitLineLabels?.seriesKey === seriesKey;
     },
     getLimitElement(limit) {
       let point = {

diff --git a/src/plugins/plot/configuration/LegendModel.js b/src/plugins/plot/configuration/LegendModel.js
@@ -55,7 +55,8 @@ export default class LegendModel extends Model {
       showValueWhenExpanded: true,
       showMaximumWhenExpanded: true,
       showMinimumWhenExpanded: true,
-      showUnitsWhenExpanded: true
+      showUnitsWhenExpanded: true,
+      showLegendsForChildren: true
     };
   }
 }
diff --git a/src/plugins/plot/inspector/PlotOptionsBrowse.vue b/src/plugins/plot/inspector/PlotOptionsBrowse.vue
@@ -73,6 +73,12 @@
     <div v-if="isStackedPlotObject || !isNestedWithinAStackedPlot" class="grid-properties">
       <ul class="l-inspector-part js-legend-properties">
         <h2 class="--first" title="Legend settings for this object">Legend</h2>
+        <li v-if="isStackedPlotObject" class="grid-row">
+          <div class="grid-cell label" title="Display legends per sub plot.">
+            Show legend per plot
+          </div>
+          <div class="grid-cell value">{{ showLegendsForChildren ? 'Yes' : 'No' }}</div>
+        </li>
         <li class="grid-row">
           <div
             class="grid-cell label"
@@ -139,6 +145,7 @@ export default {
       showMinimumWhenExpanded: '',
       showMaximumWhenExpanded: '',
       showUnitsWhenExpanded: '',
+      showLegendsForChildren: '',
       loaded: false,
       plotSeries: [],
       yAxes: []
@@ -218,6 +225,7 @@ export default {
         this.showMinimumWhenExpanded = this.config.legend.get('showMinimumWhenExpanded');
         this.showMaximumWhenExpanded = this.config.legend.get('showMaximumWhenExpanded');
         this.showUnitsWhenExpanded = this.config.legend.get('showUnitsWhenExpanded');
+        this.showLegendsForChildren = this.config.legend.get('showLegendsForChildren');
       }
     },
     getConfig() {

diff --git a/src/plugins/plot/inspector/PlotOptionsEdit.vue b/src/plugins/plot/inspector/PlotOptionsEdit.vue
@@ -35,7 +35,11 @@
       :y-axis="config.yAxis"
       @seriesUpdated="updateSeriesConfigForObject"
     />
-    <ul v-if="isStackedPlotObject || !isStackedPlotNestedObject" class="l-inspector-part">
+    <ul
+      v-if="isStackedPlotObject || !isStackedPlotNestedObject"
+      class="l-inspector-part"
+      aria-label="Legend Properties"
+    >
       <h2 class="--first" title="Legend options">Legend</h2>
       <legend-form class="grid-properties" :legend="config.legend" />
     </ul>

diff --git a/src/plugins/plot/inspector/forms/LegendForm.vue b/src/plugins/plot/inspector/forms/LegendForm.vue
@@ -21,6 +21,16 @@
 -->
 <template>
   <div>
+    <li v-if="isStackedPlotObject" class="grid-row">
+      <div class="grid-cell label" title="Display legends per sub plot.">Show legend per plot</div>
+      <div class="grid-cell value">
+        <input
+          v-model="showLegendsForChildren"
+          type="checkbox"
+          @change="updateForm('showLegendsForChildren')"
+        />
+      </div>
+    </li>
     <li class="grid-row">
       <div
         class="grid-cell label"
@@ -128,7 +138,7 @@ import { coerce, objectPath, validate } from './formUtil';
 import _ from 'lodash';
 
 export default {
-  inject: ['openmct', 'domainObject'],
+  inject: ['openmct', 'domainObject', 'path'],
   props: {
     legend: {
       type: Object,
@@ -148,9 +158,18 @@ export default {
       showMinimumWhenExpanded: '',
       showMaximumWhenExpanded: '',
       showUnitsWhenExpanded: '',
+      showLegendsForChildren: '',
       validation: {}
     };
   },
+  computed: {
+    isStackedPlotObject() {
+      return this.path.find(
+        (pathObject, pathObjIndex) =>
+          pathObjIndex === 0 && pathObject?.type === 'telemetry.plot.stacked'
+      );
+    }
+  },
   mounted() {
     this.initialize();
     this.initFormValues();
@@ -200,6 +219,11 @@ export default {
           modelProp: 'showUnitsWhenExpanded',
           coerce: Boolean,
           objectPath: 'configuration.legend.showUnitsWhenExpanded'
+        },
+        {
+          modelProp: 'showLegendsForChildren',
+          coerce: Boolean,
+          objectPath: 'configuration.legend.showLegendsForChildren'
         }
       ];
     },
@@ -213,6 +237,7 @@ export default {
       this.showMinimumWhenExpanded = this.legend.get('showMinimumWhenExpanded');
       this.showMaximumWhenExpanded = this.legend.get('showMaximumWhenExpanded');
       this.showUnitsWhenExpanded = this.legend.get('showUnitsWhenExpanded');
+      this.showLegendsForChildren = this.legend.get('showLegendsForChildren');
     },
     updateForm(formKey) {
       const newVal = this[formKey];

diff --git a/src/plugins/plot/legend/PlotLegendItemCollapsed.vue b/src/plugins/plot/legend/PlotLegendItemCollapsed.vue
@@ -181,9 +181,14 @@ export default {
     },
     toggleHover(hover) {
       this.hover = hover;
-      this.$emit('legendHoverChanged', {
-        seriesKey: this.hover ? this.seriesObject.keyString : ''
-      });
+      this.$emit(
+        'legendHoverChanged',
+        this.hover
+          ? {
+              seriesKey: this.seriesObject.keyString
+            }
+          : undefined
+      );
     }
   }
 };