[CW-53] feat: allow downloading heatmap report (#6683)

* feat: add control header slot

* feat: add download API call

* feat: add conversation traffic template

* feat: allow downloading heatmap content

* feat: wire up download

* fix: grid layout for mobile

* chore: revert formatting

* revert: en.yml file

* feat: add conversation traffic text

* feat: disable rule for map block

* test: conversation traffic

* fix: timezone offset

* feat: download report in UTC

* feat: add UTC warning

* chore: revert formatting

* feat: add traffic text

* chore: fix whitespace change

app/javascript/dashboard/api/reports.js

@@ -59,6 +59,12 @@ class ReportsAPI extends ApiClient {
     });
   }
 
+  getConversationTrafficCSV({ from: since, to: until }) {
+    return axios.get(`${this.url}/conversation_traffic`, {
+      params: { since, until },
+    });
+  }
+
   getLabelReports({ from: since, to: until, businessHours }) {
     return axios.get(`${this.url}/labels`, {
       params: { since, until, business_hours: businessHours },

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

@@ -40,6 +40,17 @@
       <metric-card
         :header="this.$t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.HEADER')"
       >
+        <template #control>
+          <woot-button
+            icon="arrow-download"
+            size="small"
+            variant="smooth"
+            color-scheme="secondary"
+            @click="downloadHeatmapData"
+          >
+            Download Report
+          </woot-button>
+        </template>
         <report-heatmap
           :heat-data="accountConversationHeatmap"
           :is-loading="uiFlags.isFetchingAccountConversationsHeatmap"
@@ -129,6 +140,15 @@ export default {
       this.fetchAgentConversationMetric();
       this.fetchHeatmapData();
     },
+    downloadHeatmapData() {
+      let to = endOfDay(new Date());
+      let from = startOfDay(subDays(to, 6));
+
+      this.$store.dispatch('downloadAccountConversationHeatmap', {
+        from: getUnixTime(from),
+        to: getUnixTime(to),
+      });
+    },
     fetchHeatmapData() {
       if (this.uiFlags.isFetchingAccountConversationsHeatmap) {
         return;

app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue

@@ -1,10 +1,19 @@
 <template>
   <div class="card">
     <div class="card-header">
-      <h5>{{ header }}</h5>
-      <span class="live">
-        <span class="ellipse" /><span>{{ $t('OVERVIEW_REPORTS.LIVE') }}</span>
-      </span>
+      <slot name="header">
+        <div class="card-header--title-area">
+          <h5>{{ header }}</h5>
+          <span class="live">
+            <span class="ellipse" /><span>{{
+              $t('OVERVIEW_REPORTS.LIVE')
+            }}</span>
+          </span>
+        </div>
+        <div class="card-header--control-area">
+          <slot name="control" />
+        </div>
+      </slot>
     </div>
     <div v-if="!isLoading" class="card-body row">
       <slot />
@@ -42,37 +51,66 @@ export default {
 <style lang="scss" scoped>
 .card {
   margin: var(--space-small) !important;
-}
-.card-header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-bottom: var(--space-medium);
 
-  h5 {
-    margin-bottom: var(--zero);
+  .card-header--control-area {
+    opacity: 0.2;
+    transition: opacity 0.2s ease-in-out;
   }
 
-  .live {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding-right: var(--space-small);
-    padding-left: var(--space-small);
-    margin: var(--space-smaller);
-    background: rgba(37, 211, 102, 0.1);
-    color: var(--g-400);
-    font-size: var(--font-size-mini);
-
-    .ellipse {
-      background-color: var(--g-400);
-      height: var(--space-smaller);
-      width: var(--space-smaller);
-      border-radius: var(--border-radius-rounded);
-      margin-right: var(--space-smaller);
+  &:hover {
+    .card-header--control-area {
+      opacity: 1;
     }
   }
 }
+
+.card-header {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(max-content, 50%));
+  gap: var(--space-small) 0px;
+  flex-grow: 1;
+  width: 100%;
+  margin-bottom: var(--space-medium);
+
+  .card-header--title-area {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    h5 {
+      margin-bottom: var(--zero);
+    }
+
+    .live {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding-right: var(--space-small);
+      padding-left: var(--space-small);
+      margin: var(--space-smaller);
+      background: rgba(37, 211, 102, 0.1);
+      color: var(--g-400);
+      font-size: var(--font-size-mini);
+
+      .ellipse {
+        background-color: var(--g-400);
+        height: var(--space-smaller);
+        width: var(--space-smaller);
+        border-radius: var(--border-radius-rounded);
+        margin-right: var(--space-smaller);
+      }
+    }
+  }
+
+  .card-header--control-area {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: end;
+    gap: var(--space-small);
+  }
+}
+
 .card-body {
   .metric-content {
     padding-bottom: var(--space-small);

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

@@ -1,7 +1,7 @@
 /* eslint no-console: 0 */
 import * as types from '../mutation-types';
 import Report from '../../api/reports';
-import { downloadCsvFile } from '../../helper/downloadHelper';
+import { downloadCsvFile, generateFileName } from '../../helper/downloadHelper';
 import AnalyticsHelper from '../../helper/AnalyticsHelper';
 import { REPORTS_EVENTS } from '../../helper/AnalyticsHelper/events';
 import {
@@ -179,6 +179,26 @@ export const actions = {
         console.error(error);
       });
   },
+  downloadAccountConversationHeatmap(_, reportObj) {
+    Report.getConversationTrafficCSV(reportObj)
+      .then(response => {
+        downloadCsvFile(
+          generateFileName({
+            type: 'Conversation traffic',
+            to: reportObj.to,
+          }),
+          response.data
+        );
+
+        AnalyticsHelper.track(REPORTS_EVENTS.DOWNLOAD_REPORT, {
+          reportType: 'conversation_heatmap',
+          businessHours: false,
+        });
+      })
+      .catch(error => {
+        console.error(error);
+      });
+  },
 };
 
 const mutations = {