mirror of https://github.com/status-im/fathom.git
131 lines
3.3 KiB
JavaScript
131 lines
3.3 KiB
JavaScript
'use strict';
|
|
|
|
import { h, render, Component } from 'preact';
|
|
import * as d3 from 'd3';
|
|
import tip from 'd3-tip';
|
|
|
|
d3.tip = tip;
|
|
|
|
const dayInSeconds = 60 * 60 * 24;
|
|
|
|
class Graph extends Component {
|
|
constructor(props) {
|
|
super(props)
|
|
|
|
this.state = {
|
|
visitorData: [],
|
|
pageviewData: []
|
|
}
|
|
|
|
this.fetchData = this.fetchData.bind(this);
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.fetchData(this.props.period);
|
|
}
|
|
|
|
componentWillReceiveProps(newProps) {
|
|
if(this.props.period != newProps.period) {
|
|
this.fetchData(newProps.period)
|
|
}
|
|
}
|
|
|
|
refreshChart() {
|
|
var padt = 20, padb = 40, padr = 40, padl = 40,
|
|
h = 300,
|
|
w = document.getElementById('graph').parentNode.clientWidth - padl - padr,
|
|
x = d3.scaleBand().range([0, w]).padding(0.2),
|
|
y = d3.scaleLinear().range([h, 0]),
|
|
yAxis = d3.axisLeft().scale(y).tickSize(-w + padl + padr),
|
|
xAxis = d3.axisBottom().scale(x),
|
|
xTick = Math.round(this.state.visitorData.length / 7);
|
|
|
|
var tip = d3.tip()
|
|
.attr('class', 'd3-tip')
|
|
.html(function(d) { return '<span>' + d.Count + '</span>' + ' visitors' })
|
|
.offset([-12, 0]);
|
|
|
|
var vis = d3.select('#graph')
|
|
.append('svg')
|
|
.attr('width', w)
|
|
.attr('height', h + padt + padb)
|
|
.append('g')
|
|
.attr('transform', 'translate(' + padl + ',' + padt + ')');
|
|
|
|
vis.call(tip);
|
|
|
|
var max = d3.max(this.state.visitorData, function(d) { return d.Count });
|
|
x.domain(this.state.visitorData.map((d) => d.Label))
|
|
y.domain([0, max])
|
|
|
|
// axes
|
|
vis.append("g")
|
|
.attr("class", "y axis")
|
|
.call(yAxis);
|
|
|
|
vis.append("g")
|
|
.attr("class", "x axis")
|
|
.attr('transform', 'translate(0,' + h + ')')
|
|
.call(xAxis)
|
|
.selectAll('g')
|
|
.style('display', (d, i) => i % xTick != 0 ? 'none' : 'block')
|
|
|
|
// bars
|
|
var data = this.state.visitorData;
|
|
var bars = vis.selectAll('g.bar')
|
|
.data(data)
|
|
.enter().append('g')
|
|
.attr('class', 'bar')
|
|
.attr('transform', function (d, i) { return "translate(" + x(d.Label) + ", 0)" });
|
|
|
|
bars.append('rect')
|
|
.attr('width', () => x.bandwidth() )
|
|
.attr('height', (d) => (h - y(d.Count)) )
|
|
.attr('y', (d) => y(d.Count))
|
|
.on('mouseover', tip.show)
|
|
.on('mouseout', tip.hide)
|
|
}
|
|
|
|
fetchData(period) {
|
|
const before = Math.round((+new Date() ) / 1000);
|
|
const after = before - ( period * dayInSeconds );
|
|
|
|
// fetch visitor data
|
|
fetch(`/api/visits/count/day?before=${before}&after=${after}`, {
|
|
credentials: 'include'
|
|
}).then((r) => {
|
|
if( r.ok ) {
|
|
return r.json();
|
|
}
|
|
throw new Error();
|
|
}).then((data) => {
|
|
this.setState({ visitorData: data })
|
|
window.requestAnimationFrame(this.refreshChart.bind(this));
|
|
});
|
|
|
|
// // fetch pageview data
|
|
// fetch(`/api/pageviews/count/day?before=${before}&after=${after}`, {
|
|
// credentials: 'include'
|
|
// }).then((r) => {
|
|
// if( r.ok ) {
|
|
// return r.json();
|
|
// }
|
|
//
|
|
// throw new Error();
|
|
// }).then((data) => {
|
|
// this.setState({ pageviewData: data })
|
|
// window.requestAnimationFrame(this.refreshChart.bind(this));
|
|
// });
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div class="block">
|
|
<div id="graph"></div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default Graph
|