mirror of
https://github.com/nasa/openmct.git
synced 2025-05-21 17:57:39 +00:00
5c3fe78bd5
Moved MCTPinch directive into plot-reborn. Now emits on pinch action the event to the controller. Edited plot.html to clean up and edited mct-plot.html to include mct-pinch. DrawLoader adjusted to allow and prevent error.
79 lines
2.9 KiB
HTML
79 lines
2.9 KiB
HTML
<!--TODO: Don't require plotcontroller here. -->
|
|
<div class="gl-plot">
|
|
<div class="gl-plot-legend">
|
|
<span class="plot-legend-item"
|
|
ng-repeat="series in series track by $index">
|
|
<span class="plot-color-swatch"
|
|
ng-style="{ 'background-color': series.color.asHexString() }">
|
|
</span>
|
|
<span class="title-label">{{ series.name }}</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="gl-plot-coords"
|
|
ng-if="mouseCoordinates">
|
|
{{ displayableDomain(mouseCoordinates.positionAsPlotPoint.domain) }},
|
|
{{ displayableRange(mouseCoordinates.positionAsPlotPoint.range) }}
|
|
|
|
</div>
|
|
|
|
<div class="gl-plot-axis-area gl-plot-y">
|
|
|
|
<div class="gl-plot-label gl-plot-y-label">
|
|
{{ axes.range.label}}
|
|
</div>
|
|
|
|
<div ng-repeat="tick in axes.range.ticks track by $index"
|
|
class="gl-plot-tick gl-plot-y-tick-label"
|
|
ng-style="{ top: (100 * $index / (axes.range.ticks.length - 1)) + '%' }"
|
|
style="margin-top: -0.50em;">
|
|
{{ displayableRange(tick) }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gl-plot-display-area">
|
|
|
|
<div class="gl-plot-hash hash-v"
|
|
ng-repeat="tick in axes.domain.ticks track by $index"
|
|
ng-style="{ left: (100 * $index / (axes.domain.ticks.length - 1)) + '%', height: '100%' }"
|
|
ng-show="$index > 0 && $index < (axes.domain.ticks.length - 1)">
|
|
<!--TODO: Show/hide using CSS? -->
|
|
</div>
|
|
|
|
<div class="gl-plot-hash hash-h"
|
|
ng-repeat="tick in axes.range.ticks track by $index"
|
|
ng-style="{ bottom: (100 * $index / (axes.range.ticks.length - 1)) + '%', width: '100%' }"
|
|
ng-show="$index > 0 && $index < (axes.range.ticks.length - 1)">
|
|
<!--TODO: Show/hide using CSS? -->
|
|
</div>
|
|
|
|
<!-- APPLY MCTPinch here-->
|
|
<mct-chart series="series"
|
|
viewport="viewport"
|
|
rectangles="rectangles"
|
|
ng-mousemove="plot.trackMousePosition($event)"
|
|
ng-mouseleave="plot.untrackMousePosition()"
|
|
ng-mousedown="plot.startMarquee()"
|
|
ng-mouseup="plot.endMarquee()"
|
|
mct-pinch>
|
|
</mct-chart>
|
|
|
|
<span class="t-wait-spinner loading" ng-show="plot.isRequestPending()">
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div class="gl-plot-axis-area gl-plot-x">
|
|
<div ng-repeat="tick in axes.domain.ticks track by $index"
|
|
class="gl-plot-tick gl-plot-x-tick-label"
|
|
ng-show="$index > 0 && $index < (axes.domain.ticks.length - 1)"
|
|
ng-style="{ left: (100 * $index / (axes.domain.ticks.length - 1)) + '%' }">
|
|
{{ displayableDomain(tick) }}
|
|
</div>
|
|
|
|
<div class="gl-plot-label gl-plot-x-label">
|
|
{{ axes.domain.label }}
|
|
</div>
|
|
</div>
|
|
</div>
|