fix plotting, use time as x-axis (still with dummy dates), fix navigation behaviour

app/components/time-series-plot.js

@@ -4,15 +4,43 @@ import Ember from 'ember';
 const { Component, on, observer, computed, String, get} = Ember;
 
 export default Component.extend({
+    visualisationEvents: Ember.inject.service(),
     tagName: 'div',
     attributeBindings: ['style'],
     timeSeries: [],
-    options: {},
+    options: {
+        minTickSize: [1, 'hour'],
+        xaxis: {
+            mode: 'time',
+            // timezone: 'browser' // TODO: from Server?
+        },
+        yaxis: {
+            label: 'test'
+        }
+    },
     height: 300,
     plot: null,
+    init() {
+        const visualisationEvents = this.get('visualisationEvents');
+        const resizeListener = this.resize.bind(this);
+        visualisationEvents.on('resize:end', resizeListener);
+        this._super(...arguments);
+    },
     style: computed('height', function () { // flot requires a fix height
         return String.htmlSafe(`height: ${this.get('height')}px;`);
     }),
+    resize() {
+        const plot = this.get('plot');
+        if(plot) {
+            plot.resize();
+            plot.setupGrid();
+            plot.draw();
+        }
+    },
+    willDestroy() {
+        this.set('plot', null);
+        this._super(...arguments);
+    },
     renderPlot: on('didInsertElement', observer('timeSeries.[]', function () {
         this.debug('rendering plot');
         if(!this.element) {
@@ -21,7 +49,8 @@ export default Component.extend({
         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')]);
+        const plotData = this.get('timeSeries.series').map((valueObj, index) => [(Date.now() + index*10000), get(valueObj, 'value')]); // FIXME use timestamp from server
+        this.debug('plotData', plotData);
         // 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);

app/components/time-series.js

 import Ember from 'ember';
 
-const { Component, computed } = Ember;
+const { Component, computed, observer } = Ember;
 
 export default Component.extend({
     timeSeries: null,
     currentTab: 0,
-    isCurrentTab: computed('currentTab', function(index) {
+    isCurrentTab: observer('currentTab', function(index) {
         return this.get('currentTab') === index;
     }),
     currentSeries: computed('timeSeries', 'currentTab', function() {

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>
+        <li class="{{if (eq currentTab index) 'active'}}"><a {{action 'clickTab' index}} href="javascript:void()">{{series.label}}</a></li>
     {{/each}}
 </ul>
 {{#if currentSeries}}

ember-cli-build.js

@@ -28,6 +28,7 @@ module.exports = function(defaults) {
 
   app.import('bower_components/webcola/WebCola/cola.js');
   app.import('bower_components/Flot/jquery.flot.js'); // time-series-plot component
+  app.import('bower_components/Flot/jquery.flot.time.js');
 
   return app.toTree();
 };

package.json

@@ -46,6 +46,7 @@
     "ember-load-initializers": "^0.5.0",
     "ember-resolver": "^2.0.3",
     "ember-route-action-helper": "0.3.2",
+    "ember-truth-helpers": "1.2.0",
     "loader.js": "^4.0.0",
     "lodash": "^4.11.1",
     "node-sass": "^3.8.0"