add dynamic bars according to numnber of telemetry sources

register BarGraph plugin plus working view
2018-06-19 14:32:18 -07:00 · 2018-06-12 13:44:05 -07:00
6 changed files with 226 additions and 2 deletions
--- a/index.html
+++ b/index.html
@@ -69,6 +69,8 @@
                    ]
                }));
                openmct.install(openmct.plugins.SummaryWidget());
+                openmct.install(openmct.plugins.BarGraph());
+            
                openmct.time.clock('local', {start: -THIRTY_MINUTES, end: 0});
                openmct.time.timeSystem('utc');
                openmct.start();
@@ -80,6 +82,8 @@
        <link rel="icon" type="image/png" href="platform/commonUI/general/res/images/favicons/favicon-96x96.png" sizes="96x96">
        <link rel="icon" type="image/png" href="platform/commonUI/general/res/images/favicons/favicon-16x16.png" sizes="16x16">
        <link rel="shortcut icon" href="platform/commonUI/general/res/images/favicons/favicon.ico">
+
+        <link rel="stylesheet" href="src/plugins/barGraph/res/styles/barGraph.css">
    </head>
    <body>
        <div class="l-splash-holder s-splash-holder">
--- a/src/plugins/barGraph/plugin.js
+++ b/src/plugins/barGraph/plugin.js
@@ -0,0 +1,73 @@
+define([
+    "vue",
+    "./src/BarGraphController",
+    "./src/BarGraphCompositionPolicy"
+], function (
+    Vue,
+    BarGraphController,
+    CompositionPolicy
+) {
+    var installed = false;
+
+    function BarGraphPlugin() {
+        return function install(openmct) {
+            if (installed) {
+                return;
+            }
+
+            installed = true;
+
+           openmct.legacyRegistry.register('example/bargraph', {
+            name: 'Example Telemetry view using Vue',
+            extensions: {
+                types: [
+                    {
+                        key: "example/bargraph",
+                        name: "Example Bargraph",
+                        cssClass: "icon-autoflow-tabular",
+                        description: "combine multiple telemetry producing objects in bargraph form",
+                        features: "creation",
+                        contains: [
+                            {
+                                has: "telemetry"
+                            }
+                        ],
+                        model: {
+                            composition: []
+                        }
+                    }
+                ]
+            }
+           });
+
+           openmct.legacyRegistry.enable('example/bargraph');
+
+            openmct.objectViews.addProvider({
+                key: 'bargraph-view',
+                name: 'Bar Graph View',
+                cssClass: 'icon-autoflow-tabular',
+                needs: ['telemetry'],
+                editable: true,
+                canView: function (domainObject) {
+                    return domainObject.type === "example/bargraph";
+                },
+                view: function (domainObject) {
+                    var controller = new BarGraphController(openmct, domainObject);
+
+                    return {
+                        show: controller.show,
+                        destroy: controller.destroy
+                    };
+                }
+            });
+            
+            openmct.legacyExtension('policies', {
+                category: 'composition',
+                implementation: CompositionPolicy,
+                depends: ['openmct']
+            });
+        };
+    }
+
+    return BarGraphPlugin;
+});
--- a/src/plugins/barGraph/res/templates/barGraph.html
+++ b/src/plugins/barGraph/res/templates/barGraph.html
@@ -0,0 +1,27 @@
+<div class="example-bargraph">
+    <div class="example-tick-labels">
+        <div class="example-tick-label" style="bottom: 0%">High</div>
+        <div class="example-tick-label" style="bottom: 50%">Middle</div>
+        <div class="example-tick-label" style="bottom: 100%">Low</div>
+    </div>
+
+    <div class="example-graph-area">
+        <div v-for="(object, index) in telemetryObjects"
+           v-bind:style="{left: (barWidth * index) + '%', width: barWidth + '%'}"
+           class="example-bar-holder">
+            <div class="example-bar"
+                style="top: 25%; bottom: 50%;">
+            </div>
+        </div>
+
+        <div style="bottom: 50%" class="example-graph-tick">
+        </div>
+    </div>
+
+    <div class="example-bar-labels" v-for="(object, index) in telemetryObjects">
+        <div    v-bind:style="{left: (barWidth * index) + '%', width: barWidth + '%'}"
+                class="example-bar-holder example-label">
+            {{ object.name }}
+        </div>
+    </div>
+</div>
--- a/src/plugins/barGraph/src/BarGraphCompositionPolicy.js
+++ b/src/plugins/barGraph/src/BarGraphCompositionPolicy.js
@@ -0,0 +1,44 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, 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.
+ *****************************************************************************/
+
+define(
+    [],
+    function () {
+
+        function BarGraphCompositionPolicy(openmct) {
+            this.openmct = openmct;
+        }
+
+        BarGraphCompositionPolicy.prototype.allow = function (parent, child) {
+            var parentType = parent.getCapability('type');
+            var newStyleChild = child.useCapability('adapter');
+
+            if (parentType.instanceOf('example/bargraph') && !this.openmct.telemetry.isTelemetryObject(newStyleChild)) {
+                return false;
+            }
+
+            return true;
+        };
+
+        return BarGraphCompositionPolicy;
+    }
+);
--- a/src/plugins/barGraph/src/BarGraphController.js
+++ b/src/plugins/barGraph/src/BarGraphController.js
@@ -0,0 +1,72 @@
+define([
+    'vue',
+    'text!../res/templates/barGraph.html'
+], function (
+    Vue,
+    BarGraphView
+) {
+    function BarGraphController(openmct, domainObject) {
+        this.openmct = openmct;
+        this.domainObject = domainObject;
+        this.telemetryObjects = [];
+
+        this.show = this.show.bind(this);
+        this.destroy = this.destroy.bind(this);
+        
+        var barWidth = 100 / (Math.max(domainObject.composition.length, 1));
+
+        var barGraphVue = Vue.extend({
+            template: BarGraphView,
+            data: function () {
+                return {
+                    low: -1,
+                    middle: 0,
+                    high: 1,
+                    barWidth: barWidth,
+                    telemetryObjects: [],
+                    toPercent: toPercent
+                };
+            } 
+        });
+
+        this.barGraphVue = new barGraphVue();
+
+        this.getDomainObjectsFromIdentifiers();
+    }
+
+    BarGraphController.prototype.getDomainObjectsFromIdentifiers = function () {
+        var telemetryObjects = [];
+
+        this.domainObject.composition.forEach(function (identifier) {
+            this.openmct.objects.get(identifier).then(function (object){
+                this.barGraphVue.telemetryObjects.push(object);
+            }.bind(this));
+        }.bind(this));
+
+        return telemetryObjects;
+    };
+
+    BarGraphController.prototype.updateValues = function () {
+        
+    };
+
+    BarGraphController.prototype.show = function (container) {
+        this.barGraphVue.$mount(container);
+    };
+
+    BarGraphController.prototype.destroy = function (container) {
+        this.barGraphVue.$destroy(true);
+    };
+
+    /*
+    private
+    */
+
+    function toPercent(value, low, high) {
+        var pct = 100 * (value - low) / (high - low);
+        
+        return Math.min(100, Math.max(0, pct));
+    }
+
+    return BarGraphController;
+});
--- a/src/plugins/plugins.js
+++ b/src/plugins/plugins.js
@@ -32,7 +32,8 @@ define([
    './URLIndicatorPlugin/URLIndicatorPlugin',
    './telemetryMean/plugin',
    './plot/plugin',
-    './staticRootPlugin/plugin'
+    './staticRootPlugin/plugin',
+    './barGraph/plugin'
 ], function (
    _,
    UTCTimeSystem,
@@ -45,7 +46,8 @@ define([
    URLIndicatorPlugin,
    TelemetryMean,
    PlotPlugin,
-    StaticRootPlugin
+    StaticRootPlugin,
+    BarGraph
 ) {
    var bundleMap = {
        CouchDB: 'platform/persistence/couch',
@@ -138,5 +140,7 @@ define([
    plugins.TelemetryMean = TelemetryMean;
    plugins.URLIndicatorPlugin = URLIndicatorPlugin;

+    plugins.BarGraph = BarGraph;
+
    return plugins;
 });
Author	SHA1	Message	Date
Deep Tailor	1dbcdb618b	add dynamic bars according to numnber of telemetry sources	2018-06-19 14:32:18 -07:00
Deep Tailor	dabe4e700c	register BarGraph plugin plus working view	2018-06-12 13:44:05 -07:00