feat: Display how many conversations are considered for the metric calculation (#4273)

* feat: Display how many conversations are considered for the metric calculation

app/javascript/dashboard/mixins/reportMixin.js

@@ -5,6 +5,7 @@ export default {
   computed: {
     ...mapGetters({
       accountSummary: 'getAccountSummary',
+      accountReport: 'getAccountReports',
     }),
     calculateTrend() {
       return metric_key => {
@@ -19,15 +20,32 @@ export default {
     },
     displayMetric() {
       return metric_key => {
-        if (
-          ['avg_first_response_time', 'avg_resolution_time'].includes(
-            metric_key
-          )
-        ) {
+        if (this.isAverageMetricType(metric_key)) {
           return formatTime(this.accountSummary[metric_key]);
         }
         return this.accountSummary[metric_key];
       };
     },
+    displayInfoText() {
+      return metric_key => {
+        if (this.metrics[this.currentSelection].KEY !== metric_key) {
+          return '';
+        }
+        if (this.isAverageMetricType(metric_key)) {
+          const total = this.accountReport.data
+            .map(item => item.count)
+            .reduce((prev, curr) => prev + curr, 0);
+          return `${this.metrics[this.currentSelection].INFO_TEXT} ${total}`;
+        }
+        return '';
+      };
+    },
+    isAverageMetricType() {
+      return metric_key => {
+        return ['avg_first_response_time', 'avg_resolution_time'].includes(
+          metric_key
+        );
+      };
+    },
   },
 };

app/javascript/dashboard/mixins/specs/reportMixin.spec.js

@@ -11,6 +11,7 @@ describe('reportMixin', () => {
   beforeEach(() => {
     getters = {
       getAccountSummary: () => reportFixtures.summary,
+      getAccountReports: () => reportFixtures.report,
     };
     store = new Vuex.Store({ getters });
   });
@@ -38,4 +39,67 @@ describe('reportMixin', () => {
     expect(wrapper.vm.calculateTrend('conversations_count')).toEqual(25);
     expect(wrapper.vm.calculateTrend('resolutions_count')).toEqual(0);
   });
+
+  it('display info text', () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [reportMixin],
+      data() {
+        return {
+          currentSelection: 0,
+        };
+      },
+      computed: {
+        metrics() {
+          return [
+            {
+              DESC: '( Avg )',
+              INFO_TEXT: 'Total number of conversations used for computation:',
+              KEY: 'avg_first_response_time',
+              NAME: 'First Response Time',
+            },
+          ];
+        },
+      },
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(wrapper.vm.displayInfoText('avg_first_response_time')).toEqual(
+      'Total number of conversations used for computation: 4'
+    );
+  });
+
+  it('do not display info text', () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [reportMixin],
+      data() {
+        return {
+          currentSelection: 0,
+        };
+      },
+      computed: {
+        metrics() {
+          return [
+            {
+              DESC: '( Total )',
+              INFO_TEXT: '',
+              KEY: 'conversation_count',
+              NAME: 'Conversations',
+            },
+            {
+              DESC: '( Avg )',
+              INFO_TEXT: 'Total number of conversations used for computation:',
+              KEY: 'avg_first_response_time',
+              NAME: 'First Response Time',
+            },
+          ];
+        },
+      },
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(wrapper.vm.displayInfoText('conversation_count')).toEqual('');
+    expect(wrapper.vm.displayInfoText('incoming_messages_count')).toEqual('');
+  });
 });

app/javascript/dashboard/mixins/specs/reportMixinFixtures.js

@@ -15,4 +15,15 @@ export default {
     },
     resolutions_count: 3,
   },
+  report: {
+    data: [
+      { value: '0.00', timestamp: 1647541800, count: 0 },
+      { value: '0.00', timestamp: 1647628200, count: 0 },
+      { value: '0.00', timestamp: 1647714600, count: 0 },
+      { value: '0.00', timestamp: 1647801000, count: 0 },
+      { value: '0.01', timestamp: 1647887400, count: 4 },
+      { value: '0.00', timestamp: 1647973800, count: 0 },
+      { value: '0.00', timestamp: 1648060200, count: 0 },
+    ],
+  },
 };