dynamic react router

client/dashboard/energy/graph/graph.component.js

@@ -0,0 +1,76 @@
+import React from 'react';
+
+import Templates from 'config/templates';
+import CalendarGridChart from './../../../d3/grid/calendar_grid';
+import House from './../../../models/house';
+
+class GraphComponent extends React.Component {
+
+  componentDidMount(){
+    var energy_graph = this,
+      house = energy_graph.context.house;
+    if (!energy_graph.context.loading_energy_data) energy_graph.updateGraph();
+  }
+
+  componentDidUpdate(prev_props, prev_state, prev_context){
+    var energy_graph = this,
+      house = energy_graph.context.house;
+    if (energy_graph.context.loading_energy_data) {return false;}
+    if (!prev_context.house ||
+        prev_context.loading_energy_data ||
+        prev_context.house.id != energy_graph.context.house.id) {
+      energy_graph.updateGraph();
+    }
+  }
+
+
+  updateGraph(){
+    var energy_graph = this,
+      house = energy_graph.context.house,
+      graph_attr = energy_graph.props.params.graph_attr;
+
+    if (energy_graph.graph === undefined){
+      energy_graph.graph = new CalendarGridChart({
+        container: '#energy_graph',
+        outer_width: 800,
+        outer_height: 300,
+        date_attr: 'day',
+        color: '#0404B4',
+        toDate: (energy_datum)=>{ return energy_datum.day_to_date; }
+      });
+      jQuery('#energy_graph').tooltip({
+        selector: '.d3-chart-grid-unit',
+        container: 'body',
+        title: function(){
+          var energy_datum = this.__data__,
+            date_s = d3.time.format('%a %b %d, %Y')(energy_datum.day_to_date),
+            range_value = `${Math.round(energy_datum.data[graph_attr])} kWh`;
+          return `${date_s}: ${range_value}`;
+        }
+      });
+    }
+
+    energy_graph.graph.rangeValue = (datum)=>{ return datum.data[graph_attr]; }
+    energy_graph.graph.drawData({
+      title: energy_graph.graph_title,
+      css_class: '',
+      min_range: 0,
+      max_range: 150,
+      values: house.energy_data
+    });
+  }
+
+  render(){
+    var energyGraphRt = Templates.forComponent('energy_graph');
+    return energyGraphRt.call(this);
+  }
+
+}
+
+GraphComponent.contextTypes = {
+  house: React.PropTypes.instanceOf(House),
+  loading_energy_data: React.PropTypes.bool.isRequired,
+  router: React.PropTypes.object.isRequired
+};
+
+export default GraphComponent;