import styled, { css, useTheme } from "styled-components"; import { LineChart, Line, XAxis, YAxis, ResponsiveContainer, ReferenceLine, } from "recharts"; import ChartLegend from "./ChartLegend"; const Chart = styled.div` ${({ theme }) => css` background: white; border-radius: 0.5em; padding: 2.5em 2em; .head { text-align: center; color: ${theme.dark}; font-family: ${theme.fontFancy}; font-size: 2.1em; text-transform: uppercase; margin-bottom: 1.2em; line-height: 1.1; } .chart-wrap { height: 25em; padding-bottom: 20px; } `} `; const TotalChart = ({ summary }: { summary: any }) => { const theme = useTheme(); return ( <Chart> <div className="head">Total cases</div> <div className="chart-wrap"> <ResponsiveContainer> <LineChart data={summary} margin={{ left: -30, right: 10, bottom: 20 }} > <XAxis dataKey="date" label={{ fill: theme.navy, fontSize: 12, value: "Days since first case detected", position: "bottom", }} tickFormatter={(tick) => summary.findIndex((x: any) => x.date === tick) } /> <YAxis /> <Line type="monotone" dataKey="recoveredTotal" stroke={theme.green} strokeWidth={4} dot={false} /> <Line type="monotone" dataKey="combinedTotal" stroke={theme.teal} strokeWidth={4} dot={false} /> {/* <Line type="monotone" dataKey="deathsTotal" stroke="red" strokeWidth={2} dot={false} /> */} <ReferenceLine x="2020-03-25T00:00:00.000Z" stroke="#025064" /> </LineChart> </ResponsiveContainer> <ChartLegend items={[ { title: "Total", color: theme.teal }, { title: "Recovered", color: theme.green }, // { title: "Lv4 lockdown", color: theme.navy }, ]} /> </div> </Chart> ); }; export default TotalChart;