mirror of
https://github.com/nasa/openmct.git
synced 2025-06-16 22:28:13 +00:00
Selection of stacked plot items and customizing them (#5198)
* Adds stacked plot inspector view provider for non subObjects * Initialize config for telemetry objects that cannot be persisted with the config in the stacked plot Use events to save telemetry object config changes to the stacked plot Remove changes that weren't relevant anymore * Ensure the telemetry objects that cannot be persisted are initialized correctly * Fixes for selection indication in Stacked Plots - Better theme constant colors. - Fixed broken selectors. - Changes also improve selection editing UI for Display and Flex Layouts. * Ensure unique colors for stacked plot if they are auto assigned * Fix bug hiding legend when viewing plots nested within a stacked plot * Move stacked plots tests to it's own pluginSpec to simplify tests Co-authored-by: Charles Hacskaylo <charlesh88@gmail.com> Co-authored-by: Andrew Henry <akhenry@gmail.com> Co-authored-by: Rukmini Bose <rukmini.bose15@gmail.com>
This commit is contained in:
@ -21,21 +21,37 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="c-plot c-plot--stacked holder holder-plot has-control-bar">
|
||||
<div
|
||||
v-if="loaded"
|
||||
class="c-plot c-plot--stacked holder holder-plot has-control-bar"
|
||||
:class="[plotLegendExpandedStateClass, plotLegendPositionClass]"
|
||||
>
|
||||
<plot-legend
|
||||
:cursor-locked="!!lockHighlightPoint"
|
||||
:series="seriesModels"
|
||||
:highlights="highlights"
|
||||
:legend="legend"
|
||||
@legendHoverChanged="legendHoverChanged"
|
||||
/>
|
||||
<div class="l-view-section">
|
||||
<stacked-plot-item
|
||||
v-for="object in compositionObjects"
|
||||
:key="object.id"
|
||||
class="c-plot--stacked-container"
|
||||
:object="object"
|
||||
:child-object="object"
|
||||
:options="options"
|
||||
:grid-lines="gridLines"
|
||||
:color-palette="colorPalette"
|
||||
:cursor-guide="cursorGuide"
|
||||
:show-limit-line-labels="showLimitLineLabels"
|
||||
:plot-tick-width="maxTickWidth"
|
||||
@plotTickWidth="onTickWidthChange"
|
||||
@loadingUpdated="loadingUpdated"
|
||||
@cursorGuide="onCursorGuideChange"
|
||||
@gridLines="onGridLinesChange"
|
||||
@lockHighlightPoint="lockHighlightPointUpdated"
|
||||
@highlights="highlightsUpdated"
|
||||
@configLoaded="registerSeriesListeners"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -43,12 +59,19 @@
|
||||
|
||||
<script>
|
||||
|
||||
import PlotConfigurationModel from '../configuration/PlotConfigurationModel';
|
||||
import configStore from '../configuration/ConfigStore';
|
||||
import ColorPalette from "@/ui/color/ColorPalette";
|
||||
|
||||
import PlotLegend from "../legend/PlotLegend.vue";
|
||||
import StackedPlotItem from './StackedPlotItem.vue';
|
||||
import ImageExporter from '../../../exporters/ImageExporter';
|
||||
import eventHelpers from "@/plugins/plot/lib/eventHelpers";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
StackedPlotItem
|
||||
StackedPlotItem,
|
||||
PlotLegend
|
||||
},
|
||||
inject: ['openmct', 'domainObject', 'composition', 'path'],
|
||||
props: {
|
||||
@ -60,16 +83,35 @@ export default {
|
||||
}
|
||||
},
|
||||
data() {
|
||||
this.seriesConfig = {};
|
||||
|
||||
return {
|
||||
hideExportButtons: false,
|
||||
cursorGuide: false,
|
||||
gridLines: true,
|
||||
loading: false,
|
||||
compositionObjects: [],
|
||||
tickWidthMap: {}
|
||||
tickWidthMap: {},
|
||||
legend: {},
|
||||
loaded: false,
|
||||
lockHighlightPoint: false,
|
||||
highlights: [],
|
||||
seriesModels: [],
|
||||
showLimitLineLabels: undefined,
|
||||
colorPalette: new ColorPalette()
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
plotLegendPositionClass() {
|
||||
return `plot-legend-${this.config.legend.get('position')}`;
|
||||
},
|
||||
plotLegendExpandedStateClass() {
|
||||
if (this.config.legend.get('expanded')) {
|
||||
return 'plot-legend-expanded';
|
||||
} else {
|
||||
return 'plot-legend-collapsed';
|
||||
}
|
||||
},
|
||||
maxTickWidth() {
|
||||
return Math.max(...Object.values(this.tickWidthMap));
|
||||
}
|
||||
@ -78,6 +120,13 @@ export default {
|
||||
this.destroy();
|
||||
},
|
||||
mounted() {
|
||||
eventHelpers.extend(this);
|
||||
|
||||
const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
|
||||
this.config = this.getConfig(configId);
|
||||
this.legend = this.config.legend;
|
||||
|
||||
this.loaded = true;
|
||||
this.imageExporter = new ImageExporter(this.openmct);
|
||||
|
||||
this.composition.on('add', this.addChild);
|
||||
@ -86,10 +135,29 @@ export default {
|
||||
this.composition.load();
|
||||
},
|
||||
methods: {
|
||||
getConfig(configId) {
|
||||
let config = configStore.get(configId);
|
||||
if (!config) {
|
||||
config = new PlotConfigurationModel({
|
||||
id: configId,
|
||||
domainObject: this.domainObject,
|
||||
openmct: this.openmct,
|
||||
callback: (data) => {
|
||||
this.data = data;
|
||||
}
|
||||
});
|
||||
configStore.add(configId, config);
|
||||
}
|
||||
|
||||
return config;
|
||||
},
|
||||
loadingUpdated(loaded) {
|
||||
this.loading = loaded;
|
||||
},
|
||||
destroy() {
|
||||
this.stopListening();
|
||||
configStore.deleteStore(this.config.id);
|
||||
|
||||
this.composition.off('add', this.addChild);
|
||||
this.composition.off('remove', this.removeChild);
|
||||
this.composition.off('reorder', this.compositionReorder);
|
||||
@ -99,6 +167,19 @@ export default {
|
||||
const id = this.openmct.objects.makeKeyString(child.identifier);
|
||||
|
||||
this.$set(this.tickWidthMap, id, 0);
|
||||
const persistedConfig = this.domainObject.configuration.series && this.domainObject.configuration.series.find((seriesConfig) => {
|
||||
return this.openmct.objects.areIdsEqual(seriesConfig.identifier, child.identifier);
|
||||
});
|
||||
if (persistedConfig === undefined) {
|
||||
this.openmct.objects.mutate(
|
||||
this.domainObject,
|
||||
'configuration.series[' + this.compositionObjects.length + ']',
|
||||
{
|
||||
identifier: child.identifier
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
this.compositionObjects.push(child);
|
||||
},
|
||||
|
||||
@ -107,6 +188,13 @@ export default {
|
||||
|
||||
this.$delete(this.tickWidthMap, id);
|
||||
|
||||
const configIndex = this.domainObject.configuration.series.findIndex((seriesConfig) => {
|
||||
return this.openmct.objects.areIdsEqual(seriesConfig.identifier, childIdentifier);
|
||||
});
|
||||
if (configIndex > -1) {
|
||||
this.domainObject.configuration.series.splice(configIndex, 1);
|
||||
}
|
||||
|
||||
const childObj = this.compositionObjects.filter((c) => {
|
||||
const identifier = this.openmct.objects.makeKeyString(c.identifier);
|
||||
|
||||
@ -158,6 +246,34 @@ export default {
|
||||
|
||||
this.$set(this.tickWidthMap, plotId, width);
|
||||
},
|
||||
legendHoverChanged(data) {
|
||||
this.showLimitLineLabels = data;
|
||||
},
|
||||
lockHighlightPointUpdated(data) {
|
||||
this.lockHighlightPoint = data;
|
||||
},
|
||||
highlightsUpdated(data) {
|
||||
this.highlights = data;
|
||||
},
|
||||
registerSeriesListeners(configId) {
|
||||
this.seriesConfig[configId] = this.getConfig(configId);
|
||||
this.listenTo(this.seriesConfig[configId].series, 'add', this.addSeries, this);
|
||||
this.listenTo(this.seriesConfig[configId].series, 'remove', this.removeSeries, this);
|
||||
|
||||
this.seriesConfig[configId].series.models.forEach(this.addSeries, this);
|
||||
},
|
||||
addSeries(series) {
|
||||
const index = this.seriesModels.length;
|
||||
this.$set(this.seriesModels, index, series);
|
||||
},
|
||||
removeSeries(plotSeries) {
|
||||
const index = this.seriesModels.findIndex(seriesModel => this.openmct.objects.areIdsEqual(seriesModel.identifier, plotSeries.identifier));
|
||||
if (index > -1) {
|
||||
this.$delete(this.seriesModels, index);
|
||||
}
|
||||
|
||||
this.stopListening(plotSeries);
|
||||
},
|
||||
onCursorGuideChange(cursorGuide) {
|
||||
this.cursorGuide = cursorGuide === true;
|
||||
},
|
||||
|
Reference in New Issue
Block a user