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

fix problems with rendering data

Browse Source
This commit is contained in:
Eric Hulburd
2016-02-21 18:40:55 -06:00
parent a84df34b55
commit c1fddd944e
28 changed files with 456 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,7 +22,7 @@ var Energy = React.createClass({
var energy = this,
house = energy.props.house;
energy.graph_title = 'Daily Consumption';
house.ensureEnergyData().then(()=>{
house.setEnergyData().then(()=>{
energy.setState({loading_data: false});
if (energy.props.view === 'graph') energy.initGraph();
});
@@ -32,7 +32,7 @@ var Energy = React.createClass({
var energy = this;
if (new_props.house !== energy.state.house){
energy.setState({loading_data: true});
new_props.house.ensureEnergyData().then(()=>{
new_props.house.setEnergyData().then(()=>{
energy.setState({loading_data: false});
if (energy.props.view === 'graph') energy.initGraph();
});

2
client/dashboard/energy/energy.rt
View File

@@ -27,7 +27,7 @@
</tr>
</thead>
<tbody>
<tr rt-repeat="energy_datum in this.props.house.energy_data" key="{energy_datum.react_key}">
<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>

2
client/dashboard/energy/energy.rt.js
View File

@@ -1,7 +1,7 @@
import React from 'react';
import _ from 'lodash';
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));
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', {

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

@@ -1,6 +1,7 @@
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({
@@ -31,7 +32,9 @@ var Layout = React.createClass({
var layout = this,
house_id = event.target.value,
house = layout.state.houses.find((house)=>{ return house.data.id == house_id });
layout.setState({house: house});
layout.setState({house: house}, ()=>{
house.closeDb();
});
},
setView: function(event){
@@ -47,6 +50,19 @@ var Layout = React.createClass({
layout.setState({dataset: dataset});
},
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);
}

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

@@ -2,12 +2,12 @@
<rt-require dependency="./../power/power" as="Power"/>
<div id="layout">
<div class="alert alert-warning" rt-if="this.state.requesting_data">Retrieving houses...</div>
<h1 rt-if="this.state.house">{this.state.house.name}</h1>
<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.react_key}">{house.data.name}</option>
<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">

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

@@ -5,18 +5,21 @@ import Power from './../power/power';
function repeatHouse1(house, houseIndex) {
return React.createElement('option', {
'value': house.data.id,
'key': house.react_key
'key': house.scoped_id
}, house.data.name);
}
export default function () {
return React.createElement('div', { 'id': 'layout' }, this.state.requesting_data ? React.createElement('div', { 'className': 'alert alert-warning' }, 'Retrieving houses...') : null, this.state.house ? React.createElement('h1', {}, this.state.house.name) : null, React.createElement('h4', {}, 'Select household:'), this.state.houses ? React.createElement.apply(this, [
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, React.createElement('h4', {}, 'Select dataset:'), React.createElement('div', {
]) : 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', {

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

@@ -1,7 +1,11 @@
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({
@@ -21,45 +25,63 @@ var Power = React.createClass({
var power = this,
house = power.props.house;
power.graph_title = '';
house.ensurePowerData().then(()=>{
power.initDateRange();
house.setPowerData().then(()=>{
power.setState({loading_data: false});
if (power.props.view === 'graph') power.initGraph();
if (power.props.view === 'graph'){
power.initGraph();
}
});
},
componentWillReceiveProps: function(new_props){
var power = this;
if (new_props.house !== power.state.house){
// house will change.
power.setState({loading_data: true});
new_props.house.ensurePowerData().then(()=>{
new_props.house.setPowerData().then(()=>{
power.setState({loading_data: false});
if (power.props.view === 'graph') power.initGraph();
if (power.props.view === 'graph'){
power.initDateRange();
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;
if (prev_props.view !== 'graph' && power.props.view === 'graph') power.initGraph();
// view has changed from graph to table.
if (prev_props.view !== 'graph' && power.props.view === 'graph'){
power.initDateRange();
power.initGraph();
}
},
initGraph: function(){
var power = this;
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',
range_attr: 'y',
time_series: true,
domain_attr: 'x',
time_series: true
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')
}
});
jQuery('#power_graph').tooltip({
selector: 'path',
selector: 'circle',
container: 'body',
html: true,
title: function(){
return this.__data__.title;
}
@@ -73,11 +95,19 @@ var Power = React.createClass({
house = power.props.house,
net_power = {
title: 'Net Power Consumption',
values: house.power_data.slice(0, 200).map((power_datum)=>{ return {y: Math.max(0, power_datum.data.consumption - power_datum.data.production), x: power_datum.data.time.toDate() } })
values: house.power_data.map((power_datum)=>{
return {
x: house.toDate(power_datum.data.time),
y: Math.max(0, power_datum.data.consumption - power_datum.data.production) }
})
},
savings = {
title: 'Power Production',
values: house.power_data.slice(0, 200).map((power_datum)=>{ return {y: power_datum.data.production, x: power_datum.data.time.toDate() } })
values: house.power_data.map((power_datum)=>{
return {
x: house.toDate(power_datum.data.time),
y: power_datum.data.production }
})
};
power.graph.drawData({
title: power.graph_title,
@@ -86,9 +116,50 @@ var Power = React.createClass({
});
},
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 * 7 * 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(()=>{
power.updateGraph();
});
}, 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)
});
},
destroyGraph: function(){
var power = this;
document.getElementById('power_date_setter').innerHTML = '';
document.getElementById('power_graph').innerHTML = '';
power.date_range_slider = undefined;
power.graph = undefined;
},

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

@@ -1,8 +1,9 @@
<div id="power_view">
<h2>Household 15-minute Power Statistics</h2>
<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>
<tr>
@@ -13,7 +14,7 @@
</tr>
</thead>
<tbody>
<tr rt-repeat="power_datum in this.props.house.power_data" key="{power_datum.react_key}">
<tr rt-repeat="power_datum in this.props.house.power_data" key="{power_datum.scoped_id}">
<td></td>
<td>{power_datum.time_to_s}</td>
<td>{power_datum.consumption_to_s}</td>

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

@@ -1,10 +1,10 @@
import React from 'react';
import _ from 'lodash';
function repeatPower_datum1(power_datum, power_datumIndex) {
return React.createElement('tr', { 'key': power_datum.react_key }, 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));
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));
}
export default function () {
return React.createElement('div', { 'id': 'power_view' }, React.createElement('h2', {}, 'Household 15-minute Power Statistics'), this.state.loading_data ? React.createElement('div', { 'className': 'alert alert-warning' }, '\n Retrieving power data for the ', this.props.house.name, ' household...\n ') : null, 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' }, 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, [
'tbody',
{},
_.map(this.props.house.power_data, repeatPower_datum1.bind(this))