[Reorg] Make timeline-specific chart directive

Make a separate chart directive for drawing resource graphs in timelines.  This
is in preparation for a new plot bundle which will make a large number of
changes to the drawing API to support newly requested features.  By separating
code, there will be no impact to the timeline when the new plot features are
added.

Author: Pete Richards

docs/src/guide/index.md

@@ -1339,41 +1339,6 @@ are supported:
 Open MCT defines several Angular directives that are intended for use both 
 internally within the platform, and by plugins. 
 
-## Chart 
-
-The `mct-chart` directive is used to support drawing of simple charts. It is 
-present to support the Plot view, and its functionality is limited to the 
-functionality that is relevant for that view.
-
-This directive is used at the element level and takes one attribute, `draw` 
-which is an Angular expression which will should evaluate to a drawing object. 
-This drawing object should contain the following properties:
-
-* `dimensions`: The size, in logical coordinates, of the chart area. A 
-two-element array or numbers. 
-* `origin`: The position, in logical coordinates, of the lower-left corner of 
-the chart area. A two-element array or numbers. 
-* `lines`: An array of lines (e.g. as a plot line) to draw, where each line is 
-expressed as an object containing: 
-    * `buffer`: A Float32Array containing points in the line, in logical 
-    coordinates, in sequential x,y pairs. 
-    * `color`: The color of the line, as a four-element RGBA array, where 
-    each element is a number in the range of 0.0-1.0. 
-    * `points`: The number of points in the line. 
-* `boxes`: An array of rectangles to draw in the chart area. Each is an object 
-containing: 
-    * `start`: The first corner of the rectangle, as a two-element array of 
-    numbers, in logical coordinates. 
-    * `end`: The opposite corner of the rectangle, as a two-element array of 
-    numbers, in logical coordinates. color : The color of the line, as a 
-    four-element RGBA array, where each element is a number in the range of 
-    0.0-1.0. 
-
-While `mct-chart` is intended to support plots specifically, it does perform 
-some useful management of canvas objects (e.g. choosing between WebGL and Canvas 
-2D APIs for drawing based on browser support) so its usage is recommended when 
-its supported drawing primitives are sufficient for other charting tasks. 
- 
 ## Container 
 
 The `mct-container` is similar to the `mct-include` directive insofar as it allows 

platform/features/plot/README.md

@@ -0,0 +1,37 @@
+# Plot README
+
+## Chart 
+
+The `mct-chart` directive is used to support drawing of simple charts. It is 
+present to support the Plot view, and its functionality is limited to the 
+functionality that is relevant for that view.
+
+This directive is used at the element level and takes one attribute, `draw` 
+which is an Angular expression which will should evaluate to a drawing object. 
+This drawing object should contain the following properties:
+
+* `dimensions`: The size, in logical coordinates, of the chart area. A 
+two-element array or numbers. 
+* `origin`: The position, in logical coordinates, of the lower-left corner of 
+the chart area. A two-element array or numbers. 
+* `lines`: An array of lines (e.g. as a plot line) to draw, where each line is 
+expressed as an object containing: 
+    * `buffer`: A Float32Array containing points in the line, in logical 
+    coordinates, in sequential x,y pairs. 
+    * `color`: The color of the line, as a four-element RGBA array, where 
+    each element is a number in the range of 0.0-1.0. 
+    * `points`: The number of points in the line. 
+* `boxes`: An array of rectangles to draw in the chart area. Each is an object 
+containing: 
+    * `start`: The first corner of the rectangle, as a two-element array of 
+    numbers, in logical coordinates. 
+    * `end`: The opposite corner of the rectangle, as a two-element array of 
+    numbers, in logical coordinates. color : The color of the line, as a 
+    four-element RGBA array, where each element is a number in the range of 
+    0.0-1.0. 
+
+While `mct-chart` is intended to support plots specifically, it does perform 
+some useful management of canvas objects (e.g. choosing between WebGL and Canvas 
+2D APIs for drawing based on browser support) so its usage is recommended when 
+its supported drawing primitives are sufficient for other charting tasks. 
+ 

platform/features/timeline/bundle.js

