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

dynamic react router

Browse Source
This commit is contained in:
Eric Hulburd
2016-02-29 18:20:00 -06:00
parent 51eaa19a92
commit c890132f2b
44 changed files with 1163 additions and 733 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
client/dashboard/energy/energy.component.js Normal file
View File

@@ -0,0 +1,77 @@
import React from 'react';
import Templates from 'config/templates';
import House from './../../models/house';
import {RouteHelper} from './../routes';
class EnergyComponent extends React.Component {
constructor(props){
super(props);
var energy = this;
energy.state = {
loading_energy_data: true
};
}
componentDidMount(){
var energy = this,
house = energy.context.house;
if (!house || energy.context.loading_energy_data) return false;
house.setEnergyData()
.then(()=>{
energy.setState({loading_energy_data: false});
});
}
componentDidUpdate(prev_props, prev_state, prev_context){
var energy = this,
house = energy.context.house;
if (!house) return false;
if (!prev_context.house ||
prev_context.house.data.id != energy.context.house.data.id ||
!house.matchesYearState(prev_props.params)) {
energy.setState({loading_energy_data: true});
house.setEnergyData()
.then(()=>{
energy.setState({loading_energy_data: false}); // will update graph or table.
});
}
}
setParam(event){
var energy = this,
param = event.target.dataset.param,
value = event.target.dataset.value,
update = {}, route_helper;
override[param] = value;
route_helper = new RouteHelper(energy.context.house, energy.props);
if (route_helper.routeUpdated()){
route_helper.updateHouseState();
energy.context.router.push(makeRoute(house, energy.props, override));
}
}
getChildContext(){
var layout = this;
return {
loading_energy_data: layout.state.loading_energy_data
};
}
render() {
var energyRt = Templates.forComponent('energy');
return energyRt.call(this);
}
}
EnergyComponent.childContextTypes = {
loading_energy_data: React.PropTypes.bool.isRequired
};
EnergyComponent.contextTypes = {
house: React.PropTypes.instanceOf(House),
router: React.PropTypes.object.isRequired
};
export default EnergyComponent;

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

@@ -1,130 +0,0 @@
import React from 'react';
import Templates from 'config/templates';
import House from './../../models/house';
import CalendarGridChart from './../../d3/grid/calendar_grid';
var Energy = React.createClass({
getInitialState: function(){
var energy = this;
return {
graph_attr: 'production',
loading_data: true
};
},
handleResize: function(e) {
this.setState({windowWidth: window.innerWidth});
},
componentDidMount: function() {
// window.addEventListener('resize', this.handleResize);
var energy = this,
house = energy.props.house;
energy.graph_title = 'Daily Consumption';
house.setEnergyData().then(()=>{
energy.setState({loading_data: false});
if (energy.props.view === 'graph') energy.initGraph();
});
},
componentWillReceiveProps: function(new_props){
var energy = this;
if (new_props.house !== energy.props.house){
energy.setState({loading_data: true});
new_props.house.setEnergyData().then(()=>{
energy.setState({loading_data: false});
if (energy.props.view === 'graph') energy.initGraph();
});
}
if (new_props.view !== 'graph' && energy.props.view === 'graph') energy.destroyGraph();
},
componentDidUpdate: function(prev_props, _prev_state){
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){
var energy = this,
graph_attr = event.target.dataset.value;
if (graph_attr !== energy.state.graph_attr){
energy.graph_title = 'Daily ' + event.target.innerText;
energy.setState({
graph_attr: graph_attr
}, function(){
if (energy.props.view === 'graph') energy.updateGraph();
})
}
},
initGraph: function(){
var energy = this;
if (energy.graph === undefined){
energy.graph = new CalendarGridChart({
container: '#energy_graph',
outer_width: 800,
outer_height: 300,
date_attr: 'day',
color: '#0404B4',
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.day_to_date),
range_value = `${Math.round(energy_datum.data[energy.state.graph_attr])} kWh`;
return `${date_s}: ${range_value}`;
}
});
}
energy.updateGraph();
},
updateGraph: function(){
var energy = this,
house = energy.props.house;
energy.graph.rangeValue = (datum)=>{ return datum.data[energy.state.graph_attr]; }
energy.graph.drawData({
title: energy.graph_title,
css_class: '',
min_range: 0,
max_range: 150,
values: house.energy_data
});
},
destroyGraph: function(){
var energy = this;
document.getElementById('energy_graph').innerHTML = '';
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() {
var energyRt = Templates.forComponent('energy');
return energyRt.call(this);
}
});
export default Energy;

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

