watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-07 06:07:17 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

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

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

@ -1,6 +1,7 @@
import { FixedSizeList } from 'react-window';
import { useSpring, animated, config } from '@react-spring/web';
import { useSpring, config } from '@react-spring/web';
import classNames from 'classnames';
import { AnimatedDiv } from '@/components/common/AnimatedDiv';
import { Empty } from '@/components/common/Empty';
import { formatLongNumber } from '@/lib/format';
import { useMessages } from '@/components/hooks';
@ -94,14 +95,14 @@ const AnimatedRow = ({ label, value = 0, percent, change, animate, showPercentag
<div className={styles.label}>{label}</div>
<div className={styles.value}>
{change}
<animated.div className={styles.value} title={props?.y as any}>
<AnimatedDiv className={styles.value} title={props?.y as any}>
{props.y?.to(formatLongNumber)}
</animated.div>
</AnimatedDiv>
</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>
<AnimatedDiv className={styles.bar} style={{ width: props.width.to(n => `${n}%`) }} />
<AnimatedDiv>{props.width.to(n => `${n?.toFixed?.(0)}%`)}</AnimatedDiv>
</div>
)}
</div>

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>
);