@@ -38,6 +38,7 @@ define([
     "./src/directives/MCTSwimlaneDrop",
     "./src/directives/MCTSwimlaneDrag",
     "./src/services/ObjectLoader",
+    "./src/chart/MCTTimelineChart",
     "text!./res/templates/values.html",
     "text!./res/templates/timeline.html",
     "text!./res/templates/activity-gantt.html",
@@ -67,6 +68,7 @@ define([
     MCTSwimlaneDrop,
     MCTSwimlaneDrag,
     ObjectLoader,
+    MCTTimelineChart,
     valuesTemplate,
     timelineTemplate,
     activityGanttTemplate,
@@ -556,6 +558,14 @@ define([
                     "depends": [
                         "dndService"
                     ]
+                },
+                {
+                    "key": "mctTimelineChart",
+                    "implementation": MCTTimelineChart,
+                    "depends": [
+                        "$interval",
+                        "$log"
+                    ]
                 }
             ],
             "services": [

platform/features/timeline/res/templates/resource-graphs.html

@@ -22,7 +22,7 @@
 <span ng-controller="TimelineGraphController as graphController">
     <div class="t-graph l-graph" ng-repeat="graph in parameters.graphs">
         <div class="l-graph-area l-canvas-holder">
-            <mct-chart draw="graph.drawingObject"></mct-chart>
+            <mct-timeline-chart draw="graph.drawingObject"></mct-timeline-chart>
         </div>
         <div class="t-graph-labels l-graph-labels">
             <mct-include key="'timeline-resource-graph-labels'"
@@ -31,4 +31,4 @@
             </mct-include>
         </div>
     </div>
-</span>
+</span>

platform/features/timeline/src/chart/Canvas2DChart.js

@@ -0,0 +1,117 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2016, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define(
+    [],
+    function () {
+
+        /**
+         * Create a new chart which uses Canvas's 2D API for rendering.
+         *
+         * @memberof platform/features/plot
+         * @constructor
+         * @implements {platform/features/plot.Chart}
+         * @param {CanvasElement} canvas the canvas object to render upon
+         * @throws {Error} an error is thrown if Canvas's 2D API is unavailable.
+         */
+        function Canvas2DChart(canvas) {
+            this.canvas = canvas;
+            this.c2d = canvas.getContext('2d');
+            this.width = canvas.width;
+            this.height = canvas.height;
+            this.dimensions = [this.width, this.height];
+            this.origin = [0, 0];
+
+            if (!this.c2d) {
+                throw new Error("Canvas 2d API unavailable.");
+            }
+        }
+
+        // Convert from logical to physical x coordinates
+        Canvas2DChart.prototype.x = function (v) {
+            return ((v - this.origin[0]) / this.dimensions[0]) * this.width;
+        };
+
+        // Convert from logical to physical y coordinates
+        Canvas2DChart.prototype.y = function (v) {
+            return this.height -
+                ((v - this.origin[1]) / this.dimensions[1]) * this.height;
+        };
+
+        // Set the color to be used for drawing operations
+        Canvas2DChart.prototype.setColor = function (color) {
+            var mappedColor = color.map(function (c, i) {
+                return i < 3 ? Math.floor(c * 255) : (c);
+            }).join(',');
+            this.c2d.strokeStyle = "rgba(" + mappedColor + ")";
+            this.c2d.fillStyle = "rgba(" + mappedColor + ")";
+        };
+
+
+        Canvas2DChart.prototype.clear = function () {
+            var canvas = this.canvas;
+            this.width = canvas.width;
+            this.height = canvas.height;
+            this.c2d.clearRect(0, 0, this.width, this.height);
+        };
+
+        Canvas2DChart.prototype.setDimensions = function (newDimensions, newOrigin) {
+            this.dimensions = newDimensions;
+            this.origin = newOrigin;
+        };
+
+        Canvas2DChart.prototype.drawLine = function (buf, color, points) {
+            var i;
+
+            this.setColor(color);
+
+            // Configure context to draw two-pixel-thick lines
+            this.c2d.lineWidth = 2;
+
+            // Start a new path...
+            if (buf.length > 1) {
+                this.c2d.beginPath();
+                this.c2d.moveTo(this.x(buf[0]), this.y(buf[1]));
+            }
+
+            // ...and add points to it...
+            for (i = 2; i < points * 2; i = i + 2) {
+                this.c2d.lineTo(this.x(buf[i]), this.y(buf[i + 1]));
+            }
+
+            // ...before finally drawing it.
+            this.c2d.stroke();
+        };
+
+        Canvas2DChart.prototype.drawSquare = function (min, max, color) {
+            var x1 = this.x(min[0]),
+                y1 = this.y(min[1]),
+                w = this.x(max[0]) - x1,
+                h = this.y(max[1]) - y1;
+
+            this.setColor(color);
+            this.c2d.fillRect(x1, y1, w, h);
+        };
+
+        return Canvas2DChart;
+    }
+);