refactor view to top level

client/dashboard/energy/energy.js

@@ -8,7 +8,6 @@ var Energy = React.createClass({
   getInitialState: function(){
     var energy = this;
     return {
-      view: 'graph',
       graph_attr: 'production',
       loading_data: true
     };
@@ -25,29 +24,26 @@ var Energy = React.createClass({
     energy.graph_title = 'Daily Consumption';
     house.ensureEnergyData().then(()=>{
       energy.setState({loading_data: false});
-      energy.initGraph();
+      if (energy.props.view === 'graph') energy.initGraph();
     });
   },
 
   componentWillReceiveProps: function(new_props){
     var energy = this;
-    energy.setState({loading_data: true});
     if (new_props.house !== energy.state.house){
+      energy.setState({loading_data: true});
       new_props.house.ensureEnergyData().then(()=>{
         energy.setState({loading_data: false});
-        if (energy.state.view === 'graph') energy.initGraph();
+        if (energy.props.view === 'graph') energy.initGraph();
       });
     }
+    if (new_props.view !== 'graph' && energy.props.view === 'graph') energy.destroyGraph();
   },
 
-  setView: function(event){
+  componentDidUpdate: function(prev_props, _prev_state){
     var energy = this,
-      view = event.target.dataset.value,
       house = energy.props.house;
-    if (view !== energy.state.view){
-      energy.setState({view: view});
-      if (energy.state.view === 'graph') energy.initGraph();
-    }
+    if (prev_props.view !== 'graph' && energy.props.view === 'graph') energy.initGraph();
   },
 
   setGraphAttr: function(event){
@@ -58,7 +54,7 @@ var Energy = React.createClass({
       energy.setState({
         graph_attr: graph_attr
       }, function(){
-        if (energy.state.view === 'graph') energy.updateGraph();
+        if (energy.props.view === 'graph') energy.updateGraph();
       })
     }
   },
@@ -66,7 +62,6 @@ var Energy = React.createClass({
   initGraph: function(){
     var energy = this;
     if (energy.graph === undefined){
-      document.getElementById('energy_graph').innerHTML = '';
       energy.graph = new CalendarGridChart({
         container: '#energy_graph',
         outer_width: 800,
@@ -102,6 +97,12 @@ var Energy = React.createClass({
     });
   },
 
+  destroyGraph: function(){
+    var energy = this;
+    document.getElementById('energy_graph').innerHTML = '';
+    energy.graph = undefined;
+  },
+
   render: function() {
     return energyRt.call(this);
   }

client/dashboard/energy/energy.rt

@@ -1,33 +1,23 @@
 <div id="energy_view">
-  <h2>Household Daily Energy</h2>
   <div class="alert alert-warning" rt-if="this.state.loading_data">
     Retrieving energy data for the {this.props.house.name} household...
   </div>
-  <div class="btn-group" role="group">
-    <button
-      data-value="graph"
-      rt-class="{active: this.state.view === 'graph'}"
-      onClick="{this.setView}"
-      type="button" class="btn btn-primary">Graph</button>
-    <button
-      data-value="table"
-      rt-class="{active: this.state.view === 'table'}"
-      onClick="{this.setView}"
-      type="button" class="btn btn-primary">Table</button>
-  </div><br/>
-  <div rt-if="this.state.view === 'graph'" 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 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.state.view === 'table'">
+  <table class="table" rt-if="this.props.view === 'table'">
     <thead>
       <tr>
         <th></th>
@@ -45,5 +35,5 @@
       </tr>
     </tbody>
   </table>
-  <div id="energy_graph"></div>
+  <div rt-if="this.props.view === 'graph'" id="energy_graph"></div>
 </div>

client/dashboard/energy/energy.rt.js

@@ -4,20 +4,7 @@ function repeatEnergy_datum1(energy_datum, energy_datumIndex) {
     return React.createElement('tr', { 'key': energy_datum.react_key }, 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' }, React.createElement('h2', {}, 'Household Daily Energy'), this.state.loading_data ? React.createElement('div', { 'className': 'alert alert-warning' }, '\n    Retrieving energy data for the ', this.props.house.name, ' household...\n  ') : null, React.createElement('div', {
-        'className': 'btn-group',
-        'role': 'group'
-    }, React.createElement('button', {
-        'data-value': 'graph',
-        'className': _.keys(_.pick({ active: this.state.view === 'graph' }, _.identity)).join(' ') + ' ' + 'btn btn-primary',
-        'onClick': this.setView,
-        'type': 'button'
-    }, 'Graph'), React.createElement('button', {
-        'data-value': 'table',
-        'className': _.keys(_.pick({ active: this.state.view === 'table' }, _.identity)).join(' ') + ' ' + 'btn btn-primary',
-        'onClick': this.setView,
-        'type': 'button'
-    }, 'Table')), React.createElement('br', {}), this.state.view === 'graph' ? React.createElement('div', {
+    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', {
@@ -30,9 +17,9 @@ export default function () {
         'className': _.keys(_.pick({ active: this.state.graph_attr === 'production' }, _.identity)).join(' ') + ' ' + 'btn btn-primary',
         'onClick': this.setGraphAttr,
         'type': 'button'
-    }, 'Production')) : null, this.state.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, [
+    }, '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, React.createElement('div', { 'id': 'energy_graph' }));
+    ])) : null, this.props.view === 'graph' ? React.createElement('div', { 'id': 'energy_graph' }) : null);
 };