watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-19 20:15:41 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

formatShortTime

Browse source
This commit is contained in:
Minseo Lee 2024-08-30 10:36:37 +09:00
parent 16f86c7715
commit 8f4a6278c4
3 changed files with 11 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/app/(main)/reports/insights/InsightsTable.tsx
View file

@ -4,12 +4,14 @@ import { useFormat, useMessages } from 'components/hooks';
import { ReportContext } from '../[reportId]/Report'; import { ReportContext } from '../[reportId]/Report';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder'; import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
import { formatShortTime } from 'lib/format'; import { formatShortTime } from 'lib/format';
import { useIntl } from 'react-intl';
export function InsightsTable() { export function InsightsTable() {
const [fields, setFields] = useState([]); const [fields, setFields] = useState([]);
const { report } = useContext(ReportContext); const { report } = useContext(ReportContext);
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const { formatValue } = useFormat(); const { formatValue } = useFormat();
const intl = useIntl();
useEffect( useEffect(
() => { () => {
@ -65,7 +67,7 @@ export function InsightsTable() {
> >
{row => { {row => {
const n = row?.totaltime / row?.visits; const n = row?.totaltime / row?.visits;
return `${+n < 0 ? '-' : ''}${formatShortTime(Math.abs(~~n), ['m', 's'], ' ')}`; return `${+n < 0 ? '-' : ''}${formatShortTime(intl, Math.abs(~~n))}`;
}} }}
</GridColumn> </GridColumn>
</GridTable> </GridTable>

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

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

14
src/lib/format.ts
View file

@ -1,4 +1,4 @@
import type { FormatNumberOptions } from 'react-intl'; import type { FormatNumberOptions, IntlShape } from 'react-intl';
export function parseTime(val: number) { export function parseTime(val: number) {
const days = ~~(val / 86400); const days = ~~(val / 86400);
@ -25,15 +25,15 @@ export function formatTime(val: number) {
return `${h}${m}:${s}`; return `${h}${m}:${s}`;
} }
export function formatShortTime(val: number, formats = ['m', 's'], space = '') { export function formatShortTime(intl: IntlShape, val: number, formats = ['m', 's']) {
const { days, hours, minutes, seconds, ms } = parseTime(val); const { days, hours, minutes, seconds, ms } = parseTime(val);
let t = ''; let t = '';
if (days > 0 && formats.indexOf('d') !== -1) t += `${days}d${space}`; if (days > 0 && formats.indexOf('d') !== -1) t += `${intl.formatNumber(days)}d `;
if (hours > 0 && formats.indexOf('h') !== -1) t += `${hours}h${space}`; if (hours > 0 && formats.indexOf('h') !== -1) t += `${intl.formatNumber(hours)}h `;
if (minutes > 0 && formats.indexOf('m') !== -1) t += `${minutes}m${space}`; if (minutes > 0 && formats.indexOf('m') !== -1) t += `${intl.formatNumber(minutes)}m `;
if (seconds > 0 && formats.indexOf('s') !== -1) t += `${seconds}s${space}`; if (seconds > 0 && formats.indexOf('s') !== -1) t += `${intl.formatNumber(seconds)}s `;
if (ms > 0 && formats.indexOf('ms') !== -1) t += `${ms}ms`; if (ms > 0 && formats.indexOf('ms') !== -1) t += `${intl.formatNumber(ms)}ms`;
if (!t) { if (!t) {
return `0${formats[formats.length - 1]}`; return `0${formats[formats.length - 1]}`;