fix: Consider timezone in the reports (#4027)

Co-authored-by: Sojan Jose <sojan@pepalo.com>

app/javascript/dashboard/api/reports.js

@@ -1,6 +1,8 @@
 /* global axios */
 import ApiClient from './ApiClient';
 
+const getTimeOffset = () => -new Date().getTimezoneOffset() / 60;
+
 class ReportsAPI extends ApiClient {
   constructor() {
     super('reports', { accountScoped: true, apiVersion: 'v2' });
@@ -8,13 +10,27 @@ class ReportsAPI extends ApiClient {
 
   getReports(metric, since, until, type = 'account', id, group_by) {
     return axios.get(`${this.url}`, {
-      params: { metric, since, until, type, id, group_by },
+      params: {
+        metric,
+        since,
+        until,
+        type,
+        id,
+        group_by,
+        timezone_offset: getTimeOffset(),
+      },
     });
   }
 
   getSummary(since, until, type = 'account', id, group_by) {
     return axios.get(`${this.url}/summary`, {
-      params: { since, until, type, id, group_by },
+      params: {
+        since,
+        until,
+        type,
+        id,
+        group_by,
+      },
     });
   }
 

app/javascript/dashboard/api/specs/reports.spec.js

@@ -27,6 +27,7 @@ describe('#Reports API', () => {
           since: 1621103400,
           until: 1621621800,
           type: 'account',
+          timezone_offset: -0,
         },
       });
     });

app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue

@@ -50,6 +50,7 @@ import subDays from 'date-fns/subDays';
 import startOfDay from 'date-fns/startOfDay';
 import getUnixTime from 'date-fns/getUnixTime';
 import { GROUP_BY_FILTER } from '../constants';
+import endOfDay from 'date-fns/endOfDay';
 
 export default {
   components: {
@@ -79,9 +80,9 @@ export default {
     },
     to() {
       if (this.isDateRangeSelected) {
-        return this.fromCustomDate(this.customDateRange[1]);
+        return this.toCustomDate(this.customDateRange[1]);
       }
-      return this.fromCustomDate(new Date());
+      return this.toCustomDate(new Date());
     },
     from() {
       if (this.isDateRangeSelected) {
@@ -134,6 +135,9 @@ export default {
     fromCustomDate(date) {
       return getUnixTime(startOfDay(date));
     },
+    toCustomDate(date) {
+      return getUnixTime(endOfDay(date));
+    },
     changeDateSelection(selectedRange) {
       this.currentDateRangeSelection = selectedRange;
       this.onDateRangeChange();

app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue

@@ -148,13 +148,15 @@
   </div>
 </template>
 <script>
-import WootDateRangePicker from 'dashboard/components/ui/DateRangePicker.vue';
-const CUSTOM_DATE_RANGE_ID = 5;
-import subDays from 'date-fns/subDays';
-import startOfDay from 'date-fns/startOfDay';
+import endOfDay from 'date-fns/endOfDay';
 import getUnixTime from 'date-fns/getUnixTime';
+import startOfDay from 'date-fns/startOfDay';
+import subDays from 'date-fns/subDays';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import WootDateRangePicker from 'dashboard/components/ui/DateRangePicker.vue';
+
 import { GROUP_BY_FILTER } from '../constants';
+const CUSTOM_DATE_RANGE_ID = 5;
 
 export default {
   components: {
@@ -194,9 +196,9 @@ export default {
     },
     to() {
       if (this.isDateRangeSelected) {
-        return this.fromCustomDate(this.customDateRange[1]);
+        return this.toCustomDate(this.customDateRange[1]);
       }
-      return this.fromCustomDate(new Date());
+      return this.toCustomDate(new Date());
     },
     from() {
       if (this.isDateRangeSelected) {
@@ -253,6 +255,7 @@ export default {
   },
   methods: {
     onDateRangeChange() {
+      console.log(this.from, this.to);
       this.$emit('date-range-change', {
         from: this.from,
         to: this.to,
@@ -262,6 +265,9 @@ export default {
     fromCustomDate(date) {
       return getUnixTime(startOfDay(date));
     },
+    toCustomDate(date) {
+      return getUnixTime(endOfDay(date));
+    },
     changeDateSelection(selectedRange) {
       this.currentDateRangeSelection = selectedRange;
       this.onDateRangeChange();

app/javascript/dashboard/store/modules/reports.js

@@ -1,9 +1,6 @@
 /* eslint no-console: 0 */
 /* eslint no-param-reassign: 0 */
 /* eslint no-shadow: 0 */
-import compareAsc from 'date-fns/compareAsc';
-import fromUnixTime from 'date-fns/fromUnixTime';
-
 import * as types from '../mutation-types';
 import Report from '../../api/reports';
 
@@ -48,7 +45,8 @@ export const actions = {
     ).then(accountReport => {
       let { data } = accountReport;
       data = data.filter(
-        el => compareAsc(new Date(), fromUnixTime(el.timestamp)) > -1
+        el =>
+          reportObj.to - el.timestamp > 0 && el.timestamp - reportObj.from >= 0
       );
       if (
         reportObj.metric === 'avg_first_response_time' ||