mirror of
https://github.com/nasa/openmct.git
synced 2024-12-26 00:01:05 +00:00
4517bd1356
Fixes #967
Requires new styles implemented in #1166
(cherry picked from commit 0457f7bee8)
161 lines
8.0 KiB
HTML
161 lines
8.0 KiB
HTML
<!--
|
|
Open MCT, Copyright (c) 2014-2016, 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.
|
|
-->
|
|
<span ng-controller="PlotController as plot"
|
|
class="abs holder holder-plot has-control-bar">
|
|
<div class="l-control-bar" ng-show="!plot.hideExportButtons">
|
|
<span class="l-btn-set">
|
|
<a class="s-button t-export icon-download labeled first"
|
|
ng-click="plot.exportPDF()"
|
|
title="Export This View's Data as PDF">
|
|
JPG
|
|
</a>
|
|
<a class="s-button t-export labeled"
|
|
ng-click="plot.exportPNG()"
|
|
title="Export This View's Data as PNG">
|
|
PNG
|
|
</a>
|
|
<a class="s-button t-export labeled last"
|
|
ng-click="plot.exportJPG()"
|
|
title="Export This View's Data as JPG">
|
|
PDF
|
|
</a>
|
|
</span>
|
|
</div>
|
|
<div class="l-view-section">
|
|
<div class="gl-plot"
|
|
ng-style="{ height: 100 / plot.getSubPlots().length + '%'}"
|
|
ng-repeat="subplot in plot.getSubPlots()">
|
|
<div class="gl-plot-legend">
|
|
<!-- ng-class is temporarily hard-coded in next element -->
|
|
<span
|
|
class='plot-legend-item'
|
|
ng-repeat="telemetryObject in subplot.getTelemetryObjects()"
|
|
ng-class="plot.getLegendClass(telemetryObject)">
|
|
<span class='plot-color-swatch'
|
|
ng-style="{ 'background-color': plot.getColor($index) }">
|
|
</span>
|
|
<span class='title-label'>{{telemetryObject.getModel().name}}</span>
|
|
</span>
|
|
</div>
|
|
<div class="gl-plot-coords"
|
|
ng-if="subplot.isHovering() && subplot.getHoverCoordinates()">
|
|
{{subplot.getHoverCoordinates()}}
|
|
</div>
|
|
<div class="gl-plot-axis-area gl-plot-y">
|
|
<div class="gl-plot-label gl-plot-y-label">
|
|
{{axes[1].active.name}}
|
|
</div>
|
|
<div ng-repeat="tick in subplot.getRangeTicks()"
|
|
class="gl-plot-tick gl-plot-y-tick-label"
|
|
ng-style="{ bottom: (100 * $index / (subplot.getRangeTicks().length - 1)) + '%' }">
|
|
{{tick.label | reverse}}
|
|
</div>
|
|
<div class="gl-plot-y-options gl-plot-local-controls"
|
|
ng-if="axes[1].options.length > 1">
|
|
<div class='form-control shell select'>
|
|
<select class="form-control input shell"
|
|
ng-model="axes[1].active"
|
|
ng-options="option.name for option in axes[1].options">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="gl-plot-display-area"
|
|
ng-mouseenter="subplot.isHovering(true);"
|
|
ng-mouseleave="subplot.isHovering(false)"
|
|
ng-class="{ loading: plot.isRequestPending() }">
|
|
<!-- Out-of-bounds data indicators -->
|
|
<!-- ng-show is temporarily hard-coded in next element -->
|
|
<div ng-show="false" class="l-oob-data l-oob-data-up"></div>
|
|
<div ng-show="false" class="l-oob-data l-oob-data-dwn"></div>
|
|
<div class="gl-plot-hash hash-v"
|
|
ng-repeat="tick in subplot.getDomainTicks()"
|
|
ng-style="{ left: (100 * $index / (subplot.getDomainTicks().length - 1)) + '%', height: '100%' }"
|
|
ng-show="$index > 0 && $index < (subplot.getDomainTicks().length - 1)">
|
|
</div>
|
|
<div class="gl-plot-hash hash-h"
|
|
ng-repeat="tick in subplot.getRangeTicks()"
|
|
ng-style="{ bottom: (100 * $index / (subplot.getRangeTicks().length - 1)) + '%', width: '100%' }"
|
|
ng-show="$index > 0 && $index < (subplot.getRangeTicks().length - 1)">
|
|
</div>
|
|
<mct-chart draw="subplot.getDrawingObject()"
|
|
ng-if="subplot.getTelemetryObjects().length > 0"
|
|
ng-mousemove="subplot.hover($event)"
|
|
mct-drag="subplot.continueDrag($event)"
|
|
mct-drag-down="subplot.startDrag($event)"
|
|
mct-drag-up="subplot.endDrag($event); plot.update()">
|
|
</mct-chart>
|
|
<!-- TODO: Move into correct position; make part of group; infer from set of actions -->
|
|
<div class="l-local-controls gl-plot-local-controls t-plot-display-controls"
|
|
ng-if="$first">
|
|
<a class="s-button icon-arrow-left"
|
|
ng-click="plot.stepBackPanZoom()"
|
|
ng-show="plot.isZoomed()"
|
|
title="Restore previous pan/zoom">
|
|
</a>
|
|
<a class="s-button icon-arrows-out"
|
|
ng-click="plot.unzoom()"
|
|
ng-show="plot.isZoomed()"
|
|
title="Reset pan/zoom">
|
|
</a>
|
|
<div class="menu-element s-menu-button menus-to-left {{plot.getMode().cssclass}}"
|
|
ng-if="plot.getModeOptions().length > 1"
|
|
ng-controller="ClickAwayController as toggle">
|
|
<span class="l-click-area" ng-click="toggle.toggle()"></span>
|
|
<span>{{plot.getMode().name}}</span>
|
|
<div class="menu" ng-show="toggle.isActive()">
|
|
<ul>
|
|
<li ng-repeat="option in plot.getModeOptions()"
|
|
ng-click="plot.setMode(option); toggle.setState(false)"
|
|
class="{{option.cssclass}}">
|
|
{{option.name}}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div ng-if="$last" class="gl-plot-axis-area gl-plot-x">
|
|
<div ng-repeat="tick in subplot.getDomainTicks()"
|
|
class="gl-plot-tick gl-plot-x-tick-label"
|
|
ng-show="$index > 0 && $index < (subplot.getDomainTicks().length - 1)"
|
|
ng-style="{ left: (100 * $index / (subplot.getDomainTicks().length - 1)) + '%' }">
|
|
{{tick.label | reverse}}
|
|
</div>
|
|
<div class="gl-plot-label gl-plot-x-label">
|
|
{{axes[0].active.name}}
|
|
</div>
|
|
<div class="gl-plot-x-options gl-plot-local-controls"
|
|
ng-if="axes[0].options.length > 1">
|
|
<div class='form-control shell select'>
|
|
<select class="form-control input shell"
|
|
ng-model="axes[0].active"
|
|
ng-options="option.name for option in axes[0].options">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</span>
|