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

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

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 && (