create irradiance composite graph

client/dashboard/layout/layout.component.js

@@ -6,6 +6,7 @@ import Templates from 'config/templates';
 import House from './../../models/house';
 import PowerDatum from './../../models/power_datum';
 import StateManager from './../state_manager';
+import DateRangeSlider from './../../d3/sliders/date_range';
 
 class LayoutComponent extends React.Component {
 
@@ -18,6 +19,8 @@ class LayoutComponent extends React.Component {
       house: null,
       dataset: null,
       year: null,
+      month: null,
+      date_interval: null,
       view: null
     }
   }
@@ -50,9 +53,35 @@ class LayoutComponent extends React.Component {
     });
   }
 
+  componentDidUpdate(prev_props, prev_state){
+    var layout = this;
+    if (layout.shouldShowDateRange() && !layout.datesMatch(prev_state)){
+      layout.updateDateRange();
+    } else if (!layout.shouldShowDateRange()){
+      layout.destroyDateRange();
+    }
+  }
+
+  datesMatch(prev_state){
+    var layout = this;
+    return layout.state.month == prev_state.month &&
+        layout.state.year == prev_state.year &&
+        !layout.shouldShowDateRange() ||
+        layout.state.date_interval && prev_state.date_interval &&
+        layout.state.date_interval[0] == prev_state.date_interval[0] &&
+        layout.state.date_interval[1] == prev_state.date_interval[1];
+  }
+
+  shouldShowDateRange(){
+    var layout = this;
+    return layout.state.house && layout.state.dataset === 'power' || layout.state.dataset === 'irradiance';
+  }
+
   syncFromStateManager(fnStateSet){
     var layout = this;
-    layout.setState(layout.state_manager.state, fnStateSet);
+    layout.setState(layout.state_manager.state, ()=>{
+      fnStateSet()
+    });
   }
 
   setHouse(event){
@@ -72,6 +101,50 @@ class LayoutComponent extends React.Component {
     layout.state_manager.setParams(update, layout);
   }
 
+  destroyDateRange(){
+    var layout = this,
+      container = document.getElementById('date_interval');
+    if (container) container.innerHTML = '';
+    layout.date_interval_slider = undefined;
+  }
+
+  updateDateRange(){
+    var layout = this,
+      house = layout.house,
+      state_manager = layout.state_manager;
+    if (layout.date_interval_slider === undefined){
+      layout.date_interval_slider = new DateRangeSlider({
+        container: '#date_interval',
+        outer_height: 100,
+        maxDelta: function(changed_date, other_date){
+          if (Math.abs(changed_date.getTime() - other_date.getTime()) > House.MAX_POWER_RANGE * 1000){
+            if (changed_date > other_date){
+              return new Date(changed_date.getTime() - House.MAX_POWER_RANGE * 1000);
+            } else {
+              return new Date(changed_date.getTime() + House.MAX_POWER_RANGE * 1000);
+            }
+          }
+          return false;
+        }
+      });
+    }
+    layout.date_interval_slider.onRangeUpdated = (min, max)=>{
+      if (layout.date_interval_update) clearTimeout(layout.date_interval_update);
+      // This will update the URL -> state_manager.state -> component states.
+      layout.date_interval_update = setTimeout(()=>{
+        var date_interval = [Math.round(min.getTime() / 1000), Math.round(max.getTime() / 1000)];
+        layout.state_manager.setParams({date_interval: date_interval}, layout);
+      }, 500);
+    };
+    var month_range = state_manager.month_range;
+    layout.date_interval_slider.drawData({
+      abs_min: house.toDate(month_range[0]),
+      abs_max: house.toDate(month_range[1]),
+      current_min: house.toDate(state_manager.state.date_interval[0]),
+      current_max: house.toDate(state_manager.state.date_interval[1])
+    });
+  }
+
   refreshData(){
     var layout = this,
       houses = layout.state.houses,