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