mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-01 03:27:52 +00:00
# Pull Request Template ## Description The PR will replace the usage of `reportMixin` with the help of `useReportMetrics()` composable. Fixes https://linear.app/chatwoot/issue/CW-3450/rewrite-reportmixin-mixin-to-a-composable **Files updated** 1. dashboard/routes/dashboard/settings/reports/Index.vue 2. dashboard/routes/dashboard/settings/reports/BotReports.vue 3. dashboard/routes/dashboard/settings/reports/ReportContainer.vue 4. dashboard/routes/dashboard/settings/reports/components/WootReports.vue 5. dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue ## Type of change - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? Test the all the reports view. ## 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 - [x] 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
58 lines
1.8 KiB
JavaScript
58 lines
1.8 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') {
|
|
const accountSummary = useMapGetter(accountSummaryKey);
|
|
|
|
/**
|
|
* 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,
|
|
};
|
|
}
|