[Plot] Add switcher for Stacked/Overlaid

Add switcher to handle changing between Stacked and Overlaid
plots. WTD-625.

platform/features/plot/res/templates/plot.html

@@ -19,8 +19,7 @@
 
     <div class="gl-plot-axis-area gl-plot-y">
 
-        <div class="gl-plot-label gl-plot-y-label"
-             ng-show="!representation.showControls">
+        <div class="gl-plot-label gl-plot-y-label">
             {{axes[1].active.name}}
         </div>
 
@@ -66,6 +65,7 @@
 
         <!-- TODO: Move into correct position; make part of group; infer from set of actions -->
         <div class="gl-plot-local-controls"
+             ng-show="representation.showControls"
              style="position: absolute; top: 8px; right: 8px;">
 
             <a href=""
@@ -84,6 +84,29 @@
                 <span class="ui-symbol icon">I</span>
             </a>
 
+            <div class="menu-element btn icon-btn very-subtle btn-menu dropdown click-invoke"
+                 ng-controller="ClickAwayController as toggle">
+
+                <span ng-click="toggle.toggle()">
+                    <span class="ui-symbol icon type-icon">{{plot.getMode().glyph}}</span>
+                    <span>{{plot.getMode().name}}</span>
+                    <span class='ui-symbol icon invoke-menu'>v</span>
+                </span>
+
+                <div class="menu dropdown" ng-show="toggle.isActive()">
+                    <ul>
+                        <li ng-repeat="option in plot.getModeOptions()">
+                            <a href="" ng-click="plot.setMode(option); toggle.setState(false)">
+                                <span class="ui-symbol type-icon icon">
+                                    {{option.glyph}}
+                                </span>
+                                {{option.name}}
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
         </div>
 
         <span class="t-wait-spinner loading" ng-show="telemetry.isRequestPending()">

platform/features/plot/src/PlotController.js

@@ -11,7 +11,8 @@ define(
         "./elements/PlotPosition",
         "./elements/PlotTickGenerator",
         "./elements/PlotFormatter",
-        "./elements/PlotAxis"
+        "./elements/PlotAxis",
+        "./modes/PlotModeOptions"
     ],
     function (
         PlotPreparer,
@@ -20,7 +21,8 @@ define(
         PlotPosition,
         PlotTickGenerator,
         PlotFormatter,
-        PlotAxis
+        PlotAxis,
+        PlotModeOptions
     ) {
         "use strict";
 
@@ -47,6 +49,7 @@ define(
                 marqueeStart,
                 panZoomStack = new PlotPanZoomStack([], []),
                 formatter = new PlotFormatter(),
+                modeOptions,
                 domainOffset;
 
             // Utility, for map/forEach loops. Index 0 is domain,
@@ -217,6 +220,11 @@ define(
                 updateTicks();
             }
 
+            function setupModes(telemetryObjects) {
+                modeOptions = new PlotModeOptions(telemetryObjects);
+            }
+
+            $scope.$watch("telemetry.getTelemetryObjects()", setupModes);
             $scope.$watch("telemetry.getMetadata()", setupAxes);
             $scope.$on("telemetryUpdate", plotTelemetry);
             $scope.draw = {};
@@ -297,6 +305,15 @@ define(
                 unzoom: function () {
                     panZoomStack.clearPanZoom();
                     updateDrawingBounds();
+                },
+                getModeOptions: function () {
+                    return modeOptions && modeOptions.getModeOptions();
+                },
+                getMode: function () {
+                    return modeOptions && modeOptions.getModeOptions()[0];
+                },
+                setMode: function (mode) {
+                    console.log(mode);
                 }
 
             };

platform/features/plot/src/modes/PlotModeOptions.js

@@ -0,0 +1,36 @@
+/*global define*/
+
+define(
+    [],
+    function (PlotOverlayMode, PlotStackedMode) {
+        "use strict";
+
+        var STACKED = {
+                key: "stacked",
+                name: "Stacked",
+                glyph: "8"
+            },
+            OVERLAID = {
+                key: "overlaid",
+                name: "Overlaid",
+                glyph: "6"
+            };
+
+        function PlotModeOptions(telemetryObjects) {
+            var options = telemetryObjects.length > 1 ?
+                    [ STACKED, OVERLAID ] : [ OVERLAID, STACKED ];
+
+
+            return {
+                getModeOptions: function () {
+                    return options;
+                },
+                getMode: function (option) {
+
+                }
+            };
+        }
+
+        return PlotModeOptions;
+    }
+);