[Tutorials] Add remainder of bargraph

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": [
                             {

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>