umami/components/charts/RankingsChart.js

122 lines
3.1 KiB
JavaScript
Raw Normal View History

2020-08-01 04:05:14 +02:00
import React, { useState, useEffect, useMemo } from 'react';
2020-08-10 00:13:38 +02:00
import { FixedSizeList } from 'react-window';
2020-08-04 03:12:28 +02:00
import { useSpring, animated, config } from 'react-spring';
2020-08-01 04:05:14 +02:00
import classNames from 'classnames';
2020-08-09 12:04:48 +02:00
import CheckVisible from 'components/helpers/CheckVisible';
import Button from 'components/common/Button';
import Arrow from 'assets/arrow-right.svg';
2020-08-01 04:05:14 +02:00
import { get } from 'lib/web';
2020-08-01 12:34:56 +02:00
import { percentFilter } from 'lib/filters';
2020-08-01 04:05:14 +02:00
import styles from './RankingsChart.module.css';
export default function RankingsChart({
title,
websiteId,
startDate,
endDate,
type,
2020-08-01 05:37:29 +02:00
heading,
2020-08-01 04:05:14 +02:00
className,
2020-08-01 05:37:29 +02:00
dataFilter,
2020-08-10 00:13:38 +02:00
limit,
2020-08-01 12:34:56 +02:00
onDataLoad = () => {},
2020-08-09 12:04:48 +02:00
onExpand = () => {},
2020-08-01 04:05:14 +02:00
}) {
const [data, setData] = useState();
2020-08-01 06:56:25 +02:00
const rankings = useMemo(() => {
if (data) {
2020-08-10 00:13:38 +02:00
const items = dataFilter ? dataFilter(data) : data;
if (limit) {
return items.filter((e, i) => i < limit);
}
return items;
2020-08-01 06:56:25 +02:00
}
return [];
}, [data]);
2020-08-01 04:05:14 +02:00
async function loadData() {
2020-08-01 12:34:56 +02:00
const data = await get(`/api/website/${websiteId}/rankings`, {
start_at: +startDate,
end_at: +endDate,
type,
});
const updated = percentFilter(data);
setData(updated);
onDataLoad(updated);
2020-08-01 04:05:14 +02:00
}
useEffect(() => {
if (websiteId) {
loadData();
}
}, [websiteId, startDate, endDate, type]);
if (!data) {
return null;
2020-08-01 04:05:14 +02:00
}
2020-08-10 00:13:38 +02:00
const Row = ({ index, style }) => {
const { x, y, z } = rankings[index];
return (
<div style={style}>
<AnimatedRow key={x} label={x} value={y} percent={z} animate={limit} />
</div>
);
};
2020-08-01 04:05:14 +02:00
return (
2020-08-10 00:13:38 +02:00
<div className={classNames(styles.container, className)}>
<div className={styles.header}>
<div className={styles.title}>{title}</div>
<div className={styles.heading}>{heading}</div>
</div>
<div className={styles.body}>
{limit ? (
rankings.map(({ x, y, z }) => (
<AnimatedRow key={x} label={x} value={y} percent={z} animate={limit} />
))
) : (
<FixedSizeList height={600} itemCount={rankings.length} itemSize={30}>
{Row}
</FixedSizeList>
)}
</div>
<div className={styles.footer}>
{limit && data.length > limit && (
<Button icon={<Arrow />} size="xsmall" onClick={() => onExpand(type)}>
<div>More</div>
</Button>
)}
</div>
</div>
2020-08-01 04:05:14 +02:00
);
}
2020-08-10 00:13:38 +02:00
const AnimatedRow = ({ label, value, percent, animate }) => {
2020-08-04 03:12:28 +02:00
const props = useSpring({
width: percent,
y: value,
from: { width: 0, y: 0 },
config: animate ? config.default : { duration: 0 },
});
2020-08-01 04:05:14 +02:00
return (
<div className={styles.row}>
<div className={styles.label}>{label}</div>
2020-08-02 06:20:52 +02:00
<animated.div className={styles.value}>{props.y.interpolate(n => n.toFixed(0))}</animated.div>
2020-08-01 05:37:29 +02:00
<div className={styles.percent}>
2020-08-04 03:12:28 +02:00
<animated.div
className={styles.bar}
style={{ width: props.width.interpolate(n => `${n}%`) }}
/>
<animated.span className={styles.percentValue}>
{props.width.interpolate(n => `${n.toFixed(0)}%`)}
</animated.span>
2020-08-01 05:37:29 +02:00
</div>
2020-08-01 04:05:14 +02:00
</div>
);
};