Copy the Chatwoot (v4.14.0) frontend runnable subset into frontend/ for customization: - app/javascript/ (Vue SPA: dashboard, widget, sdk, portal, superadmin) - app/views/ (ERB templates for vite-plugin-ruby entrypoint resolution) - app/helpers/, app/assets/ (Rails view helpers, static assets) - enterprise/ (Enterprise edition frontend overlay) - config/vite.json, vite.config.ts, bin/vite (Vite-Rails toolchain) - package.json, pnpm-lock.yaml, tailwind/postcss/eslint configs - Gemfile, Gemfile.lock (vite_rails gem for bin/vite binstub) Excluded Rails backend: controllers, models, services, jobs, mailers, policies, db, lib, spec, public, node_modules. Update references to the new frontend location: - .gitignore: exclude frontend build artifacts (node_modules, tmp, packs), keep frontend/bin/ and frontend/vendor/ via negation - backend/scripts/parity_frontend_smoke.sh: CHATWOOT_DIR default reference/chatwoot -> ../frontend - backend/scripts/parity_frontend_browser_smoke.mjs: same default update - AGENTS.md: add frontend section with Rails/Vite coupling notes - README: architecture tree includes frontend/
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,
|
|
};
|
|
}
|