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

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 => {
+      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 {
+        ...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(tooltipItem.yLabel),
-              conversationCount:
-                this.accountReport.data[metric.KEY][tooltipItem.index].count,
+                  metricValue: formatTime(value),
+                  conversationCount: count,
                 });
               },
-        };
-      }
-      return {
-        scales: METRIC_CHART[metric.KEY].scales,
-        tooltips: tooltips,
+            },
+          },
+        },
       };
     },
   },