import React, { useState } from 'react'; 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'; export default function DataTable({ data, title, metric, className, renderLabel, height, animate = true, virtualize = false, }) { 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 }) => { const props = useSpring({ width: percent, y: value, from: { width: 0, y: 0 }, config: animate ? config.default : { duration: 0 }, }); return (
{label}
{props.y?.interpolate(format)}
`${n}%`) }} /> {props.width.interpolate(n => `${n.toFixed(0)}%`)}
); };