formatShortTime

src/app/(main)/reports/insights/InsightsTable.tsx

@@ -67,7 +67,11 @@ export function InsightsTable() {
       >
         {row => {
           const n = row?.totaltime / row?.visits;
-          return `${+n < 0 ? '-' : ''}${formatShortTime(intl, Math.abs(~~n))}`;
+          return `${+n < 0 ? '-' : ''}${formatShortTime(
+            intl,
+            { formatMessage, labels },
+            Math.abs(~~n),
+          )}`;
         }}
       </GridColumn>
     </GridTable>

src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx

@@ -72,7 +72,12 @@ export function WebsiteMetricsBar({
           value: totaltime.value / visits.value,
           prev: totaltime.prev / visits.prev,
           change: totaltime.value / visits.value - totaltime.prev / visits.prev,
-          formatValue: (n: number) => `${+n < 0 ? '-' : ''}${formatShortTime(intl, Math.abs(~~n))}`,
+          formatValue: (n: number) =>
+            `${+n < 0 ? '-' : ''}${formatShortTime(
+              intl,
+              { formatMessage, labels },
+              Math.abs(~~n),
+            )}`,
         },
       ]
     : [];

src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionStats.tsx

@@ -28,7 +28,9 @@ export function SessionStats({ data }) {
       <MetricCard
         label={formatMessage(labels.visitDuration)}
         value={data?.totaltime / data?.visits}
-        formatValue={n => `${+n < 0 ? '-' : ''}${formatShortTime(intl, Math.abs(~~n))}`}
+        formatValue={n =>
+          `${+n < 0 ? '-' : ''}${formatShortTime(intl, { formatMessage, labels }, Math.abs(~~n))}`
+        }
       />
     </MetricsBar>
   );

src/components/messages.ts

@@ -278,6 +278,11 @@ export const labels = defineMessages({
   lastSeen: { id: 'label.last-seen', defaultMessage: 'Last seen' },
   firstSeen: { id: 'label.first-seen', defaultMessage: 'First seen' },
   properties: { id: 'label.properties', defaultMessage: 'Properties' },
+  days: { id: 'label.days', defaultMessage: '{x}d' },
+  hours: { id: 'label.hours', defaultMessage: '{x}h' },
+  minutes: { id: 'label.minutes', defaultMessage: '{x}m' },
+  seconds: { id: 'label.seconds', defaultMessage: '{x}s' },
+  milliseconds: { id: 'label.milliseconds', defaultMessage: '{x}ms' },
 });
 
 export const messages = defineMessages({

src/lib/format.ts

@@ -25,15 +25,26 @@ export function formatTime(val: number) {
   return `${h}${m}:${s}`;
 }
 
-export function formatShortTime(intl: IntlShape, val: number, formats = ['m', 's']) {
+export function formatShortTime(
+  intl: IntlShape,
+  useMessages: any,
+  val: number,
+  formats = ['m', 's'],
+) {
+  const { formatMessage, labels } = useMessages;
   const { days, hours, minutes, seconds, ms } = parseTime(val);
   let t = '';
 
-  if (days > 0 && formats.indexOf('d') !== -1) t += `${intl.formatNumber(days)}d `;
+  if (days > 0 && formats.indexOf('d') !== -1)
-  if (hours > 0 && formats.indexOf('h') !== -1) t += `${intl.formatNumber(hours)}h `;
+    t += `${formatMessage(labels.days, { x: intl.formatNumber(days) })} `;
-  if (minutes > 0 && formats.indexOf('m') !== -1) t += `${intl.formatNumber(minutes)}m `;
+  if (hours > 0 && formats.indexOf('h') !== -1)
-  if (seconds > 0 && formats.indexOf('s') !== -1) t += `${intl.formatNumber(seconds)}s `;
+    t += `${formatMessage(labels.hours, { x: intl.formatNumber(hours) })} `;
-  if (ms > 0 && formats.indexOf('ms') !== -1) t += `${intl.formatNumber(ms)}ms`;
+  if (minutes > 0 && formats.indexOf('m') !== -1)
+    t += `${formatMessage(labels.minutes, { x: intl.formatNumber(minutes) })} `;
+  if (seconds > 0 && formats.indexOf('s') !== -1)
+    t += `${formatMessage(labels.seconds, { x: intl.formatNumber(seconds) })} `;
+  if (ms > 0 && formats.indexOf('ms') !== -1)
+    t += formatMessage(labels.milliseconds, { x: intl.formatNumber(ms) });
 
   if (!t) {
     return `0${formats[formats.length - 1]}`;