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);
+};

client/dashboard/layout/layout.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import layoutRt from './layout.rt.js';
+import House from './../../models/house';
+import PowerDatum from './../../models/power_datum';
+
+var Layout = React.createClass({
+
+  getInitialState: function(){
+    var layout = this;
+    return {
+      houses: null,
+      house: null,
+      view: 'graph',
+      dataset: 'power',
+      requesting_data: true
+    };
+  },
+
+  handleResize: function(e) {
+    this.setState({windowWidth: window.innerWidth});
+  },
+
+  componentDidMount: function() {
+    var layout = this;
+    // window.addEventListener('resize', this.handleResize);
+    House.ensureHouses().then((houses)=>{
+      layout.setState({
+        houses: houses,
+        house: houses[0],
+        requesting_data: false,
+        month: houses[0].current_month,
+        year: houses[0].current_year
+      });
+    });
+  },
+
+  setHouse: function(event){
+    var layout = this,
+      house_id = event.target.value,
+      old_house = layout.state.house,
+      house = layout.state.houses.find((house)=>{ return house.data.id == house_id });
+    layout.setState({house: house}, ()=>{
+      old_house.closeDb();
+    });
+  },
+
+  setView: function(event){
+    var layout = this,
+      view = event.target.dataset.value;
+    layout.view_name = event.target.innerText;
+    layout.setState({view: view});
+  },
+
+  setDataset: function(event){
+    var layout = this,
+      dataset = event.target.dataset.value;
+    layout.setState({dataset: dataset});
+  },
+
+  setYear: function(event){
+    var layout = this,
+      year = event.target.dataset.value,
+      house = layout.state.house;
+    if (year != house.current_year){
+      house.setYear(year);
+      layout.setState({year: year});
+    }
+  },
+
+  refreshData: function(){
+    var layout = this,
+      houses = layout.state.houses,
+      all = [];
+    houses.forEach((house)=>{
+      all.push(house.clearData());
+    });
+    Promise.all(all)
+      .then(()=>{
+        window.location.reload();
+      });
+  },
+
+  render: function() {
+    return layoutRt.call(this);
+  }
+});
+
+export default Layout;

client/dashboard/layout/layout.rt

@@ -0,0 +1,60 @@
+<rt-require dependency="./../energy/energy" as="Energy"/>
+<rt-require dependency="./../power/power" as="Power"/>
+<div id="layout">
+  <div class="alert alert-warning" rt-if="this.state.requesting_data">Retrieving houses...</div>
+
+  <h4>Select household:</h4>
+  <select rt-if="this.state.houses" class="form-control" onChange="{this.setHouse}">
+    <option rt-repeat="house in this.state.houses" value="{house.data.id}" key="{house.scoped_id}">{house.data.name}</option>
+  </select>
+  <button rt-if="this.state.house" onClick="{this.refreshData}" class="btn btn-xs btn-default">Refresh House Data</button>
+
+  <h4>Select dataset:</h4>
+  <div class="btn-group" role="group">
+    <button
+      data-value="energy"
+      rt-class="{active: this.state.dataset === 'energy'}"
+      onClick="{this.setDataset}"
+      type="button" class="btn btn-primary">Daily Energy Statistics</button>
+    <button
+      data-value="power"
+      rt-class="{active: this.state.dataset === 'power'}"
+      onClick="{this.setDataset}"
+      type="button" class="btn btn-primary">15-minute Power Statistics</button>
+  </div>
+
+  <h4>View as:</h4>
+  <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>
+
+  <h4>Select dates:</h4>
+  <div class="btn-group">
+    <button
+      rt-if="this.state.house"
+      rt-repeat="year in this.state.house.years"
+      data-value="{year}"
+      key="data-year-{year}"
+      class="btn-info btn btn-sm"
+      rt-class="{active: year == this.state.house.current_year}"
+      onClick="{this.setYear}">{year}</button>
+  </div><br/>
+
+  <Energy rt-if="this.state.house && this.state.dataset === 'energy'"
+    house="{this.state.house}"
+    view="{this.state.view}"
+    year="{this.state.year}"></Energy>
+  <Power rt-if="this.state.house && this.state.dataset === 'power'"
+    house="{this.state.house}"
+    view="{this.state.view}"
+    year="{this.state.year}"></Power>
+</div>

