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

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