LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Shivam Mishra
2023-03-20 15:46:29 +05:30
committed by GitHub
parent 4f936aada5
commit e5134c9ef5
10 changed files with 192 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
View File

@@ -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;

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

@@ -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);