umami/components/metrics/ActiveUsers.js

34 lines
923 B
JavaScript
Raw Normal View History

import React, { useMemo } from 'react';
2020-08-18 09:51:32 +02:00
import { useSpring, animated } from 'react-spring';
import classNames from 'classnames';
import useFetch from 'hooks/useFetch';
2020-08-18 09:51:32 +02:00
import styles from './ActiveUsers.module.css';
export default function ActiveUsers({ websiteId, className }) {
const { data } = useFetch(`/api/website/${websiteId}/active`, {}, { interval: 60000 });
const count = useMemo(() => {
return data?.[0]?.x || 0;
}, [data]);
2020-08-18 09:51:32 +02:00
const props = useSpring({
x: count,
from: { x: 0 },
});
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>
2020-08-22 09:34:56 +02:00
<div>{`current visitor${count !== 1 ? 's' : ''}`}</div>
2020-08-18 09:51:32 +02:00
</div>
</div>
);
}