From b8fc921f9a0558e1ea86a8b56097dfda8630bca9 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 21 Feb 2025 07:19:28 +0530
Subject: [PATCH] fix: Convert seconds based metric tooltips to readable format
 (#10938)

# Pull Request Template

## Description

Fixes
https://linear.app/chatwoot/issue/CW-4064/convert-average-metric-tooltips-from-seconds-to-readable-time-format

#### **Cause**
Chart tooltip configuration was using outdated Chart.js structure,
causing the time formatting function to not be applied correctly to
tooltip values in time-based metrics.

#### **Solution**
Updated tooltip configuration to use correct Chart.js Vue 3 plugin
structure

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

### **Screenshots**

#### **Before**
<img width="496" alt="image"
src="https://github.com/user-attachments/assets/a70cbfe6-f179-43dc-a8f4-93951b257e81"
/>


#### **After**
<img width="496" alt="image"
src="https://github.com/user-attachments/assets/ed5d0c6c-2404-43ae-82fa-bbe5c42cecca"
/>



## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 .../settings/reports/ReportContainer.vue      | 37 ++++++++++++-------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
index f89d1ac4d..c831612e0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
@@ -112,21 +112,32 @@ export default {
       };
     },
     getChartOptions(metric) {
-      let tooltips = {};
-      if (this.isAverageMetricType(metric.KEY)) {
-        tooltips.callbacks = {
-          label: tooltipItem => {
-            return this.$t(metric.TOOLTIP_TEXT, {
-              metricValue: formatTime(tooltipItem.yLabel),
-              conversationCount:
-                this.accountReport.data[metric.KEY][tooltipItem.index].count,
-            });
-          },
-        };
+      const baseOptions = METRIC_CHART[metric.KEY].scales;
+
+      // If not an average metric type, return base options early
+      if (!this.isAverageMetricType(metric.KEY)) {
+        return baseOptions;
       }
+
+      // Only create tooltip config for time-based metrics
       return {
-        scales: METRIC_CHART[metric.KEY].scales,
-        tooltips: tooltips,
+        ...baseOptions,
+        plugins: {
+          tooltip: {
+            callbacks: {
+              label: ({ raw, dataIndex }) => {
+                const value = raw || 0;
+                const count =
+                  this.accountReport.data[metric.KEY][dataIndex]?.count || 0;
+
+                return this.$t(metric.TOOLTIP_TEXT, {
+                  metricValue: formatTime(value),
+                  conversationCount: count,
+                });
+              },
+            },
+          },
+        },
       };
     },
   },