@@ -1,39 +1,23 @@
<div id="energy_view">
<div class="alert alert-warning" rt-if="this.state.loading_data">
Retrieving energy data for the {this.props.house.name} household...
<div class="alert alert-warning" rt-if="this.state.loading_energy_data">
Retrieving energy data...
</div>
<div rt-if="this.props.view === 'graph'">
<h4>Select Data</h4>
<div class="btn-group" role="group">
<button
data-param="graph_attr"
data-value="consumption"
rt-class="{active: this.state.graph_attr === 'consumption'}"
onClick="{this.setGraphAttr}"
onClick="{this.setAttr}"
type="button" class="btn btn-primary">Consumption</button>
<button
data-param="graph_attr"
data-value="production"
rt-class="{active: this.state.graph_attr === 'production'}"
onClick="{this.setGraphAttr}"
type="button" class="btn btn-primary">Production</button>
</div>
</div>
<table class="table" rt-if="this.props.view === 'table'">
<thead>
<tr>
<th></th>
<th>Day</th>
<th>Consumption (kWh)</th>
<th>Production (kWh)</th>
</tr>
</thead>
<tbody>
<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>
<td>{energy_datum.production_to_s}</td>
</tr>
</tbody>
</table>
<div rt-if="this.props.view === 'graph'" id="energy_graph"></div>
{this.props.children}
</div>

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

@@ -1,25 +1,20 @@
import React from 'react';
import _ from 'lodash';
function repeatEnergy_datum1(energy_datum, energy_datumIndex) {
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', {
return React.createElement('div', { 'id': 'energy_view' }, this.state.loading_energy_data ? React.createElement('div', { 'className': 'alert alert-warning' }, '\n Retrieving energy data...\n ') : null, this.props.view === 'graph' ? React.createElement('div', {}, React.createElement('h4', {}, 'Select Data'), React.createElement('div', {
'className': 'btn-group',
'role': 'group'
}, React.createElement('button', {
'data-param': 'graph_attr',
'data-value': 'consumption',
'className': _.keys(_.pick({ active: this.state.graph_attr === 'consumption' }, _.identity)).join(' ') + ' ' + 'btn btn-primary',
'onClick': this.setGraphAttr,
'onClick': this.setAttr,
'type': 'button'
}, 'Consumption'), React.createElement('button', {
'data-param': 'graph_attr',
'data-value': 'production',
'className': _.keys(_.pick({ active: this.state.graph_attr === 'production' }, _.identity)).join(' ') + ' ' + 'btn btn-primary',
'onClick': this.setGraphAttr,
'type': 'button'
}, 'Production'))) : null, this.props.view === 'table' ? React.createElement('table', { 'className': 'table' }, React.createElement('thead', {}, React.createElement('tr', {}, React.createElement('th', {}), React.createElement('th', {}, 'Day'), React.createElement('th', {}, 'Consumption (kWh)'), React.createElement('th', {}, 'Production (kWh)'))), React.createElement.apply(this, [
'tbody',
{},
_.map(this.props.house.energy_data, repeatEnergy_datum1.bind(this))
])) : null, this.props.view === 'graph' ? React.createElement('div', { 'id': 'energy_graph' }) : null);
}, 'Production'))) : null, '\n ', this.props.children, '\n');
};

