2016-11-23 18:40:35 +00:00
|
|
|
'use strict';
|
|
|
|
|
|
|
|
import { h, render, Component } from 'preact';
|
|
|
|
import Chart from 'chart.js'
|
|
|
|
|
2016-11-23 19:30:09 +00:00
|
|
|
Chart.defaults.global.tooltips.xPadding = 10;
|
|
|
|
Chart.defaults.global.tooltips.yPadding = 10;
|
|
|
|
|
2016-11-23 18:40:35 +00:00
|
|
|
class Graph extends Component {
|
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
super(props)
|
|
|
|
|
|
|
|
this.state = {
|
2016-11-23 19:30:09 +00:00
|
|
|
visitorData: [],
|
|
|
|
pageviewData: []
|
2016-11-23 18:40:35 +00:00
|
|
|
}
|
|
|
|
this.fetchData = this.fetchData.bind(this);
|
2016-11-23 20:29:54 +00:00
|
|
|
this.fetchData(props.period);
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillReceiveProps(newProps) {
|
|
|
|
if(this.props.period != newProps.period) {
|
|
|
|
this.fetchData(newProps.period)
|
|
|
|
}
|
2016-11-23 18:40:35 +00:00
|
|
|
}
|
|
|
|
|
2016-11-23 19:30:09 +00:00
|
|
|
refreshChart() {
|
2016-11-23 21:26:47 +00:00
|
|
|
if( ! this.canvas ) { return; }
|
|
|
|
if( this.chart ) { this.chart.clear(); }
|
|
|
|
|
|
|
|
// clear canvas
|
|
|
|
var newCanvas = document.createElement('canvas');
|
|
|
|
newCanvas.setAttribute('width', this.canvas.getAttribute('width'));
|
|
|
|
newCanvas.setAttribute('height', this.canvas.getAttribute('height'));
|
|
|
|
this.canvas.parentNode.replaceChild(newCanvas, this.canvas);
|
|
|
|
this.canvas = newCanvas;
|
|
|
|
|
|
|
|
this.chart = new Chart(this.canvas, {
|
|
|
|
type: 'bar',
|
2016-11-23 18:40:35 +00:00
|
|
|
data: {
|
2016-11-23 19:30:09 +00:00
|
|
|
labels: this.state.visitorData.map((d) => d.Label),
|
|
|
|
datasets: [
|
|
|
|
{
|
2016-11-23 18:40:35 +00:00
|
|
|
label: '# of Visitors',
|
2016-11-23 19:30:09 +00:00
|
|
|
data: this.state.visitorData.map((d) => d.Count),
|
2016-11-23 21:26:47 +00:00
|
|
|
backgroundColor: 'rgba(255, 155, 0, .5)'
|
2016-11-23 19:30:09 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
label: '# of Pageviews',
|
|
|
|
data: this.state.pageviewData.map((d) => d.Count),
|
2016-11-23 21:26:47 +00:00
|
|
|
backgroundColor: 'rgba(0, 155, 255, .5)'
|
2016-11-23 19:30:09 +00:00
|
|
|
}
|
|
|
|
]
|
2016-11-23 18:40:35 +00:00
|
|
|
},
|
|
|
|
options: {
|
2016-11-23 21:26:47 +00:00
|
|
|
scales: {
|
|
|
|
xAxes: [{
|
|
|
|
stacked: true
|
|
|
|
}],
|
|
|
|
yAxes: [{
|
|
|
|
stacked: true
|
|
|
|
}]
|
2016-11-23 18:40:35 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2016-11-23 20:29:54 +00:00
|
|
|
fetchData(period) {
|
2016-11-23 19:30:09 +00:00
|
|
|
// fetch visitor data
|
2016-11-23 20:29:54 +00:00
|
|
|
fetch('/api/visits/count/day?period=' + period, {
|
2016-11-23 19:30:09 +00:00
|
|
|
credentials: 'include'
|
|
|
|
}).then((r) => r.json())
|
|
|
|
.then((data) => {
|
2016-11-23 21:26:47 +00:00
|
|
|
this.setState({ visitorData: data })
|
|
|
|
window.setTimeout(() => (this.refreshChart()), 20);
|
2016-11-23 19:30:09 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
// fetch pageview data
|
2016-11-23 20:29:54 +00:00
|
|
|
fetch('/api/pageviews/count/day?period=' + period, {
|
2016-11-23 18:40:35 +00:00
|
|
|
credentials: 'include'
|
2016-11-23 19:30:09 +00:00
|
|
|
}).then((r) => r.json())
|
2016-11-23 18:40:35 +00:00
|
|
|
.then((data) => {
|
2016-11-23 21:26:47 +00:00
|
|
|
this.setState({ pageviewData: data })
|
|
|
|
window.setTimeout(() => (this.refreshChart()), 20);
|
2016-11-23 18:40:35 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<div class="block">
|
2016-11-23 21:26:47 +00:00
|
|
|
<canvas ref={(el) => { this.canvas = el; }} />
|
2016-11-23 18:40:35 +00:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Graph
|