client/dashboard/layout/layout.rt.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import _ from 'lodash';
+import Energy from './../energy/energy';
+import Power from './../power/power';
+function repeatHouse1(house, houseIndex) {
+    return React.createElement('option', {
+        'value': house.data.id,
+        'key': house.scoped_id
+    }, house.data.name);
+}
+function repeatYear2(year, yearIndex) {
+    return React.createElement('button', {
+        'data-value': year,
+        'key': 'data-year-' + year,
+        'className': 'btn-info btn btn-sm' + ' ' + _.keys(_.pick({ active: year == this.state.house.current_year }, _.identity)).join(' '),
+        'onClick': this.setYear
+    }, year);
+}
+export default function () {
+    return React.createElement('div', { 'id': 'layout' }, this.state.requesting_data ? React.createElement('div', { 'className': 'alert alert-warning' }, 'Retrieving houses...') : null, React.createElement('h4', {}, 'Select household:'), this.state.houses ? React.createElement.apply(this, [
+        'select',
+        {
+            'className': 'form-control',
+            'onChange': this.setHouse
+        },
+        _.map(this.state.houses, repeatHouse1.bind(this))
+    ]) : null, this.state.house ? React.createElement('button', {
+        'onClick': this.refreshData,
+        'className': 'btn btn-xs btn-default'
+    }, 'Refresh House Data') : null, React.createElement('h4', {}, 'Select dataset:'), React.createElement('div', {
+        'className': 'btn-group',
+        'role': 'group'
+    }, React.createElement('button', {
+        'data-value': 'energy',
+        'className': _.keys(_.pick({ active: this.state.dataset === 'energy' }, _.identity)).join(' ') + ' ' + 'btn btn-primary',
+        'onClick': this.setDataset,
+        'type': 'button'
+    }, 'Daily Energy Statistics'), React.createElement('button', {
+        'data-value': 'power',
+        'className': _.keys(_.pick({ active: this.state.dataset === 'power' }, _.identity)).join(' ') + ' ' + 'btn btn-primary',
+        'onClick': this.setDataset,
+        'type': 'button'
+    }, '15-minute Power Statistics')), React.createElement('h4', {}, 'View as:'), 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('h4', {}, 'Select dates:'), React.createElement.apply(this, [
+        'div',
+        { 'className': 'btn-group' },
+        this.state.house ? _.map(this.state.house.years, repeatYear2.bind(this)) : null
+    ]), React.createElement('br', {}), this.state.house && this.state.dataset === 'energy' ? React.createElement(Energy, {
+        'house': this.state.house,
+        'view': this.state.view,
+        'year': this.state.year
+    }) : null, this.state.house && this.state.dataset === 'power' ? React.createElement(Power, {
+        'house': this.state.house,
+        'view': this.state.view,
+        'year': this.state.year
+    }) : null);
+};

client/dashboard/layout/layout.scss

@@ -0,0 +1,9 @@
+#layout {
+  h1 {
+    color: red;
+  }
+}
+// needless comment
+#yada {
+  div { padding: 200px; }
+}

client/dashboard/power/power.js

