senaduka/old-spike
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

polish energy/power data view interactions

Browse Source
This commit is contained in:
Eric Hulburd
2016-02-22 13:45:43 -06:00
parent c1fddd944e
commit df3152443a
16 changed files with 338 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
client/dashboard/energy/energy.js
View File

@@ -28,9 +28,14 @@ var Energy = React.createClass({
});
},
componentWillUnmount: function(){
var energy = this;
energy.destroyGraph();
},
componentWillReceiveProps: function(new_props){
var energy = this;
if (new_props.house !== energy.state.house){
if (new_props.house !== energy.props.house){
energy.setState({loading_data: true});
new_props.house.setEnergyData().then(()=>{
energy.setState({loading_data: false});
@@ -44,6 +49,9 @@ var Energy = React.createClass({
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){
@@ -65,17 +73,17 @@ var Energy = React.createClass({
energy.graph = new CalendarGridChart({
container: '#energy_graph',
outer_width: 800,
outer_height: 200,
outer_height: 300,
date_attr: 'day',
color: '#0404B4',
toDate: (energy_datum)=>{ return energy_datum.data.day.toDate(); }
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.data.day.toDate()),
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}`;
}
@@ -103,6 +111,21 @@ var Energy = React.createClass({
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);
}

21
client/dashboard/layout/layout.js
View File

@@ -24,16 +24,23 @@ var Layout = React.createClass({
var layout = this;
// window.addEventListener('resize', this.handleResize);
House.ensureHouses().then((houses)=>{
layout.setState({houses: houses, house: houses[0], requesting_data: false});
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}, ()=>{
house.closeDb();
old_house.closeDb();
});
},
@@ -50,6 +57,16 @@ var Layout = React.createClass({
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,

22
client/dashboard/layout/layout.rt
View File

@@ -37,6 +37,24 @@
type="button" class="btn btn-primary">Table</button>
</div>
<Energy rt-if="this.state.house && this.state.dataset === 'energy'" house="{this.state.house}" view="{this.state.view}"></Energy>
<Power rt-if="this.state.house && this.state.dataset === 'power'" house="{this.state.house}" view="{this.state.view}"></Power>
<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>

20
client/dashboard/layout/layout.rt.js
View File

@@ -8,6 +8,14 @@ function repeatHouse1(house, houseIndex) {
'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',
@@ -45,11 +53,17 @@ export default function () {
'className': _.keys(_.pick({ active: this.state.view === 'table' }, _.identity)).join(' ') + ' ' + 'btn btn-primary',
'onClick': this.setView,
'type': 'button'
}, 'Table')), this.state.house && this.state.dataset === 'energy' ? React.createElement(Energy, {
}, '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
'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
'view': this.state.view,
'year': this.state.year
}) : null);
};

60
client/dashboard/power/power.js
View File

@@ -34,15 +34,19 @@ var Power = React.createClass({
});
},
componentWillUnmount: function(){
var power = this;
power.destroyGraph();
},
componentWillReceiveProps: function(new_props){
var power = this;
if (new_props.house !== power.state.house){
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.initDateRange();
power.initGraph();
}
});
@@ -56,9 +60,13 @@ var Power = React.createClass({
house = power.props.house;
// view has changed from graph to table.
if (prev_props.view !== 'graph' && power.props.view === 'graph'){
power.initDateRange();
power.initGraph();
}
if (prev_props.house !== house) power.initDateRange();
var need_update = false;
if (prev_props.year !== power.props.year){
power.updateCurrentMonth();
}
},
initGraph: function(){
@@ -75,7 +83,7 @@ var Power = React.createClass({
range_attr: 'y',
include_dots: true,
titleizeDatum: (series, d)=>{
return series.title + '<br/>' + Math.round(d.y) + ' W<br/>' + moment.tz(d.x.getTime(), house.timezone).format('MMM D [at] HH:mm')
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({
@@ -97,7 +105,8 @@ var Power = React.createClass({
title: 'Net Power Consumption',
values: house.power_data.map((power_datum)=>{
return {
x: house.toDate(power_datum.data.time),
power_datum: power_datum,
x: power_datum.time_to_date,
y: Math.max(0, power_datum.data.consumption - power_datum.data.production) }
})
},
@@ -105,7 +114,8 @@ var Power = React.createClass({
title: 'Power Production',
values: house.power_data.map((power_datum)=>{
return {
x: house.toDate(power_datum.data.time),
power_datum: power_datum,
x: power_datum.time_to_date,
y: power_datum.data.production }
})
};
@@ -124,7 +134,7 @@ var Power = React.createClass({
container: '#power_date_setter',
outer_height: 100,
maxDelta: function(changed_date, other_date){
if (Math.abs(changed_date.getTime() - other_date.getTime()) > 3600 * 24 * 7 * 1000){
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 {
@@ -141,28 +151,46 @@ var Power = React.createClass({
house.power_date_range = [Math.round(min.getTime() / 1000), Math.round(max.getTime() / 1000)]
house.setPowerData()
.then(()=>{
power.updateGraph();
if (power.props.view === 'graph') power.updateGraph();
else power.forceUpdate();
});
}, 500);
};
var four_week_start = house.data.data_until - 3600 * 24 * 28,
data_from = Math.max(four_week_start, house.data.data_from);
power.date_range_slider.drawData({
abs_min: house.toDate(four_week_start),
abs_max: house.toDate(house.data.data_until),
current_min: house.toDate(house.default_power_start),
current_max: house.toDate(house.default_power_end)
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_date_setter').innerHTML = '';
document.getElementById('power_graph').innerHTML = '';
power.date_range_slider = undefined;
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);
}

13
client/dashboard/power/power.rt
View File

@@ -1,8 +1,17 @@
<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>
<h4>Select dates:</h4>
<div id="power_date_setter"></div>
<table rt-if="this.props.view === 'table'" class="table">
<thead>
@@ -15,7 +24,7 @@
</thead>
<tbody>
<tr rt-repeat="power_datum in this.props.house.power_data" key="{power_datum.scoped_id}">
<td></td>
<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>

20
client/dashboard/power/power.rt.js
View File

@@ -1,12 +1,24 @@
import React from 'react';
import _ from 'lodash';
function repeatPower_datum1(power_datum, power_datumIndex) {
return React.createElement('tr', { 'key': power_datum.scoped_id }, React.createElement('td', {}), React.createElement('td', {}, power_datum.time_to_s), React.createElement('td', {}, power_datum.consumption_to_s), React.createElement('td', {}, power_datum.production_to_s));
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' }, 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('h4', {}, 'Select dates:'), 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, [
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_datum1.bind(this))
_.map(this.props.house.power_data, repeatPower_datum2.bind(this))
])) : null, this.props.view === 'graph' ? React.createElement('div', { 'id': 'power_graph' }) : null);
};