render time series data

app/components/time-series-plot.js

+import Ember from 'ember';
+// requires flot.js to be included in vendor.js (via ember-cli-build.js)
+
+const { Component, on, observer, computed, String, get} = Ember;
+
+export default Component.extend({
+    tagName: 'div',
+    attributeBindings: ['style'],
+    timeSeries: [],
+    options: {},
+    height: 300,
+    plot: null,
+    style: computed('height', function () { // flot requires a fix height
+        return String.htmlSafe(`height: ${this.get('height')}px;`);
+    }),
+    renderPlot: on('didInsertElement', observer('timeSeries.[]', function () {
+        this.debug('rendering plot');
+        if(!this.element) {
+            return;
+        }
+        const $this = this.$();
+        // flot data points are tuples/arrays [x,y], graphs are arrays of these
+        // TODO: index is not enough, should show timestamp or other x-axis label
+        const plotData = this.get('timeSeries.series').map((valueObj, index) => [index, get(valueObj, 'value')]);
+        // wrap in additional array since flot can handle multiple graphs at once, we only need one
+        const plot = $this.plot([plotData], this.get('options')).data('plot');
+        this.set('plot', plot);
+    }))
+});
\ No newline at end of file

app/components/time-series.js

+import Ember from 'ember';
+
+const { Component, computed } = Ember;
+
+export default Component.extend({
+    timeSeries: null,
+    currentTab: 0,
+    isCurrentTab: computed('currentTab', function(index) {
+        return this.get('currentTab') === index;
+    }),
+    currentSeries: computed('timeSeries', 'currentTab', function() {
+        const allSeries = this.get(`timeSeries`);
+        return allSeries && allSeries[this.get('currentTab')];
+    }),
+    actions: {
+        clickTab(index){
+            this.set('currentTab', index);
+        }
+    }
+});
\ No newline at end of file

app/templates/components/time-series.hbs

+Series:
+<ul class="nav nav-tabs">
+    {{#each timeSeries as |series index| }}
+        <li class="{{if isCurrentTab 'active'}}"><a {{action 'clickTab' index}} href="javascript:void()">{{series.label}}</a></li>
+    {{/each}}
+</ul>
+{{#if currentSeries}}
+    {{time-series-plot timeSeries=currentSeries}}
+{{/if}}
\ No newline at end of file

app/templates/deployments/single/details.hbs

 {{entity-details entity=model}}
+
+{{time-series timeSeries=model.timeSeries}}
\ No newline at end of file

bower.json

@@ -7,6 +7,7 @@
     "ember-qunit-notifications": "0.1.0",
     "visionmedia-debug": "2.2",
     "webcola": "^3.1.3",
-    "bootstrap-sass": "^3.3.6"
+    "bootstrap-sass": "^3.3.6",
+    "Flot": "flot#^0.8.3"
   }
 }

ember-cli-build.js

@@ -27,6 +27,7 @@ module.exports = function(defaults) {
   // along with the exports of each module as its value.
 
   app.import('bower_components/webcola/WebCola/cola.js');
+  app.import('bower_components/Flot/jquery.flot.js'); // time-series-plot component
 
   return app.toTree();
 };