create irradiance composite graph

client/dashboard/power/graph/graph.component.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import Templates from 'config/templates';
+import c3 from 'c3';
 
 import House from './../../../models/house';
-import c3 from 'c3';
 
 class GraphComponent extends React.Component {
 
@@ -21,7 +21,7 @@ class GraphComponent extends React.Component {
 
   componentDidUpdate(prev_props, prev_state){
     var power_graph = this;
-    if (prev_props.house != power_graph.props.house || prev_props.power_range != power_graph.props.power_range){
+    if (prev_props.house != power_graph.props.house || prev_props.date_interval != power_graph.props.date_interval){
       power_graph.updateGraph();
     }
   }

client/dashboard/power/power.component.js

@@ -4,7 +4,6 @@ import _ from 'lodash';
 
 import Templates from 'config/templates';
 import House from './../../models/house';
-import DateRangeSlider from './../../d3/sliders/date_range';
 
 class PowerComponent extends React.Component {
 
@@ -25,75 +24,11 @@ class PowerComponent extends React.Component {
     return this.props.state_manager;
   }
 
-  get loading_power_data(){
-    return this.props.loading_power_data || this.state.loading_power_data;
-  }
-
-  componentDidMount(){
-    var power = this;
-    power.initDateRange();
-  }
-
-  componentDidUpdate(prev_props, prev_state){
-    var power = this,
-      state_manager = power.state_manager;
-    if (prev_props.power_range[0] != power.props.power_range[0] ||
-        prev_props.power_range[1] != power.props.power_range[1] ||
-        prev_props.house != power.props.house){
-      power.initDateRange();
-      state_manager.powerDataRendered();
-    }
-  }
-
   syncFromStateManager(fnStateSet){
     var power = this;
     power.setState(power.state_manager.state, fnStateSet);
   }
 
-  initDateRange(){
-    var power = this,
-      house = power.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 * 4 * 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(()=>{
-        var power_range = [Math.round(min.getTime() / 1000), Math.round(max.getTime() / 1000)];
-        power.state_manager.setParams({power_range: power_range}, power);
-      }, 500);
-    };
-    power.date_range_slider.drawData({
-      abs_min: house.state.current_month_moment.toDate(),
-      abs_max: house.state.end_of_current_data_moment.toDate(),
-      current_min: house.toDate(house.state.power_range[0]),
-      current_max: house.toDate(house.state.power_range[1])
-    });
-  }
-
-  setParam(event){
-    var power = this,
-      param = event.target.dataset.param,
-      value = event.target.dataset.value,
-      update = {}, route_helper;
-    update[param] = value;
-    if (value == power.state_manager.state[param]) return false;
-    power.state_manager.setParams(update, power);
-  }
-
   render() {
     var powerRt = Templates.forComponent('power');
     return powerRt.call(this);

client/dashboard/power/power.rt

@@ -1,33 +1,18 @@
 <rt-require dependency="./graph/graph.component" as="PowerGraph"/>
 <rt-require dependency="./table/table.component" as="PowerTable"/>
 <div id="power_view">
-  <div class="btn-group">
-    <button
-      rt-if="this.house"
-      rt-repeat="month in this.house.availableMonths()"
-      data-param="month"
-      data-value="{month}"
-      key="data-month-{month}"
-      class="btn-warning btn btn-sm"
-      rt-class="{active: month === this.house.state.month}"
-      onClick="{this.setParam.bind(this)}">{month}</button>
-  </div>
-  <div class="alert alert-warning" rt-if="this.loading_power_data">
-    Retrieving power data...
-  </div>
-  <div id="power_date_setter"></div>
   <PowerGraph
     rt-if="this.props.view === 'graph'"
     state_manager="{this.props.state_manager}"
     house="{this.props.house}"
     month="{this.props.month}"
     year="{this.props.year}"
-    power_range="{this.props.power_range}" ></PowerGraph>
+    date_interval="{this.props.date_interval}" ></PowerGraph>
   <PowerTable
     rt-if="this.props.view === 'table'"
     state_manager="{this.props.state_manager}"
     house="{this.props.house}"
     month="{this.props.month}"
     year="{this.props.year}"
-    power_range="{this.props.power_range}" ></PowerTable>
+    date_interval="{this.props.date_interval}" ></PowerTable>
 </div>