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

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

3
src/components/common/AnimatedDiv.tsx Normal file
View file

@ -0,0 +1,3 @@
import { animated, AnimatedComponent } from '@react-spring/web';
export const AnimatedDiv: AnimatedComponent<any> = animated.div;

2
src/components/input/LanguageButton.tsx
View file

@ -26,7 +26,7 @@ export function LanguageButton() {
<Button key={value} variant="quiet" onPress={() => handleSelect(value)}>
<Text
weight={value === locale ? 'bold' : 'normal'}
color={value === locale ? 'primary' : 'muted'}
color={value === locale ? undefined : 'muted'}
>
{label}
</Text>

2
src/components/layout/Page.module.css
View file

@ -7,6 +7,4 @@
max-width: 1320px;
margin: 0 auto;
padding: 0 20px;
min-height: calc(100vh - 60px);
min-height: calc(100dvh - 60px);
}

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