umami/components/charts/ActiveUsers.js

46 lines
1.1 KiB
JavaScript
Raw Normal View History

2020-08-18 09:51:32 +02:00
import React, { useState, useEffect } from 'react';
import { useSpring, animated } from 'react-spring';
import classNames from 'classnames';
import { get } from 'lib/web';
import styles from './ActiveUsers.module.css';
export default function ActiveUsers({ websiteId, className }) {
const [count, setCount] = useState(0);
async function loadData() {
const result = await get(`/api/website/${websiteId}/active`);
setCount(result?.[0]?.x);
}
const props = useSpring({
x: count,
from: { x: 0 },
});
useEffect(() => {
loadData();
2020-08-18 21:55:15 +02:00
const id = setInterval(() => loadData(), 60000);
2020-08-18 09:51:32 +02:00
return () => {
clearInterval(id);
};
}, []);
if (count === 0) {
return null;
}
return (
<div className={classNames(styles.container, className)}>
<div className={styles.dot} />
<div className={styles.text}>
<animated.div className={styles.value}>
{props.x.interpolate(x => x.toFixed(0))}
</animated.div>
<div>{`current vistor${count !== 1 ? 's' : ''}`}</div>
</div>
</div>
);
}