[Tutorials] Add remainder of bargraph

This commit is contained in:
Victor Woeltjen 2016-06-07 12:55:29 -07:00
parent a6ef1d3423
commit c70793ac2d
2 changed files with 37 additions and 1 deletions

View File

@ -5,7 +5,7 @@ define([
legacyRegistry,
BarGraphController
) {
legacyRegistry.register("tutorials/todo", {
legacyRegistry.register("tutorials/bargraph", {
"name": "Bar Graph",
"description": "Provides the Bar Graph view of telemetry elements.",
"extensions": {
@ -17,6 +17,7 @@ define([
"templateUrl": "templates/bargraph.html",
"needs": [ "telemetry" ],
"delegation": true,
"editable": true,
"toolbar": {
"sections": [
{

View File

@ -0,0 +1,35 @@
<div class="example-bargraph" ng-controller="BarGraphController">
<div class="example-tick-labels">
<div ng-repeat="value in [low, middle, high] track by $index"
class="example-tick-label"
style="bottom: {{ toPercent(value) }}%">
{{value}}
</div>
</div>
<div class="example-graph-area">
<div ng-repeat="telemetryObject in telemetryObjects"
style="left: {{barWidth * $index}}%; width: {{barWidth}}%"
class="example-bar-holder">
<div class="example-bar"
ng-style="{
bottom: getBottom(telemetryObject) + '%',
top: getTop(telemetryObject) + '%'
}">
</div>
</div>
<div style="bottom: {{ toPercent(middle) }}%"
class="example-graph-tick">
</div>
</div>
<div class="example-bar-labels">
<div ng-repeat="telemetryObject in telemetryObjects"
style="left: {{barWidth * $index}}%; width: {{barWidth}}%"
class="example-bar-holder example-label">
<mct-representation key="'label'"
mct-object="telemetryObject">
</mct-representation>
</div>
</div>
</div>