mirror of
https://github.com/nasa/openmct.git
synced 2025-04-12 21:53:07 +00:00
Plots inspector using Vue (#3781)
This commit is contained in:
Shefali Joshi
GitHub
parent
2305cd2e49
commit
0da35a44b0
@ -24,6 +24,13 @@ define([
|
||||
return false;
|
||||
}
|
||||
|
||||
//TODO: Remove this when plots Angular implementation is deprecated
|
||||
let parent = selection[0].length > 1 && selection[0][1].context.item;
|
||||
if (parent && parent.type === 'time-strip') {
|
||||
return (selectionContext.item.type === typeDefinition.key)
|
||||
&& (typeDefinition.key !== 'telemetry.plot.overlay');
|
||||
}
|
||||
|
||||
return selectionContext.item.type === typeDefinition.key;
|
||||
},
|
||||
view: function (selection) {
|
||||
|
||||
64
src/plugins/plot/vue/inspector/PlotOptions.vue
Normal file
64
src/plugins/plot/vue/inspector/PlotOptions.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<!--
|
||||
Open MCT, Copyright (c) 2014-2020, United States Government
|
||||
as represented by the Administrator of the National Aeronautics and Space
|
||||
Administration. All rights reserved.
|
||||
|
||||
Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
http://www.apache.org/licenses/LICENSE-2.0.
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
License for the specific language governing permissions and limitations
|
||||
under the License.
|
||||
|
||||
Open MCT includes source code licensed under additional open source
|
||||
licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="canEdit">
|
||||
<plot-options-edit />
|
||||
</div>
|
||||
<div v-else>
|
||||
<plot-options-browse />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PlotOptionsBrowse from "@/plugins/plot/vue/inspector/PlotOptionsBrowse.vue";
|
||||
import PlotOptionsEdit from "@/plugins/plot/vue/inspector/PlotOptionsEdit.vue";
|
||||
export default {
|
||||
components: {
|
||||
PlotOptionsBrowse,
|
||||
PlotOptionsEdit
|
||||
},
|
||||
inject: ['openmct', 'domainObject'],
|
||||
data() {
|
||||
return {
|
||||
isEditing: this.openmct.editor.isEditing()
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
canEdit() {
|
||||
return this.isEditing && !this.domainObject.locked;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.openmct.editor.on('isEditing', this.setEditState);
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.openmct.editor.off('isEditing', this.setEditState);
|
||||
},
|
||||
methods: {
|
||||
setEditState(isEditing) {
|
||||
this.isEditing = isEditing;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
198
src/plugins/plot/vue/inspector/PlotOptionsBrowse.vue
Normal file
198
src/plugins/plot/vue/inspector/PlotOptionsBrowse.vue
Normal file
@ -0,0 +1,198 @@
|
||||
<!--
|
||||
Open MCT, Copyright (c) 2014-2020, United States Government
|
||||
as represented by the Administrator of the National Aeronautics and Space
|
||||
Administration. All rights reserved.
|
||||
|
||||
Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
http://www.apache.org/licenses/LICENSE-2.0.
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
License for the specific language governing permissions and limitations
|
||||
under the License.
|
||||
|
||||
Open MCT includes source code licensed under additional open source
|
||||
licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<template>
|
||||
<div v-if="config && loaded"
|
||||
class="js-plot-options-browse"
|
||||
>
|
||||
<ul class="c-tree">
|
||||
<h2 title="Plot series display properties in this object">Plot Series</h2>
|
||||
<plot-options-item v-for="series in plotSeries"
|
||||
:key="series.key"
|
||||
:series="series"
|
||||
/>
|
||||
</ul>
|
||||
<div class="grid-properties">
|
||||
<ul class="l-inspector-part">
|
||||
<h2 title="Y axis settings for this object">Y Axis</h2>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Manually override how the Y axis is labeled."
|
||||
>Label</div>
|
||||
<div class="grid-cell value">{{ label ? label : "Not defined" }}</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Automatically scale the Y axis to keep all values in view."
|
||||
>Autoscale</div>
|
||||
<div class="grid-cell value">
|
||||
{{ autoscale ? "Enabled: " : "Disabled" }}
|
||||
{{ autoscale ? autoscalePadding : "" }}
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="!autoscale && rangeMin"
|
||||
class="grid-row"
|
||||
>
|
||||
<div class="grid-cell label"
|
||||
title="Minimum Y axis value."
|
||||
>Minimum value</div>
|
||||
<div class="grid-cell value">{{ rangeMin }}</div>
|
||||
</li>
|
||||
<li v-if="!autoscale && rangeMax"
|
||||
class="grid-row"
|
||||
>
|
||||
<div class="grid-cell label"
|
||||
title="Maximum Y axis value."
|
||||
>Maximum value</div>
|
||||
<div class="grid-cell value">{{ rangeMax }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="l-inspector-part">
|
||||
<h2 title="Legend settings for this object">Legend</h2>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="The position of the legend relative to the plot display area."
|
||||
>Position</div>
|
||||
<div class="grid-cell value capitalize">{{ position }}</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Hide the legend when the plot is small"
|
||||
>Hide when plot small</div>
|
||||
<div class="grid-cell value">{{ hideLegendWhenSmall ? "Yes" : "No" }}</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Show the legend expanded by default"
|
||||
>Expand by Default</div>
|
||||
<div class="grid-cell value">{{ expandByDefault ? "Yes" : "No" }}</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="What to display in the legend when it's collapsed."
|
||||
>Show when collapsed:</div>
|
||||
<div class="grid-cell value">{{
|
||||
valueToShowWhenCollapsed.replace('nearest', '')
|
||||
}}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="What to display in the legend when it's expanded."
|
||||
>Show when expanded:</div>
|
||||
<div class="grid-cell value comma-list">
|
||||
<span v-if="showTimestampWhenExpanded">Timestamp</span>
|
||||
<span v-if="showValueWhenExpanded">Value</span>
|
||||
<span v-if="showMinimumWhenExpanded">Min</span>
|
||||
<span v-if="showMaximumWhenExpanded">Max</span>
|
||||
<span v-if="showUnitsWhenExpanded">Units</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PlotOptionsItem from "./PlotOptionsItem.vue";
|
||||
import configStore from "../single/configuration/configStore";
|
||||
import eventHelpers from "../single/lib/eventHelpers";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PlotOptionsItem
|
||||
},
|
||||
inject: ['openmct', 'domainObject'],
|
||||
data() {
|
||||
return {
|
||||
config: undefined,
|
||||
label: '',
|
||||
autoscale: '',
|
||||
autoscalePadding: '',
|
||||
rangeMin: '',
|
||||
rangeMax: '',
|
||||
position: '',
|
||||
hideLegendWhenSmall: '',
|
||||
expandByDefault: '',
|
||||
valueToShowWhenCollapsed: '',
|
||||
showTimestampWhenExpanded: '',
|
||||
showValueWhenExpanded: '',
|
||||
showMinimumWhenExpanded: '',
|
||||
showMaximumWhenExpanded: '',
|
||||
showUnitsWhenExpanded: '',
|
||||
loaded: false,
|
||||
plotSeries: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
eventHelpers.extend(this);
|
||||
this.config = this.getConfig();
|
||||
this.initConfiguration();
|
||||
this.registerListeners();
|
||||
this.loaded = true;
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.stopListening();
|
||||
},
|
||||
methods: {
|
||||
initConfiguration() {
|
||||
this.label = this.config.yAxis.get('label');
|
||||
this.autoscale = this.config.yAxis.get('autoscale');
|
||||
this.autoscalePadding = this.config.yAxis.get('autoscalePadding');
|
||||
const range = this.config.yAxis.get('range');
|
||||
if (range) {
|
||||
this.rangeMin = range.min;
|
||||
this.rangeMax = range.max;
|
||||
}
|
||||
|
||||
this.position = this.config.legend.get('position');
|
||||
this.hideLegendWhenSmall = this.config.legend.get('hideLegendWhenSmall');
|
||||
this.expandByDefault = this.config.legend.get('expandByDefault');
|
||||
this.valueToShowWhenCollapsed = this.config.legend.get('valueToShowWhenCollapsed');
|
||||
this.showTimestampWhenExpanded = this.config.legend.get('showTimestampWhenExpanded');
|
||||
this.showValueWhenExpanded = this.config.legend.get('showValueWhenExpanded');
|
||||
this.showMinimumWhenExpanded = this.config.legend.get('showMinimumWhenExpanded');
|
||||
this.showMaximumWhenExpanded = this.config.legend.get('showMaximumWhenExpanded');
|
||||
this.showUnitsWhenExpanded = this.config.legend.get('showUnitsWhenExpanded');
|
||||
},
|
||||
getConfig() {
|
||||
this.configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
|
||||
|
||||
return configStore.get(this.configId);
|
||||
},
|
||||
registerListeners() {
|
||||
this.config.series.forEach(this.addSeries, this);
|
||||
|
||||
this.listenTo(this.config.series, 'add', this.addSeries, this);
|
||||
this.listenTo(this.config.series, 'remove', this.resetAllSeries, this);
|
||||
},
|
||||
|
||||
addSeries(series, index) {
|
||||
this.plotSeries[index] = series;
|
||||
},
|
||||
|
||||
resetAllSeries() {
|
||||
this.plotSeries = [];
|
||||
this.config.series.forEach(this.addSeries, this);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
100
src/plugins/plot/vue/inspector/PlotOptionsEdit.vue
Normal file
100
src/plugins/plot/vue/inspector/PlotOptionsEdit.vue
Normal file
@ -0,0 +1,100 @@
|
||||
<!--
|
||||
Open MCT, Copyright (c) 2014-2020, United States Government
|
||||
as represented by the Administrator of the National Aeronautics and Space
|
||||
Administration. All rights reserved.
|
||||
|
||||
Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
http://www.apache.org/licenses/LICENSE-2.0.
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
License for the specific language governing permissions and limitations
|
||||
under the License.
|
||||
|
||||
Open MCT includes source code licensed under additional open source
|
||||
licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<template>
|
||||
<div v-if="config && loaded"
|
||||
class="js-plot-options-edit"
|
||||
>
|
||||
<ul class="c-tree">
|
||||
<h2 title="Display properties for this object">Plot Series</h2>
|
||||
<li v-for="series in plotSeries"
|
||||
:key="series.key"
|
||||
>
|
||||
<series-form :series="series" />
|
||||
</li>
|
||||
</ul>
|
||||
<y-axis-form v-show="!!plotSeries.length"
|
||||
class="grid-properties"
|
||||
:y-axis="config.yAxis"
|
||||
/>
|
||||
<ul class="l-inspector-part">
|
||||
<h2 title="Legend options">Legend</h2>
|
||||
<legend-form v-show="!!plotSeries.length"
|
||||
class="grid-properties"
|
||||
:legend="config.legend"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import SeriesForm from "@/plugins/plot/vue/inspector/forms/SeriesForm.vue";
|
||||
import YAxisForm from "@/plugins/plot/vue/inspector/forms/YAxisForm.vue";
|
||||
import LegendForm from "@/plugins/plot/vue/inspector/forms/LegendForm.vue";
|
||||
import eventHelpers from "@/plugins/plot/vue/single/lib/eventHelpers";
|
||||
import configStore from "@/plugins/plot/vue/single/configuration/configStore";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LegendForm,
|
||||
SeriesForm,
|
||||
YAxisForm
|
||||
},
|
||||
inject: ['openmct', 'domainObject'],
|
||||
data() {
|
||||
return {
|
||||
config: {},
|
||||
plotSeries: [],
|
||||
loaded: false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
eventHelpers.extend(this);
|
||||
this.config = this.getConfig();
|
||||
this.registerListeners();
|
||||
this.loaded = true;
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.stopListening();
|
||||
},
|
||||
methods: {
|
||||
getConfig() {
|
||||
this.configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
|
||||
|
||||
return configStore.get(this.configId);
|
||||
},
|
||||
registerListeners() {
|
||||
this.config.series.forEach(this.addSeries, this);
|
||||
|
||||
this.listenTo(this.config.series, 'add', this.addSeries, this);
|
||||
this.listenTo(this.config.series, 'remove', this.resetAllSeries, this);
|
||||
},
|
||||
|
||||
addSeries(series, index) {
|
||||
this.plotSeries[index] = series;
|
||||
},
|
||||
|
||||
resetAllSeries() {
|
||||
this.plotSeries = [];
|
||||
this.config.series.forEach(this.addSeries, this);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
155
src/plugins/plot/vue/inspector/PlotOptionsItem.vue
Normal file
155
src/plugins/plot/vue/inspector/PlotOptionsItem.vue
Normal file
@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<ul>
|
||||
<li class="c-tree__item menus-to-left">
|
||||
<span class="c-disclosure-triangle is-enabled flex-elem"
|
||||
:class="expandedCssClass"
|
||||
@click="toggleExpanded"
|
||||
>
|
||||
</span>
|
||||
<div class="c-object-label"
|
||||
:class="statusClass"
|
||||
>
|
||||
<div class="c-object-label__type-icon"
|
||||
:class="getSeriesClass"
|
||||
>
|
||||
<span class="is-status__indicator"
|
||||
title="This item is missing or suspect"
|
||||
></span>
|
||||
</div>
|
||||
<div class="c-object-label__name">{{ series.domainObject.name }}</div>
|
||||
</div>
|
||||
</li>
|
||||
<li v-show="expanded"
|
||||
class="c-tree__item menus-to-left"
|
||||
>
|
||||
<ul class="grid-properties js-plot-options-browse-properties">
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="The field to be plotted as a value for this series."
|
||||
>Value</div>
|
||||
<div class="grid-cell value">
|
||||
{{ yKey }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="The rendering method to join lines for this series."
|
||||
>Line Method</div>
|
||||
<div class="grid-cell value">{{ {
|
||||
'none': 'None',
|
||||
'linear': 'Linear interpolation',
|
||||
'stepAfter': 'Step After'
|
||||
}[interpolate] }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Whether markers are displayed, and their size."
|
||||
>Markers</div>
|
||||
<div class="grid-cell value">
|
||||
{{ markerOptionsDisplayText }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Display markers visually denoting points in alarm."
|
||||
>Alarm Markers</div>
|
||||
<div class="grid-cell value">
|
||||
{{ alarmMarkers ? "Enabled" : "Disabled" }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="The plot line and marker color for this series."
|
||||
>Color</div>
|
||||
<div class="grid-cell value">
|
||||
<span class="c-color-swatch"
|
||||
:style="{
|
||||
'background': seriesHexColor
|
||||
}"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
inject: ['openmct'],
|
||||
props: {
|
||||
series: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
expanded: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getSeriesClass() {
|
||||
let cssClass = '';
|
||||
let legacyObject = this.openmct.legacyObject(this.series.domainObject);
|
||||
let location = legacyObject.getCapability('location');
|
||||
if (location && location.isLink()) {
|
||||
cssClass = 'l-icon-link';
|
||||
}
|
||||
|
||||
let type = legacyObject.getCapability('type');
|
||||
if (type) {
|
||||
cssClass = `${cssClass} ${type.getCssClass()}`;
|
||||
}
|
||||
|
||||
return cssClass;
|
||||
},
|
||||
expandedCssClass() {
|
||||
if (this.expanded === true) {
|
||||
return 'c-disclosure-triangle--expanded';
|
||||
}
|
||||
|
||||
return '';
|
||||
},
|
||||
statusClass() {
|
||||
return (this.status) ? `is-status--${this.status}` : '';
|
||||
},
|
||||
yKey() {
|
||||
return this.series.get('yKey');
|
||||
},
|
||||
interpolate() {
|
||||
return this.series.get('interpolate');
|
||||
},
|
||||
markerOptionsDisplayText() {
|
||||
return this.series.markerOptionsDisplayText();
|
||||
},
|
||||
alarmMarkers() {
|
||||
return this.series.get('alarmMarkers');
|
||||
},
|
||||
seriesHexColor() {
|
||||
return this.series.get('color').asHexString();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.status = this.openmct.status.get(this.series.domainObject.identifier);
|
||||
this.removeStatusListener = this.openmct.status.observe(this.series.domainObject.identifier, this.setStatus);
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.removeStatusListener) {
|
||||
this.removeStatusListener();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleExpanded() {
|
||||
this.expanded = !this.expanded;
|
||||
},
|
||||
setStatus(status) {
|
||||
this.status = status;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
51
src/plugins/plot/vue/inspector/PlotsInspectorViewProvider.js
Normal file
51
src/plugins/plot/vue/inspector/PlotsInspectorViewProvider.js
Normal file
@ -0,0 +1,51 @@
|
||||
|
||||
import PlotOptions from "./PlotOptions.vue";
|
||||
import Vue from 'vue';
|
||||
|
||||
export default function PlotsInspectorViewProvider(openmct) {
|
||||
return {
|
||||
key: 'plots-inspector',
|
||||
name: 'Plots Inspector View',
|
||||
canView: function (selection) {
|
||||
if (selection.length === 0 || selection[0].length === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
let parent = selection[0].length > 1 && selection[0][1].context.item;
|
||||
let object = selection[0][0].context.item;
|
||||
|
||||
return parent
|
||||
&& parent.type === 'time-strip'
|
||||
&& object
|
||||
&& object.type === 'telemetry.plot.overlay';
|
||||
},
|
||||
view: function (selection) {
|
||||
let component;
|
||||
|
||||
return {
|
||||
show: function (element) {
|
||||
component = new Vue({
|
||||
el: element,
|
||||
components: {
|
||||
PlotOptions: PlotOptions
|
||||
},
|
||||
provide: {
|
||||
openmct,
|
||||
domainObject: openmct.selection.get()[0][0].context.item
|
||||
},
|
||||
template: '<plot-options></plot-options>'
|
||||
});
|
||||
},
|
||||
destroy: function () {
|
||||
if (component) {
|
||||
component.$destroy();
|
||||
component = undefined;
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
priority: function () {
|
||||
return 1;
|
||||
}
|
||||
};
|
||||
}
|
||||
207
src/plugins/plot/vue/inspector/forms/LegendForm.vue
Normal file
207
src/plugins/plot/vue/inspector/forms/LegendForm.vue
Normal file
@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<div>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="The position of the legend relative to the plot display area."
|
||||
>Position</div>
|
||||
<div class="grid-cell value">
|
||||
<select v-model="position"
|
||||
@change="updateForm('position')"
|
||||
>
|
||||
<option value="top">Top</option>
|
||||
<option value="right">Right</option>
|
||||
<option value="bottom">Bottom</option>
|
||||
<option value="left">Left</option>
|
||||
</select>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Hide the legend when the plot is small"
|
||||
>Hide when plot small</div>
|
||||
<div class="grid-cell value"><input v-model="hideLegendWhenSmall"
|
||||
type="checkbox"
|
||||
@change="updateForm('hideLegendWhenSmall')"
|
||||
></div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Show the legend expanded by default"
|
||||
>Expand by default</div>
|
||||
<div class="grid-cell value"><input v-model="expandByDefault"
|
||||
type="checkbox"
|
||||
@change="updateForm('expandByDefault')"
|
||||
></div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="What to display in the legend when it's collapsed."
|
||||
>When collapsed show</div>
|
||||
<div class="grid-cell value">
|
||||
<select v-model="valueToShowWhenCollapsed"
|
||||
@change="updateForm('valueToShowWhenCollapsed')"
|
||||
>
|
||||
<option value="none">Nothing</option>
|
||||
<option value="nearestTimestamp">Nearest timestamp</option>
|
||||
<option value="nearestValue">Nearest value</option>
|
||||
<option value="min">Minimum value</option>
|
||||
<option value="max">Maximum value</option>
|
||||
<option value="units">Units</option>
|
||||
</select>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="What to display in the legend when it's expanded."
|
||||
>When expanded show</div>
|
||||
<div class="grid-cell value">
|
||||
<ul>
|
||||
<li><input v-model="showTimestampWhenExpanded"
|
||||
type="checkbox"
|
||||
@change="updateForm('showTimestampWhenExpanded')"
|
||||
> Nearest timestamp</li>
|
||||
<li><input v-model="showValueWhenExpanded"
|
||||
type="checkbox"
|
||||
@change="updateForm('showValueWhenExpanded')"
|
||||
> Nearest value</li>
|
||||
<li><input v-model="showMinimumWhenExpanded"
|
||||
type="checkbox"
|
||||
@change="updateForm('showMinimumWhenExpanded')"
|
||||
> Minimum value</li>
|
||||
<li><input v-model="showMaximumWhenExpanded"
|
||||
type="checkbox"
|
||||
@change="updateForm('showMaximumWhenExpanded')"
|
||||
> Maximum value</li>
|
||||
<li><input v-model="showUnitsWhenExpanded"
|
||||
type="checkbox"
|
||||
@change="updateForm('showUnitsWhenExpanded')"
|
||||
> Units</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {coerce, objectPath, validate} from "@/plugins/plot/vue/inspector/forms/formUtil";
|
||||
import _ from "lodash";
|
||||
|
||||
export default {
|
||||
inject: ['openmct', 'domainObject'],
|
||||
props: {
|
||||
legend: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
position: '',
|
||||
hideLegendWhenSmall: '',
|
||||
expandByDefault: '',
|
||||
valueToShowWhenCollapsed: '',
|
||||
showTimestampWhenExpanded: '',
|
||||
showValueWhenExpanded: '',
|
||||
showMinimumWhenExpanded: '',
|
||||
showMaximumWhenExpanded: '',
|
||||
showUnitsWhenExpanded: '',
|
||||
validation: {}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initialize();
|
||||
this.initFormValues();
|
||||
},
|
||||
methods: {
|
||||
initialize() {
|
||||
this.fields = [
|
||||
{
|
||||
modelProp: 'position',
|
||||
objectPath: 'configuration.legend.position'
|
||||
},
|
||||
{
|
||||
modelProp: 'hideLegendWhenSmall',
|
||||
coerce: Boolean,
|
||||
objectPath: 'configuration.legend.hideLegendWhenSmall'
|
||||
},
|
||||
{
|
||||
modelProp: 'expandByDefault',
|
||||
coerce: Boolean,
|
||||
objectPath: 'configuration.legend.expandByDefault'
|
||||
},
|
||||
{
|
||||
modelProp: 'valueToShowWhenCollapsed',
|
||||
objectPath: 'configuration.legend.valueToShowWhenCollapsed'
|
||||
},
|
||||
{
|
||||
modelProp: 'showValueWhenExpanded',
|
||||
coerce: Boolean,
|
||||
objectPath: 'configuration.legend.showValueWhenExpanded'
|
||||
},
|
||||
{
|
||||
modelProp: 'showTimestampWhenExpanded',
|
||||
coerce: Boolean,
|
||||
objectPath: 'configuration.legend.showTimestampWhenExpanded'
|
||||
},
|
||||
{
|
||||
modelProp: 'showMaximumWhenExpanded',
|
||||
coerce: Boolean,
|
||||
objectPath: 'configuration.legend.showMaximumWhenExpanded'
|
||||
},
|
||||
{
|
||||
modelProp: 'showMinimumWhenExpanded',
|
||||
coerce: Boolean,
|
||||
objectPath: 'configuration.legend.showMinimumWhenExpanded'
|
||||
},
|
||||
{
|
||||
modelProp: 'showUnitsWhenExpanded',
|
||||
coerce: Boolean,
|
||||
objectPath: 'configuration.legend.showUnitsWhenExpanded'
|
||||
}
|
||||
];
|
||||
},
|
||||
initFormValues() {
|
||||
this.position = this.legend.get('position');
|
||||
this.hideLegendWhenSmall = this.legend.get('hideLegendWhenSmall');
|
||||
this.expandByDefault = this.legend.get('expandByDefault');
|
||||
this.valueToShowWhenCollapsed = this.legend.get('valueToShowWhenCollapsed');
|
||||
this.showTimestampWhenExpanded = this.legend.get('showTimestampWhenExpanded');
|
||||
this.showValueWhenExpanded = this.legend.get('showValueWhenExpanded');
|
||||
this.showMinimumWhenExpanded = this.legend.get('showMinimumWhenExpanded');
|
||||
this.showMaximumWhenExpanded = this.legend.get('showMaximumWhenExpanded');
|
||||
this.showUnitsWhenExpanded = this.legend.get('showUnitsWhenExpanded');
|
||||
},
|
||||
updateForm(formKey) {
|
||||
const newVal = this[formKey];
|
||||
const oldVal = this.legend.get(formKey);
|
||||
const formField = this.fields.find((field) => field.modelProp === formKey);
|
||||
|
||||
const path = objectPath(formField.objectPath);
|
||||
const validationResult = validate(newVal, this.legend, formField.validate);
|
||||
if (validationResult === true) {
|
||||
delete this.validation[formKey];
|
||||
} else {
|
||||
this.validation[formKey] = validationResult;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (!_.isEqual(coerce(newVal, formField.coerce), coerce(oldVal, formField.coerce))) {
|
||||
this.legend.set(formKey, coerce(newVal, formField.coerce));
|
||||
if (path) {
|
||||
this.openmct.objects.mutate(
|
||||
this.domainObject,
|
||||
path(this.domainObject, this.legend),
|
||||
coerce(newVal, formField.coerce)
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
setStatus(status) {
|
||||
this.status = status;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
347
src/plugins/plot/vue/inspector/forms/SeriesForm.vue
Normal file
347
src/plugins/plot/vue/inspector/forms/SeriesForm.vue
Normal file
@ -0,0 +1,347 @@
|
||||
<template>
|
||||
<ul>
|
||||
<li class="c-tree__item menus-to-left">
|
||||
<span class="c-disclosure-triangle is-enabled flex-elem"
|
||||
:class="expandedCssClass"
|
||||
@click="toggleExpanded"
|
||||
>
|
||||
</span>
|
||||
<div :class="objectLabelCss">
|
||||
<div class="c-object-label__type-icon"
|
||||
:class="[seriesCss, linkCss]"
|
||||
>
|
||||
<span class="is-status__indicator"
|
||||
title="This item is missing or suspect"
|
||||
></span>
|
||||
</div>
|
||||
<div class="c-object-label__name">{{ series.domainObject.name }}</div>
|
||||
</div>
|
||||
</li>
|
||||
<ul v-show="expanded"
|
||||
class="grid-properties js-plot-options-edit-properties"
|
||||
>
|
||||
<li class="grid-row">
|
||||
<!-- Value to be displayed -->
|
||||
<div class="grid-cell label"
|
||||
title="The field to be plotted as a value for this series."
|
||||
>Value</div>
|
||||
<div class="grid-cell value">
|
||||
<select v-model="yKey"
|
||||
@change="updateForm('yKey')"
|
||||
>
|
||||
<option v-for="option in yKeyOptions"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
:selected="option.value == yKey"
|
||||
>
|
||||
{{ option.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="The rendering method to join lines for this series."
|
||||
>Line Method</div>
|
||||
<div class="grid-cell value">
|
||||
<select v-model="interpolate"
|
||||
@change="updateForm('interpolate')"
|
||||
>
|
||||
<option value="none">None</option>
|
||||
<option value="linear">Linear interpolate</option>
|
||||
<option value="stepAfter">Step after</option>
|
||||
</select>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Whether markers are displayed."
|
||||
>Markers</div>
|
||||
<div class="grid-cell value">
|
||||
<input v-model="markers"
|
||||
type="checkbox"
|
||||
@change="updateForm('markers')"
|
||||
>
|
||||
<select
|
||||
v-show="markers"
|
||||
v-model="markerShape"
|
||||
@change="updateForm('markerShape')"
|
||||
>
|
||||
<option
|
||||
v-for="option in markerShapeOptions"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
:selected="option.value == markerShape"
|
||||
>
|
||||
{{ option.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Display markers visually denoting points in alarm."
|
||||
>Alarm Markers</div>
|
||||
<div class="grid-cell value">
|
||||
<input v-model="alarmMarkers"
|
||||
type="checkbox"
|
||||
@change="updateForm('alarmMarkers')"
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
<li v-show="markers || alarmMarkers"
|
||||
class="grid-row"
|
||||
>
|
||||
<div class="grid-cell label"
|
||||
title="The size of regular and alarm markers for this series."
|
||||
>Marker Size:</div>
|
||||
<div class="grid-cell value"><input v-model="markerSize"
|
||||
class="c-input--flex"
|
||||
type="text"
|
||||
@change="updateForm('markerSize')"
|
||||
></div>
|
||||
</li>
|
||||
<li v-show="interpolate !== 'none' || markers"
|
||||
class="grid-row"
|
||||
>
|
||||
<div class="grid-cell label"
|
||||
title="Manually set the plot line and marker color for this series."
|
||||
>Color</div>
|
||||
<div class="grid-cell value">
|
||||
<div class="c-click-swatch c-click-swatch--menu"
|
||||
@click="toggleSwatch()"
|
||||
>
|
||||
<span class="c-color-swatch"
|
||||
:style="{ background: seriesColorAsHex }"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
<div class="c-palette c-palette--color">
|
||||
<div v-show="swatchActive"
|
||||
class="c-palette__items"
|
||||
>
|
||||
<div v-for="(group, index) in colorPalette"
|
||||
:key="index"
|
||||
class="u-contents"
|
||||
>
|
||||
<div v-for="(color, colorIndex) in group"
|
||||
:key="colorIndex"
|
||||
class="c-palette__item"
|
||||
:class="{ 'selected': series.get('color').equalTo(color) }"
|
||||
:style="{ background: color.asHexString() }"
|
||||
@click="setColor(color)"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { MARKER_SHAPES } from "../../single/draw/MarkerShapes";
|
||||
import { objectPath, validate, coerce } from "./formUtil";
|
||||
import _ from 'lodash';
|
||||
|
||||
export default {
|
||||
inject: ['openmct', 'domainObject'],
|
||||
props: {
|
||||
series: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
expanded: false,
|
||||
markerShapeOptions: [],
|
||||
yKey: this.series.get('yKey'),
|
||||
yKeyOptions: [],
|
||||
interpolate: this.series.get('interpolate'),
|
||||
markers: this.series.get('markers'),
|
||||
markerShape: this.series.get('markerShape'),
|
||||
alarmMarkers: this.series.get('alarmMarkers'),
|
||||
markerSize: this.series.get('markerSize'),
|
||||
validation: {},
|
||||
swatchActive: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
colorPalette() {
|
||||
return this.series.collection.palette.groups();
|
||||
},
|
||||
objectLabelCss() {
|
||||
return this.status ? `c-object-label is-status--${this.status}'` : 'c-object-label';
|
||||
},
|
||||
seriesCss() {
|
||||
let legacyObject = this.openmct.legacyObject(this.series.domainObject);
|
||||
let type = legacyObject.getCapability('type');
|
||||
|
||||
return type ? `c-object-label__type-icon ${type.getCssClass()}` : `c-object-label__type-icon`;
|
||||
},
|
||||
linkCss() {
|
||||
let cssClass = '';
|
||||
let legacyObject = this.openmct.legacyObject(this.series.domainObject);
|
||||
let location = legacyObject.getCapability('location');
|
||||
if (location && location.isLink()) {
|
||||
cssClass = 'l-icon-link';
|
||||
}
|
||||
|
||||
return cssClass;
|
||||
},
|
||||
expandedCssClass() {
|
||||
return this.expanded ? 'c-disclosure-triangle--expanded' : '';
|
||||
},
|
||||
seriesColorAsHex() {
|
||||
return this.series.get('color').asHexString();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initialize();
|
||||
|
||||
this.status = this.openmct.status.get(this.series.domainObject.identifier);
|
||||
this.removeStatusListener = this.openmct.status.observe(this.series.domainObject.identifier, this.setStatus);
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.removeStatusListener) {
|
||||
this.removeStatusListener();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initialize: function () {
|
||||
this.fields = [
|
||||
{
|
||||
modelProp: 'yKey',
|
||||
objectPath: this.dynamicPathForKey('yKey')
|
||||
},
|
||||
{
|
||||
modelProp: 'interpolate',
|
||||
objectPath: this.dynamicPathForKey('interpolate')
|
||||
},
|
||||
{
|
||||
modelProp: 'markers',
|
||||
objectPath: this.dynamicPathForKey('markers')
|
||||
},
|
||||
{
|
||||
modelProp: 'markerShape',
|
||||
objectPath: this.dynamicPathForKey('markerShape')
|
||||
},
|
||||
{
|
||||
modelProp: 'markerSize',
|
||||
coerce: Number,
|
||||
objectPath: this.dynamicPathForKey('markerSize')
|
||||
},
|
||||
{
|
||||
modelProp: 'alarmMarkers',
|
||||
coerce: Boolean,
|
||||
objectPath: this.dynamicPathForKey('alarmMarkers')
|
||||
}
|
||||
];
|
||||
|
||||
const metadata = this.series.metadata;
|
||||
this.yKeyOptions = metadata
|
||||
.valuesForHints(['range'])
|
||||
.map(function (o) {
|
||||
return {
|
||||
name: o.key,
|
||||
value: o.key
|
||||
};
|
||||
});
|
||||
this.markerShapeOptions = Object.entries(MARKER_SHAPES)
|
||||
.map(([key, obj]) => {
|
||||
return {
|
||||
name: obj.label,
|
||||
value: key
|
||||
};
|
||||
});
|
||||
},
|
||||
dynamicPathForKey(key) {
|
||||
return function (object, model) {
|
||||
const modelIdentifier = model.get('identifier');
|
||||
const index = object.configuration.series.findIndex(s => {
|
||||
return _.isEqual(s.identifier, modelIdentifier);
|
||||
});
|
||||
|
||||
return 'configuration.series[' + index + '].' + key;
|
||||
};
|
||||
},
|
||||
/**
|
||||
* Set the color for the current plot series. If the new color was
|
||||
* already assigned to a different plot series, then swap the colors.
|
||||
*/
|
||||
setColor: function (color) {
|
||||
const oldColor = this.series.get('color');
|
||||
const otherSeriesWithColor = this.series.collection.filter(function (s) {
|
||||
return s.get('color') === color;
|
||||
})[0];
|
||||
|
||||
this.series.set('color', color);
|
||||
|
||||
const getPath = this.dynamicPathForKey('color');
|
||||
const seriesColorPath = getPath(this.domainObject, this.series);
|
||||
|
||||
this.openmct.objects.mutate(
|
||||
this.domainObject,
|
||||
seriesColorPath,
|
||||
color.asHexString()
|
||||
);
|
||||
|
||||
if (otherSeriesWithColor) {
|
||||
otherSeriesWithColor.set('color', oldColor);
|
||||
|
||||
const otherSeriesColorPath = getPath(
|
||||
this.domainObject,
|
||||
otherSeriesWithColor
|
||||
);
|
||||
|
||||
this.openmct.objects.mutate(
|
||||
this.domainObject,
|
||||
otherSeriesColorPath,
|
||||
oldColor.asHexString()
|
||||
);
|
||||
}
|
||||
},
|
||||
toggleExpanded() {
|
||||
this.expanded = !this.expanded;
|
||||
},
|
||||
updateForm(formKey) {
|
||||
const newVal = this[formKey];
|
||||
const oldVal = this.series.get(formKey);
|
||||
const formField = this.fields.find((field) => field.modelProp === formKey);
|
||||
|
||||
const path = objectPath(formField.objectPath);
|
||||
const validationResult = validate(newVal, this.series, formField.validate);
|
||||
if (validationResult === true) {
|
||||
delete this.validation[formKey];
|
||||
} else {
|
||||
this.validation[formKey] = validationResult;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (!_.isEqual(coerce(newVal, formField.coerce), coerce(oldVal, formField.coerce))) {
|
||||
this.series.set(formKey, coerce(newVal, formField.coerce));
|
||||
if (path) {
|
||||
this.openmct.objects.mutate(
|
||||
this.domainObject,
|
||||
path(this.domainObject, this.series),
|
||||
coerce(newVal, formField.coerce)
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
setStatus(status) {
|
||||
this.status = status;
|
||||
},
|
||||
toggleSwatch() {
|
||||
this.swatchActive = !this.swatchActive;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
226
src/plugins/plot/vue/inspector/forms/YAxisForm.vue
Normal file
226
src/plugins/plot/vue/inspector/forms/YAxisForm.vue
Normal file
@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<div>
|
||||
<ul class="l-inspector-part">
|
||||
<h2>Y Axis</h2>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Manually override how the Y axis is labeled."
|
||||
>Label</div>
|
||||
<div class="grid-cell value"><input v-model="label"
|
||||
class="c-input--flex"
|
||||
type="text"
|
||||
@change="updateForm('label')"
|
||||
></div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="l-inspector-part">
|
||||
<h2>Y Axis Scaling</h2>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Automatically scale the Y axis to keep all values in view."
|
||||
>Auto scale</div>
|
||||
<div class="grid-cell value"><input v-model="autoscale"
|
||||
type="checkbox"
|
||||
@change="updateForm('autoscale')"
|
||||
></div>
|
||||
</li>
|
||||
<li v-show="autoscale"
|
||||
class="grid-row"
|
||||
>
|
||||
<div class="grid-cell label"
|
||||
title="Percentage of padding above and below plotted min and max values. 0.1, 1.0, etc."
|
||||
>
|
||||
Padding</div>
|
||||
<div class="grid-cell value">
|
||||
<input v-model="autoscalePadding"
|
||||
class="c-input--flex"
|
||||
type="text"
|
||||
@change="updateForm('autoscalePadding')"
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-show="!autoscale"
|
||||
class="l-inspector-part"
|
||||
>
|
||||
<div v-show="!autoscale && validation.range"
|
||||
class="grid-span-all form-error"
|
||||
>
|
||||
{{ validation.range }}
|
||||
</div>
|
||||
<li class="grid-row force-border">
|
||||
<div class="grid-cell label"
|
||||
title="Minimum Y axis value."
|
||||
>Minimum Value</div>
|
||||
<div class="grid-cell value">
|
||||
<input v-model="rangeMin"
|
||||
class="c-input--flex"
|
||||
type="number"
|
||||
@change="updateForm('range')"
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Maximum Y axis value."
|
||||
>Maximum Value</div>
|
||||
<div class="grid-cell value"><input v-model="rangeMax"
|
||||
class="c-input--flex"
|
||||
type="number"
|
||||
@change="updateForm('range')"
|
||||
></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { objectPath, validate, coerce } from "./formUtil";
|
||||
import _ from "lodash";
|
||||
|
||||
export default {
|
||||
inject: ['openmct', 'domainObject'],
|
||||
props: {
|
||||
yAxis: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
label: '',
|
||||
autoscale: '',
|
||||
autoscalePadding: '',
|
||||
rangeMin: '',
|
||||
rangeMax: '',
|
||||
validation: {}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initialize();
|
||||
this.initFormValues();
|
||||
},
|
||||
methods: {
|
||||
initialize: function () {
|
||||
this.fields = [
|
||||
{
|
||||
modelProp: 'label',
|
||||
objectPath: 'configuration.yAxis.label'
|
||||
},
|
||||
{
|
||||
modelProp: 'autoscale',
|
||||
coerce: Boolean,
|
||||
objectPath: 'configuration.yAxis.autoscale'
|
||||
},
|
||||
{
|
||||
modelProp: 'autoscalePadding',
|
||||
coerce: Number,
|
||||
objectPath: 'configuration.yAxis.autoscalePadding'
|
||||
},
|
||||
{
|
||||
modelProp: 'range',
|
||||
objectPath: 'configuration.yAxis.range',
|
||||
coerce: function coerceRange(range) {
|
||||
if (!range) {
|
||||
return {
|
||||
min: 0,
|
||||
max: 0
|
||||
};
|
||||
}
|
||||
|
||||
const newRange = {};
|
||||
if (typeof range.min !== 'undefined' && range.min !== null) {
|
||||
newRange.min = Number(range.min);
|
||||
}
|
||||
|
||||
if (typeof range.max !== 'undefined' && range.max !== null) {
|
||||
newRange.max = Number(range.max);
|
||||
}
|
||||
|
||||
return newRange;
|
||||
},
|
||||
validate: function validateRange(range, model) {
|
||||
if (!range) {
|
||||
return 'Need range';
|
||||
}
|
||||
|
||||
if (range.min === '' || range.min === null || typeof range.min === 'undefined') {
|
||||
return 'Must specify Minimum';
|
||||
}
|
||||
|
||||
if (range.max === '' || range.max === null || typeof range.max === 'undefined') {
|
||||
return 'Must specify Maximum';
|
||||
}
|
||||
|
||||
if (Number.isNaN(Number(range.min))) {
|
||||
return 'Minimum must be a number.';
|
||||
}
|
||||
|
||||
if (Number.isNaN(Number(range.max))) {
|
||||
return 'Maximum must be a number.';
|
||||
}
|
||||
|
||||
if (Number(range.min) > Number(range.max)) {
|
||||
return 'Minimum must be less than Maximum.';
|
||||
}
|
||||
|
||||
if (model.get('autoscale')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
];
|
||||
},
|
||||
initFormValues() {
|
||||
this.label = this.yAxis.get('label');
|
||||
this.autoscale = this.yAxis.get('autoscale');
|
||||
this.autoscalePadding = this.yAxis.get('autoscalePadding');
|
||||
const range = this.yAxis.get('range');
|
||||
if (range) {
|
||||
this.rangeMin = range.min;
|
||||
this.rangeMax = range.max;
|
||||
}
|
||||
},
|
||||
updateForm(formKey) {
|
||||
let newVal;
|
||||
if (formKey === 'range') {
|
||||
newVal = {
|
||||
min: this.rangeMin,
|
||||
max: this.rangeMax
|
||||
};
|
||||
} else {
|
||||
newVal = this[formKey];
|
||||
}
|
||||
|
||||
const oldVal = this.yAxis.get(formKey);
|
||||
const formField = this.fields.find((field) => field.modelProp === formKey);
|
||||
|
||||
const path = objectPath(formField.objectPath);
|
||||
const validationResult = validate(newVal, this.yAxis, formField.validate);
|
||||
if (validationResult === true) {
|
||||
delete this.validation[formKey];
|
||||
} else {
|
||||
this.validation[formKey] = validationResult;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (!_.isEqual(coerce(newVal, formField.coerce), coerce(oldVal, formField.coerce))) {
|
||||
this.yAxis.set(formKey, coerce(newVal, formField.coerce));
|
||||
if (path) {
|
||||
this.openmct.objects.mutate(
|
||||
this.domainObject,
|
||||
path(this.domainObject, this.yAxis),
|
||||
coerce(newVal, formField.coerce)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
29
src/plugins/plot/vue/inspector/forms/formUtil.js
Normal file
29
src/plugins/plot/vue/inspector/forms/formUtil.js
Normal file
@ -0,0 +1,29 @@
|
||||
export function coerce(value, coerceFunc) {
|
||||
if (coerceFunc) {
|
||||
return coerceFunc(value);
|
||||
}
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
export function validate(value, model, validateFunc) {
|
||||
if (validateFunc) {
|
||||
return validateFunc(value, model);
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
export function objectPath(path) {
|
||||
if (path) {
|
||||
if (typeof path !== "function") {
|
||||
const staticObjectPath = path;
|
||||
|
||||
return function (object, model) {
|
||||
return staticObjectPath;
|
||||
};
|
||||
}
|
||||
|
||||
return path;
|
||||
}
|
||||
}
|
||||
@ -23,12 +23,14 @@
|
||||
import PlotViewProvider from './PlotViewProvider';
|
||||
import OverlayPlotViewProvider from '../overlayPlot/OverlayPlotViewProvider';
|
||||
import StackedPlotViewProvider from '../stackedPlot/StackedPlotViewProvider';
|
||||
import PlotsInspectorViewProvider from '../inspector/PlotsInspectorViewProvider';
|
||||
|
||||
export default function () {
|
||||
return function install(openmct) {
|
||||
openmct.objectViews.addProvider(new StackedPlotViewProvider(openmct));
|
||||
openmct.objectViews.addProvider(new OverlayPlotViewProvider(openmct));
|
||||
openmct.objectViews.addProvider(new PlotViewProvider(openmct));
|
||||
openmct.inspectorViews.addProvider(new PlotsInspectorViewProvider(openmct));
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -26,6 +26,8 @@ import Vue from "vue";
|
||||
import StackedPlot from "../stackedPlot/StackedPlot.vue";
|
||||
import configStore from "@/plugins/plot/vue/single/configuration/configStore";
|
||||
import EventEmitter from "EventEmitter";
|
||||
import PlotOptions from "../inspector/PlotOptions.vue";
|
||||
import PlotConfigurationModel from "@/plugins/plot/vue/single/configuration/PlotConfigurationModel";
|
||||
|
||||
describe("the plugin", function () {
|
||||
let element;
|
||||
@ -174,6 +176,35 @@ describe("the plugin", function () {
|
||||
expect(plotView).toBeDefined();
|
||||
});
|
||||
|
||||
it('provides an inspector view for overlay plots', () => {
|
||||
let selection = [
|
||||
[
|
||||
{
|
||||
context: {
|
||||
item: {
|
||||
id: "test-object",
|
||||
type: "telemetry.plot.overlay",
|
||||
telemetry: {
|
||||
values: [{
|
||||
key: "some-key"
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
context: {
|
||||
item: {
|
||||
type: 'time-strip'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
];
|
||||
const plotInspectorView = openmct.inspectorViews.get(selection);
|
||||
expect(plotInspectorView.length).toEqual(1);
|
||||
});
|
||||
|
||||
it("provides a stacked plot view for objects with telemetry", () => {
|
||||
const testTelemetryObject = {
|
||||
id: "test-object",
|
||||
@ -578,4 +609,218 @@ describe("the plugin", function () {
|
||||
});
|
||||
});
|
||||
|
||||
describe('the inspector view', () => {
|
||||
let component;
|
||||
let viewComponentObject;
|
||||
let mockComposition;
|
||||
let testTelemetryObject;
|
||||
let selection;
|
||||
let config;
|
||||
beforeEach((done) => {
|
||||
testTelemetryObject = {
|
||||
identifier: {
|
||||
namespace: "",
|
||||
key: "test-object"
|
||||
},
|
||||
type: "test-object",
|
||||
name: "Test Object",
|
||||
telemetry: {
|
||||
values: [{
|
||||
key: "utc",
|
||||
format: "utc",
|
||||
name: "Time",
|
||||
hints: {
|
||||
domain: 1
|
||||
}
|
||||
}, {
|
||||
key: "some-key",
|
||||
name: "Some attribute",
|
||||
hints: {
|
||||
range: 1
|
||||
}
|
||||
}, {
|
||||
key: "some-other-key",
|
||||
name: "Another attribute",
|
||||
hints: {
|
||||
range: 2
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
selection = [
|
||||
[
|
||||
{
|
||||
context: {
|
||||
item: {
|
||||
id: "test-object",
|
||||
identifier: {
|
||||
key: "test-object",
|
||||
namespace: ''
|
||||
},
|
||||
type: "telemetry.plot.overlay",
|
||||
configuration: {
|
||||
series: [
|
||||
{
|
||||
identifier: {
|
||||
key: "test-object",
|
||||
namespace: ''
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
composition: []
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
context: {
|
||||
item: {
|
||||
type: 'time-strip',
|
||||
identifier: {
|
||||
key: 'some-other-key',
|
||||
namespace: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
];
|
||||
|
||||
mockComposition = new EventEmitter();
|
||||
mockComposition.load = () => {
|
||||
mockComposition.emit('add', testTelemetryObject);
|
||||
|
||||
return [testTelemetryObject];
|
||||
};
|
||||
|
||||
spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
|
||||
|
||||
const configId = openmct.objects.makeKeyString(selection[0][0].context.item.identifier);
|
||||
config = new PlotConfigurationModel({
|
||||
id: configId,
|
||||
domainObject: selection[0][0].context.item,
|
||||
openmct: openmct
|
||||
});
|
||||
configStore.add(configId, config);
|
||||
|
||||
let viewContainer = document.createElement('div');
|
||||
child.append(viewContainer);
|
||||
component = new Vue({
|
||||
el: viewContainer,
|
||||
components: {
|
||||
PlotOptions
|
||||
},
|
||||
provide: {
|
||||
openmct: openmct,
|
||||
domainObject: selection[0][0].context.item,
|
||||
path: [selection[0][0].context.item, selection[0][1].context.item]
|
||||
},
|
||||
template: '<plot-options/>'
|
||||
});
|
||||
|
||||
Vue.nextTick(() => {
|
||||
viewComponentObject = component.$root.$children[0];
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
describe('in view only mode', () => {
|
||||
let browseOptionsEl;
|
||||
let editOptionsEl;
|
||||
beforeEach(() => {
|
||||
browseOptionsEl = viewComponentObject.$el.querySelector('.js-plot-options-browse');
|
||||
editOptionsEl = viewComponentObject.$el.querySelector('.js-plot-options-edit');
|
||||
});
|
||||
|
||||
it('does not show the edit options', () => {
|
||||
expect(editOptionsEl).toBeNull();
|
||||
});
|
||||
|
||||
it('shows the name', () => {
|
||||
const seriesEl = browseOptionsEl.querySelector('.c-object-label__name');
|
||||
expect(seriesEl.innerHTML).toEqual(testTelemetryObject.name);
|
||||
});
|
||||
|
||||
it('shows in collapsed mode', () => {
|
||||
const seriesEl = browseOptionsEl.querySelectorAll('.c-disclosure-triangle--expanded');
|
||||
expect(seriesEl.length).toEqual(0);
|
||||
});
|
||||
|
||||
it('shows in expanded mode', () => {
|
||||
let expandControl = browseOptionsEl.querySelector(".c-disclosure-triangle");
|
||||
const clickEvent = createMouseEvent("click");
|
||||
expandControl.dispatchEvent(clickEvent);
|
||||
|
||||
const plotOptionsProperties = browseOptionsEl.querySelectorAll('.js-plot-options-browse-properties .grid-row');
|
||||
expect(plotOptionsProperties.length).toEqual(5);
|
||||
});
|
||||
});
|
||||
|
||||
describe('in edit mode', () => {
|
||||
let editOptionsEl;
|
||||
let browseOptionsEl;
|
||||
|
||||
beforeEach((done) => {
|
||||
viewComponentObject.setEditState(true);
|
||||
Vue.nextTick(() => {
|
||||
editOptionsEl = viewComponentObject.$el.querySelector('.js-plot-options-edit');
|
||||
browseOptionsEl = viewComponentObject.$el.querySelector('.js-plot-options-browse');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('does not show the browse options', () => {
|
||||
expect(browseOptionsEl).toBeNull();
|
||||
});
|
||||
|
||||
it('shows the name', () => {
|
||||
const seriesEl = editOptionsEl.querySelector('.c-object-label__name');
|
||||
expect(seriesEl.innerHTML).toEqual(testTelemetryObject.name);
|
||||
});
|
||||
|
||||
it('shows in collapsed mode', () => {
|
||||
const seriesEl = editOptionsEl.querySelectorAll('.c-disclosure-triangle--expanded');
|
||||
expect(seriesEl.length).toEqual(0);
|
||||
});
|
||||
|
||||
it('shows in collapsed mode', () => {
|
||||
const seriesEl = editOptionsEl.querySelectorAll('.c-disclosure-triangle--expanded');
|
||||
expect(seriesEl.length).toEqual(0);
|
||||
});
|
||||
|
||||
it('renders expanded', () => {
|
||||
const expandControl = editOptionsEl.querySelector(".c-disclosure-triangle");
|
||||
const clickEvent = createMouseEvent("click");
|
||||
expandControl.dispatchEvent(clickEvent);
|
||||
|
||||
const plotOptionsProperties = editOptionsEl.querySelectorAll(".js-plot-options-edit-properties .grid-row");
|
||||
expect(plotOptionsProperties.length).toEqual(6);
|
||||
});
|
||||
|
||||
it('shows yKeyOptions', () => {
|
||||
const expandControl = editOptionsEl.querySelector(".c-disclosure-triangle");
|
||||
const clickEvent = createMouseEvent("click");
|
||||
expandControl.dispatchEvent(clickEvent);
|
||||
|
||||
const plotOptionsProperties = editOptionsEl.querySelectorAll(".js-plot-options-edit-properties .grid-row");
|
||||
|
||||
const yKeySelection = plotOptionsProperties[0].querySelector('select');
|
||||
const options = Array.from(yKeySelection.options).map((option) => {
|
||||
return option.value;
|
||||
});
|
||||
expect(options).toEqual([testTelemetryObject.telemetry.values[1].key, testTelemetryObject.telemetry.values[2].key]);
|
||||
});
|
||||
|
||||
it('shows yAxis options', () => {
|
||||
const expandControl = editOptionsEl.querySelector(".c-disclosure-triangle");
|
||||
const clickEvent = createMouseEvent("click");
|
||||
expandControl.dispatchEvent(clickEvent);
|
||||
|
||||
const yAxisProperties = editOptionsEl.querySelectorAll("div.grid-properties:first-of-type .l-inspector-part");
|
||||
expect(yAxisProperties.length).toEqual(3);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
113
src/plugins/timeline/TimelineObjectView.vue
Normal file
113
src/plugins/timeline/TimelineObjectView.vue
Normal file
@ -0,0 +1,113 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2021, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
<template>
|
||||
<swim-lane :icon-class="item.type.definition.cssClass"
|
||||
:min-height="item.height"
|
||||
:show-ucontents="item.domainObject.type === 'plan'"
|
||||
:span-rows-count="item.rowCount"
|
||||
>
|
||||
<template slot="label">
|
||||
{{ item.domainObject.name }}
|
||||
</template>
|
||||
<object-view
|
||||
ref="objectView"
|
||||
slot="object"
|
||||
class="u-contents"
|
||||
:default-object="item.domainObject"
|
||||
:object-view-key="item.viewKey"
|
||||
:object-path="item.objectPath"
|
||||
/>
|
||||
</swim-lane>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ObjectView from '@/ui/components/ObjectView.vue';
|
||||
import SwimLane from "@/ui/components/swim-lane/SwimLane.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ObjectView,
|
||||
SwimLane
|
||||
},
|
||||
inject: ['openmct'],
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
domainObject: undefined,
|
||||
mutablePromise: undefined
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
item(newItem) {
|
||||
if (!this.context) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.context.item = newItem.domainObject;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.openmct.objects.supportsMutation(this.item.domainObject.identifier)) {
|
||||
this.mutablePromise = this.openmct.objects.getMutable(this.item.domainObject.identifier)
|
||||
.then(this.setObject);
|
||||
} else {
|
||||
this.openmct.objects.get(this.item.domainObject.identifier)
|
||||
.then(this.setObject);
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.removeSelectable) {
|
||||
this.removeSelectable();
|
||||
}
|
||||
|
||||
if (this.mutablePromise) {
|
||||
this.mutablePromise.then(() => {
|
||||
this.openmct.objects.destroyMutable(this.domainObject);
|
||||
});
|
||||
} else {
|
||||
this.openmct.objects.destroyMutable(this.domainObject);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setObject(domainObject) {
|
||||
this.domainObject = domainObject;
|
||||
this.mutablePromise = undefined;
|
||||
this.$nextTick(() => {
|
||||
let reference = this.$refs.objectView;
|
||||
|
||||
if (reference) {
|
||||
let childContext = this.$refs.objectView.getSelectionContext();
|
||||
childContext.item = domainObject;
|
||||
this.context = childContext;
|
||||
this.removeSelectable = this.openmct.selection.selectable(
|
||||
this.$el, this.context);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -52,22 +52,10 @@
|
||||
:key="item.keyString"
|
||||
class="u-contents c-timeline__content"
|
||||
>
|
||||
<swim-lane :icon-class="item.type.definition.cssClass"
|
||||
:min-height="item.height"
|
||||
:show-ucontents="item.domainObject.type === 'plan'"
|
||||
:span-rows-count="item.rowCount"
|
||||
>
|
||||
<template slot="label">
|
||||
{{ item.domainObject.name }}
|
||||
</template>
|
||||
<object-view
|
||||
slot="object"
|
||||
class="u-contents"
|
||||
:default-object="item.domainObject"
|
||||
:object-view-key="item.viewKey"
|
||||
:object-path="item.objectPath"
|
||||
/>
|
||||
</swim-lane>
|
||||
<timeline-object-view
|
||||
class="u-contents"
|
||||
:item="item"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -75,7 +63,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ObjectView from '@/ui/components/ObjectView.vue';
|
||||
import TimelineObjectView from './TimelineObjectView.vue';
|
||||
import TimelineAxis from '../../ui/components/TimeSystemAxis.vue';
|
||||
import SwimLane from "@/ui/components/swim-lane/SwimLane.vue";
|
||||
import { getValidatedPlan } from "../plan/util";
|
||||
@ -101,7 +89,7 @@ function getViewKey(domainObject, objectPath, openmct) {
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ObjectView,
|
||||
TimelineObjectView,
|
||||
TimelineAxis,
|
||||
SwimLane
|
||||
},
|
||||
@ -158,6 +146,7 @@ export default {
|
||||
},
|
||||
removeItem(identifier) {
|
||||
let index = this.items.findIndex(item => this.openmct.objects.areIdsEqual(identifier, item.domainObject.identifier));
|
||||
this.removeSelectable(this.items[index]);
|
||||
this.items.splice(index, 1);
|
||||
},
|
||||
reorder(reorderPlan) {
|
||||
|
||||
@ -21,7 +21,6 @@
|
||||
<div class="c-swimlane__lane-object"
|
||||
:style="{'min-height': minHeight}"
|
||||
:class="{'u-contents': showUcontents}"
|
||||
data-selectable
|
||||
>
|
||||
<slot name="object"></slot>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user