mirror of
https://github.com/umami-software/umami.git
synced 2026-02-14 09:35:36 +01:00
Sticky metrics header. CSS updates.
This commit is contained in:
parent
a65f637df2
commit
9c5762b8a2
16 changed files with 193 additions and 104 deletions
|
|
@ -62,18 +62,15 @@ export default function RankingsChart({
|
|||
}
|
||||
|
||||
const Row = ({ label, value, percent }) => {
|
||||
const props = useSpring({ width: percent, from: { width: 0 } });
|
||||
const valueProps = useSpring({ y: value, from: { y: 0 } });
|
||||
const props = useSpring({ width: percent, y: value, from: { width: 0, y: 0 } });
|
||||
|
||||
return (
|
||||
<div className={styles.row}>
|
||||
<div className={styles.label}>{label}</div>
|
||||
<animated.div className={styles.value}>
|
||||
{valueProps.y.interpolate(n => n.toFixed(0))}
|
||||
</animated.div>
|
||||
<animated.div className={styles.value}>{props.y.interpolate(n => n.toFixed(0))}</animated.div>
|
||||
<div className={styles.percent}>
|
||||
<animated.div>{props.width.interpolate(n => `${n.toFixed(0)}%`)}</animated.div>
|
||||
<animated.div className={styles.bar} style={{ ...props }} />
|
||||
<animated.div className={styles.bar} style={{ width: props.width }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue