chore: Report improvements (#4392)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
2025-11-01 19:48:08 +00:00 · 2022-04-11 20:57:22 +05:30
parent 31cdc63e18
commit c64e2e3bc5
9 changed files with 86 additions and 65 deletions
--- a/app/javascript/dashboard/i18n/locale/en/report.json
+++ b/app/javascript/dashboard/i18n/locale/en/report.json
@@ -20,12 +20,14 @@
      "FIRST_RESPONSE_TIME": {
        "NAME": "First Response Time",
        "DESC": "( Avg )",
-        "INFO_TEXT": "Total number of conversations used for computation:"
+        "INFO_TEXT": "Total number of conversations used for computation:",
+        "TOOLTIP_TEXT": "First Response Time is %{metricValue} (based on %{conversationCount} conversations)"
      },
      "RESOLUTION_TIME": {
        "NAME": "Resolution Time",
        "DESC": "( Avg )",
-        "INFO_TEXT": "Total number of conversations used for computation:"
+        "INFO_TEXT": "Total number of conversations used for computation:",
+        "TOOLTIP_TEXT": "Resolution Time is %{metricValue} (based on %{conversationCount} conversations)"
      },
      "RESOLUTION_COUNT": {
        "NAME": "Resolution Count",
@@ -103,12 +105,14 @@
      "FIRST_RESPONSE_TIME": {
        "NAME": "First Response Time",
        "DESC": "( Avg )",
-        "INFO_TEXT": "Total number of conversations used for computation:"
+        "INFO_TEXT": "Total number of conversations used for computation:",
+        "TOOLTIP_TEXT": "First Response Time is %{metricValue} (based on %{conversationCount} conversations)"
      },
      "RESOLUTION_TIME": {
        "NAME": "Resolution Time",
        "DESC": "( Avg )",
-        "INFO_TEXT": "Total number of conversations used for computation:"
+        "INFO_TEXT": "Total number of conversations used for computation:",
+        "TOOLTIP_TEXT": "Resolution Time is %{metricValue} (based on %{conversationCount} conversations)"
      },
      "RESOLUTION_COUNT": {
        "NAME": "Resolution Count",
@@ -168,12 +172,14 @@
      "FIRST_RESPONSE_TIME": {
        "NAME": "First Response Time",
        "DESC": "( Avg )",
-        "INFO_TEXT": "Total number of conversations used for computation:"
+        "INFO_TEXT": "Total number of conversations used for computation:",
+        "TOOLTIP_TEXT": "First Response Time is %{metricValue} (based on %{conversationCount} conversations)"
      },
      "RESOLUTION_TIME": {
        "NAME": "Resolution Time",
        "DESC": "( Avg )",
-        "INFO_TEXT": "Total number of conversations used for computation:"
+        "INFO_TEXT": "Total number of conversations used for computation:",
+        "TOOLTIP_TEXT": "Resolution Time is %{metricValue} (based on %{conversationCount} conversations)"
      },
      "RESOLUTION_COUNT": {
        "NAME": "Resolution Count",
@@ -233,12 +239,14 @@
      "FIRST_RESPONSE_TIME": {
        "NAME": "First Response Time",
        "DESC": "( Avg )",
-        "INFO_TEXT": "Total number of conversations used for computation:"
+        "INFO_TEXT": "Total number of conversations used for computation:",
+        "TOOLTIP_TEXT": "First Response Time is %{metricValue} (based on %{conversationCount} conversations)"
      },
      "RESOLUTION_TIME": {
        "NAME": "Resolution Time",
        "DESC": "( Avg )",
-        "INFO_TEXT": "Total number of conversations used for computation:"
+        "INFO_TEXT": "Total number of conversations used for computation:",
+        "TOOLTIP_TEXT": "Resolution Time is %{metricValue} (based on %{conversationCount} conversations)"
      },
      "RESOLUTION_COUNT": {
        "NAME": "Resolution Count",
@@ -298,12 +306,14 @@
      "FIRST_RESPONSE_TIME": {
        "NAME": "First Response Time",
        "DESC": "( Avg )",
-        "INFO_TEXT": "Total number of conversations used for computation:"
+        "INFO_TEXT": "Total number of conversations used for computation:",
+        "TOOLTIP_TEXT": "First Response Time is %{metricValue} (based on %{conversationCount} conversations)"
      },
      "RESOLUTION_TIME": {
        "NAME": "Resolution Time",
        "DESC": "( Avg )",
-        "INFO_TEXT": "Total number of conversations used for computation:"
+        "INFO_TEXT": "Total number of conversations used for computation:",
+        "TOOLTIP_TEXT": "Resolution Time is %{metricValue} (based on %{conversationCount} conversations)"
      },
      "RESOLUTION_COUNT": {
        "NAME": "Resolution Count",
@@ -372,4 +382,4 @@
      }
    }
  }
-}
+}
--- a/app/javascript/dashboard/mixins/specs/reportMixin.spec.js
+++ b/app/javascript/dashboard/mixins/specs/reportMixin.spec.js
@@ -25,7 +25,7 @@ describe('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'
+      '3 Min 18 Sec'
    );
  });

