energy spline stack

client/dashboard/layout/layout.js

@@ -10,7 +10,7 @@ var Layout = React.createClass({
       houses: null,
       house: null,
       view: 'graph',
-      dataset: 'energy',
+      dataset: 'power',
       requesting_data: true
     };
   },

client/dashboard/power/power.js

@@ -36,10 +36,11 @@ var Power = React.createClass({
         if (power.props.view === 'graph') power.initGraph();
       });
     }
+    if (new_props.view !== 'graph' && power.props.view === 'graph') power.destroyGraph();
   },
 
   componentDidUpdate: function(prev_props, _prev_state){
-    var power_datum = this,
+    var power = this,
       house = power.props.house;
     if (prev_props.view !== 'graph' && power.props.view === 'graph') power.initGraph();
   },
@@ -47,23 +48,20 @@ var Power = React.createClass({
   initGraph: function(){
     var power = this;
     if (power.graph === undefined){
-      document.getElementById('power_graph').innerHTML = '';
       power.graph = new SplineStackChart({
         container: '#power_graph',
         outer_width: 800,
         outer_height: 200,
-        date_attr: 'day',
         color: '#0404B4',
-        toDate: (power_datum)=>{ return power_datum.data.day.toDate(); }
+        range_attr: 'y',
+        domain_attr: 'x',
+        time_series: true
       });
       jQuery('#power_graph').tooltip({
-        selector: '.d3-chart-grid-unit',
+        selector: 'path',
         container: 'body',
         title: function(){
-          var power_datum = this.__data__,
-            date_s = d3.time.format('%a %b %d, %Y')(power_datum.data.day.toDate()),
-            range_value = `${Math.round(power_datum.data[power.state.graph_attr])} kWh`;
-          return `${date_s}: ${range_value}`;
+          return this.__data__.title;
         }
       });
     }
@@ -72,17 +70,28 @@ var Power = React.createClass({
 
   updateGraph: function(){
     var power = this,
-      house = power.props.house;
-    power.graph.rangeValue = (datum)=>{ return datum.data[power.state.graph_attr]; }
+      house = power.props.house,
+      net_power = {
+        title: 'Net Power Consumption',
+        values: house.power_data.slice(0, 200).map((power_datum)=>{ return {y: Math.max(0, power_datum.data.consumption - power_datum.data.production), x: power_datum.data.time.toDate() } })
+      },
+      savings = {
+        title: 'Power Production',
+        values: house.power_data.slice(0, 200).map((power_datum)=>{ return {y: power_datum.data.production, x: power_datum.data.time.toDate() } })
+      };
     power.graph.drawData({
       title: power.graph_title,
       css_class: '',
-      min_range: 0,
-      max_range: 150,
-      values: house.power_data
+      series: [net_power, savings]
     });
   },
 
+  destroyGraph: function(){
+    var power = this;
+    document.getElementById('power_graph').innerHTML = '';
+    power.graph = undefined;
+  },
+
   render: function() {
     return powerRt.call(this);
   }

client/dashboard/power/power.rt

@@ -3,7 +3,7 @@
   <div class="alert alert-warning" rt-if="this.state.loading_data">
     Retrieving power data for the {this.props.house.name} household...
   </div>
-  <table>
+  <table rt-if="this.props.view === 'table'" class="table">
     <thead>
       <tr>
         <th></th>
@@ -13,7 +13,7 @@
       </tr>
     </thead>
     <tbody>
-      <tr rt-repeat="power_datum in this.state.house.power_data" key="{power_datum.react_key}">
+      <tr rt-repeat="power_datum in this.props.house.power_data" key="{power_datum.react_key}">
         <td></td>
         <td>{power_datum.time_to_s}</td>
         <td>{power_datum.consumption_to_s}</td>
@@ -21,5 +21,5 @@
       </tr>
     </tbody>
   </table>
-  <div id="power_data"></div>
+  <div rt-if="this.props.view === 'graph'" id="power_graph"></div>
 </div>

client/dashboard/power/power.rt.js

@@ -4,9 +4,9 @@ function repeatPower_datum1(power_datum, power_datumIndex) {
     return React.createElement('tr', { 'key': power_datum.react_key }, React.createElement('td', {}), React.createElement('td', {}, power_datum.time_to_s), React.createElement('td', {}, power_datum.consumption_to_s), React.createElement('td', {}, power_datum.production_to_s));
 }
 export default function () {
-    return React.createElement('div', { 'id': 'power_view' }, React.createElement('h2', {}, 'Household 15-minute Power Statistics'), this.state.loading_data ? React.createElement('div', { 'className': 'alert alert-warning' }, '\n    Retrieving power data for the ', this.props.house.name, ' household...\n  ') : null, React.createElement('table', {}, React.createElement('thead', {}, React.createElement('tr', {}, React.createElement('th', {}), React.createElement('th', {}, 'Time'), React.createElement('th', {}, 'Consumption (W)'), React.createElement('th', {}, 'Production (W)'))), React.createElement.apply(this, [
+    return React.createElement('div', { 'id': 'power_view' }, React.createElement('h2', {}, 'Household 15-minute Power Statistics'), this.state.loading_data ? React.createElement('div', { 'className': 'alert alert-warning' }, '\n    Retrieving power data for the ', this.props.house.name, ' household...\n  ') : null, this.props.view === 'table' ? React.createElement('table', { 'className': 'table' }, React.createElement('thead', {}, React.createElement('tr', {}, React.createElement('th', {}), React.createElement('th', {}, 'Time'), React.createElement('th', {}, 'Consumption (W)'), React.createElement('th', {}, 'Production (W)'))), React.createElement.apply(this, [
         'tbody',
         {},
-        _.map(this.state.house.power_data, repeatPower_datum1.bind(this))
-    ])), React.createElement('div', { 'id': 'power_data' }));
+        _.map(this.props.house.power_data, repeatPower_datum1.bind(this))
+    ])) : null, this.props.view === 'graph' ? React.createElement('div', { 'id': 'power_graph' }) : null);
 };