mirror of
https://github.com/nasa/openmct.git
synced 2025-05-31 14:40:48 +00:00
f0e7f8cfc0
- Fixed Folder grid and list views; - Fixed plot collapsed and expanded legends; Co-authored-by: Deep Tailor <deep.j.tailor@nasa.gov>
252 lines
12 KiB
HTML
252 lines
12 KiB
HTML
<!--
|
|
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.
|
|
-->
|
|
<div class="gl-plot plot-legend-{{legend.get('position')}} {{legend.get('expanded')? 'plot-legend-expanded' : 'plot-legend-collapsed'}}">
|
|
<div class="c-plot-legend gl-plot-legend"
|
|
ng-class="{ 'hover-on-plot': !!highlights.length }"
|
|
ng-show="legend.get('position') !== 'hidden'">
|
|
<div class="c-plot-legend__view-control gl-plot-legend__view-control c-disclosure-triangle is-enabled"
|
|
ng-class="{ 'c-disclosure-triangle--expanded': legend.get('expanded') }"
|
|
ng-click="legend.set('expanded', !legend.get('expanded'));">
|
|
</div>
|
|
|
|
<div class="c-plot-legend__wrapper"
|
|
ng-class="{ 'is-cursor-locked': !!lockHighlightPoint }">
|
|
|
|
<!-- COLLAPSED PLOT LEGEND -->
|
|
<div class="plot-wrapper-collapsed-legend"
|
|
ng-class="{'is-cursor-locked': !!lockHighlightPoint }">
|
|
<div class="c-state-indicator__alert-cursor-lock icon-cursor-lock" title="Cursor is point locked. Click anywhere in the plot to unlock."></div>
|
|
<div class="plot-legend-item"
|
|
ng-class="{'is-missing': series.domainObject.status === 'missing'}"
|
|
ng-repeat="series in series track by $index"
|
|
>
|
|
<div class="plot-series-swatch-and-name">
|
|
<span class="plot-series-color-swatch "
|
|
ng-style="{ 'background-color': series.get('color').asHexString() }">
|
|
</span>
|
|
<span class="is-missing__indicator" title="This item is missing"></span>
|
|
<span class="plot-series-name">{{ series.get('name') }}</span>
|
|
</div>
|
|
<div class="plot-series-value hover-value-enabled value-to-display-{{ legend.get('valueToShowWhenCollapsed') }} {{ series.closest.mctLimitState.cssClass }}"
|
|
ng-class="{ 'cursor-hover': (legend.get('valueToShowWhenCollapsed').indexOf('nearest') != -1) }"
|
|
ng-show="!!highlights.length && legend.get('valueToShowWhenCollapsed') !== 'none'">
|
|
{{ legend.get('valueToShowWhenCollapsed') === 'nearestValue' ?
|
|
series.formatY(series.closest) :
|
|
legend.get('valueToShowWhenCollapsed') === 'nearestTimestamp' ?
|
|
series.closest && series.formatX(series.closest) :
|
|
series.formatY(series.get('stats')[legend.get('valueToShowWhenCollapsed') + 'Point']);
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- EXPANDED PLOT LEGEND -->
|
|
<div class="plot-wrapper-expanded-legend"
|
|
ng-class="{'is-cursor-locked': !!lockHighlightPoint }"
|
|
>
|
|
<div class="c-state-indicator__alert-cursor-lock--verbose icon-cursor-lock" title="Click anywhere in the plot to unlock."> Cursor locked to point</div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th ng-if="legend.get('showTimestampWhenExpanded')">
|
|
Timestamp
|
|
</th>
|
|
<th ng-if="legend.get('showValueWhenExpanded')">
|
|
Value
|
|
</th>
|
|
<th ng-if="legend.get('showMinimumWhenExpanded')"
|
|
class="mobile-hide">
|
|
Min
|
|
</th>
|
|
<th ng-if="legend.get('showMaximumWhenExpanded')"
|
|
class="mobile-hide">
|
|
Max
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tr ng-repeat="series in series"
|
|
class="plot-legend-item"
|
|
ng-class="{'is-missing': series.domainObject.status === 'missing'}"
|
|
>
|
|
<td class="plot-series-swatch-and-name">
|
|
<span class="plot-series-color-swatch"
|
|
ng-style="{ 'background-color': series.get('color').asHexString() }">
|
|
</span>
|
|
<span class="is-missing__indicator" title="This item is missing"></span>
|
|
<span class="plot-series-name">{{ series.get('name') }}</span>
|
|
</td>
|
|
|
|
<td ng-if="legend.get('showTimestampWhenExpanded')">
|
|
<span class="plot-series-value cursor-hover hover-value-enabled">
|
|
{{ series.closest && series.formatX(series.closest) }}
|
|
</span>
|
|
</td>
|
|
<td ng-if="legend.get('showValueWhenExpanded')">
|
|
<span class="plot-series-value cursor-hover hover-value-enabled"
|
|
ng-class="series.closest.mctLimitState.cssClass">
|
|
{{ series.formatY(series.closest) }}
|
|
</span>
|
|
</td>
|
|
<td ng-if="legend.get('showMinimumWhenExpanded')"
|
|
class="mobile-hide">
|
|
<span class="plot-series-value">
|
|
{{ series.formatY(series.get('stats').minPoint) }}
|
|
</span>
|
|
</td>
|
|
<td ng-if="legend.get('showMaximumWhenExpanded')"
|
|
class="mobile-hide">
|
|
<span class="plot-series-value">
|
|
{{ series.formatY(series.get('stats').maxPoint) }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="plot-wrapper-axis-and-display-area flex-elem grows">
|
|
<div class="gl-plot-axis-area gl-plot-y has-local-controls"
|
|
ng-style="{
|
|
width: (tickWidth + 30) + 'px'
|
|
}">
|
|
|
|
<div class="gl-plot-label gl-plot-y-label"
|
|
ng-class="{'icon-gear': (yKeyOptions.length > 1 && series.length === 1)}"
|
|
>{{yAxis.get('label')}}
|
|
</div>
|
|
|
|
<select class="gl-plot-y-label__select local-controls--hidden"
|
|
ng-if="yKeyOptions.length > 1 && series.length === 1"
|
|
ng-model="yAxisLabel" ng-change="plot.toggleYAxisLabel(yAxisLabel, yKeyOptions, series[0])">
|
|
<option ng-repeat="option in yKeyOptions"
|
|
value="{{option.name}}"
|
|
ng-selected="option.name === yAxisLabel">
|
|
{{option.name}}
|
|
</option>
|
|
</select>
|
|
|
|
|
|
<mct-ticks axis="yAxis">
|
|
<div ng-repeat="tick in ticks track by tick.value"
|
|
class="gl-plot-tick gl-plot-y-tick-label"
|
|
ng-style="{ top: (100 * (max - tick.value) / interval) + '%' }"
|
|
title="{{:: tick.fullText || tick.text }}"
|
|
style="margin-top: -0.50em; direction: ltr;">
|
|
<span>{{:: tick.text}}</span>
|
|
</div>
|
|
</mct-ticks>
|
|
</div>
|
|
<div class="gl-plot-wrapper-display-area-and-x-axis"
|
|
ng-style="{
|
|
left: (tickWidth + 30) + 'px'
|
|
}">
|
|
<div class="l-state-indicators">
|
|
<span class="l-state-indicators__alert-no-lad t-object-alert t-alert-unsynced icon-alert-triangle"
|
|
title="This plot is not currently displaying the latest data. Reset pan/zoom to view latest data."></span>
|
|
<span class="l-state-indicators__alert-cursor-lock icon-cursor-lock"
|
|
title="Telemetry point selection is locked. Click anywhere in the plot to unlock."
|
|
ng-if="lockHighlightPoint"></span>
|
|
</div>
|
|
|
|
<div class="gl-plot-display-area has-local-controls has-cursor-guides">
|
|
<mct-ticks axis="xAxis">
|
|
<div class="gl-plot-hash hash-v"
|
|
ng-repeat="tick in ticks track by tick.value"
|
|
ng-style="{
|
|
right: (100 * (max - tick.value) / interval) + '%',
|
|
height: '100%'
|
|
}">
|
|
</div>
|
|
</mct-ticks>
|
|
|
|
<mct-ticks axis="yAxis">
|
|
<div class="gl-plot-hash hash-h"
|
|
ng-repeat="tick in ticks track by tick.value"
|
|
ng-style="{ bottom: (100 * (tick.value - min) / interval) + '%', width: '100%' }">
|
|
</div>
|
|
</mct-ticks>
|
|
|
|
<mct-chart config="config"
|
|
series="series"
|
|
rectangles="rectangles"
|
|
highlights="highlights"
|
|
the-x-axis="xAxis"
|
|
the-y-axis="yAxis">
|
|
</mct-chart>
|
|
|
|
<div class="gl-plot__local-controls h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover">
|
|
<div class="c-button-set c-button-set--strip-h">
|
|
<button class="c-button icon-minus"
|
|
ng-click="plot.zoom('out', 0.2)"
|
|
title="Zoom out">
|
|
</button>
|
|
<button class="c-button icon-plus"
|
|
ng-click="plot.zoom('in', 0.2)"
|
|
title="Zoom in">
|
|
</button>
|
|
</div>
|
|
<div class="c-button-set c-button-set--strip-h"
|
|
ng-disabled="!plotHistory.length">
|
|
<button class="c-button icon-arrow-left"
|
|
ng-click="plot.back()"
|
|
title="Restore previous pan/zoom">
|
|
</button>
|
|
<button class="c-button icon-reset"
|
|
ng-click="plot.clear()"
|
|
title="Reset pan/zoom">
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!--Cursor guides-->
|
|
<div class="c-cursor-guide--v js-cursor-guide--v"
|
|
ng-show="plot.cursorGuide">
|
|
</div>
|
|
<div class="c-cursor-guide--h js-cursor-guide--h"
|
|
ng-show="plot.cursorGuide">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gl-plot-axis-area gl-plot-x">
|
|
<mct-ticks axis="xAxis">
|
|
<div ng-repeat="tick in ticks track by tick.value"
|
|
class="gl-plot-tick gl-plot-x-tick-label"
|
|
ng-style="{
|
|
left: (100 * (tick.value - min) / interval) + '%'
|
|
}"
|
|
ng-title=":: tick.fullText || tick.text">
|
|
{{:: tick.text }}
|
|
</div>
|
|
</mct-ticks>
|
|
|
|
<div class="gl-plot-label gl-plot-x-label">
|
|
{{ xAxis.get('label') }}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|