add dynamic bars according to numnber of telemetry sources

register BarGraph plugin plus working view
2025-06-25 18:50:11 +00:00 · 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