pixies

1import StatisticContainer from "@/pages/Statistics/components/StatisticContainer";
2import {t} from "i18next";
3import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
4import {faCircleExclamation, faGaugeHigh, faStopwatch} from "@fortawesome/free-solid-svg-icons";
5import "./styles.sass";
6
7export const OverviewChart = (props) => {
8    const formatDateForTitle = (date) => {
9        return date.toLocaleDateString(undefined, { day: "2-digit", month: "short" });
10    };
11
12    const title = t("test.overview.title_range", { 
13        from: formatDateForTitle(props.dateRange.from), 
14        to: formatDateForTitle(props.dateRange.to) 
15    });
16
17    const items = [
18        {
19            icon: faGaugeHigh,
20            title: "statistics.overview.total_title",
21            description: "statistics.overview.total_description",
22            value: props.tests.total
23        },
24        {
25            icon: faCircleExclamation,
26            title: "statistics.overview.failed_title",
27            description: "statistics.overview.failed_description",
28            value: props.tests.failed
29        },
30        {
31            icon: faStopwatch,
32            title: "statistics.overview.average_title",
33            description: "statistics.overview.average_description",
34            value: props.time.avg + "s"
35        }
36    ];
37
38    return (
39        <StatisticContainer title={title} size="large" onClick={props.onClick}>
40            <div className="overview-items">
41                {items.map((item, index) => (
42                    <div className="overview-item" key={index}>
43                        <div className="info-area">
44                            <FontAwesomeIcon icon={item.icon} />
45                            <div className="text-area">
46                                <h2>{t(item.title)}</h2>
47                                <p>{t(item.description)}</p>
48                            </div>
49                        </div>
50                        <h2>{item.value}</h2>
51                    </div>
52                ))}
53            </div>
54        </StatisticContainer>
55    );
56
57}