Add static charts for properties

app/adapters/application.js

@@ -38,5 +38,9 @@ export default DS.RESTAdapter.extend({
 
   query: function(store, type, query) {
     return this.ajax(this.host + '/' + this.namespace + '/queryContext', 'POST', { data: query });
+  },
+
+  updateRecord: function(store, type, snapshot) {
+    
   }
 });

app/components/line-chart.js

@@ -0,0 +1,17 @@
+import Ember from 'ember';
+
+const { Component, computed } = Ember;
+
+export default Ember.Component.extend({
+  tagName: 'canvas',
+  classNames: ['line-chart'],
+
+  didInsertElement: function() {
+    // create chart
+    var element = this.get('element');
+    this.chart = new Chart(element.getContext('2d'));
+    this.chart.Line(this.chartData, {
+
+    });
+  }
+});

app/controllers/lab-mashup/entity/property.js

@@ -0,0 +1,12 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  model(params) {
+    Ember.run.later(this, function() {
+      this.refresh();
+    }, 500);
+
+    var record = this.store.peekRecord('property', params.property_id);
+    return record;
+  }
+});

app/models/property.js

@@ -5,6 +5,7 @@ export default DS.Model.extend({
   value: DS.attr('number'),
   type: DS.attr('string'),
   timestamp: DS.attr('date'),
+  history: DS.attr(),
   entity: DS.belongsTo('entity'),
   category: DS.belongsTo('category')
 });

app/router.js

