From be3b39e669dcb6affc5604002b57cf49f15d1a4f Mon Sep 17 00:00:00 2001
From: Danny van Kooten <dannyvankooten@gmail.com>
Date: Fri, 30 Nov 2018 09:30:20 +0100
Subject: [PATCH] fix to 1st of month when grouping chart by month

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

diff --git a/assets/src/js/components/Chart.js b/assets/src/js/components/Chart.js
index 9bc59f6b..09d5446a 100644
--- a/assets/src/js/components/Chart.js
+++ b/assets/src/js/components/Chart.js
@@ -57,6 +57,7 @@ class Chart extends Component {
 
   componentWillReceiveProps(newProps) {
     let daysDiff = Math.round((newProps.dateRange[1]-newProps.dateRange[0])/1000/24/60/60);
+
     this.setState({
       diffInDays: daysDiff,
       tickStep: newProps.tickStep,
@@ -72,10 +73,15 @@ class Chart extends Component {
 
   @bind
   chartData() {
-    let startDate = this.props.dateRange[0];
+    let startDate = new Date(this.props.dateRange[0]);
     let endDate = this.props.dateRange[1];
     let newData = [];
 
+    // if grouping by month, fix date to 1st of month
+    if(this.state.tickStep === 'month') {
+      startDate.setDate(1);
+    }
+
     // instantiate JS Date objects
     let data = this.state.data.map(d => {
       d.Date = new Date(d.Date);
@@ -163,7 +169,8 @@ class Chart extends Component {
         title += ` ${d.Date.getHours()}:00 - ${d.Date.getHours() + 1}:00`
       } 
 
-      return (`<div class="tip-heading">${title}</div>
+      return (`
+      <div class="tip-heading">${title}</div>
       <div class="tip-content">
         <div class="tip-pageviews">
           <div class="tip-number">${d.Pageviews}</div>
@@ -173,7 +180,9 @@ class Chart extends Component {
           <div class="tip-number">${d.Visitors}</div>
           <div class="tip-metric">Visitors</div>
         </div>
-      </div>`)});
+      </div>`
+      )});
+
     this.ctx.call(this.tip)
   }