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

Added AnimatedDiv component.

Browse source
This commit is contained in:
Mike Cao 2025-02-14 17:16:09 -08:00
parent 2978bf3c6f
commit a8a1ccce18
26 changed files with 83 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,7 @@
import classNames from 'classnames';
import { useSpring, animated } from '@react-spring/web';
import { useSpring } from '@react-spring/web';
import { formatNumber } from '@/lib/format';
import { AnimatedDiv } from '@/components/common/AnimatedDiv';
import { ChangeLabel } from '@/components/metrics/ChangeLabel';
import styles from './MetricCard.module.css';
@ -37,9 +38,9 @@ export const MetricCard = ({
return (
<div className={classNames(styles.card, className, showPrevious && styles.compare)}>
{showLabel && <div className={styles.label}>{label}</div>}
<animated.div className={styles.value} title={value?.toString()}>
<AnimatedDiv className={styles.value} title={value?.toString()}>
{props?.x?.to(x => formatValue(x))}
</animated.div>
</AnimatedDiv>
{showChange && (
<ChangeLabel
className={styles.change}
@ -47,13 +48,13 @@ export const MetricCard = ({
title={formatValue(change)}
reverseColors={reverseColors}
>
<animated.span>{changeProps?.x?.to(x => `${Math.abs(~~x)}%`)}</animated.span>
<AnimatedDiv>{changeProps?.x?.to(x => `${Math.abs(~~x)}%`)}</AnimatedDiv>
</ChangeLabel>
)}
{showPrevious && (
<animated.div className={classNames(styles.value, styles.prev)} title={diff.toString()}>
<AnimatedDiv className={classNames(styles.value, styles.prev)} title={diff.toString()}>
{prevProps?.x?.to(x => formatValue(x))}
</animated.div>
</AnimatedDiv>
)}
</div>
);