@@ -9,7 +9,8 @@ Router.map(function() {
     this.route('lab-mashup', { path: '/' }, function() {
       // dynamic routes
       this.route('entity', { path: '/:entity_id' }, function() {
-        this.route('category', { path: '/:category_id'});
+        //this.route('category', { path: '/:category_id'});
+        this.route('property', { path: '/:property_id'});
       });
 
       // static routes

app/routes/lab-mashup/entity/property.js

@@ -0,0 +1,18 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  model(params) {
+    Ember.run.later(this, function() {
+      this.refresh();
+    }, 500);
+
+    var record = this.store.peekRecord('property', params.property_id);
+    return record;
+  },
+
+  chartData() {
+    return {
+      name: 'test'
+    };
+  }
+});

app/serializers/application.js

@@ -5,7 +5,21 @@ export default DS.RESTSerializer.extend({
     var json = { data: [] };
 
     this._normalizePayload(payload, function(item) {
-      json.data.push(item);
+      if (item.type === 'entity') {
+        json.data.push(item);
+      } else if (item.type === 'property') {
+        // create record if needed, otherwise add to current one
+        var record = store.peekRecord('property', item.id);
+        if (record) {
+          var length = record.get('history')[0].length;
+          record.get('history')[0].push([length, record.get('value')]);
+          record.set('value', item.attributes.value);
+        } else {
+          // add new item
+          store.push(item);
+        }
+      }
+
       return true;
     });
 
@@ -16,8 +30,25 @@ export default DS.RESTSerializer.extend({
     var json = { data: {} };
 
     this._normalizePayload(payload, function(item) {
-      json.data = item;
-      return false;
+      //json.data = item;
+      //return false;
+
+      if (item.type === 'entity') {
+        json.data = item;
+      } else if (item.type === 'property') {
+        // create record if needed, otherwise add to current one
+        var record = store.peekRecord('property', item.id);
+        if (record) {
+          var length = record.get('history').length;
+          record.get('history')[0].push([length, record.get('value')]);
+          record.set('value', item.attributes.value);
+        } else {
+          // add new item
+          store.push(item);
+        }
+      }
+
+      return true;
     });
 
     return json;
@@ -29,8 +60,17 @@ export default DS.RESTSerializer.extend({
     this._normalizePayload(payload, function(item) {
       if (item.type === 'entity') {
         json.data.push(item);
-      } else {
-        _createRecord(store, item);
+      } else if (item.type === 'property') {
+        // create record if needed, otherwise add to current one
+        var record = store.peekRecord('property', item.id);
+        if (record) {
+          var length = record.get('history').length;
+          record.get('history')[0].push([length, record.get('value')]);
+          record.set('value', item.attributes.value);
+        } else {
+          // add new item
+          store.push(item);
+        }
       }
 
       return true;
@@ -73,6 +113,7 @@ export default DS.RESTSerializer.extend({
                     name: attribute.name,
                     type: attribute.type,
                     value: attribute.value,
+                    history: [[[0, attribute.value]]]
                   },
                   relationships: {
                     entity: {
@@ -118,11 +159,5 @@ export default DS.RESTSerializer.extend({
         }
       });
     }
-  },
-
-  _createRecord: function(store, item) {
-    store.createRecord(item.type, {
-
-    });
   }
 });

app/styles/app.css

@@ -8,7 +8,7 @@ body {
 	color: #4d4d4d;
 
 	min-width: 300px;
-	max-width: 1500px;
+	/*max-width: 1500px;*/
 	margin: 0 auto;
 
 	font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
@@ -45,6 +45,8 @@ footer {
 
 	margin: 35px auto 0;
 
+	width: 100%;
+
 	font-size: 12px;
 	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 	text-align: center;
@@ -53,30 +55,40 @@ footer {
 #main {
 	margin-top: 15px;
 	margin-left: 15px;
+
+	width: 100%;
 }
 
-#main-left {
+.layout-left {
 	float: left;
-	width: 45%;
+	width: 50%;
 
 	padding-top: 10px;
 	/*padding-left: 25px;*/
 }
 
-#main-right {
+.layout-right {
 	float: right;
-	width: 45%;
+	width: 50%;
 
 	padding-top: 10px;
 	/*padding-right: 25px;*/
 }
 
-#main::after {
+.layout::after {
 	display: block;
 	content: "";
 	clear: both;
 }
 
+#properties > .layout-left {
+	width: 30%;
+}
+
+#properties > .layout-right {
+	width: 70%;
+}
+
 .data-table {
 	background: #eee;
 
@@ -112,6 +124,13 @@ footer {
 	margin: 0;
 }
 
+canvas.line-chart {
+	width: 90%;
+	height: 90%;
+
+	margin: 10px;
+}
+
 .mockup-image {
 	width: 600px;
 	height: 400px;

app/templates/components/line-chart.hbs

@@ -0,0 +1 @@
+

app/templates/components/properties-table.hbs

@@ -5,8 +5,8 @@
 </tr>
 {{#each properties as |property|}}
   <tr>
-    <!-- <td>{{#link-to 'lab-mashup.entity.property' property}}{{property.name}}{{/link-to}}</td> -->
-    <td>{{property.name}}</td>
+    <td>{{#link-to 'lab-mashup.entity.property' property}}{{property.name}}{{/link-to}}</td>
+    <!--<td>{{property.name}}</td>-->
     <td>{{property.value}} {{property.type}}</td>
     <td>{{property.timestamp}}</td>
   </tr>

app/templates/lab-mashup/entity.hbs

@@ -1,13 +1,30 @@
-<section id="main-left">
+<section class="layout-left">
   <section class="mockup-image">[Node Layout Image]</section>
 </section>
 
-<section id="main-right">
+<section class="layout-right">
   <ul class="nav nav-tabs" role="tablist">
     {{#each model.categories as |category|}}
       {{#link-to 'lab-mashup.entity.category' category tagName='li' activeClass='active'}}{{#link-to 'lab-mashup.entity.category' category}}{{category.name}}{{/link-to}}{{/link-to}}
     {{/each}}
   </ul>
 
-  {{outlet}}
+  <section id="properties">
+    <section class="layout-left">
+      <table class="data-table">
+        <tr>
+          <th>Name</th>
+        </tr>
+        {{#each model.properties as |property|}}
+          <tr>
+            <td>{{#link-to 'lab-mashup.entity.property' property}}{{property.name}}{{/link-to}}</td>
+          </tr>
+        {{/each}}
+      </table>
+    </section>
+
+    <section class="layout-right">
+      {{outlet}}
+    </section>
+  </section>
 </section>

app/templates/lab-mashup/entity/index.hbs

@@ -1 +1 @@
-{{properties-table properties=model.properties}}
+

app/templates/lab-mashup/entity/property.hbs

@@ -0,0 +1,7 @@
+{{#if property}}
+  <p>{{property.name}}</p>
+{{/if}}
+
+{{chartData.name}}
+
+{{flot-chart height="500px" data=model.history}}

bower.json

@@ -15,6 +15,8 @@
     "pretender": "~0.9.0",
     "lodash": "~3.7.0",
     "Faker": "~3.0.0",
-    "bootstrap": "~3.3.2"
+    "bootstrap": "~3.3.2",
+    "chart.js": "~0.1.0",
+    "flot-charts": "*"
   }
 }

config/environment.js

@@ -22,11 +22,11 @@ module.exports = function(environment) {
 
     contentSecurityPolicy: {
       'default-src': "'none'",
-      'script-src': "'self'",
+      'script-src': "'self' 'unsafe-eval'",
       'font-src': "'self'",
       'connect-src': "'self' 46.101.131.212:80",
       'img-src': "'self'",
-      'style-src': "'self'",
+      'style-src': "'self' 'unsafe-inline'",
       'media-src': "'self'"
     }
   };

package.json

@@ -44,6 +44,7 @@
     "morgan": "^1.6.1"
   },
   "dependencies": {
-    "ember-cli-cors": "0.0.1"
+    "ember-cli-cors": "0.0.1",
+    "ember-cli-flot": "0.0.3"
   }
 }