openmct/platform/features/plot/res/templates/plot.html
Charles Hacskaylo 39c8f0ab00 [Frontend] Plot limits and out-of-bounds indicators
WTD-1172
Markup and CSS for plots;
Example ng-class added to plot.html for legend items;
Markup added to plot.html for OOB indicators;
2015-05-06 10:21:29 -07:00

172 lines
7.0 KiB
HTML

<span ng-controller="PlotController as plot"
ng-mouseleave="representation.showControls = false">
<div class="gl-plot"
ng-style="{ height: 100 / plot.getSubPlots().length + '%'}"
ng-repeat="subplot in plot.getSubPlots()">
<div class="gl-plot-legend">
<span
class='plot-legend-item'
ng-repeat="telemetryObject in subplot.getTelemetryObjects()"
ng-class="{ 's-limit': $index < 1, 's-limit-lwr': 1, 's-limit-yellow' : 1 }"
>
<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}}
</div>
<div class="gl-plot-y-options gl-plot-local-controls"
ng-show="representation.showControls"
ng-if="axes[1].options.length > 0">
<div class='form-control shell select'>
<select class="form-control input shell select"
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); representation.showControls = true;"
ng-mouseleave="subplot.isHovering(false)">
<div ng-init="limits=[
{type: 'upr', severity: 'severe', top: 0, bottom: 90},
{type: 'upr', severity: 'med', top: 10, bottom: 80},
{type: 'lwr', severity: 'med', top: 70, bottom: 20},
{type: 'lwr', severity: 'severe', top: 80, bottom: 0}
]"></div>
<!-- Limits display -->
<div
ng-repeat="limit in limits"
ng-show="1"
class="t-limit l-limit s-limit-{{limit.type}} s-limit-{{limit.severity}}"
style="top: {{limit.top}}%; bottom: {{limit.bottom}}%"
></div>
<!-- Out-of-bounds data indicators -->
<div ng-show="1" class="l-oob-data l-oob-data-up"></div>
<div ng-show="1" 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-mousemove="subplot.hover($event)"
ng-mousedown="subplot.startMarquee($event)"
ng-mouseup="subplot.endMarquee($event); plot.update()">
</mct-chart>
<!-- TODO: Move into correct position; make part of group; infer from set of actions -->
<div class="gl-plot-local-controls"
ng-if="$first"
ng-show="representation.showControls"
style="position: absolute; top: 8px; right: 8px;">
<a href=""
class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
ng-click="plot.stepBackPanZoom()"
ng-show="plot.isZoomed()"
title="Restore previous pan/zoom">
<span class="ui-symbol icon">&lt;</span>
</a>
<a href=""
class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
ng-click="plot.unzoom()"
ng-show="plot.isZoomed()"
title="Reset pan/zoom">
<span class="ui-symbol icon">I</span>
</a>
<div class="menu-element btn icon-btn very-subtle btn-menu dropdown click-invoke"
ng-if="plot.getModeOptions().length > 1"
ng-controller="ClickAwayController as toggle">
<span class="l-click-area" ng-click="toggle.toggle()"></span>
<span class="ui-symbol icon type-icon">{{plot.getMode().glyph}}</span>
<span>{{plot.getMode().name}}</span>
<span class='ui-symbol icon invoke-menu'>v</span>
<div class="menu dropdown" ng-show="toggle.isActive()">
<ul>
<li ng-repeat="option in plot.getModeOptions()">
<a href="" ng-click="plot.setMode(option); toggle.setState(false)">
<span class="ui-symbol type-icon icon">
{{option.glyph}}
</span>
{{option.name}}
</a>
</li>
</ul>
</div>
</div>
</div>
<span class="t-wait-spinner loading" ng-show="plot.isRequestPending()">
</span>
</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}}
</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-show="representation.showControls"
ng-if="axes[0].options.length > 0">
<div class='form-control shell select'>
<select class="form-control input shell select"
ng-model="axes[0].active"
ng-options="option.name for option in axes[0].options">
</select>
</div>
</div>
</div>
</div>
</span>