import React, { useState, useMemo } from 'react'; import { FixedSizeList } from 'react-window'; import { useSpring, animated, config } from 'react-spring'; import classNames from 'classnames'; import Button from 'components/common/Button'; import Loading from 'components/common/Loading'; import useFetch from 'hooks/useFetch'; import Arrow from 'assets/arrow-right.svg'; import { percentFilter } from 'lib/filters'; import { formatNumber, formatLongNumber } from 'lib/format'; import { useDateRange } from 'hooks/useDateRange'; import styles from './MetricsTable.module.css'; export default function MetricsTable({ websiteId, websiteDomain, title, metric, type, className, dataFilter, filterOptions, limit, headerComponent, renderLabel, onDataLoad = () => {}, onExpand = () => {}, }) { const dateRange = useDateRange(websiteId); const { startDate, endDate, modified } = dateRange; const { data } = useFetch( `/api/website/${websiteId}/rankings`, { type, start_at: +startDate, end_at: +endDate, domain: websiteDomain, }, { onDataLoad, delay: 300, update: [modified] }, ); const [format, setFormat] = useState(true); const formatFunc = format ? formatLongNumber : formatNumber; const shouldAnimate = limit > 0; const rankings = useMemo(() => { if (data) { const items = percentFilter(dataFilter ? dataFilter(data, filterOptions) : data); if (limit) { return items.filter((e, i) => i < limit); } return items; } return []; }, [data, dataFilter, filterOptions]); const handleSetFormat = () => setFormat(state => !state); const getRow = row => { const { x: label, y: value, z: percent } = row; return ( ); }; const Row = ({ index, style }) => { return
{getRow(rankings[index])}
; }; return (
{data ? ( <>
{title}
{headerComponent}
{metric}
{limit ? rankings.map(row => getRow(row)) : data?.length > 0 && ( {Row} )}
{limit && data.length > limit && ( )}
) : ( )}
); } 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)}%`)}
); };