import { useEffect, useState } from "react"; import "./styles.css"; type Metric = { day: string; visits: number; conversions: number }; const loadMetrics = () => new Promise((resolve) => window.setTimeout( () => resolve([ { day: "Mon", visits: 120, conversions: 12 }, { day: "Tue", visits: 180, conversions: 27 }, { day: "Wed", visits: 150, conversions: 18 }, { day: "Thu", visits: 240, conversions: 36 }, { day: "Fri", visits: 210, conversions: 25 }, ]), 700 ) ); export default function App() { const [metrics, setMetrics] = useState([]); const [loading, setLoading] = useState(true); const [minimum, setMinimum] = useState(0); useEffect(() => { let active = true; loadMetrics().then((data) => { if (active) { setMetrics(data); setLoading(false); } }); return () => { active = false; }; }, []); const visible = metrics.filter((metric) => metric.visits >= minimum); const visits = visible.reduce((sum, metric) => sum + metric.visits, 0); const conversions = visible.reduce( (sum, metric) => sum + metric.conversions, 0 ); const rate = visits ? ((conversions / visits) * 100).toFixed(1) : "0.0"; if (loading) return (

Loading dashboard…

); return (

Analytics

Weekly overview

Minimum visits

Visits {visits}

Conversions {conversions}

Conversion rate {rate}%

{visible.map((metric) => (

{metric.day}

))} {!visible.length &&

No days match this filter.

}

); }