import React, { useState, useEffect, useMemo } from 'react'; import { FixedSizeList } from 'react-window'; import { useSpring, animated, config } from 'react-spring'; import classNames from 'classnames'; import CheckVisible from 'components/helpers/CheckVisible'; import Button from 'components/common/Button'; import Arrow from 'assets/arrow-right.svg'; import { get } from 'lib/web'; import { percentFilter } from 'lib/filters'; import styles from './RankingsChart.module.css'; export default function RankingsChart({ title, websiteId, startDate, endDate, type, heading, className, dataFilter, limit, onDataLoad = () => {}, onExpand = () => {}, }) { const [data, setData] = useState(); const rankings = useMemo(() => { if (data) { const items = dataFilter ? dataFilter(data) : data; if (limit) { return items.filter((e, i) => i < limit); } return items; } return []; }, [data]); async function loadData() { const data = await get(`/api/website/${websiteId}/rankings`, { start_at: +startDate, end_at: +endDate, type, }); const updated = percentFilter(data); setData(updated); onDataLoad(updated); } useEffect(() => { if (websiteId) { loadData(); } }, [websiteId, startDate, endDate, type]); if (!data) { return null; } const Row = ({ index, style }) => { const { x, y, z } = rankings[index]; return (
); }; return (
{title}
{heading}
{limit ? ( rankings.map(({ x, y, z }) => ( )) ) : ( {Row} )}
{limit && data.length > limit && ( )}
); } const AnimatedRow = ({ label, value, percent, animate }) => { const props = useSpring({ width: percent, y: value, from: { width: 0, y: 0 }, config: animate ? config.default : { duration: 0 }, }); return (
{label}
{props.y.interpolate(n => n.toFixed(0))}
`${n}%`) }} /> {props.width.interpolate(n => `${n.toFixed(0)}%`)}
); };