feat: Display how many conversations are considered for the metric calculation (#4273)
* feat: Display how many conversations are considered for the metric calculation
This commit is contained in:
Aswin Dev P.S
@@ -22,6 +22,7 @@
|
||||
:key="metric.NAME"
|
||||
:desc="metric.DESC"
|
||||
:heading="metric.NAME"
|
||||
:info-text="displayInfoText(metric.KEY)"
|
||||
:index="index"
|
||||
:on-click="changeSelection"
|
||||
:point="displayMetric(metric.KEY)"
|
||||
@@ -35,7 +36,11 @@
|
||||
:message="$t('REPORT.LOADING_CHART')"
|
||||
/>
|
||||
<div v-else class="chart-container">
|
||||
<woot-bar v-if="accountReport.data.length" :collection="collection" />
|
||||
<woot-bar
|
||||
v-if="accountReport.data.length"
|
||||
:collection="collection"
|
||||
:chart-options="chartOptions"
|
||||
/>
|
||||
<span v-else class="empty-state">
|
||||
{{ $t('REPORT.NO_ENOUGH_DATA') }}
|
||||
</span>
|
||||
@@ -49,7 +54,7 @@ import { mapGetters } from 'vuex';
|
||||
import fromUnixTime from 'date-fns/fromUnixTime';
|
||||
import format from 'date-fns/format';
|
||||
import ReportFilterSelector from './components/FilterSelector';
|
||||
import { GROUP_BY_FILTER } from './constants';
|
||||
import { GROUP_BY_FILTER, METRIC_CHART } from './constants';
|
||||
import reportMixin from '../../../../mixins/reportMixin';
|
||||
|
||||
const REPORTS_KEYS = {
|
||||
@@ -108,16 +113,38 @@ export default {
|
||||
}
|
||||
return format(fromUnixTime(element.timestamp), 'dd-MMM-yyyy');
|
||||
});
|
||||
const data = this.accountReport.data.map(element => element.value);
|
||||
|
||||
const datasets = METRIC_CHART[
|
||||
this.metrics[this.currentSelection].KEY
|
||||
].datasets.map(dataset => {
|
||||
switch (dataset.type) {
|
||||
case 'bar':
|
||||
return {
|
||||
...dataset,
|
||||
yAxisID: 'y-left',
|
||||
label: this.metrics[this.currentSelection].NAME,
|
||||
data: this.accountReport.data.map(element => element.value),
|
||||
};
|
||||
case 'line':
|
||||
return {
|
||||
...dataset,
|
||||
yAxisID: 'y-right',
|
||||
label: this.metrics[0].NAME,
|
||||
data: this.accountReport.data.map(element => element.count),
|
||||
};
|
||||
default:
|
||||
return dataset;
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
label: this.metrics[this.currentSelection].NAME,
|
||||
backgroundColor: '#1f93ff',
|
||||
data,
|
||||
},
|
||||
],
|
||||
datasets,
|
||||
};
|
||||
},
|
||||
chartOptions() {
|
||||
return {
|
||||
scales: METRIC_CHART[this.metrics[this.currentSelection].KEY].scales,
|
||||
};
|
||||
},
|
||||
metrics() {
|
||||
@@ -133,6 +160,7 @@ export default {
|
||||
NAME: this.$t(`REPORT.METRICS.${key}.NAME`),
|
||||
KEY: REPORTS_KEYS[key],
|
||||
DESC: this.$t(`REPORT.METRICS.${key}.DESC`),
|
||||
INFO_TEXT: this.$t(`REPORT.METRICS.${key}.INFO_TEXT`),
|
||||
}));
|
||||
},
|
||||
},
|
||||
|
||||
@@ -25,6 +25,7 @@
|
||||
:key="metric.NAME"
|
||||
:desc="metric.DESC"
|
||||
:heading="metric.NAME"
|
||||
:info-text="displayInfoText(metric.KEY)"
|
||||
:index="index"
|
||||
:on-click="changeSelection"
|
||||
:point="displayMetric(metric.KEY)"
|
||||
@@ -41,6 +42,7 @@
|
||||
<woot-bar
|
||||
v-if="accountReport.data.length && filterItemsList.length"
|
||||
:collection="collection"
|
||||
:chart-options="chartOptions"
|
||||
/>
|
||||
<span v-else class="empty-state">
|
||||
{{ $t('REPORT.NO_ENOUGH_DATA') }}
|
||||
@@ -55,7 +57,7 @@
|
||||
import ReportFilters from './ReportFilters';
|
||||
import fromUnixTime from 'date-fns/fromUnixTime';
|
||||
import format from 'date-fns/format';
|
||||
import { GROUP_BY_FILTER } from '../constants';
|
||||
import { GROUP_BY_FILTER, METRIC_CHART } from '../constants';
|
||||
import reportMixin from '../../../../../mixins/reportMixin';
|
||||
|
||||
const REPORTS_KEYS = {
|
||||
@@ -137,16 +139,38 @@ export default {
|
||||
}
|
||||
return format(fromUnixTime(element.timestamp), 'dd-MMM-yyyy');
|
||||
});
|
||||
const data = this.accountReport.data.map(element => element.value);
|
||||
|
||||
const datasets = METRIC_CHART[
|
||||
this.metrics[this.currentSelection].KEY
|
||||
].datasets.map(dataset => {
|
||||
switch (dataset.type) {
|
||||
case 'bar':
|
||||
return {
|
||||
...dataset,
|
||||
yAxisID: 'y-left',
|
||||
label: this.metrics[this.currentSelection].NAME,
|
||||
data: this.accountReport.data.map(element => element.value),
|
||||
};
|
||||
case 'line':
|
||||
return {
|
||||
...dataset,
|
||||
yAxisID: 'y-right',
|
||||
label: this.metrics[0].NAME,
|
||||
data: this.accountReport.data.map(element => element.count),
|
||||
};
|
||||
default:
|
||||
return dataset;
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
label: this.metrics[this.currentSelection].NAME,
|
||||
backgroundColor: '#1f93ff',
|
||||
data,
|
||||
},
|
||||
],
|
||||
datasets,
|
||||
};
|
||||
},
|
||||
chartOptions() {
|
||||
return {
|
||||
scales: METRIC_CHART[this.metrics[this.currentSelection].KEY].scales,
|
||||
};
|
||||
},
|
||||
metrics() {
|
||||
@@ -168,6 +192,7 @@ export default {
|
||||
NAME: this.$t(`REPORT.METRICS.${key}.NAME`),
|
||||
KEY: REPORTS_KEYS[key],
|
||||
DESC: this.$t(`REPORT.METRICS.${key}.DESC`),
|
||||
INFO_TEXT: this.$t(`REPORT.METRICS.${key}.INFO_TEXT`),
|
||||
}));
|
||||
},
|
||||
},
|
||||
|
||||
@@ -4,3 +4,142 @@ export const GROUP_BY_FILTER = {
|
||||
3: { id: 3, period: 'month' },
|
||||
4: { id: 4, period: 'year' },
|
||||
};
|
||||
|
||||
export const CHART_FONT_FAMILY =
|
||||
'-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
|
||||
|
||||
export const DEFAULT_LINE_CHART = {
|
||||
type: 'line',
|
||||
fill: false,
|
||||
borderColor: '#779BBB',
|
||||
pointBackgroundColor: '#779BBB',
|
||||
};
|
||||
|
||||
export const DEFAULT_BAR_CHART = {
|
||||
type: 'bar',
|
||||
backgroundColor: 'rgb(31, 147, 255, 0.5)',
|
||||
};
|
||||
|
||||
export const DEFAULT_CHART = {
|
||||
datasets: [DEFAULT_BAR_CHART],
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
ticks: {
|
||||
fontFamily: CHART_FONT_FAMILY,
|
||||
},
|
||||
gridLines: {
|
||||
drawOnChartArea: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
id: 'y-left',
|
||||
type: 'linear',
|
||||
position: 'left',
|
||||
ticks: {
|
||||
fontFamily: CHART_FONT_FAMILY,
|
||||
beginAtZero: true,
|
||||
stepSize: 1,
|
||||
},
|
||||
gridLines: {
|
||||
drawOnChartArea: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const METRIC_CHART = {
|
||||
conversations_count: DEFAULT_CHART,
|
||||
incoming_messages_count: DEFAULT_CHART,
|
||||
outgoing_messages_count: DEFAULT_CHART,
|
||||
avg_first_response_time: {
|
||||
datasets: [DEFAULT_BAR_CHART, DEFAULT_LINE_CHART],
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
ticks: {
|
||||
fontFamily: CHART_FONT_FAMILY,
|
||||
},
|
||||
gridLines: {
|
||||
drawOnChartArea: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
id: 'y-left',
|
||||
type: 'linear',
|
||||
position: 'left',
|
||||
ticks: {
|
||||
fontFamily: CHART_FONT_FAMILY,
|
||||
beginAtZero: true,
|
||||
precision: 2,
|
||||
},
|
||||
gridLines: {
|
||||
drawOnChartArea: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'y-right',
|
||||
type: 'linear',
|
||||
position: 'right',
|
||||
ticks: {
|
||||
fontFamily: CHART_FONT_FAMILY,
|
||||
beginAtZero: true,
|
||||
stepSize: 1,
|
||||
},
|
||||
gridLines: {
|
||||
drawOnChartArea: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
avg_resolution_time: {
|
||||
datasets: [DEFAULT_BAR_CHART, DEFAULT_LINE_CHART],
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
ticks: {
|
||||
fontFamily: CHART_FONT_FAMILY,
|
||||
},
|
||||
gridLines: {
|
||||
drawOnChartArea: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
id: 'y-left',
|
||||
type: 'linear',
|
||||
position: 'left',
|
||||
ticks: {
|
||||
fontFamily: CHART_FONT_FAMILY,
|
||||
beginAtZero: true,
|
||||
precision: 2,
|
||||
},
|
||||
gridLines: {
|
||||
drawOnChartArea: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'y-right',
|
||||
type: 'linear',
|
||||
position: 'right',
|
||||
ticks: {
|
||||
fontFamily: CHART_FONT_FAMILY,
|
||||
beginAtZero: true,
|
||||
stepSize: 1,
|
||||
},
|
||||
gridLines: {
|
||||
drawOnChartArea: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
resolutions_count: DEFAULT_CHART,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user