--- a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
@@ -57,6 +57,7 @@ import format from 'date-fns/format';
 import ReportFilterSelector from './components/FilterSelector';
 import { GROUP_BY_FILTER, METRIC_CHART } from './constants';
 import reportMixin from '../../../../mixins/reportMixin';
+import { formatTime } from '@chatwoot/utils';

 const REPORTS_KEYS = {
  CONVERSATIONS: 'conversations_count',
@@ -145,8 +146,22 @@ export default {
      };
    },
    chartOptions() {
+      let tooltips = {};
+      if (this.isAverageMetricType(this.metrics[this.currentSelection].KEY)) {
+        tooltips.callbacks = {
+          label: tooltipItem => {
+            return this.$t(this.metrics[this.currentSelection].TOOLTIP_TEXT, {
+              metricValue: formatTime(tooltipItem.yLabel),
+              conversationCount: this.accountReport.data[tooltipItem.index]
+                .count,
+            });
+          },
+        };
+      }
+
      return {
        scales: METRIC_CHART[this.metrics[this.currentSelection].KEY].scales,
+        tooltips: tooltips,
      };
    },
    metrics() {
@@ -158,11 +173,18 @@ export default {
        'RESOLUTION_TIME',
        'RESOLUTION_COUNT',
      ];
+      const infoText = {
+        FIRST_RESPONSE_TIME: this.$t(
+          `REPORT.METRICS.FIRST_RESPONSE_TIME.INFO_TEXT`
+        ),
+        RESOLUTION_TIME: this.$t(`REPORT.METRICS.RESOLUTION_TIME.INFO_TEXT`),
+      };
      return reportKeys.map(key => ({
        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`),
+        INFO_TEXT: infoText[key],
+        TOOLTIP_TEXT: `REPORT.METRICS.${key}.TOOLTIP_TEXT`,
      }));
    },
  },
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
@@ -148,9 +148,9 @@
    <div class="small-12 medium-3 business-hours">
      <span class="business-hours-text margin-right-small">
        {{ $t('REPORT.BUSINESS_HOURS') }}
-        <span>
-          <woot-switch v-model="businessHoursSelected" />
-        </span>
+      </span>
+      <span>
+        <woot-switch v-model="businessHoursSelected" />
      </span>
    </div>
  </div>
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
@@ -60,6 +60,7 @@ import fromUnixTime from 'date-fns/fromUnixTime';
 import format from 'date-fns/format';
 import { GROUP_BY_FILTER, METRIC_CHART } from '../constants';
 import reportMixin from '../../../../../mixins/reportMixin';
+import { formatTime } from '@chatwoot/utils';

 const REPORTS_KEYS = {
  CONVERSATIONS: 'conversations_count',
@@ -171,8 +172,21 @@ export default {
      };
    },
    chartOptions() {
+      let tooltips = {};
+      if (this.isAverageMetricType(this.metrics[this.currentSelection].KEY)) {
+        tooltips.callbacks = {
+          label: tooltipItem => {
+            return this.$t(this.metrics[this.currentSelection].TOOLTIP_TEXT, {
+              metricValue: formatTime(tooltipItem.yLabel),
+              conversationCount: this.accountReport.data[tooltipItem.index]
+                .count,
+            });
+          },
+        };
+      }
      return {
        scales: METRIC_CHART[this.metrics[this.currentSelection].KEY].scales,
+        tooltips: tooltips,
      };
    },
    metrics() {
@@ -190,11 +204,18 @@ export default {
        'RESOLUTION_TIME',
        'RESOLUTION_COUNT',
      ];
+      const infoText = {
+        FIRST_RESPONSE_TIME: this.$t(
+          `REPORT.METRICS.FIRST_RESPONSE_TIME.INFO_TEXT`
+        ),
+        RESOLUTION_TIME: this.$t(`REPORT.METRICS.RESOLUTION_TIME.INFO_TEXT`),
+      };
      return reportKeys.map(key => ({
        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`),
+        INFO_TEXT: infoText[key],
+        TOOLTIP_TEXT: `REPORT.METRICS.${key}.TOOLTIP_TEXT`,
      }));
    },
  },
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/constants.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/constants.js
@@ -1,3 +1,5 @@
+import { formatTime } from '@chatwoot/utils';
+
 export const GROUP_BY_FILTER = {
  1: { id: 1, period: 'day' },
  2: { id: 2, period: 'week' },
@@ -17,7 +19,7 @@ export const DEFAULT_LINE_CHART = {

 export const DEFAULT_BAR_CHART = {
  type: 'bar',
-  backgroundColor: 'rgb(31, 147, 255, 0.5)',
+  backgroundColor: 'rgb(31, 147, 255)',
 };

 export const DEFAULT_CHART = {
@@ -56,7 +58,7 @@ export const METRIC_CHART = {
  incoming_messages_count: DEFAULT_CHART,
  outgoing_messages_count: DEFAULT_CHART,
  avg_first_response_time: {
-    datasets: [DEFAULT_BAR_CHART, DEFAULT_LINE_CHART],
+    datasets: [DEFAULT_BAR_CHART],
    scales: {
      xAxes: [
        {
@@ -75,21 +77,9 @@ export const METRIC_CHART = {
          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,
+            callback(value) {
+              return formatTime(value);
+            },
          },
          gridLines: {
            drawOnChartArea: false,
@@ -99,7 +89,7 @@ export const METRIC_CHART = {
    },
  },
  avg_resolution_time: {
-    datasets: [DEFAULT_BAR_CHART, DEFAULT_LINE_CHART],
+    datasets: [DEFAULT_BAR_CHART],
    scales: {
      xAxes: [
        {
@@ -118,21 +108,9 @@ export const METRIC_CHART = {
          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,
+            callback(value) {
+              return formatTime(value);
+            },
          },
          gridLines: {
            drawOnChartArea: false,
--- a/app/javascript/dashboard/store/modules/reports.js
+++ b/app/javascript/dashboard/store/modules/reports.js
@@ -50,16 +50,6 @@ export const actions = {
        el =>
          reportObj.to - el.timestamp > 0 && el.timestamp - reportObj.from >= 0
      );
-      if (
-        reportObj.metric === 'avg_first_response_time' ||
-        reportObj.metric === 'avg_resolution_time'
-      ) {
-        data = data.map(element => {
-          /* eslint-disable operator-assignment */
-          element.value = (element.value / 3600).toFixed(2);
-          return element;
-        });
-      }
      commit(types.default.SET_ACCOUNT_REPORTS, data);
      commit(types.default.TOGGLE_ACCOUNT_REPORT_LOADING, false);
    });