remove cached files
This commit is contained in:
Eric Hulburd
@@ -1,134 +0,0 @@
|
||||
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;
|
||||
@@ -1,39 +0,0 @@
|
||||
<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>
|
||||
@@ -1,25 +0,0 @@
|
||||
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);
|
||||
};
|
||||
@@ -1,88 +0,0 @@
|
||||
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;
|
||||
@@ -1,60 +0,0 @@
|
||||
<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>
|
||||
@@ -1,69 +0,0 @@
|
||||
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);
|
||||
};
|
||||
@@ -1,9 +0,0 @@
|
||||
#layout {
|
||||
h1 {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
// needless comment
|
||||
#yada {
|
||||
div { padding: 200px; }
|
||||
}
|
||||
@@ -1,199 +0,0 @@
|
||||
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;
|
||||
@@ -1,35 +0,0 @@
|
||||
<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>
|
||||
@@ -1,24 +0,0 @@
|
||||
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);
|
||||
};
|
||||
Reference in New Issue
Block a user