feat: Display trends in report metrics (#4144)

app/javascript/dashboard/mixins/reportMixin.js

@@ -0,0 +1,33 @@
+import { mapGetters } from 'vuex';
+import { formatTime } from '@chatwoot/utils';
+
+export default {
+  computed: {
+    ...mapGetters({
+      accountSummary: 'getAccountSummary',
+    }),
+    calculateTrend() {
+      return metric_key => {
+        if (!this.accountSummary.previous[metric_key]) return 0;
+        return Math.round(
+          ((this.accountSummary[metric_key] -
+            this.accountSummary.previous[metric_key]) /
+            this.accountSummary.previous[metric_key]) *
+            100
+        );
+      };
+    },
+    displayMetric() {
+      return metric_key => {
+        if (
+          ['avg_first_response_time', 'avg_resolution_time'].includes(
+            metric_key
+          )
+        ) {
+          return formatTime(this.accountSummary[metric_key]);
+        }
+        return this.accountSummary[metric_key];
+      };
+    },
+  },
+};

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

@@ -0,0 +1,41 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import reportMixin from '../reportMixin';
+import reportFixtures from './reportMixinFixtures';
+import Vuex from 'vuex';
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('reportMixin', () => {
+  let getters;
+  let store;
+  beforeEach(() => {
+    getters = {
+      getAccountSummary: () => reportFixtures.summary,
+    };
+    store = new Vuex.Store({ getters });
+  });
+
+  it('display the metric', () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [reportMixin],
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(wrapper.vm.displayMetric('conversations_count')).toEqual(5);
+    expect(wrapper.vm.displayMetric('avg_first_response_time')).toEqual(
+      '3 Min'
+    );
+  });
+
+  it('calculate the trend', () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [reportMixin],
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(wrapper.vm.calculateTrend('conversations_count')).toEqual(25);
+    expect(wrapper.vm.calculateTrend('resolutions_count')).toEqual(0);
+  });
+});

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

@@ -0,0 +1,18 @@
+export default {
+  summary: {
+    avg_first_response_time: '198.6666666666667',
+    avg_resolution_time: '208.3333333333333',
+    conversations_count: 5,
+    incoming_messages_count: 5,
+    outgoing_messages_count: 3,
+    previous: {
+      avg_first_response_time: '89.0',
+      avg_resolution_time: '145.0',
+      conversations_count: 4,
+      incoming_messages_count: 5,
+      outgoing_messages_count: 4,
+      resolutions_count: 0,
+    },
+    resolutions_count: 3,
+  },
+};