112 lines
3.1 KiB
JavaScript
112 lines
3.1 KiB
JavaScript
import React from 'react';
|
|
import energyRt from './energy.rt.js';
|
|
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.ensureEnergyData().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.state.house){
|
|
energy.setState({loading_data: true});
|
|
new_props.house.ensureEnergyData().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();
|
|
},
|
|
|
|
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: 200,
|
|
date_attr: 'day',
|
|
color: '#0404B4',
|
|
toDate: (energy_datum)=>{ return energy_datum.data.day.toDate(); }
|
|
});
|
|
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.data.day.toDate()),
|
|
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;
|
|
},
|
|
|
|
render: function() {
|
|
return energyRt.call(this);
|
|
}
|
|
});
|
|
|
|
export default Energy;
|