76
client/dashboard/energy/graph/graph.component.js Normal file
View File

@@ -0,0 +1,76 @@
import React from 'react';
import Templates from 'config/templates';
import CalendarGridChart from './../../../d3/grid/calendar_grid';
import House from './../../../models/house';
class GraphComponent extends React.Component {
componentDidMount(){
var energy_graph = this,
house = energy_graph.context.house;
if (!energy_graph.context.loading_energy_data) energy_graph.updateGraph();
}
componentDidUpdate(prev_props, prev_state, prev_context){
var energy_graph = this,
house = energy_graph.context.house;
if (energy_graph.context.loading_energy_data) {return false;}
if (!prev_context.house ||
prev_context.loading_energy_data ||
prev_context.house.id != energy_graph.context.house.id) {
energy_graph.updateGraph();
}
}
updateGraph(){
var energy_graph = this,
house = energy_graph.context.house,
graph_attr = energy_graph.props.params.graph_attr;
if (energy_graph.graph === undefined){
energy_graph.graph = new CalendarGridChart({
container: '#energy_graph',
outer_width: 800,
outer_height: 300,
date_attr: 'day',
color: '#0404B4',
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.day_to_date),
range_value = `${Math.round(energy_datum.data[graph_attr])} kWh`;
return `${date_s}: ${range_value}`;
}
});
}
energy_graph.graph.rangeValue = (datum)=>{ return datum.data[graph_attr]; }
energy_graph.graph.drawData({
title: energy_graph.graph_title,
css_class: '',
min_range: 0,
max_range: 150,
values: house.energy_data
});
}
render(){
var energyGraphRt = Templates.forComponent('energy_graph');
return energyGraphRt.call(this);
}
}
GraphComponent.contextTypes = {
house: React.PropTypes.instanceOf(House),
loading_energy_data: React.PropTypes.bool.isRequired,
router: React.PropTypes.object.isRequired
};
export default GraphComponent;

1
client/dashboard/energy/graph/graph.rt Normal file
View File

@@ -0,0 +1 @@
<div id="energy_graph"></div>

5
client/dashboard/energy/graph/graph.rt.js Normal file
View File

@@ -0,0 +1,5 @@
import React from 'react';
import _ from 'lodash';
export default function () {
return React.createElement('div', { 'id': 'energy_graph' });
};

20
client/dashboard/energy/table/table.component.js Normal file
View File

@@ -0,0 +1,20 @@
import React from 'react';
import Templates from 'config/templates';
import House from './../../../models/house';
class TableComponent extends React.Component {
render() {
var tableRt = Templates.forComponent('energy_table');
return tableRt.call(this);
}
}
TableComponent.contextTypes = {
house: React.PropTypes.instanceOf(House),
router: React.PropTypes.object.isRequired
};
export default TableComponent;

18
client/dashboard/energy/table/table.rt Normal file
View File

@@ -0,0 +1,18 @@
<table rt-if="this.context.house" class="table">
<thead>
<tr>
<th></th>
<th>Day</th>
<th>Consumption (kWh)</th>
<th>Production (kWh)</th>
</tr>
</thead>
<tbody>
<tr rt-repeat="energy_datum in this.context.house.energy_data" key="{energy_datum.scoped_id}">
<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>

12
client/dashboard/energy/table/table.rt.js Normal file
View File

@@ -0,0 +1,12 @@
import React from 'react';
import _ from 'lodash';
function repeatEnergy_datum1(energy_datum, energy_datumIndex) {
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 this.context.house ? React.createElement('table', { 'className': 'table' }, React.createElement('thead', {}, React.createElement('tr', {}, React.createElement('th', {}), React.createElement('th', {}, 'Day'), React.createElement('th', {}, 'Consumption (kWh)'), React.createElement('th', {}, 'Production (kWh)'))), React.createElement.apply(this, [
'tbody',
{},
_.map(this.context.house.energy_data, repeatEnergy_datum1.bind(this))
])) : null;
};