mirror of https://github.com/status-im/fathom.git
163 lines
4.3 KiB
JavaScript
163 lines
4.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);
|
|
this.refreshChart = this.refreshChart.bind(this);
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.fetchData(this.props.period);
|
|
}
|
|
|
|
componentWillReceiveProps(newProps) {
|
|
if(this.props.period != newProps.period) {
|
|
this.fetchData(newProps.period)
|
|
}
|
|
}
|
|
|
|
refreshChart() {
|
|
var padt = 10, padb = 20, padr = 40, padl = 40,
|
|
h = 300,
|
|
w = document.getElementById('graph').parentNode.clientWidth - padl-padr,
|
|
x = d3.scaleBand().range([0, w]).padding(0.2).round(true),
|
|
y = d3.scaleLinear().range([h, 0]),
|
|
yAxis = d3.axisLeft().scale(y).tickSize(-w + padl + padr),
|
|
xAxis = d3.axisBottom().scale(x),
|
|
visitorData = this.state.visitorData,
|
|
pageviewData = this.state.pageviewData,
|
|
xTick = Math.round(pageviewData.length / 7);
|
|
|
|
var pageviewTip = d3.tip()
|
|
.attr('class', 'd3-tip')
|
|
.html(function(d) { return '<span>' + d.Count + '</span>' + ' pageviews' })
|
|
.offset([-12, 0]);
|
|
|
|
var visitorTip = d3.tip()
|
|
.attr('class', 'd3-tip')
|
|
.html(function(d) { return '<span>' + d.Count + '</span>' + ' visitors' })
|
|
.offset([-12, 0]);
|
|
|
|
var graph = d3.select('#graph');
|
|
|
|
// remove previous graph
|
|
graph.selectAll('*').remove();
|
|
|
|
var vis = graph
|
|
.append('svg')
|
|
.attr('width', w + padl + padr)
|
|
.attr('height', h + padt + padb)
|
|
.append('g')
|
|
.attr('transform', 'translate(' + padl + ',' + padt + ')');
|
|
|
|
vis.call(pageviewTip);
|
|
vis.call(visitorTip);
|
|
|
|
var max = d3.max(pageviewData, function(d) { return d.Count });
|
|
x.domain(pageviewData.map((d) => d.Label))
|
|
y.domain([0, (max * 1.1)])
|
|
|
|
var barWidth = x.bandwidth();
|
|
|
|
// axes
|
|
vis.selectAll('g.axis').remove();
|
|
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
|
|
vis.selectAll('g.primary-bar').remove();
|
|
var bars = vis.selectAll('g.primary-bar')
|
|
.data(pageviewData)
|
|
.enter().append('g')
|
|
.attr('class', 'primary-bar')
|
|
.attr('transform', function (d, i) { return "translate(" + x(d.Label) + ", 0)" });
|
|
|
|
bars.append('rect')
|
|
.attr('width', barWidth)
|
|
.attr('height', (d) => (h - y(d.Count)) )
|
|
.attr('y', (d) => y(d.Count))
|
|
.on('mouseover', pageviewTip.show)
|
|
.on('mouseout', pageviewTip.hide);
|
|
|
|
vis.selectAll('g.sub-bar').remove();
|
|
var visitorBars = vis.selectAll('g.sub-bar')
|
|
.data(visitorData)
|
|
.enter().append('g')
|
|
.attr('class', 'sub-bar')
|
|
.attr('transform', (d, i) => "translate(" + ( x(d.Label) + ( barWidth / 4 ) ) + ", 0)");
|
|
|
|
visitorBars.append('rect')
|
|
.attr('width', barWidth / 2 )
|
|
.attr('height', (d) => (h - y(d.Count)) )
|
|
.attr('y', (d) => y(d.Count))
|
|
.on('mouseover', visitorTip.show)
|
|
.on('mouseout', visitorTip.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);
|
|
});
|
|
|
|
// 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);
|
|
});
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div class="block">
|
|
<div id="graph"></div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default Graph
|