github/umami
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Sticky metrics header. CSS updates.

Browse Source
This commit is contained in:
Mike Cao
2020-08-01 21:20:52 -07:00
parent a65f637df2
commit 9c5762b8a2
16 changed files with 193 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/RankingsChart.js
View File

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