fix problems with rendering data

client/dashboard/power/power.js

@@ -1,7 +1,11 @@
 import React from 'react';
+import moment from 'moment-timezone';
+import _ from 'lodash';
+
 import powerRt from './power.rt.js';
 import House from './../../models/house';
 import SplineStackChart from './../../d3/line/spline_stack';
+import DateRangeSlider from './../../d3/sliders/date_range';
 
 var Power = React.createClass({
 
@@ -21,45 +25,63 @@ var Power = React.createClass({
     var power = this,
       house = power.props.house;
     power.graph_title = '';
-    house.ensurePowerData().then(()=>{
+    power.initDateRange();
+    house.setPowerData().then(()=>{
       power.setState({loading_data: false});
-      if (power.props.view === 'graph') power.initGraph();
+      if (power.props.view === 'graph'){
+        power.initGraph();
+      }
     });
   },
 
   componentWillReceiveProps: function(new_props){
     var power = this;
     if (new_props.house !== power.state.house){
+      // house will change.
       power.setState({loading_data: true});
-      new_props.house.ensurePowerData().then(()=>{
+      new_props.house.setPowerData().then(()=>{
         power.setState({loading_data: false});
-        if (power.props.view === 'graph') power.initGraph();
+        if (power.props.view === 'graph'){
+          power.initDateRange();
+          power.initGraph();
+        }
       });
     }
+    // view will change from graph to table.
     if (new_props.view !== 'graph' && power.props.view === 'graph') power.destroyGraph();
   },
 
   componentDidUpdate: function(prev_props, _prev_state){
     var power = this,
       house = power.props.house;
-    if (prev_props.view !== 'graph' && power.props.view === 'graph') power.initGraph();
+    // view has changed from graph to table.
+    if (prev_props.view !== 'graph' && power.props.view === 'graph'){
+      power.initDateRange();
+      power.initGraph();
+    }
   },
 
   initGraph: function(){
-    var power = this;
+    var power = this,
+      house = power.props.house;
     if (power.graph === undefined){
       power.graph = new SplineStackChart({
         container: '#power_graph',
         outer_width: 800,
         outer_height: 200,
         color: '#0404B4',
-        range_attr: 'y',
+        time_series: true,
         domain_attr: 'x',
-        time_series: true
+        range_attr: 'y',
+        include_dots: true,
+        titleizeDatum: (series, d)=>{
+          return series.title + '<br/>' + Math.round(d.y) + ' W<br/>' + moment.tz(d.x.getTime(), house.timezone).format('MMM D [at] HH:mm')
+        }
       });
       jQuery('#power_graph').tooltip({
-        selector: 'path',
+        selector: 'circle',
         container: 'body',
+        html: true,
         title: function(){
           return this.__data__.title;
         }
@@ -73,11 +95,19 @@ var Power = React.createClass({
       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() } })
+        values: house.power_data.map((power_datum)=>{
+          return {
+            x: house.toDate(power_datum.data.time),
+            y: Math.max(0, power_datum.data.consumption - power_datum.data.production) }
+        })
       },
       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() } })
+        values: house.power_data.map((power_datum)=>{
+          return {
+            x: house.toDate(power_datum.data.time),
+            y: power_datum.data.production }
+        })
       };
     power.graph.drawData({
       title: power.graph_title,
@@ -86,9 +116,50 @@ var Power = React.createClass({
     });
   },
 
+  initDateRange: function(){
+    var power = this,
+      house = power.props.house;
+    if (power.date_range_slider === undefined){
+      power.date_range_slider = new DateRangeSlider({
+        container: '#power_date_setter',
+        outer_height: 100,
+        maxDelta: function(changed_date, other_date){
+          if (Math.abs(changed_date.getTime() - other_date.getTime()) > 3600 * 24 * 7 * 1000){
+            if (changed_date > other_date){
+              return new Date(changed_date.getTime() - 3600 * 24 * 4 * 1000);
+            } else {
+              return new Date(changed_date.getTime() + 3600 * 24 * 4 * 1000);
+            }
+          }
+          return false;
+        }
+      });
+    }
+    power.date_range_slider.onRangeUpdated = (min, max)=>{
+      if (power.date_range_update) clearTimeout(power.date_range_update)
+      power.date_range_update = setTimeout(()=>{
+        house.power_date_range = [Math.round(min.getTime() / 1000), Math.round(max.getTime() / 1000)]
+        house.setPowerData()
+          .then(()=>{
+            power.updateGraph();
+          });
+      }, 500);
+    };
+    var four_week_start = house.data.data_until - 3600 * 24 * 28,
+      data_from = Math.max(four_week_start, house.data.data_from);
+    power.date_range_slider.drawData({
+      abs_min: house.toDate(four_week_start),
+      abs_max: house.toDate(house.data.data_until),
+      current_min: house.toDate(house.default_power_start),
+      current_max: house.toDate(house.default_power_end)
+    });
+  },
+
   destroyGraph: function(){
     var power = this;
+    document.getElementById('power_date_setter').innerHTML = '';
     document.getElementById('power_graph').innerHTML = '';
+    power.date_range_slider = undefined;
     power.graph = undefined;
   },
 

client/dashboard/power/power.rt

@@ -1,8 +1,9 @@
 <div id="power_view">
-  <h2>Household 15-minute Power Statistics</h2>
   <div class="alert alert-warning" rt-if="this.state.loading_data">
     Retrieving power data for the {this.props.house.name} household...
   </div>
+  <h4>Select dates:</h4>
+  <div id="power_date_setter"></div>
   <table rt-if="this.props.view === 'table'" class="table">
     <thead>
       <tr>
@@ -13,7 +14,7 @@
       </tr>
     </thead>
     <tbody>
-      <tr rt-repeat="power_datum in this.props.house.power_data" key="{power_datum.react_key}">
+      <tr rt-repeat="power_datum in this.props.house.power_data" key="{power_datum.scoped_id}">
         <td></td>
         <td>{power_datum.time_to_s}</td>
         <td>{power_datum.consumption_to_s}</td>

client/dashboard/power/power.rt.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import _ from 'lodash';
 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));
+    return React.createElement('tr', { 'key': power_datum.scoped_id }, 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, 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, [
+    return React.createElement('div', { 'id': 'power_view' }, 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('h4', {}, 'Select dates:'), React.createElement('div', { 'id': 'power_date_setter' }), 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.props.house.power_data, repeatPower_datum1.bind(this))