77 lines
2.2 KiB
JavaScript
77 lines
2.2 KiB
JavaScript
|
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;
|