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

Time strip view to show different components within a given timeline (#3654)

Browse Source 
* Initial commit of plot refactor for vuejs

* Use es6 classes instead of using extend

* Use classList api to add and remove classes

* Remove angular specific event mechanisms

* Refactor plot legend into smaller components

* Refactor moving config into MctPlot component. Fix Legend issues.

* Refactor XAxis and YAxis into their own components

* Remove commented out code

* Remove empty initialize method

* Fix grid lines and initialize function revert.

* Check that plots views are available only to domainObjects that have range and domain

* Make css class a computed property

* Remove unnecessary legacyObject conversion

* Remove comments and commented out code

* Remove use of private for vue methods

* Remove console logs

* Fixes Y-axis ticks display

* Add plots and plans to the time strip view

* Adds stacked plots and overlay plots

* Fix css for stacked plots

* Disable Vue plots

* Rename Stacked plot item component

* Make the time axis a component
Ensure plans and timelines use the time axis component and it is displayed correctly
ensure plots don't display specific controls when in compact mode

* Add missing file

* Revert change to state generator metadata

* Address Review comment: Remove unnecessary event emitted

* Address review comments: Add a note about why nextTick is needed

* Display time systems in time strip view
Update look and feel (css)

* Fix bug with legend when multiple plots are being displayed

* Don't show action buttons for stacked plots

* Changes to plan view to render as a css grid

* Change LinearScale to a class

* Remove duplicated comment

* Adds missing copyright info

* Revert change to stackedplotItem

* Styling for Timestrip view WIP

- Significant mods to markup and CSS to use CSS grid;
- CSS class names changed;

* Styling for Timestrip view WIP

- Temp mods to illustrate design desires for the appearance of the time
axis;

* Layout changes for plan in timestrip view

* Increase style height to match number of stacked plot items

* Fix ticks

* Fix removal of activities

* Remove event listeners on destroy

* Styling for Timestrip view WIP

- VERY WIP trying to make the plan component work properly when dropped
into a Timestrip view, lots of badness that needs to be fixed;
- Refined classes in acivity bars to differentiate between the rect and
its text;

* Show Vue plots only in timestrip view.
Reorder and Remove now works for timestrip objects

* Make swim lanes a component to be reused by time strip and plan views
Rewrite svg rendering to use javascript rather than d3.
Write a prototype of foreign object for svg to render text

* Don't show left and right edges when start or end is out of bounds

* Descriptive name for Plan views

* Adds plan icon and name

* Fixes linting issues

* Adds basic tests

* Fixes broken test.

* Adds new test

* Fix linting errors. Adds tests

* Adds tests

* Adds tests for stacked plots

* Adds more tests

* Removes fdescribe

* Adds tests for y-axis ticks

* Tests for addition of series to plots

* Adds more tests

* Adds cursor guides test

* Adds tests for interceptors

* Adds more plots tests for x and y scale

* Use config store

* Adding goToOriginalAction tests

* Fix tests for plan and time strip views

* Fixes height of SVG

* Fixes broken tests

* Address review comments: remove view options API change.

* Remove commented out code

* Fix tests

* Use the clientWidth of the plan if it's available

* Account for the width of labels in the client width

* Remove unnecessary test code

Co-authored-by: charlesh88 <charlesh88@gmail.com>
Co-authored-by: Andrew Henry <akhenry@gmail.com>
This commit is contained in:
Shefali Joshi
2021-02-24 09:40:57 -08:00
committed by GitHub
parent f789775b1c
commit 169eec0a51
29 changed files with 1358 additions and 682 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/plugins/plot/vue/overlayPlot/OverlayPlotViewProvider.js
View File

@ -24,6 +24,10 @@ import Plot from '../single/Plot.vue';
import Vue from 'vue';
export default function OverlayPlotViewProvider(openmct) {
function isCompactView(objectPath) {
return objectPath.find(object => object.type === 'time-strip');
}
return {
key: 'plot-overlay',
name: 'Overlay Plot',
@ -36,11 +40,12 @@ export default function OverlayPlotViewProvider(openmct) {
return domainObject.type === 'telemetry.plot.overlay';
},
view: function (domainObject) {
view: function (domainObject, objectPath) {
let component;
return {
show: function (element) {
let isCompact = isCompactView(objectPath);
component = new Vue({
el: element,
components: {
@ -50,7 +55,14 @@ export default function OverlayPlotViewProvider(openmct) {
openmct,
domainObject
},
template: '<plot></plot>'
data() {
return {
options: {
compact: isCompact
}
};
},
template: '<plot :options="options"></plot>'
});
},
destroy: function () {

15
src/plugins/plot/vue/single/MctPlot.vue
View File

@ -50,7 +50,7 @@
></span>
</div>
<mct-ticks v-show="gridLines"
<mct-ticks v-show="gridLines && !options.compact"
:axis-type="'xAxis'"
:position="'right'"
@plotTickWidth="onTickWidthChange"
@ -113,7 +113,7 @@
>
</div>
</div>
<x-axis v-if="config.series.models.length > 0"
<x-axis v-if="config.series.models.length > 0 && !options.compact"
:series-model="config.series.models[0]"
/>
@ -146,6 +146,14 @@ export default {
},
inject: ['openmct', 'domainObject'],
props: {
options: {
type: Object,
default() {
return {
compact: false
};
}
},
gridLines: {
type: Boolean,
default() {
@ -885,6 +893,9 @@ export default {
if (this.filterObserver) {
this.filterObserver();
}
this.openmct.time.off('bounds', this.updateDisplayBounds);
this.openmct.objectViews.off('clearData', this.clearData);
}
}
};

26
src/plugins/plot/vue/single/MctTicks.vue
View File

@ -76,7 +76,7 @@
<script>
import eventHelpers from "./lib/eventHelpers";
import { ticks, commonPrefix, commonSuffix } from "./tickUtils";
import { ticks, getFormattedTicks } from "./tickUtils";
import configStore from "./configuration/configStore";
export default {
@ -208,29 +208,7 @@ export default {
step: newTicks[1] - newTicks[0]
};
newTicks = newTicks
.map(function (tickValue) {
return {
value: tickValue,
text: format(tickValue)
};
}, this);
if (newTicks.length && typeof newTicks[0].text === 'string') {
const tickText = newTicks.map(function (t) {
return t.text;
});
const prefix = tickText.reduce(commonPrefix);
const suffix = tickText.reduce(commonSuffix);
newTicks.forEach(function (t) {
t.fullText = t.text;
if (suffix.length) {
t.text = t.text.slice(prefix.length, -suffix.length);
} else {
t.text = t.text.slice(prefix.length);
}
});
}
newTicks = getFormattedTicks(newTicks, format);
this.ticks = newTicks;
this.shouldCheckWidth = true;

17
src/plugins/plot/vue/single/Plot.vue
View File

@ -23,7 +23,9 @@
<div ref="plotWrapper"
class="c-plot holder holder-plot has-control-bar"
>
<div class="c-control-bar">
<div v-if="!options.compact"
class="c-control-bar"
>
<span class="c-button-set c-button-set--strip-h">
<button class="c-button icon-download"
title="Export This View's Data as PNG"
@ -60,6 +62,7 @@
></div>
<mct-plot :grid-lines="gridLines"
:cursor-guide="cursorGuide"
:options="options"
@loadingUpdated="loadingUpdated"
/>
</div>
@ -75,12 +78,22 @@ export default {
MctPlot
},
inject: ['openmct', 'domainObject'],
props: {
options: {
type: Object,
default() {
return {
compact: false
};
}
}
},
data() {
return {
//Don't think we need this as it appears to be stacked plot specific
// hideExportButtons: false
cursorGuide: false,
gridLines: true,
gridLines: !this.options.compact,
loading: false
};
},

20
src/plugins/plot/vue/single/PlotViewProvider.js
View File

@ -39,19 +39,24 @@ export default function PlotViewProvider(openmct) {
&& metadata.valuesForHints(['domain']).length > 0);
}
function isCompactView(objectPath) {
return objectPath.find(object => object.type === 'time-strip');
}
return {
key: 'plot-single',
key: 'plot-simple',
name: 'Plot',
cssClass: 'icon-telemetry',
canView(domainObject) {
return domainObject.type === 'plot-single' || hasTelemetry(domainObject);
return hasTelemetry(domainObject, openmct);
},
view: function (domainObject) {
view: function (domainObject, objectPath) {
let component;
return {
show: function (element) {
let isCompact = isCompactView(objectPath);
component = new Vue({
el: element,
components: {
@ -61,7 +66,14 @@ export default function PlotViewProvider(openmct) {
openmct,
domainObject
},
template: '<plot></plot>'
data() {
return {
options: {
compact: isCompact
}
};
},
template: '<plot :options="options"></plot>'
});
},
destroy: function () {

4
src/plugins/plot/vue/single/pluginSpec.js
View File

@ -135,7 +135,7 @@ describe("the plugin", function () {
};
const applicableViews = openmct.objectViews.get(testTelemetryObject);
let plotView = applicableViews.find((viewProvider) => viewProvider.key === "plot-single");
let plotView = applicableViews.find((viewProvider) => viewProvider.key === "plot-simple");
expect(plotView).toBeDefined();
});
@ -219,7 +219,7 @@ describe("the plugin", function () {
};
applicableViews = openmct.objectViews.get(testTelemetryObject);
plotViewProvider = applicableViews.find((viewProvider) => viewProvider.key === "plot-single");
plotViewProvider = applicableViews.find((viewProvider) => viewProvider.key === "plot-simple");
plotView = plotViewProvider.view(testTelemetryObject, [testTelemetryObject]);
plotView.show(child, true);

28
src/plugins/plot/vue/single/tickUtils.js
View File

@ -87,3 +87,31 @@ export function commonSuffix(a, b) {
return a.slice(a.length - breakpoint);
}
export function getFormattedTicks(newTicks, format) {
newTicks = newTicks
.map(function (tickValue) {
return {
value: tickValue,
text: format(tickValue)
};
});
if (newTicks.length && typeof newTicks[0].text === 'string') {
const tickText = newTicks.map(function (t) {
return t.text;
});
const prefix = tickText.reduce(commonPrefix);
const suffix = tickText.reduce(commonSuffix);
newTicks.forEach(function (t) {
t.fullText = t.text;
if (suffix.length) {
t.text = t.text.slice(prefix.length, -suffix.length);
} else {
t.text = t.text.slice(prefix.length);
}
});
}
return newTicks;
}

11
src/plugins/plot/vue/stackedPlot/StackedPlot.vue
View File

@ -22,7 +22,7 @@
<template>
<div class="c-plot c-plot--stacked holder holder-plot has-control-bar">
<div v-show="!hideExportButtons"
<div v-show="!hideExportButtons && !options.compact"
class="c-control-bar"
>
<span class="c-button-set c-button-set--strip-h">
@ -56,6 +56,7 @@
:key="object.id"
class="c-plot--stacked-container"
:object="object"
:options="options"
:grid-lines="gridLines"
:cursor-guide="cursorGuide"
:plot-tick-width="maxTickWidth"
@ -74,6 +75,14 @@ export default {
StackedPlotItem
},
inject: ['openmct', 'domainObject', 'composition'],
props: {
options: {
type: Object,
default() {
return {};
}
}
},
data() {
return {
hideExportButtons: false,

11
src/plugins/plot/vue/stackedPlot/StackedPlotItem.vue
View File

@ -36,6 +36,12 @@ export default {
return {};
}
},
options: {
type: Object,
default() {
return {};
}
},
gridLines: {
type: Boolean,
default() {
@ -108,7 +114,7 @@ export default {
loadingUpdated
};
},
template: '<div ref="plotWrapper" class="l-view-section u-style-receiver js-style-receiver"><div v-show="!!loading" class="c-loading--overlay loading"></div><mct-plot :grid-lines="gridLines" :cursor-guide="cursorGuide" :plot-tick-width="plotTickWidth" @plotTickWidth="onTickWidthChange" @loadingUpdated="loadingUpdated"/></div>'
template: '<div ref="plotWrapper" class="l-view-section u-style-receiver js-style-receiver"><div v-show="!!loading" class="c-loading--overlay loading"></div><mct-plot :grid-lines="gridLines" :cursor-guide="cursorGuide" :plot-tick-width="plotTickWidth" :options="options" @plotTickWidth="onTickWidthChange" @loadingUpdated="loadingUpdated"/></div>'
});
},
onTickWidthChange() {
@ -122,7 +128,8 @@ export default {
gridLines: this.gridLines,
cursorGuide: this.cursorGuide,
plotTickWidth: this.plotTickWidth,
loading: this.loading
loading: this.loading,
options: this.options
};
}
}

17
src/plugins/plot/vue/stackedPlot/StackedPlotViewProvider.js
View File

@ -24,6 +24,10 @@ import StackedPlot from './StackedPlot.vue';
import Vue from 'vue';
export default function StackedPlotViewProvider(openmct) {
function isCompactView(objectPath) {
return objectPath.find(object => object.type === 'time-strip');
}
return {
key: 'plot-stacked',
name: 'Stacked Plot',
@ -36,11 +40,13 @@ export default function StackedPlotViewProvider(openmct) {
return domainObject.type === 'telemetry.plot.stacked';
},
view: function (domainObject) {
view: function (domainObject, objectPath) {
let component;
return {
show: function (element) {
let isCompact = isCompactView(objectPath);
component = new Vue({
el: element,
components: {
@ -51,7 +57,14 @@ export default function StackedPlotViewProvider(openmct) {
domainObject,
composition: openmct.composition.get(domainObject)
},
template: '<stacked-plot></stacked-plot>'
data() {
return {
options: {
compact: isCompact
}
};
},
template: '<stacked-plot :options="options"></stacked-plot>'
});
},
destroy: function () {