@@ -0,0 +1,199 @@
+import React from 'react';
+import moment from 'moment-timezone';
+import _ from 'lodash';
+
+import powerRt from './power.rt.js';
+import House from './../../models/house';
+import SplineStackChart from './../../d3/line/spline_stack';
+import DateRangeSlider from './../../d3/sliders/date_range';
+
+var Power = React.createClass({
+
+  getInitialState: function(){
+    var power = this;
+    return {
+      loading_data: true
+    };
+  },
+
+  handleResize: function(e) {
+    this.setState({windowWidth: window.innerWidth});
+  },
+
+  componentDidMount: function() {
+    // window.addEventListener('resize', this.handleResize);
+    var power = this,
+      house = power.props.house;
+    power.graph_title = '';
+    power.initDateRange();
+    house.setPowerData().then(()=>{
+      power.setState({loading_data: false});
+      if (power.props.view === 'graph'){
+        power.initGraph();
+      }
+    });
+  },
+
+  componentWillUnmount: function(){
+    var power = this;
+    power.destroyGraph();
+  },
+
+  componentWillReceiveProps: function(new_props){
+    var power = this;
+    if (new_props.house !== power.props.house){
+      // house will change.
+      power.setState({loading_data: true});
+      new_props.house.setPowerData().then(()=>{
+        power.setState({loading_data: false});
+        if (power.props.view === 'graph'){
+          power.initGraph();
+        }
+      });
+    }
+    // view will change from graph to table.
+    if (new_props.view !== 'graph' && power.props.view === 'graph') power.destroyGraph();
+  },
+
+  componentDidUpdate: function(prev_props, _prev_state){
+    var power = this,
+      house = power.props.house;
+    // view has changed from graph to table.
+    if (prev_props.view !== 'graph' && power.props.view === 'graph'){
+      power.initGraph();
+    }
+    if (prev_props.house !== house) power.initDateRange();
+    var need_update = false;
+    if (prev_props.year !== power.props.year){
+      power.updateCurrentMonth();
+    }
+  },
+
+  initGraph: function(){
+    var power = this,
+      house = power.props.house;
+    if (power.graph === undefined){
+      power.graph = new SplineStackChart({
+        container: '#power_graph',
+        outer_width: 800,
+        outer_height: 200,
+        color: '#0404B4',
+        time_series: true,
+        domain_attr: 'x',
+        range_attr: 'y',
+        include_dots: true,
+        titleizeDatum: (series, d)=>{
+          return series.title + '<br/>' + Math.round(d.y) + ' W<br/>' + house.formatDate(d.power_datum.data.time, 'MMM D [at] HH:mm');
+        }
+      });
+      jQuery('#power_graph').tooltip({
+        selector: 'circle',
+        container: 'body',
+        html: true,
+        title: function(){
+          return this.__data__.title;
+        }
+      });
+    }
+    power.updateGraph();
+  },
+
+  updateGraph: function(){
+    var power = this,
+      house = power.props.house,
+      net_power = {
+        title: 'Net Power Consumption',
+        values: house.power_data.map((power_datum)=>{
+          return {
+            power_datum: power_datum,
+            x: power_datum.time_to_date,
+            y: Math.max(0, power_datum.data.consumption - power_datum.data.production) }
+        })
+      },
+      savings = {
+        title: 'Power Production',
+        values: house.power_data.map((power_datum)=>{
+          return {
+            power_datum: power_datum,
+            x: power_datum.time_to_date,
+            y: power_datum.data.production }
+        })
+      };
+    power.graph.drawData({
+      title: power.graph_title,
+      css_class: '',
+      series: [net_power, savings]
+    });
+  },
+
+  initDateRange: function(){
+    var power = this,
+      house = power.props.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(()=>{
+        house.power_date_range = [Math.round(min.getTime() / 1000), Math.round(max.getTime() / 1000)]
+        house.setPowerData()
+          .then(()=>{
+            if (power.props.view === 'graph') power.updateGraph();
+            else power.forceUpdate();
+          });
+      }, 500);
+    };
+    power.date_range_slider.drawData({
+      abs_min: house.current_month_moment.toDate(),
+      abs_max: house.end_of_current_data_moment.toDate(),
+      current_min: house.toDate(house.power_date_range[0]),
+      current_max: house.toDate(house.power_date_range[1])
+    });
+  },
+
+  destroyGraph: function(){
+    var power = this;
+    document.getElementById('power_graph').innerHTML = '';
+    power.graph = undefined;
+  },
+
+  setMonth: function(event){
+    var power = this,
+      house = power.props.house,
+      month = event.target.dataset.value;
+    if (month !== house.current_month){
+      var need_update = house.setMonth(month);
+      if (need_update) power.updateCurrentMonth();
+    }
+  },
+
+  updateCurrentMonth: function(){
+    var power = this,
+      house = power.props.house;
+    power.initDateRange();
+    house.setPowerData()
+      .then(()=>{
+        power.forceUpdate();
+        if (power.props.view === 'graph') power.updateGraph();
+      });
+  },
+
+  render: function() {
+    return powerRt.call(this);
+  }
+});
+
+export default Power;

