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

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;
},