mirror of https://github.com/status-im/fathom.git
show pageview & visitor chart for week/month/year periods
This commit is contained in:
parent
0101afdc9f
commit
60008aa205
2
Makefile
2
Makefile
|
@ -19,7 +19,7 @@ build: $(EXECUTABLE)
|
||||||
|
|
||||||
$(EXECUTABLE): $(SOURCES) $(JS_SOURCES)
|
$(EXECUTABLE): $(SOURCES) $(JS_SOURCES)
|
||||||
if [ ! -d "node_modules" ]; then npm install; fi
|
if [ ! -d "node_modules" ]; then npm install; fi
|
||||||
gulp
|
NODE_ENV=production gulp
|
||||||
packr build -v -ldflags '-w $(LDFLAGS)' -o $@ $(MAIN_PKG)
|
packr build -v -ldflags '-w $(LDFLAGS)' -o $@ $(MAIN_PKG)
|
||||||
|
|
||||||
.PHONY: docker
|
.PHONY: docker
|
||||||
|
|
|
@ -7,7 +7,6 @@ import { bind } from 'decko';
|
||||||
import * as d3 from 'd3';
|
import * as d3 from 'd3';
|
||||||
import 'd3-transition';
|
import 'd3-transition';
|
||||||
|
|
||||||
|
|
||||||
function padZero(s) {
|
function padZero(s) {
|
||||||
return s < 10 ? "0" + s : s;
|
return s < 10 ? "0" + s : s;
|
||||||
}
|
}
|
||||||
|
@ -18,11 +17,13 @@ function padData(startUnix, endUnix, data) {
|
||||||
let datamap = [];
|
let datamap = [];
|
||||||
let newData = [];
|
let newData = [];
|
||||||
|
|
||||||
|
// create keyed array for quick date access
|
||||||
data.forEach((d) => {
|
data.forEach((d) => {
|
||||||
d.Date = d.Date.substring(0, 10);
|
d.Date = d.Date.substring(0, 10);
|
||||||
datamap[d.Date] = d;
|
datamap[d.Date] = d;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// make sure we have values for each date
|
||||||
while(startDate < endDate) {
|
while(startDate < endDate) {
|
||||||
let date = startDate.getFullYear() + "-" + padZero(startDate.getMonth() + 1) + "-" + padZero(startDate.getDate());
|
let date = startDate.getFullYear() + "-" + padZero(startDate.getMonth() + 1) + "-" + padZero(startDate.getDate());
|
||||||
let data = datamap[date] ? datamap[date] : {
|
let data = datamap[date] ? datamap[date] : {
|
||||||
|
@ -61,14 +62,20 @@ class Chart extends Component {
|
||||||
|
|
||||||
@bind
|
@bind
|
||||||
redrawChart() {
|
redrawChart() {
|
||||||
let padding = { top: 10, right: 24, bottom: 48, left: 40 },
|
|
||||||
h = 240,
|
|
||||||
w = this.base.clientWidth;
|
|
||||||
|
|
||||||
let height = h, width = w;
|
var data = this.state.data;
|
||||||
|
this.base.parentNode.style.display = data.length <= 1 ? 'none' : '';
|
||||||
|
if(data.length <= 1) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let padding = { top: 10, right: 24, bottom: 48, left: 48 };
|
||||||
|
let height = 240;
|
||||||
|
let width = this.base.clientWidth;
|
||||||
let innerWidth = width - padding.left - padding.right;
|
let innerWidth = width - padding.left - padding.right;
|
||||||
let innerHeight = height - padding.top - padding.bottom;
|
let innerHeight = height - padding.top - padding.bottom;
|
||||||
|
|
||||||
|
// empty previous graph
|
||||||
if( this.previousGraph ) {
|
if( this.previousGraph ) {
|
||||||
this.previousGraph.selectAll('*').remove();
|
this.previousGraph.selectAll('*').remove();
|
||||||
}
|
}
|
||||||
|
@ -80,19 +87,15 @@ class Chart extends Component {
|
||||||
.append('g').attr('transform', 'translate(' + padding.left + ', 0)');
|
.append('g').attr('transform', 'translate(' + padding.left + ', 0)');
|
||||||
graph = graph.select('g');
|
graph = graph.select('g');
|
||||||
|
|
||||||
var t = d3.transition().duration(500).ease(d3.easeQuadOut);
|
const t = d3.transition().duration(500).ease(d3.easeQuadOut);
|
||||||
var data = this.state.data;
|
const max = d3.max(data, (d) => d.Pageviews);
|
||||||
var max = d3.max(data, (d) => d.Pageviews);
|
|
||||||
|
// axes
|
||||||
var x = d3.scaleBand().range([0, innerWidth]).padding(0.1),
|
let x = d3.scaleBand().range([0, innerWidth]).padding(0.1).domain(data.map((d) => d.Date)),
|
||||||
y = d3.scaleLinear().range([innerHeight, 0]),
|
y = d3.scaleLinear().range([innerHeight, 0]).domain([0, (max*1.155)]),
|
||||||
yAxis = d3.axisLeft().scale(y).ticks(3).tickSize(-innerWidth),
|
yAxis = d3.axisLeft().scale(y).ticks(3).tickSize(-innerWidth),
|
||||||
xAxis = d3.axisBottom().scale(x);
|
xAxis = d3.axisBottom().scale(x);
|
||||||
|
|
||||||
x.domain(data.map((d) => d.Date))
|
|
||||||
y.domain([0, (max*1.155)])
|
|
||||||
|
|
||||||
// axes
|
|
||||||
graph.append("g")
|
graph.append("g")
|
||||||
.attr("class", "y axis")
|
.attr("class", "y axis")
|
||||||
.call(yAxis);
|
.call(yAxis);
|
||||||
|
@ -111,7 +114,7 @@ class Chart extends Component {
|
||||||
});
|
});
|
||||||
|
|
||||||
// pageview bars
|
// pageview bars
|
||||||
var pageviewBars = graph.selectAll('g.pageviews')
|
let pageviewBars = graph.selectAll('g.pageviews')
|
||||||
.data(data)
|
.data(data)
|
||||||
.enter()
|
.enter()
|
||||||
.append('g')
|
.append('g')
|
||||||
|
@ -128,7 +131,7 @@ class Chart extends Component {
|
||||||
|
|
||||||
|
|
||||||
// visitors
|
// visitors
|
||||||
var visitorBars = graph.selectAll('g.visitors')
|
let visitorBars = graph.selectAll('g.visitors')
|
||||||
.data(data)
|
.data(data)
|
||||||
.enter()
|
.enter()
|
||||||
.append('g')
|
.append('g')
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
.box-graph {
|
.box-graph {
|
||||||
background: white;
|
background: white;
|
||||||
|
margin-left: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chart {
|
#chart {
|
||||||
|
|
|
@ -47,8 +47,6 @@ gulp.task('browserify', function () {
|
||||||
});
|
});
|
||||||
|
|
||||||
gulp.task('minify', function(cb) {
|
gulp.task('minify', function(cb) {
|
||||||
process.env.NODE_ENV = 'production'; // why is this here?
|
|
||||||
|
|
||||||
pump([
|
pump([
|
||||||
gulp.src('./build/js/*.js'),
|
gulp.src('./build/js/*.js'),
|
||||||
uglify().on('error', gutil.log),
|
uglify().on('error', gutil.log),
|
||||||
|
|
Loading…
Reference in New Issue