client/dashboard/power/power.rt

@@ -0,0 +1,35 @@
+<div id="power_view">
+  <div class="btn-group">
+    <button
+      rt-if="this.props.house"
+      rt-repeat="month in this.props.house.availableMonths()"
+      data-value="{month}"
+      key="data-month-{month}"
+      class="btn-warning btn btn-sm"
+      rt-class="{active: month === this.props.house.current_month}"
+      onClick="{this.setMonth}">{month}</button>
+  </div>
+  <div class="alert alert-warning" rt-if="this.state.loading_data">
+    Retrieving power data for the {this.props.house.name} household...
+  </div>
+  <div id="power_date_setter"></div>
+  <table rt-if="this.props.view === 'table'" class="table">
+    <thead>
+      <tr>
+        <th></th>
+        <th>Time</th>
+        <th>Consumption (W)</th>
+        <th>Production (W)</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr rt-repeat="power_datum in this.props.house.power_data" key="{power_datum.scoped_id}">
+        <td>{power_datum.data.id}</td>
+        <td>{power_datum.time_to_s}</td>
+        <td>{power_datum.consumption_to_s}</td>
+        <td>{power_datum.production_to_s}</td>
+      </tr>
+    </tbody>
+  </table>
+  <div rt-if="this.props.view === 'graph'" id="power_graph"></div>
+</div>

client/dashboard/power/power.rt.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import _ from 'lodash';
+function repeatMonth1(month, monthIndex) {
+    return React.createElement('button', {
+        'data-value': month,
+        'key': 'data-month-' + month,
+        'className': 'btn-warning btn btn-sm' + ' ' + _.keys(_.pick({ active: month === this.props.house.current_month }, _.identity)).join(' '),
+        'onClick': this.setMonth
+    }, month);
+}
+function repeatPower_datum2(power_datum, power_datumIndex) {
+    return React.createElement('tr', { 'key': power_datum.scoped_id }, React.createElement('td', {}, power_datum.data.id), React.createElement('td', {}, power_datum.time_to_s), React.createElement('td', {}, power_datum.consumption_to_s), React.createElement('td', {}, power_datum.production_to_s));
+}
+export default function () {
+    return React.createElement('div', { 'id': 'power_view' }, React.createElement.apply(this, [
+        'div',
+        { 'className': 'btn-group' },
+        this.props.house ? _.map(this.props.house.availableMonths(), repeatMonth1.bind(this)) : null
+    ]), this.state.loading_data ? React.createElement('div', { 'className': 'alert alert-warning' }, '\n    Retrieving power data for the ', this.props.house.name, ' household...\n  ') : null, React.createElement('div', { 'id': 'power_date_setter' }), this.props.view === 'table' ? React.createElement('table', { 'className': 'table' }, React.createElement('thead', {}, React.createElement('tr', {}, React.createElement('th', {}), React.createElement('th', {}, 'Time'), React.createElement('th', {}, 'Consumption (W)'), React.createElement('th', {}, 'Production (W)'))), React.createElement.apply(this, [
+        'tbody',
+        {},
+        _.map(this.props.house.power_data, repeatPower_datum2.bind(this))
+    ])) : null, this.props.view === 'graph' ? React.createElement('div', { 'id': 'power_graph' }) : null);
+};