From c70793ac2db0ff3b2aebe819a7457d3e8dd15a6a Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Tue, 7 Jun 2016 12:55:29 -0700
Subject: [PATCH] [Tutorials] Add remainder of bargraph

---
 tutorials/bargraph/bundle.js                  |  3 +-
 .../bargraph/res/templates/bargraph.html      | 35 +++++++++++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 tutorials/bargraph/res/templates/bargraph.html

diff --git a/tutorials/bargraph/bundle.js b/tutorials/bargraph/bundle.js
index bf64ee13b8..5eb16564ce 100644
--- a/tutorials/bargraph/bundle.js
+++ b/tutorials/bargraph/bundle.js
@@ -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": [
                             {
diff --git a/tutorials/bargraph/res/templates/bargraph.html b/tutorials/bargraph/res/templates/bargraph.html
new file mode 100644
index 0000000000..a5bfbd3e5e
--- /dev/null
+++ b/tutorials/bargraph/res/templates/bargraph.html
@@ -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>