ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-16 14:18:16 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Plot legends expand by default when enabled (#7453)

Browse Source 
* expanded legend showing, but malformed

* fix legends

* add e2e test and aria labels for controls

* fix tests

* remove focused test

* make plot legend items dynamic

* expand legend immediately when changing default

* Ensure stacked plots show cumulative legend (#7481)

* simplify config loading logic

* wip

* fixed stacked plot legend issue

* fix legend

* remove console.debugs

* remove extraneous prop

* add test

* fix legend

* use props
This commit is contained in:
Scott Bell
2024-02-07 19:35:19 +01:00
committed by GitHub
parent cd6adbadde
commit 5f8d6899d2
16 changed files with 380 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/plugins/plot/legend/PlotLegend.vue
View File

@ -30,12 +30,17 @@
<div
class="c-plot-legend__view-control gl-plot-legend__view-control c-disclosure-triangle is-enabled"
:class="{ 'c-disclosure-triangle--expanded': isLegendExpanded }"
@click="expandLegend"
@click="toggleLegend"
></div>
<div class="c-plot-legend__wrapper" :class="{ 'is-cursor-locked': cursorLocked }">
<!-- COLLAPSED PLOT LEGEND -->
<div class="plot-wrapper-collapsed-legend" :class="{ 'is-cursor-locked': cursorLocked }">
<div
v-if="!isLegendExpanded"
class="plot-wrapper-collapsed-legend"
aria-label="Plot Legend Collapsed"
:class="{ 'is-cursor-locked': cursorLocked }"
>
<div
class="c-state-indicator__alert-cursor-lock icon-cursor-lock"
title="Cursor is point locked. Click anywhere in the plot to unlock."
@ -50,7 +55,12 @@
/>
</div>
<!-- EXPANDED PLOT LEGEND -->
<div class="plot-wrapper-expanded-legend" :class="{ 'is-cursor-locked': cursorLocked }">
<div
v-else
class="plot-wrapper-expanded-legend"
aria-label="Plot Legend Expanded"
:class="{ 'is-cursor-locked': cursorLocked }"
>
<div
class="c-state-indicator__alert-cursor-lock--verbose icon-cursor-lock"
title="Click anywhere in the plot to unlock."
@ -145,11 +155,22 @@ export default {
this.legend = this.config.legend;
this.seriesModels = [];
this.listenTo(this.config.legend, 'change:position', this.updatePosition, this);
if (this.domainObject.type === 'telemetry.plot.stacked') {
this.objectComposition = this.openmct.composition.get(this.domainObject);
this.objectComposition.on('add', this.addTelemetryObject);
this.objectComposition.on('remove', this.removeTelemetryObject);
this.objectComposition.load();
} else {
this.registerListeners(this.config);
}
this.listenTo(this.config.legend, 'change:expandByDefault', this.changeExpandDefault, this);
this.initialize();
},
mounted() {
this.loaded = true;
this.isLegendExpanded = this.legend.get('expanded') === true;
this.$emit('expanded', this.isLegendExpanded);
this.updatePosition();
},
beforeUnmount() {
@ -171,6 +192,11 @@ export default {
this.registerListeners(this.config);
}
},
changeExpandDefault() {
this.isLegendExpanded = this.config.legend.model.expandByDefault;
this.legend.set('expanded', this.isLegendExpanded);
this.$emit('expanded', this.isLegendExpanded);
},
getConfig() {
const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
@ -198,9 +224,12 @@ export default {
config.series.forEach(this.addSeries, this);
},
addSeries(series) {
this.seriesModels[this.seriesModels.length] = series;
const existingSeries = this.getSeries(series.keyString);
if (existingSeries) {
return;
}
this.seriesModels.push(series);
},
removeSeries(plotSeries) {
this.stopListening(plotSeries);
@ -209,7 +238,13 @@ export default {
);
this.seriesModels.splice(seriesIndex, 1);
},
expandLegend() {
getSeries(keyStringToFind) {
const foundSeries = this.seriesModels.find((series) => {
return series.keyString === keyStringToFind;
});
return foundSeries;
},
toggleLegend() {
this.isLegendExpanded = !this.isLegendExpanded;
this.legend.set('expanded', this.isLegendExpanded);
this.$emit('expanded', this.isLegendExpanded);