Update heatmap report

app/javascript/dashboard/api/reports.js

@@ -61,9 +61,9 @@ class ReportsAPI extends ApiClient {
     });
   }
 
-  getConversationTrafficCSV() {
+  getConversationTrafficCSV({ daysBefore = 6 } = {}) {
     return axios.get(`${this.url}/conversation_traffic`, {
-      params: { timezone_offset: getTimeOffset() },
+      params: { timezone_offset: getTimeOffset(), days_before: daysBefore },
     });
   }
 

app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue

@@ -24,6 +24,18 @@
     <div class="row">
       <metric-card :header="$t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.HEADER')">
         <template #control>
+          <multiselect-dropdown
+            class="!mb-0 !w-1/3"
+            :options="dayFilterOptions"
+            :selected-item="selectedDayFilter"
+            multiselector-title=""
+            multiselector-placeholder="Date filter"
+            no-search-result="No filter found"
+            input-placeholder="Search for a filter"
+            :is-filter="true"
+            :has-thumbnail="false"
+            @click="onSelectDateFilter"
+          />
           <woot-button
             icon="arrow-download"
             size="small"
@@ -35,6 +47,7 @@
           </woot-button>
         </template>
         <report-heatmap
+          :selected-day-filter="selectedDayFilter"
           :heat-data="accountConversationHeatmap"
           :is-loading="uiFlags.isFetchingAccountConversationsHeatmap"
         />
@@ -69,6 +82,7 @@ import AgentTable from './components/overview/AgentTable.vue';
 import TeamTable from './components/overview/TeamTable.vue';
 import MetricCard from './components/overview/MetricCard.vue';
 import ReportHeatmap from './components/Heatmap.vue';
+import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
 
 import endOfDay from 'date-fns/endOfDay';
 import getUnixTime from 'date-fns/getUnixTime';
@@ -76,6 +90,17 @@ import startOfDay from 'date-fns/startOfDay';
 import subDays from 'date-fns/subDays';
 import { OVERVIEW_METRICS } from './constants';
 
+const dayFilterOptions = [
+  {
+    id: 1,
+    name: 'Last 7 days',
+  },
+  {
+    id: 2,
+    name: 'Last 30 days',
+  },
+];
+
 export default {
   name: 'LiveReports',
   components: {
@@ -84,10 +109,13 @@ export default {
     AgentTable,
     MetricCard,
     ReportHeatmap,
+    MultiselectDropdown,
   },
   data() {
     return {
       pageIndex: 1,
+      dayFilterOptions: dayFilterOptions,
+      selectedDayFilter: dayFilterOptions[0],
     };
   },
   computed: {
@@ -121,6 +149,10 @@ export default {
     });
   },
   methods: {
+    onSelectDateFilter(dayFilter) {
+      this.selectedDayFilter = dayFilter;
+      this.fetchHeatmapData();
+    },
     fetchAllData() {
       this.$store.dispatch('fetchAgentConversationMetric');
       this.$store.dispatch('fetchTeamConversationMetric');
@@ -130,9 +162,11 @@ export default {
       let to = endOfDay(new Date());
 
       this.$store.dispatch('downloadAccountConversationHeatmap', {
+        daysBefore: this.selectedDayFilter?.id === 1 ? 6 : 29,
         to: getUnixTime(to),
       });
     },
+
     fetchHeatmapData() {
       if (this.uiFlags.isFetchingAccountConversationsHeatmap) {
         return;
@@ -145,12 +179,9 @@ export default {
       // and reconcile it with the rest of the data
       // this will reduce the load on the server doing number crunching
       let to = endOfDay(new Date());
-      let from = startOfDay(subDays(to, 6));
-
-      if (this.accountConversationHeatmap.length) {
-        to = endOfDay(new Date());
-        from = startOfDay(to);
-      }
+      let from = startOfDay(
+        subDays(to, this.selectedDayFilter?.id === 1 ? 6 : 29)
+      );
 
       this.$store.dispatch('fetchAccountConversationHeatmap', {
         metric: 'conversations_count',

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

@@ -69,6 +69,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    selectedDayFilter: {
+      type: Object,
+      default: () => ({}),
+    },
     isLoading: {
       type: Boolean,
       default: false,
@@ -165,6 +169,7 @@ $marker-height: var(--space-two);
 @mixin heatmap-level($level) {
   $color: map-get($heatmap-colors, 'level-#{$level}');
   background-color: $color;
+
   &:hover {
     border: 1px solid map-get($heatmap-hover-border-color, 'level-#{$level}');
   }
@@ -188,6 +193,7 @@ $marker-height: var(--space-two);
   100% {
     opacity: 1;
   }
+
   50% {
     opacity: 0;
   }
@@ -270,18 +276,23 @@ $marker-height: var(--space-two);
     &.l1 {
       @include heatmap-level(1);
     }
+
     &.l2 {
       @include heatmap-level(2);
     }
+
     &.l3 {
       @include heatmap-level(3);
     }
+
     &.l4 {
       @include heatmap-level(4);
     }
+
     &.l5 {
       @include heatmap-level(5);
     }
+
     &.l6 {
       @include heatmap-level(6);
     }

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

@@ -4,10 +4,7 @@ import Report from '../../api/reports';
 import { downloadCsvFile, generateFileName } from '../../helper/downloadHelper';
 import AnalyticsHelper from '../../helper/AnalyticsHelper';
 import { REPORTS_EVENTS } from '../../helper/AnalyticsHelper/events';
-import {
-  reconcileHeatmapData,
-  clampDataBetweenTimeline,
-} from 'shared/helpers/ReportsDataHelper';
+import { clampDataBetweenTimeline } from 'shared/helpers/ReportsDataHelper';
 import liveReports from '../../api/liveReports';
 
 const state = {
@@ -88,6 +85,7 @@ export const actions = {
       value: true,
     });
     Report.getReports(reportObj).then(accountReport => {
+      console.log(reportObj, accountReport);
       let { data } = accountReport;
       data = clampDataBetweenTimeline(data, reportObj.from, reportObj.to);
       commit(types.default.SET_ACCOUNT_REPORTS, {
@@ -106,11 +104,6 @@ export const actions = {
       let { data } = heatmapData;
       data = clampDataBetweenTimeline(data, reportObj.from, reportObj.to);
 
-      data = reconcileHeatmapData(
-        data,
-        state.overview.accountConversationHeatmap
-      );
-
       commit(types.default.SET_HEATMAP_DATA, data);
       commit(types.default.TOGGLE_HEATMAP_LOADING, false);
     });
@@ -229,7 +222,7 @@ export const actions = {
       });
   },
   downloadAccountConversationHeatmap(_, reportObj) {
-    Report.getConversationTrafficCSV()
+    Report.getConversationTrafficCSV({ daysBefore: reportObj.daysBefore })
       .then(response => {
         downloadCsvFile(
           generateFileName({