import { useState } from 'react'; import useMeasure from 'react-use-measure'; import { FixedSizeList } from 'react-window'; import { useSpring, animated, config } from 'react-spring'; import classNames from 'classnames'; import NoData from 'components/common/NoData'; import { formatNumber, formatLongNumber } from 'lib/format'; import styles from './DataTable.module.css'; import useMessages from '../../hooks/useMessages'; export function DataTable({ data = [], title, metric, className, renderLabel, animate = true, virtualize = false, showPercentage = true, }) { const { formatMessage, labels } = useMessages(); const [ref, bounds] = useMeasure(); const [format, setFormat] = useState(true); const formatFunc = format ? formatLongNumber : formatNumber; const handleSetFormat = () => setFormat(state => !state); const getRow = row => { const { x: label, y: value, z: percent } = row; return ( ); }; const Row = ({ index, style }) => { return
{getRow(data[index])}
; }; return (
{title}
{metric}
{data?.length === 0 && } {virtualize && data.length > 0 ? ( {Row} ) : ( data.map(row => getRow(row)) )}
); } const AnimatedRow = ({ label, value = 0, percent, animate, format, onClick, showPercentage = true, }) => { const props = useSpring({ width: percent, y: value, from: { width: 0, y: 0 }, config: animate ? config.default : { duration: 0 }, }); return (
{label}
{props.y?.to(format)}
{showPercentage && (
`${n}%`) }} /> {props.width.to(n => `${n.toFixed(0)}%`)}
)}
); }; export default DataTable;