2023-07-11 10:16:17 +02:00
|
|
|
import { Loading, cloneChildren } from 'react-basics';
|
2020-10-04 07:36:51 +02:00
|
|
|
import ErrorMessage from 'components/common/ErrorMessage';
|
2023-10-05 01:04:10 +02:00
|
|
|
import { formatLongNumber } from 'lib/format';
|
2023-10-03 08:51:26 +02:00
|
|
|
import styles from './MetricsBar.module.css';
|
2023-07-11 10:16:17 +02:00
|
|
|
|
|
|
|
export function MetricsBar({ children, isLoading, isFetched, error }) {
|
2023-10-05 01:04:10 +02:00
|
|
|
const formatFunc = n => (n >= 0 ? formatLongNumber(n) : `-${formatLongNumber(Math.abs(n))}`);
|
2020-07-29 04:04:45 +02:00
|
|
|
|
|
|
|
return (
|
2023-10-05 01:04:10 +02:00
|
|
|
<div className={styles.bar}>
|
2023-02-04 17:59:52 +01:00
|
|
|
{isLoading && !isFetched && <Loading icon="dots" />}
|
2020-10-04 07:36:51 +02:00
|
|
|
{error && <ErrorMessage />}
|
2023-10-03 08:51:26 +02:00
|
|
|
{!isLoading &&
|
|
|
|
!error &&
|
|
|
|
isFetched &&
|
|
|
|
cloneChildren(children, child => {
|
|
|
|
return { format: child.props.format || formatFunc };
|
|
|
|
})}
|
2020-07-29 04:04:45 +02:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2023-04-21 17:00:42 +02:00
|
|
|
|
|
|
|
export default MetricsBar;
|