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

percent

Browse source
This commit is contained in:
Minseo Lee 2024-08-29 22:01:01 +09:00
parent 2660c44a6a
commit dfb45a0795
2 changed files with 6 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -38,7 +38,6 @@ export function WebsiteMetricsBar({
const { pageviews, visitors, visits, bounces, totaltime } = data || {};
const optionsNumber: FormatNumberOptions = { notation: 'compact', maximumSignificantDigits: 3 };
const optionsSmallNumber: FormatNumberOptions = { notation: 'compact' };
const optionsPercent: FormatNumberOptions = { style: 'percent' };
const metrics = data
? [
@ -70,7 +69,7 @@ export function WebsiteMetricsBar({
change:
(Math.min(visits.value, bounces.value) / visits.value) * 100 -
(Math.min(visits.prev, bounces.prev) / visits.prev) * 100,
formatValue: (n: number) => intl.formatNumber(+n / 100, optionsPercent),
formatValue: (n: number) => intl.formatNumber(+n / 100, { style: 'percent' }),
reverseColors: true,
},
{

6
src/components/metrics/MetricCard.tsx
View file

@ -3,6 +3,7 @@ import { useSpring, animated } from '@react-spring/web';
import { formatNumber } from 'lib/format';
import ChangeLabel from 'components/metrics/ChangeLabel';
import styles from './MetricCard.module.css';
import { useIntl } from 'react-intl';
export interface MetricCardProps {
value: number;
@ -33,6 +34,7 @@ export const MetricCard = ({
const props = useSpring({ x: Number(value) || 0, from: { x: 0 } });
const changeProps = useSpring({ x: Number(pct) || 0, from: { x: 0 } });
const prevProps = useSpring({ x: Number(diff) || 0, from: { x: 0 } });
const intl = useIntl();
return (
<div className={classNames(styles.card, className, showPrevious && styles.compare)}>
@ -47,7 +49,9 @@ export const MetricCard = ({
title={formatValue(change)}
reverseColors={reverseColors}
>
<animated.span>{changeProps?.x?.to(x => `${Math.abs(~~x)}%`)}</animated.span>
<animated.span>
{changeProps?.x?.to(x => intl.formatNumber(Math.abs(~~x) / 100, { style: 'percent' }))}
</animated.span>
</ChangeLabel>
)}
{showPrevious && (