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

create irradiance composite graph

Browse Source
This commit is contained in:
Eric Hulburd
2016-03-11 17:38:03 -06:00
parent 2dd9389694
commit 782f5cbf91
32 changed files with 824 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
client/dashboard/layout/layout.component.js
View File

@@ -6,6 +6,7 @@ import Templates from 'config/templates';
import House from './../../models/house';
import PowerDatum from './../../models/power_datum';
import StateManager from './../state_manager';
import DateRangeSlider from './../../d3/sliders/date_range';
class LayoutComponent extends React.Component {
@@ -18,6 +19,8 @@ class LayoutComponent extends React.Component {
house: null,
dataset: null,
year: null,
month: null,
date_interval: null,
view: null
}
}
@@ -50,9 +53,35 @@ class LayoutComponent extends React.Component {
});
}
componentDidUpdate(prev_props, prev_state){
var layout = this;
if (layout.shouldShowDateRange() && !layout.datesMatch(prev_state)){
layout.updateDateRange();
} else if (!layout.shouldShowDateRange()){
layout.destroyDateRange();
}
}
datesMatch(prev_state){
var layout = this;
return layout.state.month == prev_state.month &&
layout.state.year == prev_state.year &&
!layout.shouldShowDateRange() ||
layout.state.date_interval && prev_state.date_interval &&
layout.state.date_interval[0] == prev_state.date_interval[0] &&
layout.state.date_interval[1] == prev_state.date_interval[1];
}
shouldShowDateRange(){
var layout = this;
return layout.state.house && layout.state.dataset === 'power' || layout.state.dataset === 'irradiance';
}
syncFromStateManager(fnStateSet){
var layout = this;
layout.setState(layout.state_manager.state, fnStateSet);
layout.setState(layout.state_manager.state, ()=>{
fnStateSet()
});
}
setHouse(event){
@@ -72,6 +101,50 @@ class LayoutComponent extends React.Component {
layout.state_manager.setParams(update, layout);
}
destroyDateRange(){
var layout = this,
container = document.getElementById('date_interval');
if (container) container.innerHTML = '';
layout.date_interval_slider = undefined;
}
updateDateRange(){
var layout = this,
house = layout.house,
state_manager = layout.state_manager;
if (layout.date_interval_slider === undefined){
layout.date_interval_slider = new DateRangeSlider({
container: '#date_interval',
outer_height: 100,
maxDelta: function(changed_date, other_date){
if (Math.abs(changed_date.getTime() - other_date.getTime()) > House.MAX_POWER_RANGE * 1000){
if (changed_date > other_date){
return new Date(changed_date.getTime() - House.MAX_POWER_RANGE * 1000);
} else {
return new Date(changed_date.getTime() + House.MAX_POWER_RANGE * 1000);
}
}
return false;
}
});
}
layout.date_interval_slider.onRangeUpdated = (min, max)=>{
if (layout.date_interval_update) clearTimeout(layout.date_interval_update);
// This will update the URL -> state_manager.state -> component states.
layout.date_interval_update = setTimeout(()=>{
var date_interval = [Math.round(min.getTime() / 1000), Math.round(max.getTime() / 1000)];
layout.state_manager.setParams({date_interval: date_interval}, layout);
}, 500);
};
var month_range = state_manager.month_range;
layout.date_interval_slider.drawData({
abs_min: house.toDate(month_range[0]),
abs_max: house.toDate(month_range[1]),
current_min: house.toDate(state_manager.state.date_interval[0]),
current_max: house.toDate(state_manager.state.date_interval[1])
});
}
refreshData(){
var layout = this,
houses = layout.state.houses,

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

@@ -1,4 +1,5 @@
<rt-require dependency="./../energy/energy.component" as="Energy"/>
<rt-require dependency="./../irradiance/irradiance.component" as="Irradiance"/>
<rt-require dependency="./../power/power.component" as="Power"/>
<div id="layout">
<div rt-if="!this.house" id="about">
@@ -9,7 +10,7 @@
<ul>
<li>React</li>
<li>React Templates</li>
<li>React Router</li>
<li>ReactJs History</li>
<li>LokiJs - persisting API calls to indexedDb</li>
<li>Webpack - hot mode developing and app bundling</li>
<li>Babel - ES6 transpiler</li>
@@ -22,15 +23,23 @@
<div class="alert alert-warning" rt-if="this.state.loading_houses">Retrieving houses...</div>
<h4>Select household:</h4>
<select id="houses_select" rt-if="this.state.houses && this.state_manager" class="form-control" onChange="{this.setHouse.bind(this)}" value="{this.house_id}">
<option rt-repeat="house in this.state.houses" value="{house.data.id}" key="{house.scoped_id}">{house.data.name}</option>
</select>
<div rt-if="this.dataset !== 'irradiance'">
<h4>Select household:</h4>
<select id="houses_select" rt-if="this.state.houses && this.state_manager" class="form-control" onChange="{this.setHouse.bind(this)}" value="{this.house_id}">
<option rt-repeat="house in this.state.houses" value="{house.data.id}" key="{house.scoped_id}">{house.data.name}</option>
</select>
</div>
<button rt-if="this.house" onClick="{this.refreshData.bind(this)}" class="btn btn-xs btn-default">Refresh House Data</button>
<div rt-if="this.house">
<div>
<h4>Select dataset:</h4>
<div class="btn-group" role="group">
<button
data-param="dataset"
data-value="power"
rt-class="{active: this.state.dataset === 'power'}"
onClick="{this.setParam.bind(this)}"
type="button" class="btn btn-primary">15-minute Power Statistics</button>
<button
data-param="dataset"
data-value="energy"
@@ -39,10 +48,10 @@
type="button" class="btn btn-primary">Daily Energy Statistics</button>
<button
data-param="dataset"
data-value="power"
rt-class="{active: this.state.dataset === 'power'}"
data-value="irradiance"
rt-class="{active: this.state.dataset === 'irradiance'}"
onClick="{this.setParam.bind(this)}"
type="button" class="btn btn-primary">15-minute Power Statistics</button>
type="button" class="btn btn-primary">Daily Mean Irradiance</button>
</div>
<h4>View as:</h4>
@@ -72,26 +81,44 @@
class="btn-info btn btn-sm"
rt-class="{active: year == this.state.year}"
onClick="{this.setParam.bind(this)}">{year}</button>
</div><br/>
<div class="btn-group" rt-if="this.state.dataset === 'power' || this.state.dataset === 'irradiance'">
<button
rt-repeat="month in this.house.availableMonths(this.state.year)"
data-param="month"
data-value="{month}"
key="data-month-{month}"
class="btn-warning btn btn-sm"
rt-class="{active: month === this.state.month}"
onClick="{this.setParam.bind(this)}">{month}</button>
</div><br/>
<div id="date_interval"></div>
<div class="alert alert-warning" rt-if="this.state.loading_data">
Retrieving {this.state.loading_data} data...
</div>
</div><br/>
<Energy
rt-if="this.should_show_energy_data"
house="{this.state.house}"
loading_energy_data="{this.state.loading_energy_data}"
state_manager="{this.state_manager}"
view="{this.state.view}"
graph_attr="{this.state.graph_attr}"
year="{this.state.year}" />
<Irradiance
rt-if="this.state.dataset === 'irradiance'"
view="{this.state.view}"
date_interval="{this.state.date_interval}"
state_manager="{this.state_manager}" />
<Power
rt-if="this.should_show_power_data"
house="{this.state.house}"
loading_power_data="{this.state.loading_power_data}"
state_manager="{this.state_manager}"
view="{this.state.view}"
month="{this.state.month}"
year="{this.state.year}"
power_range="{this.state.power_range}" />
date_interval="{this.state.date_interval}" />
</div>
</div>