covid-stats/resources/js/components/RecoveryRate.tsx

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}
        </>
    );
}