show pageview & visitor chart for week/month/year periods

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

assets/js/components/Chart.js

@@ -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);
+    const t = d3.transition().duration(500).ease(d3.easeQuadOut);
+    const max = d3.max(data, (d) => d.Pageviews);
     
-    var x  = d3.scaleBand().range([0, innerWidth]).padding(0.1),
-      y  = d3.scaleLinear().range([innerHeight, 0]),
+    // 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')

assets/sass/chart.scss

@@ -1,5 +1,6 @@
 .box-graph {
    background: white;
+   margin-left: 0 !important;
 }
 
 #chart {

gulpfile.js

@@ -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),