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

Update ListTable.tsx

Browse source
This commit is contained in:
Minseo Lee 2024-08-30 00:13:45 +09:00
parent a6301e1492
commit bb4862a6f7
1 changed files with 7 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/metrics/ListTable.tsx
View file

@ -2,7 +2,8 @@ import { FixedSizeList } from 'react-window';
import { useSpring, animated, config } from '@react-spring/web';
import classNames from 'classnames';
import Empty from 'components/common/Empty';
import { formatLongNumber } from 'lib/format';
import { formatLongNumberOptions } from 'lib/format';
import { useIntl } from 'react-intl';
import { useMessages } from 'components/hooks';
import styles from './ListTable.module.css';
import { ReactNode } from 'react';
@ -82,6 +83,7 @@ export function ListTable({
}
const AnimatedRow = ({ label, value = 0, percent, change, animate, showPercentage = true }) => {
const intl = useIntl();
const props = useSpring({
width: percent,
y: value,
@ -95,13 +97,15 @@ const AnimatedRow = ({ label, value = 0, percent, change, animate, showPercentag
<div className={styles.value}>
{change}
<animated.div className={styles.value} title={props?.y as any}>
{props.y?.to(formatLongNumber)}
{props.y?.to((n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n)))}
</animated.div>
</div>
{showPercentage && (
<div className={styles.percent}>
<animated.div className={styles.bar} style={{ width: props.width.to(n => `${n}%`) }} />
<animated.span>{props.width.to(n => `${n?.toFixed?.(0)}%`)}</animated.span>
<animated.span>
{props.width.to(n => intl.formatNumber(+n / 100, { style: 'percent' }))}
</animated.span>
</div>
)}
</div>