75 lines
1.6 KiB
JavaScript
75 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
import Templates from 'config/templates';
|
|
import c3 from 'c3';
|
|
|
|
import House from './../../../models/house';
|
|
|
|
class GraphComponent extends React.Component {
|
|
|
|
get house(){
|
|
return this.state_manager.state.house;
|
|
}
|
|
|
|
get state_manager(){
|
|
return this.props.state_manager;
|
|
}
|
|
|
|
componentDidMount(){
|
|
var power_graph = this;
|
|
power_graph.updateGraph();
|
|
}
|
|
|
|
componentDidUpdate(prev_props, prev_state){
|
|
var power_graph = this;
|
|
if (prev_props.house != power_graph.props.house || prev_props.date_interval != power_graph.props.date_interval){
|
|
power_graph.updateGraph();
|
|
}
|
|
}
|
|
|
|
updateGraph(){
|
|
var power_graph = this,
|
|
house = power_graph.house,
|
|
data = {
|
|
x: 'x',
|
|
json: house.power_data,
|
|
keys: {
|
|
x: 'time_to_date',
|
|
value: ['net_consumption', 'production']
|
|
},
|
|
type: 'area-spline',
|
|
groups: [['net_consumption', 'production']],
|
|
names: {
|
|
net_consumption: 'Net Consumption',
|
|
production: 'Production'
|
|
}
|
|
};
|
|
if (power_graph.graph === undefined){
|
|
power_graph.chart = c3.generate({
|
|
bindto: '#power_graph',
|
|
data: data,
|
|
axis: {
|
|
x: {
|
|
type: 'timeseries',
|
|
tick: { format: d3.time.format('%d %B %y') }
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
power_graph.chart.load({
|
|
unload: true,
|
|
data: data
|
|
});
|
|
}
|
|
}
|
|
|
|
render() {
|
|
var powerGraphRt = Templates.forComponent('power_graph');
|
|
return powerGraphRt.call(this);
|
|
}
|
|
|
|
}
|
|
|
|
GraphComponent.NAME = 'PowerGraph';
|
|
|
|
module.exports = GraphComponent;
|