dont know what happened

client/dashboard/energy/energy.js

@@ -0,0 +1,134 @@
+import React from 'react';
+import energyRt from './energy.rt.js';
+import House from './../../models/house';
+import CalendarGridChart from './../../d3/grid/calendar_grid';
+
+var Energy = React.createClass({
+
+  getInitialState: function(){
+    var energy = this;
+    return {
+      graph_attr: 'production',
+      loading_data: true
+    };
+  },
+
+  handleResize: function(e) {
+    this.setState({windowWidth: window.innerWidth});
+  },
+
+  componentDidMount: function() {
+    // window.addEventListener('resize', this.handleResize);
+    var energy = this,
+      house = energy.props.house;
+    energy.graph_title = 'Daily Consumption';
+    house.setEnergyData().then(()=>{
+      energy.setState({loading_data: false});
+      if (energy.props.view === 'graph') energy.initGraph();
+    });
+  },
+
+  componentWillUnmount: function(){
+    var energy = this;
+    energy.destroyGraph();
+  },
+
+  componentWillReceiveProps: function(new_props){
+    var energy = this;
+    if (new_props.house !== energy.props.house){
+      energy.setState({loading_data: true});
+      new_props.house.setEnergyData().then(()=>{
+        energy.setState({loading_data: false});
+        if (energy.props.view === 'graph') energy.initGraph();
+      });
+    }
+    if (new_props.view !== 'graph' && energy.props.view === 'graph') energy.destroyGraph();
+  },
+
+  componentDidUpdate: function(prev_props, _prev_state){
+    var energy = this,
+      house = energy.props.house;
+    if (prev_props.view !== 'graph' && energy.props.view === 'graph') energy.initGraph();
+    if (prev_props.year !== energy.props.year){
+      energy.updateCurrentMonth();
+    }
+  },
+
+  setGraphAttr: function(event){
+    var energy = this,
+      graph_attr = event.target.dataset.value;
+    if (graph_attr !== energy.state.graph_attr){
+      energy.graph_title = 'Daily ' + event.target.innerText;
+      energy.setState({
+        graph_attr: graph_attr
+      }, function(){
+        if (energy.props.view === 'graph') energy.updateGraph();
+      })
+    }
+  },
+
+  initGraph: function(){
+    var energy = this;
+    if (energy.graph === undefined){
+      energy.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[energy.state.graph_attr])} kWh`;
+          return `${date_s}: ${range_value}`;
+        }
+      });
+    }
+    energy.updateGraph();
+  },
+
+  updateGraph: function(){
+    var energy = this,
+      house = energy.props.house;
+    energy.graph.rangeValue = (datum)=>{ return datum.data[energy.state.graph_attr]; }
+    energy.graph.drawData({
+      title: energy.graph_title,
+      css_class: '',
+      min_range: 0,
+      max_range: 150,
+      values: house.energy_data
+    });
+  },
+
+  destroyGraph: function(){
+    var energy = this;
+    document.getElementById('energy_graph').innerHTML = '';
+    energy.graph = undefined;
+  },
+
+  updateCurrentMonth: function(){
+    var energy = this,
+      house = energy.props.house;
+    house.setEnergyData()
+      .then(()=>{
+        if (energy.props.view === 'graph'){
+          // no update necessary since year already updated in layout.rt.
+          energy.updateGraph();
+        } else {
+          // force update to render correct data in table.
+          energy.forceUpdate();
+        }
+      });
+  },
+
+  render: function() {
+    return energyRt.call(this);
+  }
+});
+
+export default Energy;

client/dashboard/energy/energy.rt

@@ -0,0 +1,39 @@
+<div id="energy_view">
+  <div class="alert alert-warning" rt-if="this.state.loading_data">
+    Retrieving energy data for the {this.props.house.name} household...
+  </div>
+  <div rt-if="this.props.view === 'graph'">
+    <h4>Select Data</h4>
+    <div class="btn-group" role="group">
+      <button
+        data-value="consumption"
+        rt-class="{active: this.state.graph_attr === 'consumption'}"
+        onClick="{this.setGraphAttr}"
+        type="button" class="btn btn-primary">Consumption</button>
+      <button
+        data-value="production"
+        rt-class="{active: this.state.graph_attr === 'production'}"
+        onClick="{this.setGraphAttr}"
+        type="button" class="btn btn-primary">Production</button>
+    </div>
+  </div>
+  <table class="table" rt-if="this.props.view === 'table'">
+    <thead>
+      <tr>
+        <th></th>
+        <th>Day</th>
+        <th>Consumption (kWh)</th>
+        <th>Production (kWh)</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr rt-repeat="energy_datum in this.props.house.energy_data" key="{energy_datum.scoped_id}">
+        <td></td>
+        <td>{energy_datum.day_to_s}</td>
+        <td>{energy_datum.consumption_to_s}</td>
+        <td>{energy_datum.production_to_s}</td>
+      </tr>
+    </tbody>
+  </table>
+  <div rt-if="this.props.view === 'graph'" id="energy_graph"></div>
+</div>

client/dashboard/energy/energy.rt.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import _ from 'lodash';
+function repeatEnergy_datum1(energy_datum, energy_datumIndex) {
+    return React.createElement('tr', { 'key': energy_datum.scoped_id }, React.createElement('td', {}), React.createElement('td', {}, energy_datum.day_to_s), React.createElement('td', {}, energy_datum.consumption_to_s), React.createElement('td', {}, energy_datum.production_to_s));
+}
+export default function () {
+    return React.createElement('div', { 'id': 'energy_view' }, this.state.loading_data ? React.createElement('div', { 'className': 'alert alert-warning' }, '\n    Retrieving energy data for the ', this.props.house.name, ' household...\n  ') : null, this.props.view === 'graph' ? React.createElement('div', {}, React.createElement('h4', {}, 'Select Data'), React.createElement('div', {
+        'className': 'btn-group',
+        'role': 'group'
+    }, React.createElement('button', {
+        'data-value': 'consumption',
+        'className': _.keys(_.pick({ active: this.state.graph_attr === 'consumption' }, _.identity)).join(' ') + ' ' + 'btn btn-primary',
+        'onClick': this.setGraphAttr,
+        'type': 'button'
+    }, 'Consumption'), React.createElement('button', {
+        'data-value': 'production',
+        'className': _.keys(_.pick({ active: this.state.graph_attr === 'production' }, _.identity)).join(' ') + ' ' + 'btn btn-primary',
+        'onClick': this.setGraphAttr,
+        'type': 'button'
+    }, 'Production'))) : null, this.props.view === 'table' ? React.createElement('table', { 'className': 'table' }, React.createElement('thead', {}, React.createElement('tr', {}, React.createElement('th', {}), React.createElement('th', {}, 'Day'), React.createElement('th', {}, 'Consumption (kWh)'), React.createElement('th', {}, 'Production (kWh)'))), React.createElement.apply(this, [
+        'tbody',
+        {},
+        _.map(this.props.house.energy_data, repeatEnergy_datum1.bind(this))
+    ])) : null, this.props.view === 'graph' ? React.createElement('div', { 'id': 'energy_graph' }) : null);
+};