erdar2
4 years ago
10 changed files with 471 additions and 104 deletions
@ -0,0 +1,45 @@ |
|||||
|
import React from "react"; |
||||
|
import { |
||||
|
ResponsiveContainer, |
||||
|
AreaChart as AC, |
||||
|
CartesianGrid, |
||||
|
XAxis, |
||||
|
YAxis, |
||||
|
Tooltip, |
||||
|
Legend, |
||||
|
Area, |
||||
|
} from "recharts"; |
||||
|
import { ChartProps } from "../types"; |
||||
|
|
||||
|
export default function AreaChart(props: ChartProps) { |
||||
|
return ( |
||||
|
<ResponsiveContainer height={300}> |
||||
|
<AC |
||||
|
width={600} |
||||
|
height={300} |
||||
|
data={props.data.map((d) => { |
||||
|
return { |
||||
|
name: d.name, |
||||
|
...d.values, |
||||
|
}; |
||||
|
})} |
||||
|
> |
||||
|
{Object.keys(props.data[0].values).map((k, i) => ( |
||||
|
<Area |
||||
|
type="monotone" |
||||
|
key={i} |
||||
|
dataKey={k} |
||||
|
stroke="#8884d8" |
||||
|
fill="#8884d8" |
||||
|
name={k} |
||||
|
/> |
||||
|
))} |
||||
|
<CartesianGrid stroke="#ccc" /> |
||||
|
<XAxis dataKey="name" /> |
||||
|
<YAxis scale={props.scale ?? "auto"} /> |
||||
|
<Tooltip /> |
||||
|
<Legend verticalAlign="top" /> |
||||
|
</AC> |
||||
|
</ResponsiveContainer> |
||||
|
); |
||||
|
} |
||||
@ -0,0 +1,31 @@ |
|||||
|
import React from "react"; |
||||
|
import TextField from "@mui/material/TextField"; |
||||
|
import AdapterDateFns from "@mui/lab/AdapterDateFns"; |
||||
|
import LocalizationProvider from "@mui/lab/LocalizationProvider"; |
||||
|
import DateRangePicker, { DateRange } from "@mui/lab/DateRangePicker"; |
||||
|
import Box from "@mui/material/Box"; |
||||
|
import { DatePickerProps } from "../types"; |
||||
|
|
||||
|
export default function DatePicker(props: DatePickerProps) { |
||||
|
return ( |
||||
|
<LocalizationProvider dateAdapter={AdapterDateFns}> |
||||
|
<DateRangePicker |
||||
|
value={props.value} |
||||
|
minDate={props.minDate} |
||||
|
maxDate={props.maxDate} |
||||
|
onChange={(newValue: DateRange<Date>) => { |
||||
|
props.setValue(newValue); |
||||
|
}} |
||||
|
startText="Kezdeti dátum" |
||||
|
endText="Végső dátum" |
||||
|
renderInput={(startProps, endProps) => ( |
||||
|
<> |
||||
|
<TextField {...startProps} /> |
||||
|
<Box sx={{ mx: 2 }}> - </Box> |
||||
|
<TextField {...endProps} /> |
||||
|
</> |
||||
|
)} |
||||
|
/> |
||||
|
</LocalizationProvider> |
||||
|
); |
||||
|
} |
||||
@ -0,0 +1,131 @@ |
|||||
|
import React from "react"; |
||||
|
import AreaChart from "./AreaChart"; |
||||
|
import Typography from "@mui/material/Typography"; |
||||
|
import Grid from "@mui/material/Grid"; |
||||
|
import { useGetAllDataQuery } from "../services/covidDataApi"; |
||||
|
import { ChartData } from "../types"; |
||||
|
import { DateRange } from "@mui/lab/DateRangePicker"; |
||||
|
import DatePicker from "./DatePicker"; |
||||
|
|
||||
|
export default function Home() { |
||||
|
const { data, error, isLoading } = useGetAllDataQuery({}); |
||||
|
const [dateRange, setDateRange] = React.useState<DateRange<Date>>([ |
||||
|
null, |
||||
|
null, |
||||
|
]); |
||||
|
|
||||
|
let allData: ChartData[] = []; |
||||
|
let newInfected: ChartData[] = []; |
||||
|
|
||||
|
if (data) { |
||||
|
if (dateRange[0] == null && dateRange[1] == null) { |
||||
|
setDateRange([ |
||||
|
new Date(data[0].created_at), |
||||
|
new Date(data[data.length - 1].created_at), |
||||
|
]); |
||||
|
} |
||||
|
|
||||
|
allData = data |
||||
|
.map((d) => { |
||||
|
const date = new Date(d.created_at); |
||||
|
const currentInfected = d.infected - d.recovered - d.deceased; |
||||
|
return { |
||||
|
name: |
||||
|
date.getFullYear() + |
||||
|
"." + |
||||
|
("0" + (date.getMonth() + 1)).slice(-2) + |
||||
|
"." + |
||||
|
("0" + date.getDate()).slice(-2), |
||||
|
values: { |
||||
|
"Aktív fertőzöttek napi alakulása": currentInfected > 0 ? currentInfected : 0, |
||||
|
}, |
||||
|
}; |
||||
|
}) |
||||
|
.filter((d) => { |
||||
|
const ddate = new Date(d.name); |
||||
|
if (dateRange[0] == null || dateRange[1] == null) return true; |
||||
|
let endDate = new Date(dateRange[1].getTime()); |
||||
|
endDate.setDate(endDate.getDate() + 1); |
||||
|
return ddate >= dateRange[0] && ddate < endDate; |
||||
|
}); |
||||
|
|
||||
|
let newData = 0; |
||||
|
newInfected = data |
||||
|
.map((d) => { |
||||
|
const date = new Date(d.created_at); |
||||
|
const newActual = d.infected - newData; |
||||
|
newData = d.infected; |
||||
|
return { |
||||
|
name: |
||||
|
date.getFullYear() + |
||||
|
"." + |
||||
|
("0" + (date.getMonth() + 1)).slice(-2) + |
||||
|
"." + |
||||
|
("0" + date.getDate()).slice(-2), |
||||
|
values: { |
||||
|
"Új fertőzöttek napi alakulása": newActual > 0 ? newActual : 0, |
||||
|
}, |
||||
|
}; |
||||
|
}) |
||||
|
.filter((d) => { |
||||
|
const ddate = new Date(d.name); |
||||
|
if (dateRange[0] == null || dateRange[1] == null) return true; |
||||
|
let endDate = new Date(dateRange[1].getTime()); |
||||
|
endDate.setDate(endDate.getDate() + 1); |
||||
|
return ddate >= dateRange[0] && ddate < endDate; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<> |
||||
|
<Typography paragraph> |
||||
|
Ez az oldal elsősorban a hivatalos, kormány által közölt |
||||
|
adatokat dolgozza fel, de nem tekinthető hivatalos |
||||
|
tájékoztatásnak, továbbá nem vállalunk felelősséget a kormány |
||||
|
által közölt adatok és információk valóságtartalmáért. Kérjük, a |
||||
|
hivatalos információkért látogasson el a kormány által |
||||
|
működtetett{" "} |
||||
|
<a href="https://koronavirus.gov.hu/" target="_blank"> |
||||
|
koronavirus.gov.hu |
||||
|
</a>{" "} |
||||
|
oldalra, illetve olvassa a nagyobb hírportálok híreit. |
||||
|
</Typography> |
||||
|
{typeof data != "undefined" ? ( |
||||
|
<Grid container spacing={2}> |
||||
|
<Grid |
||||
|
item |
||||
|
xs={12} |
||||
|
container |
||||
|
spacing={2} |
||||
|
justifyContent="center" |
||||
|
> |
||||
|
<Grid item> |
||||
|
<DatePicker |
||||
|
minDate={new Date(data[0].created_at)} |
||||
|
maxDate={ |
||||
|
new Date(data[data.length - 1].created_at) |
||||
|
} |
||||
|
value={dateRange} |
||||
|
setValue={(n: DateRange<Date>) => |
||||
|
setDateRange(n) |
||||
|
} |
||||
|
/> |
||||
|
</Grid> |
||||
|
</Grid> |
||||
|
<Grid item md={6} xs={12}> |
||||
|
<AreaChart |
||||
|
data={allData} |
||||
|
scale="sqrt" |
||||
|
/> |
||||
|
</Grid> |
||||
|
<Grid item md={6} xs={12}> |
||||
|
<AreaChart |
||||
|
data={newInfected} |
||||
|
scale="sqrt" |
||||
|
/> |
||||
|
</Grid> |
||||
|
</Grid> |
||||
|
) : null} |
||||
|
</> |
||||
|
); |
||||
|
} |
||||
@ -0,0 +1,45 @@ |
|||||
|
import React from "react"; |
||||
|
import { |
||||
|
ResponsiveContainer, |
||||
|
LineChart as LC, |
||||
|
CartesianGrid, |
||||
|
XAxis, |
||||
|
YAxis, |
||||
|
Tooltip, |
||||
|
Legend, |
||||
|
Line, |
||||
|
} from "recharts"; |
||||
|
import { ChartProps } from "../types"; |
||||
|
|
||||
|
export default function LineChart(props: ChartProps) { |
||||
|
return ( |
||||
|
<ResponsiveContainer height={300}> |
||||
|
<LC |
||||
|
width={600} |
||||
|
height={300} |
||||
|
data={props.data.map((d) => { |
||||
|
return { |
||||
|
name: d.name, |
||||
|
...d.values, |
||||
|
}; |
||||
|
})} |
||||
|
> |
||||
|
{Object.keys(props.data[0].values).map((k, i) => ( |
||||
|
<Line |
||||
|
type="monotone" |
||||
|
key={i} |
||||
|
dataKey={k} |
||||
|
stroke="#8884d8" |
||||
|
name={k} |
||||
|
dot={false} |
||||
|
/> |
||||
|
))} |
||||
|
<CartesianGrid stroke="#ccc" /> |
||||
|
<XAxis dataKey="name" /> |
||||
|
<YAxis scale={props.scale ?? "auto"} /> |
||||
|
<Tooltip /> |
||||
|
<Legend verticalAlign="top" /> |
||||
|
</LC> |
||||
|
</ResponsiveContainer> |
||||
|
); |
||||
|
} |
||||
@ -0,0 +1,48 @@ |
|||||
|
import React from "react"; |
||||
|
import { |
||||
|
PieChart as PC, |
||||
|
Pie, |
||||
|
Legend, |
||||
|
Tooltip, |
||||
|
ResponsiveContainer, |
||||
|
Cell, |
||||
|
} from "recharts"; |
||||
|
import { ChartProps } from "../types"; |
||||
|
|
||||
|
const colors = ["#82ca9d", "#8884d8"]; |
||||
|
|
||||
|
export default function PieChart(props: ChartProps) { |
||||
|
return ( |
||||
|
<ResponsiveContainer height={300}> |
||||
|
<PC width={600} height={300}> |
||||
|
<Pie |
||||
|
dataKey="value" |
||||
|
data={Object.keys( |
||||
|
props.data[props.data.length - 1].values |
||||
|
).map((k) => ({ |
||||
|
name: k, |
||||
|
value: props.data[props.data.length - 1].values[k], |
||||
|
}))} |
||||
|
innerRadius={40} |
||||
|
outerRadius={80} |
||||
|
fill="#82ca9d" |
||||
|
label |
||||
|
> |
||||
|
{Object.keys(props.data[props.data.length - 1].values) |
||||
|
.map((k) => ({ |
||||
|
name: k, |
||||
|
value: props.data[props.data.length - 1].values[k], |
||||
|
})) |
||||
|
.map((entry, index) => ( |
||||
|
<Cell |
||||
|
key={`cell-${index}`} |
||||
|
fill={colors[index % colors.length]} |
||||
|
/> |
||||
|
))} |
||||
|
</Pie> |
||||
|
<Tooltip /> |
||||
|
<Legend /> |
||||
|
</PC> |
||||
|
</ResponsiveContainer> |
||||
|
); |
||||
|
} |
||||
@ -0,0 +1,114 @@ |
|||||
|
import React from "react"; |
||||
|
import Typography from "@mui/material/Typography"; |
||||
|
import Grid from "@mui/material/Grid"; |
||||
|
import { useGetAllDataQuery } from "../services/covidDataApi"; |
||||
|
import { ChartData } from "../types"; |
||||
|
import { DateRange } from "@mui/lab/DateRangePicker"; |
||||
|
import DatePicker from "./DatePicker"; |
||||
|
import LineChart from "./LineChart"; |
||||
|
import PieChart from "./PieChart"; |
||||
|
|
||||
|
export default function RecoveryRate() { |
||||
|
const { data, error, isLoading } = useGetAllDataQuery({}); |
||||
|
const [dateRange, setDateRange] = React.useState<DateRange<Date>>([ |
||||
|
null, |
||||
|
null, |
||||
|
]); |
||||
|
|
||||
|
let lineData: ChartData[] = []; |
||||
|
let pieData: ChartData[] = []; |
||||
|
|
||||
|
if (data) { |
||||
|
if (dateRange[0] == null && dateRange[1] == null) { |
||||
|
setDateRange([ |
||||
|
new Date(data[0].created_at), |
||||
|
new Date(data[data.length - 1].created_at), |
||||
|
]); |
||||
|
} |
||||
|
|
||||
|
lineData = data |
||||
|
.map((d) => { |
||||
|
const date = new Date(d.created_at); |
||||
|
return { |
||||
|
name: |
||||
|
date.getFullYear() + |
||||
|
"." + |
||||
|
("0" + (date.getMonth() + 1)).slice(-2) + |
||||
|
"." + |
||||
|
("0" + date.getDate()).slice(-2), |
||||
|
values: { |
||||
|
"Gyógyultak száma": d.recovered ?? 0, |
||||
|
"Elhalálozottak száma": d.deceased ?? 0, |
||||
|
}, |
||||
|
}; |
||||
|
}) |
||||
|
.filter((d) => { |
||||
|
const ddate = new Date(d.name); |
||||
|
if (dateRange[0] == null || dateRange[1] == null) return true; |
||||
|
let endDate = new Date(dateRange[1].getTime()); |
||||
|
endDate.setDate(endDate.getDate() + 1); |
||||
|
return ddate >= dateRange[0] && ddate < endDate; |
||||
|
}); |
||||
|
|
||||
|
pieData = data |
||||
|
.filter((n) => { |
||||
|
const ddate = new Date(n.created_at); |
||||
|
if (dateRange[0] == null || dateRange[1] == null) return true; |
||||
|
let endDate = new Date(dateRange[1].getTime()); |
||||
|
endDate.setDate(endDate.getDate() + 1); |
||||
|
return ddate >= dateRange[0] && ddate < endDate; |
||||
|
}) |
||||
|
.map((d) => { |
||||
|
const date = new Date(d.created_at); |
||||
|
return { |
||||
|
name: |
||||
|
date.getFullYear() + |
||||
|
"." + |
||||
|
("0" + (date.getMonth() + 1)).slice(-2) + |
||||
|
"." + |
||||
|
("0" + date.getDate()).slice(-2), |
||||
|
values: { |
||||
|
Gyógyultak: d.recovered ?? 0, |
||||
|
Elhalálozottak: d.deceased ?? 0, |
||||
|
}, |
||||
|
}; |
||||
|
}); |
||||
|
} |
||||
|
return ( |
||||
|
<> |
||||
|
<Typography paragraph> |
||||
|
A gyógyultak és az elhalálozottak számának alakulása |
||||
|
</Typography> |
||||
|
{typeof data != "undefined" ? ( |
||||
|
<Grid container spacing={2}> |
||||
|
<Grid |
||||
|
item |
||||
|
xs={12} |
||||
|
container |
||||
|
spacing={2} |
||||
|
justifyContent="center" |
||||
|
> |
||||
|
<Grid item> |
||||
|
<DatePicker |
||||
|
minDate={new Date(data[0].created_at)} |
||||
|
maxDate={ |
||||
|
new Date(data[data.length - 1].created_at) |
||||
|
} |
||||
|
value={dateRange} |
||||
|
setValue={(n: DateRange<Date>) => |
||||
|
setDateRange(n) |
||||
|
} |
||||
|
/> |
||||
|
</Grid> |
||||
|
</Grid> |
||||
|
<Grid item md={6} xs={12}> |
||||
|
<LineChart data={lineData} scale="sqrt" /> |
||||
|
</Grid> |
||||
|
<Grid item md={6} xs={12}> |
||||
|
<PieChart data={pieData} /> |
||||
|
</Grid> |
||||
|
</Grid> |
||||
|
) : null} |
||||
|
</> |
||||
|
); |
||||
|
} |
||||
@ -0,0 +1,31 @@ |
|||||
|
import { DateRange } from "@mui/lab/DateRangePicker"; |
||||
|
import { ScaleType } from "recharts/types/util/types"; |
||||
|
|
||||
|
|
||||
|
export interface CovidData { |
||||
|
infected: number; |
||||
|
deceased: number; |
||||
|
recovered: number; |
||||
|
quarantined: number; |
||||
|
tested: number; |
||||
|
created_at: Date; |
||||
|
} |
||||
|
|
||||
|
export interface ChartData { |
||||
|
name: string; |
||||
|
values: { |
||||
|
[key: string]: number |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
export interface ChartProps { |
||||
|
data: ChartData[]; |
||||
|
scale?: ScaleType; |
||||
|
} |
||||
|
|
||||
|
export interface DatePickerProps { |
||||
|
minDate: Date; |
||||
|
maxDate: Date; |
||||
|
value: DateRange<Date>; |
||||
|
setValue: Function; |
||||
|
} |
||||
Loading…
Reference in new issue