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

formatLongNumberOptions

Browse source
This commit is contained in:
Minseo Lee 2024-08-29 23:15:14 +09:00
parent 7676a69190
commit b60bd074f4
5 changed files with 36 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,13 +3,13 @@ import { useDateRange, useMessages, useSticky } from 'components/hooks';
import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
import MetricCard from 'components/metrics/MetricCard';
import MetricsBar from 'components/metrics/MetricsBar';
import { formatShortTime } from 'lib/format';
import { formatLongNumberOptions, formatShortTime } from 'lib/format';
import WebsiteFilterButton from './WebsiteFilterButton';
import useWebsiteStats from 'components/hooks/queries/useWebsiteStats';
import styles from './WebsiteMetricsBar.module.css';
import { Dropdown, Item } from 'react-basics';
import useStore, { setWebsiteDateCompare } from 'store/websites';
import { type FormatNumberOptions, useIntl } from 'react-intl';
import { useIntl } from 'react-intl';
export function WebsiteMetricsBar({
websiteId,
@ -36,8 +36,6 @@ export function WebsiteMetricsBar({
const intl = useIntl();
const { pageviews, visitors, visits, bounces, totaltime } = data || {};
const optionsNumber: FormatNumberOptions = { notation: 'compact', maximumSignificantDigits: 3 };
const optionsSmallNumber: FormatNumberOptions = { notation: 'compact' };
const metrics = data
? [
@ -45,22 +43,19 @@ export function WebsiteMetricsBar({
...pageviews,
label: formatMessage(labels.views),
change: pageviews.value - pageviews.prev,
formatValue: (n: number) =>
intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber),
formatValue: (n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n)),
},
{
...visits,
label: formatMessage(labels.visits),
change: visits.value - visits.prev,
formatValue: (n: number) =>
intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber),
formatValue: (n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n)),
},
{
...visitors,
label: formatMessage(labels.visitors),
change: visitors.value - visitors.prev,
formatValue: (n: number) =>
intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber),
formatValue: (n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n)),
},
{
label: formatMessage(labels.bounceRate),

22
src/app/(main)/websites/[websiteId]/realtime/RealtimeHeader.tsx
View file

@ -2,16 +2,14 @@ import MetricCard from 'components/metrics/MetricCard';
import { useMessages } from 'components/hooks';
import { RealtimeData } from 'lib/types';
import styles from './RealtimeHeader.module.css';
import { type FormatNumberOptions, useIntl } from 'react-intl';
import { useIntl } from 'react-intl';
import { formatLongNumberOptions } from 'lib/format';
export function RealtimeHeader({ data }: { data: RealtimeData }) {
const { formatMessage, labels } = useMessages();
const { totals }: any = data || {};
const intl = useIntl();
const optionsNumber: FormatNumberOptions = { notation: 'compact', maximumSignificantDigits: 3 };
const optionsSmallNumber: FormatNumberOptions = { notation: 'compact' };
return (
<div className={styles.header}>
<div className={styles.metrics}>
@ -19,33 +17,25 @@ export function RealtimeHeader({ data }: { data: RealtimeData }) {
className={styles.card}
label={formatMessage(labels.views)}
value={totals.views}
formatValue={(n: number) =>
intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
/>
<MetricCard
className={styles.card}
label={formatMessage(labels.visitors)}
value={totals.visitors}
formatValue={(n: number) =>
intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
/>
<MetricCard
className={styles.card}
label={formatMessage(labels.events)}
value={totals.events}
formatValue={(n: number) =>
intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
/>
<MetricCard
className={styles.card}
label={formatMessage(labels.countries)}
value={totals.countries}
formatValue={(n: number) =>
intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
/>
</div>
</div>

22
src/app/(main)/websites/[websiteId]/sessions/SessionsMetricsBar.tsx
View file

@ -3,47 +3,37 @@ import useWebsiteSessionStats from 'components/hooks/queries/useWebsiteSessionSt
import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
import MetricCard from 'components/metrics/MetricCard';
import MetricsBar from 'components/metrics/MetricsBar';
import { formatLongNumberOptions } from 'lib/format';
import { Flexbox } from 'react-basics';
import { type FormatNumberOptions, useIntl } from 'react-intl';
import { useIntl } from 'react-intl';
export function SessionsMetricsBar({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();
const { data, isLoading, isFetched, error } = useWebsiteSessionStats(websiteId);
const intl = useIntl();
const optionsNumber: FormatNumberOptions = { notation: 'compact', maximumSignificantDigits: 3 };
const optionsSmallNumber: FormatNumberOptions = { notation: 'compact' };
return (
<Flexbox direction="row" justifyContent="space-between" style={{ minHeight: 120 }}>
<MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
<MetricCard
value={data?.visitors?.value}
label={formatMessage(labels.visitors)}
formatValue={(n: number) =>
intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
/>
<MetricCard
value={data?.visits?.value}
label={formatMessage(labels.visits)}
formatValue={(n: number) =>
intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
/>
<MetricCard
value={data?.pageviews?.value}
label={formatMessage(labels.views)}
formatValue={(n: number) =>
intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
/>
<MetricCard
value={data?.countries?.value}
label={formatMessage(labels.countries)}
formatValue={(n: number) =>
intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
/>
</MetricsBar>
<WebsiteDateFilter websiteId={websiteId} />

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

@ -1,38 +1,29 @@
import { useMessages } from 'components/hooks';
import MetricCard from 'components/metrics/MetricCard';
import MetricsBar from 'components/metrics/MetricsBar';
import { formatShortTime } from 'lib/format';
import { type FormatNumberOptions, useIntl } from 'react-intl';
import { formatLongNumberOptions, formatShortTime } from 'lib/format';
import { useIntl } from 'react-intl';
export function SessionStats({ data }) {
const { formatMessage, labels } = useMessages();
const intl = useIntl();
const optionsNumber: FormatNumberOptions = { notation: 'compact', maximumSignificantDigits: 3 };
const optionsSmallNumber: FormatNumberOptions = { notation: 'compact' };
return (
<MetricsBar isFetched={true}>
<MetricCard
label={formatMessage(labels.visits)}
value={data?.visits}
formatValue={(n: number) =>
intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
/>
<MetricCard
label={formatMessage(labels.views)}
value={data?.views}
formatValue={(n: number) =>
intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
/>
<MetricCard
label={formatMessage(labels.events)}
value={data?.events}
formatValue={(n: number) =>
intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
/>
<MetricCard
label={formatMessage(labels.visitDuration)}

14
src/lib/format.ts
View file

@ -1,3 +1,5 @@
import type { FormatNumberOptions } from 'react-intl';
export function parseTime(val: number) {
const days = ~~(val / 86400);
const hours = ~~(val / 3600) - days * 24;
@ -63,6 +65,18 @@ export function formatLongNumber(value: number) {
return formatNumber(n);
}
export function formatLongNumberOptions(value: number): FormatNumberOptions {
return value < 100
? {
notation: 'compact',
maximumFractionDigits: 0,
}
: {
notation: 'compact',
maximumSignificantDigits: 3,
};
}
export function stringToColor(str: string) {
if (!str) {
return '#ffffff';