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

render power data in table format

Browse Source
This commit is contained in:
Eric Hulburd
2016-02-10 16:11:56 -06:00
parent b14c266de3
commit 9996dfc54e
26 changed files with 424 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
client/api/energy_data.js
View File

@@ -1,18 +1,25 @@
const ENDPOINT = '/data/v1/energy';
import extend from 'extend';
const ENDPOINT = '/data/v1/energy';
// send all date parameters as unix timestamps;
class EnergyDataApi {
static index(params){
params = extend({
}, params);
if (params.dates){
params.dates = params.dates.map((date_range)=>{
if (date_range[0]) date_range[0] = date_range[0].unix();
if (date_range[1]) date_range[1] = date_range[1].unix();
return [date_range[0], date_range[1]];
})
}
return jQuery.ajax({
url: `${ENDPOINT}`,
url: ENDPOINT + '?' + jQuery.param(params),
type: 'GET',
params: params,
dataType: 'json'
}).success((res)=>{
}).then((res)=>{
return res.data;
});
}

18
client/api/houses.js
View File

@@ -0,0 +1,18 @@
const ENDPOINT = '/data/v1/houses';
import extend from 'extend';
class HousesApi {
static index(params){
return jQuery.ajax({
url: ENDPOINT + '?' + jQuery.param(params),
type: 'GET',
dataType: 'json'
}).then((res)=>{
return res.data;
});
}
}
export default HousesApi;

28
client/api/power_data.js
View File

@@ -1 +1,29 @@
const ENDPOINT = '/data/v1/power';
import extend from 'extend';
// send all date parameters as unix timestamps;
class PowerDataApi {
static index(params){
params = extend({
}, params);
if (params.dates){
params.dates = params.dates.map((date_range)=>{
if (date_range[0]) date_range[0] = date_range[0].unix();
if (date_range[1]) date_range[1] = date_range[1].unix();
return [date_range[0], date_range[1]];
})
}
return jQuery.ajax({
url: ENDPOINT + '?' + jQuery.param(params),
type: 'GET',
dataType: 'json'
}).then((res)=>{
return res.data;
});
}
}
export default PowerDataApi;

2
client/app.js
View File

@@ -1,9 +1,11 @@
import 'babel-polyfill';
import 'bootstrap/dist/js/bootstrap.min';
import React from 'react';
import ReactDOM from 'react-dom';
import Layout from './dashboard/layout/layout';
ReactDOM.render(
React.createElement(Layout),
document.getElementById('root')

1
client/config/api.js Normal file
View File

@@ -0,0 +1 @@
api.js

1
client/config/store.js Normal file
View File

@@ -0,0 +1 @@
store.js

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

@@ -1,11 +1,21 @@
import React from 'react';
import layoutRt from './layout.rt.js';
import House from './../../models/house';
const VIEWS = [['power', 'Power Savings'], ['energy', 'Energy Production']];
var Layout = React.createClass({
getInitialState: function(){
return {view: "????"};
var layout = this;
layout.view_name = VIEWS[0][1];
return {
views: VIEWS,
houses: null,
house: null,
view: 'power',
requesting_data: true
};
},
handleResize: function(e) {
@@ -13,13 +23,49 @@ var Layout = React.createClass({
},
componentDidMount: function() {
window.addEventListener('resize', this.handleResize);
var layout = this;
// window.addEventListener('resize', this.handleResize);
House.ensureHouses().then((houses)=>{
layout.setState({houses: houses, house: houses[0]});
layout.ensureHouseViewData();
});
},
setView: function(event) {
var layout = this;
console.log(event.target.value)
layout.setState({view: event.target.value});
setView: function(event){
var layout = this,
view = event.target.value;
layout.view_name = event.target.innerText;
layout.setState({view: view});
layout.ensureHouseViewData();
},
setHouse: function(event){
var layout = this,
house_id = event.target.value,
house = layout.state.houses.find((house)=>{ return house.data.id == house_id });
layout.setState({house: house}, function(){
layout.ensureHouseViewData();
});
},
ensureHouseViewData: function(){
var layout = this,
house = layout.state.house,
view = layout.state.view,
request;
layout.setState({requesting_data: true}, ()=>{
if (view === 'power'){
request = house.ensurePowerData();
} else {
request = house.ensureEnergyData();
}
request.then(()=>{
console.log('data retrieved')
layout.setState({requesting_data: false}, ()=>{
console.log(layout.state.requesting_data);
});
});
});
},
render: function() {

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

@@ -1,8 +1,54 @@
<div id="layout">
<h1>{this.state.view}</h1>
<select onChange="{this.setView}">
<option value="savings">Savings</option>
<option value="production">Production</option>
</select>
<div class="alert alert-warning" rt-if="this.state.requesting_data">Loading data...</div>
<h1 rt-if="this.state.house">{this.state.house.name}</h1>
<h3 rt-if="this.state.view">{this.view_name}</h3>
<div>
<select class="form-control" onChange="{this.setView}">
<option rt-repeat="view in this.state.views" value="{view[0]}" key="view-{view[0]}">{view[1]}</option>
</select>
</div>
<div rt-if="this.state.houses">
<select 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>
</select>
</div>
<table class="table" rt-if="this.state.view === 'energy' && this.state.house">
<thead>
<tr>
<th></th>
<th>Day</th>
<th>Consumption (Wh)</th>
<th>Production (Wh)</th>
</tr>
</thead>
<tbody>
<tr rt-repeat="energy_datum in this.state.house.energy_data" key="{energy_datum.react_key}">
<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>
<table class="table" rt-if="this.state.view === 'power' && this.state.house">
<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.state.house.power_data" key="{power_datum.react_key}">
<td></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>

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

@@ -1,5 +1,45 @@
import React from 'react';
import _ from 'lodash';
function repeatView1(view, viewIndex) {
return React.createElement('option', {
'value': view[0],
'key': 'view-' + view[0]
}, view[1]);
}
function repeatHouse2(house, houseIndex) {
return React.createElement('option', {
'value': house.data.id,
'key': house.react_key
}, house.data.name);
}
function repeatEnergy_datum3(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));
}
function repeatPower_datum4(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));
}
export default function () {
return React.createElement('div', { 'id': 'layout' }, React.createElement('h1', {}, this.state.view), React.createElement('select', { 'onChange': this.setView }, React.createElement('option', { 'value': 'savings' }, 'Savings'), React.createElement('option', { 'value': 'production' }, 'Production')));
return React.createElement('div', { 'id': 'layout' }, this.state.requesting_data ? React.createElement('div', { 'className': 'alert alert-warning' }, 'Loading data...') : null, this.state.house ? React.createElement('h1', {}, this.state.house.name) : null, this.state.view ? React.createElement('h3', {}, this.view_name) : null, React.createElement('div', {}, React.createElement.apply(this, [
'select',
{
'className': 'form-control',
'onChange': this.setView
},
_.map(this.state.views, repeatView1.bind(this))
])), this.state.houses ? React.createElement('div', {}, React.createElement.apply(this, [
'select',
{
'className': 'form-control',
'onChange': this.setHouse
},
_.map(this.state.houses, repeatHouse2.bind(this))
])) : null, this.state.view === 'energy' && this.state.house ? React.createElement('table', { 'className': 'table' }, React.createElement('thead', {}, React.createElement('tr', {}, React.createElement('th', {}), React.createElement('th', {}, 'Day'), React.createElement('th', {}, 'Consumption (Wh)'), React.createElement('th', {}, 'Production (Wh)'))), React.createElement.apply(this, [
'tbody',
{},
_.map(this.state.house.energy_data, repeatEnergy_datum3.bind(this))
])) : null, this.state.view === 'power' && this.state.house ? 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.state.house.power_data, repeatPower_datum4.bind(this))
])) : null);
};

