2020-10-10 09:07:08 +02:00
|
|
|
import { FixedSizeList } from 'react-window';
|
2023-10-12 09:03:10 +02:00
|
|
|
import { useSpring, animated, config } from '@react-spring/web';
|
2020-10-10 09:07:08 +02:00
|
|
|
import classNames from 'classnames';
|
2023-07-02 07:02:49 +02:00
|
|
|
import Empty from 'components/common/Empty';
|
2023-10-05 01:04:10 +02:00
|
|
|
import { formatLongNumber } from 'lib/format';
|
2023-08-21 11:06:09 +02:00
|
|
|
import useMessages from 'components/hooks/useMessages';
|
2023-08-25 20:54:44 +02:00
|
|
|
import styles from './ListTable.module.css';
|
2020-10-10 09:07:08 +02:00
|
|
|
|
2023-10-15 22:12:29 +02:00
|
|
|
const ITEM_SIZE = 30;
|
|
|
|
|
2023-08-26 21:46:27 +02:00
|
|
|
export function ListTable({
|
2023-02-15 11:27:18 +01:00
|
|
|
data = [],
|
2020-10-10 09:07:08 +02:00
|
|
|
title,
|
|
|
|
metric,
|
|
|
|
className,
|
|
|
|
renderLabel,
|
|
|
|
animate = true,
|
2020-10-11 10:33:26 +02:00
|
|
|
virtualize = false,
|
2022-10-22 06:33:23 +02:00
|
|
|
showPercentage = true,
|
2023-10-15 22:12:29 +02:00
|
|
|
itemCount = 10,
|
2020-10-10 09:07:08 +02:00
|
|
|
}) {
|
2023-04-08 07:03:52 +02:00
|
|
|
const { formatMessage, labels } = useMessages();
|
2020-10-10 09:07:08 +02:00
|
|
|
|
|
|
|
const getRow = row => {
|
|
|
|
const { x: label, y: value, z: percent } = row;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<AnimatedRow
|
|
|
|
key={label}
|
2023-04-08 07:03:52 +02:00
|
|
|
label={renderLabel ? renderLabel(row) : label ?? formatMessage(labels.unknown)}
|
2020-10-10 09:07:08 +02:00
|
|
|
value={value}
|
|
|
|
percent={percent}
|
2020-10-11 10:33:26 +02:00
|
|
|
animate={animate && !virtualize}
|
2022-10-22 06:33:23 +02:00
|
|
|
showPercentage={showPercentage}
|
2020-10-10 09:07:08 +02:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const Row = ({ index, style }) => {
|
|
|
|
return <div style={style}>{getRow(data[index])}</div>;
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={classNames(styles.table, className)}>
|
|
|
|
<div className={styles.header}>
|
|
|
|
<div className={styles.title}>{title}</div>
|
2023-10-05 01:04:10 +02:00
|
|
|
<div className={styles.metric}>{metric}</div>
|
2020-10-10 09:07:08 +02:00
|
|
|
</div>
|
2023-10-15 22:12:29 +02:00
|
|
|
<div className={styles.body}>
|
2023-10-17 06:55:59 +02:00
|
|
|
{data?.length === 0 && <Empty className={styles.empty} />}
|
2020-10-11 10:33:26 +02:00
|
|
|
{virtualize && data.length > 0 ? (
|
2023-10-15 22:12:29 +02:00
|
|
|
<FixedSizeList
|
|
|
|
height={itemCount * ITEM_SIZE}
|
|
|
|
itemCount={data.length}
|
|
|
|
itemSize={ITEM_SIZE}
|
|
|
|
>
|
2020-10-11 10:33:26 +02:00
|
|
|
{Row}
|
|
|
|
</FixedSizeList>
|
|
|
|
) : (
|
|
|
|
data.map(row => getRow(row))
|
|
|
|
)}
|
2020-10-10 09:07:08 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2023-10-05 01:04:10 +02:00
|
|
|
const AnimatedRow = ({ label, value = 0, percent, animate, showPercentage = true }) => {
|
2020-10-10 09:07:08 +02:00
|
|
|
const props = useSpring({
|
|
|
|
width: percent,
|
|
|
|
y: value,
|
|
|
|
from: { width: 0, y: 0 },
|
|
|
|
config: animate ? config.default : { duration: 0 },
|
|
|
|
});
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={styles.row}>
|
|
|
|
<div className={styles.label}>{label}</div>
|
2023-10-05 01:04:10 +02:00
|
|
|
<div className={styles.value}>
|
|
|
|
<animated.div className={styles.value} title={props?.y}>
|
|
|
|
{props.y?.to(formatLongNumber)}
|
|
|
|
</animated.div>
|
2020-10-10 09:07:08 +02:00
|
|
|
</div>
|
2022-10-22 06:33:23 +02:00
|
|
|
{showPercentage && (
|
|
|
|
<div className={styles.percent}>
|
2023-03-10 00:18:54 +01:00
|
|
|
<animated.div className={styles.bar} style={{ width: props.width.to(n => `${n}%`) }} />
|
2022-10-22 06:33:23 +02:00
|
|
|
<animated.span className={styles.percentValue}>
|
2023-08-26 21:46:27 +02:00
|
|
|
{props.width.to(n => `${n?.toFixed?.(0)}%`)}
|
2022-10-22 06:33:23 +02:00
|
|
|
</animated.span>
|
|
|
|
</div>
|
|
|
|
)}
|
2020-10-10 09:07:08 +02:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
2023-04-21 17:00:42 +02:00
|
|
|
|
2023-08-26 21:46:27 +02:00
|
|
|
export default ListTable;
|