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

Update rankings view.

Browse source
This commit is contained in:
Mike Cao 2020-07-31 20:37:29 -07:00
parent ac2612924e
commit 65d44ff6a1
5 changed files with 94 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

17
components/RankingsChart.js
View file

@ -10,12 +10,13 @@ export default function RankingsChart({
startDate,
endDate,
type,
heading,
className,
filterData,
dataFilter,
}) {
const [data, setData] = useState();
const rankings = useMemo(() => (data && filterData ? filterData(data) : data), [data]);
const rankings = useMemo(() => (data && dataFilter ? dataFilter(data) : data), [data]);
const total = useMemo(() => rankings?.reduce((n, { y }) => n + y, 0) || 0, [rankings]);
@ -41,14 +42,17 @@ export default function RankingsChart({
return (
<div className={classNames(styles.container, className)}>
<div className={styles.title}>{title}</div>
<div className={styles.header}>
<div className={styles.title}>{title}</div>
<div className={styles.heading}>{heading}</div>
</div>
{rankings.map(({ x, y }, i) => (i <= 10 ? <Row label={x} value={y} total={total} /> : null))}
</div>
);
}
const Row = ({ label, value, total }) => {
const props = useSpring({ width: `${(value / total) * 100}%`, from: { width: '0%' } });
const props = useSpring({ width: (value / total) * 100, from: { width: 0 } });
const valueProps = useSpring({ y: value, from: { y: 0 } });
return (
@ -57,7 +61,10 @@ const Row = ({ label, value, total }) => {
<animated.div className={styles.value}>
{valueProps.y.interpolate(y => y.toFixed(0))}
</animated.div>
<animated.div className={styles.bar} style={{ ...props }} />
<div className={styles.percent}>
<animated.div>{props.width.interpolate(y => `${y.toFixed(0)}%`)}</animated.div>
<animated.div className={styles.bar} style={{ ...props }} />
</div>
</div>
);
};