From cae987cfbfd802e3dcb297857ea43a8d00c30e7b Mon Sep 17 00:00:00 2001
From: Danny van Kooten <dannyvankooten@gmail.com>
Date: Fri, 23 Nov 2018 11:21:36 +0100
Subject: [PATCH] show less ticks in chart x-axes when viewing 15-31 data
 points

---
 assets/src/js/components/Chart.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/assets/src/js/components/Chart.js b/assets/src/js/components/Chart.js
index 62dc995..5e481a0 100644
--- a/assets/src/js/components/Chart.js
+++ b/assets/src/js/components/Chart.js
@@ -17,10 +17,6 @@ const
 
 const t = d3.transition().duration(600).ease(d3.easeQuadOut);
 
-function padZero(s) {
-  return s < 10 ? "0" + s : s;
-}
-
 function timeFormatPicker(n, days) {
   return function(d, i) {
     if( days <= 1 ) {
@@ -58,7 +54,7 @@ class Chart extends Component {
       return;
     }
     
-    let daysDiff = Math.round((newProps.dateRange[1]-newProps.dateRange[0])/24/60/60);
+    let daysDiff = Math.round((newProps.dateRange[1]-newProps.dateRange[0])/1000/24/60/60);
     let stepHours = daysDiff > 1 ? 24 : 1;
     this.setState({
       diffInDays: daysDiff,
@@ -187,6 +183,8 @@ class Chart extends Component {
      // hide all "day" ticks if we're watching more than 31 items of data
     if(data.length > 31) {
       xAxis.tickValues(data.filter(d => d.Date.getDate() === 1).map(d => d.Date))
+    } else if(data.length > 15) {
+      xAxis.tickValues(data.filter((d, i) => d.Date.getDate() === 1 || i === 0 || i == Math.floor((data.length-1)/2)|| i === data.length-1).map(d => d.Date))
     }
 
     // empty previous graph