mirror of
				https://github.com/lingble/chatwoot.git
				synced 2025-10-31 02:57:57 +00:00 
			
		
		
		
	 1140ca7a78
			
		
	
	1140ca7a78
	
	
	
		
			
			This pull request includes several changes to better show the report metrics fetching status on the dashboard. This also prevents showing stale data in case fetching summary fails due to timeout or other issue The most important changes include adding a new fetching status state to the store called `summaryFetchingStatus`, updating the `useReportMetrics` composable, and modifying the `ChartStats` component to handle different fetching statuses. #### Loading  #### Finished  #### Failed <img width="1512" alt="image" src="https://github.com/user-attachments/assets/d521a785-9299-4e59-94dc-561a7a84377e" /> --------- Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
		
			
				
	
	
		
			63 lines
		
	
	
		
			2.0 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			63 lines
		
	
	
		
			2.0 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| import { useMapGetter } from 'dashboard/composables/store';
 | |
| import { formatTime } from '@chatwoot/utils';
 | |
| 
 | |
| /**
 | |
|  * A composable function for report metrics calculations and display.
 | |
|  *
 | |
|  * @param {string} [accountSummaryKey='getAccountSummary'] - The key for accessing account summary data.
 | |
|  * @returns {Object} An object containing utility functions for report metrics.
 | |
|  */
 | |
| export function useReportMetrics(
 | |
|   accountSummaryKey = 'getAccountSummary',
 | |
|   summarFetchingKey = 'getAccountSummaryFetchingStatus'
 | |
| ) {
 | |
|   const accountSummary = useMapGetter(accountSummaryKey);
 | |
|   const fetchingStatus = useMapGetter(summarFetchingKey);
 | |
| 
 | |
|   /**
 | |
|    * Calculates the trend percentage for a given metric.
 | |
|    *
 | |
|    * @param {string} key - The key of the metric to calculate trend for.
 | |
|    * @returns {number} The calculated trend percentage, rounded to the nearest integer.
 | |
|    */
 | |
|   const calculateTrend = key => {
 | |
|     if (!accountSummary.value.previous[key]) return 0;
 | |
|     const diff = accountSummary.value[key] - accountSummary.value.previous[key];
 | |
|     return Math.round((diff / accountSummary.value.previous[key]) * 100);
 | |
|   };
 | |
| 
 | |
|   /**
 | |
|    * Checks if a given metric key represents an average metric type.
 | |
|    *
 | |
|    * @param {string} key - The key of the metric to check.
 | |
|    * @returns {boolean} True if the metric is an average type, false otherwise.
 | |
|    */
 | |
|   const isAverageMetricType = key => {
 | |
|     return [
 | |
|       'avg_first_response_time',
 | |
|       'avg_resolution_time',
 | |
|       'reply_time',
 | |
|     ].includes(key);
 | |
|   };
 | |
| 
 | |
|   /**
 | |
|    * Formats and displays a metric value based on its type.
 | |
|    *
 | |
|    * @param {string} key - The key of the metric to display.
 | |
|    * @returns {string} The formatted metric value as a string.
 | |
|    */
 | |
|   const displayMetric = key => {
 | |
|     if (isAverageMetricType(key)) {
 | |
|       return formatTime(accountSummary.value[key]);
 | |
|     }
 | |
|     return Number(accountSummary.value[key] || '').toLocaleString();
 | |
|   };
 | |
| 
 | |
|   return {
 | |
|     calculateTrend,
 | |
|     isAverageMetricType,
 | |
|     displayMetric,
 | |
|     fetchingStatus,
 | |
|   };
 | |
| }
 |