33
client/models/energy_datum.js
View File

@@ -1,13 +1,17 @@
import extend from 'extend';
import moment from 'moment-timezone';
class EnergyDatum {
__constructor(data, house){
constructor(data, house){
var energy_datum = this;
energy_datum.house = house;
data.day = moment.tz(data.day, house.data.timezone);
energy_datum.data = data;
moment.tz(data.day, house.data.timezone);
EnergyDatum.store[data.id] energy_datum;
EnergyDatum.store.set(data.id, energy_datum);
}
get react_key(){
return `energy-datum-${this.data.id}`;
}
get day_to_date(){
@@ -17,6 +21,21 @@ class EnergyDatum {
return moment(moment_tz.toArray()).toDate();
}
get day_to_s(){
var energy_datum = this;
return energy_datum.data.day.format('YYYY-MM-DD');
}
get consumption_to_s(){
var energy_datum = this;
return Math.round(energy_datum.data.consumption);
}
get production_to_s(){
var energy_datum = this;
return Math.round(energy_datum.data.production);
}
update(data){
var energy_datum = this,
house = power_datum.house;
@@ -24,11 +43,13 @@ class EnergyDatum {
extend(energy_datum.data, data);
}
static updateOrInitialize(id, data, house){
var energy_datum = EnergyDatum.store.get(id);
static updateOrInitialize(data, house){
var energy_datum = EnergyDatum.store.get(data.id);
if (energy_datum) energy_datum.update(data);
return energy_datum || new EnergyDatum(data, house)
}
}
EnergyDatum.store = new Map();
export default EnergyDatum;

95
client/models/house.js
View File

@@ -1,38 +1,56 @@
import Api from './../api';
import Store from './../store';
import ArrayUtil from './../../shared/util/array'
import extend from 'extend';
class House extends Base {
import PowerDatum from './power_datum';
import EnergyDatum from './energy_datum';
import PowerDataApi from './../api/power_data';
import EnergyDataApi from './../api/energy_data';
import HousesApi from './../api/houses';
import ArrayUtil from './../../shared/utils/array'
import MathUtil from './../../shared/utils/math'
__constructor(data, house){
var energy_datum = this;
class House {
constructor(data){
var house = this;
House.store.set(data.id, house);
house.data = data;
house.energy_data = new Map();
house.power_data = new Map();
house.energy_data = [];
house.power_data = [];
house.energy_data_store = new Map();
house.power_data_store = new Map();
}
ensurePowerData(start_date, end_date){
get react_key(){
return `house-${this.data.id}`;
}
ensurePowerData(opts){
opts = extend({
start_date: undefined,
end_date: undefined
}, opts || {});
var house = this,
date_range = Array.from(house.power_data.keys()),
date_range = Array.from(house.power_data_store.keys()),
min_date = Math.min(date_range),
max_date = Math.max(date_range),
query_ranges, cache;
if (date_range.length === 0) return house.getPowerData({dates: [[start_date, end_date]]})
if (date_range.length === 0){
return house.getPowerData({dates: [[opts.start_date, opts.end_date]]});
}
query_ranges = MathUtil.minusRange([start_date, end_date], [min_date, max_date]);
query_ranges = MathUtil.minusRange([opts.start_date, opts.end_date], [min_date, max_date]);
cache = ArrayUtil.selectMap(date_range, (datum_time)=>{
return ArrayUtil.all(query_ranges, (query_range)=>{
!MathUtil.inRange(datum_time, query_range);
}));
});
}, (datum_time)=>{
return house.power_data.get(datum_time);
return house.power_data_store.get(datum_time);
});
if (query_ranges.length > 0){
return house.getPowerData({dates: dates}).then((new_power_data)=>{
return house.getPowerData({dates: query_ranges}).then((new_power_data)=>{
return new_power_data.concat(cache);
});
} else return Promise.resolve(cache);
@@ -41,37 +59,42 @@ class House extends Base {
getPowerData(params){
var house = this;
params.house_id = house.data.id;
return Api.PowerData.index(params).then((power_data)=>{
return PowerDataApi.index(params).then((power_data)=>{
return power_data.map((power_datum_data)=>{
var power_datum = Store.PowerDatum.updateOrInitialize(power_datum_data, house);
house.power_data.set(power_datum.data.time, power_datum);
var power_datum = PowerDatum.updateOrInitialize(power_datum_data, house);
house.power_data_store.set(power_datum.data.time, power_datum);
house.power_data.push(power_datum);
return power_datum;
});
});
}
ensureEnergyData(start_date, end_date){
ensureEnergyData(opts){
opts = extend({
start_date: undefined,
end_date: undefined
}, opts || {});
var house = this,
date_range = Array.from(house.energy_data.keys()),
date_range = Array.from(house.energy_data_store.keys()),
min_date = Math.min(date_range),
max_date = Math.max(date_range),
query_ranges, cache;
if (date_range.length === 0) return house.getEnergyData({dates: [[start_date, end_date]]})
if (date_range.length === 0) return house.getEnergyData({dates: [[opts.start_date, opts.end_date]]})
query_ranges = MathUtil.minusRange([start_date, end_date], [min_date, max_date]);
cache = ArrayUtil.selectMap(date_range, (datum_day)=>{
return ArrayUtil.all(query_ranges, (query_range)=>{
!MathUtil.inRange(datum_day, query_range);
}));
return !MathUtil.inRange(datum_day, query_range);
});
}, (datum_day)=>{
return house.energy_data.get(datum_day);
return house.energy_data_store.get(datum_day);
});
if (query_ranges.length > 0){
return house.getEnergyData({dates: dates}).then((new_energy_data)=>{
return new_energy_data.concat(cache);
return house.getEnergyData({dates: query_ranges}).then((new_energy_data)=>{
return new_energy_data_store.concat(cache);
});
} else return Promise.resolve(cache);
}
@@ -79,10 +102,11 @@ class House extends Base {
getEnergyData(params){
var house = this;
params.house_id = house.data.id;
return Api.PowerData.index(params).then((energy_data)=>{
return power_data.map((energy_datum_data)=>{
var energy_datum = Store.EnergyDatum.updateOrInitialize(energy_datum_data, house);
house.energy_data.set(power_datum.time, energy_datum);
return EnergyDataApi.index(params).then((energy_data)=>{
return energy_data.map((energy_datum_data)=>{
var energy_datum = EnergyDatum.updateOrInitialize(energy_datum_data, house);
house.energy_data_store.set(power_datum.time, energy_datum);
house.energy_data.push(energy_datum);
return energy_datum;
});
});
@@ -100,18 +124,21 @@ class House extends Base {
}
static ensureHouses(ids){
var required_ids = ArrayUtil.diff(ids, House.store.keys()),
var required_ids, cached_houses = [];
if (ids){
required_ids = ArrayUtil.diff(ids, House.store.keys());
cached_houses = ArrayUtil.diff(ids, required_ids).map((id)=>{ return House.store.get(id); });
if (required_ids.length == 0) return Promise.resolve([]);
}
if (required_ids && required_ids.length == 0) return Promise.resolve([]);
return House.getHouses(required_ids).then((new_houses){
return House.getHouses(required_ids).then((new_houses)=>{
// if these need to be ordered, then concatenation needs to be merged in order.
return new_houses.concat(cached_houses);
});
}
static getHouses(ids){
return Api.HousesApi.index({id: ids}).then((houses_data)=>{
return HousesApi.index({id: ids}).then((houses_data)=>{
return houses_data.map((house_data)=>{
return new House(house_data);
});

31
client/models/power_datum.js
View File

@@ -1,13 +1,17 @@
import extend from 'extend';
import moment from 'moment-timezone';
class PowerDatum {
__constructor(data, house){
constructor(data, house){
var power_datum = this;
power_datum.house = house;
data.time = moment.tz(data.time, house.data.timezone);
power_datum.data = data;
moment.format(data.time);
PowerDatum.store[data.id] power_datum;
PowerDatum.store.set(data.id, power_datum);
}
get react_key(){
return `power-datum-${this.data.id}`;
}
get time_to_date(){
@@ -17,6 +21,19 @@ class PowerDatum {
return moment(moment_tz.toArray()).toDate();
}
get time_to_s(){
var power_datum = this;
return power_datum.data.time.format('YYYY-MM-DD HH:MM');
}
get consumption_to_s(){
var power_datum = this;
return Math.round(power_datum.data.consumption);
}
get production_to_s(){
var power_datum = this;
return Math.round(power_datum.data.production);
}
update(data){
var power_datum = this,
house = power_datum.house;
@@ -24,8 +41,8 @@ class PowerDatum {
extend(power_datum.data, data);
}
static updateOrInitialize(id, data, house){
var power_datum = PowerDatum.store.get(id);
static updateOrInitialize(data, house){
var power_datum = PowerDatum.store.get(data.id);
if (power_datum) power_datum.update(data);
return power_datum || new PowerDatum(data, house)
}
@@ -33,3 +50,5 @@ class PowerDatum {
}
PowerDatum.store = new Map();
export default PowerDatum;