pixies

1import { useContext, useMemo } from "react";
2import { t } from "i18next";
3import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
4import { faArrowDown, faArrowUp, faPingPongPaddleBall } from "@fortawesome/free-solid-svg-icons";
5import StatisticContainer from "@/pages/Statistics/components/StatisticContainer";
6import { PreferencesContext } from "@/common/contexts/Preferences";
7import { convertSpeed, getSpeedUnit } from "@/common/utils/FormatUtil";
8import "./styles.sass";
9
10export const ConsistencyChart = (props) => {
11    const [preferences] = useContext(PreferencesContext);
12    const speedUnit = getSpeedUnit(preferences);
13
14    const data = useMemo(() => {
15        if (!props.consistency) return null;
16        return props.consistency;
17    }, [props.consistency]);
18
19    if (!data) return null;
20
21    const getConsistencyColor = (value) => {
22        if (value >= 90) return 'icon-green';
23        if (value >= 70) return 'icon-orange';
24        return 'icon-red';
25    };
26
27    return (
28        <StatisticContainer title={t("statistics.consistency.title")} onClick={props.onClick}>
29            <div className="consistency-container">
30                <div className="consistency-item">
31                    <div className="consistency-info">
32                        <h2>{t("latest.down")}</h2>
33                        <p className={getConsistencyColor(data.download.consistency)}>
34                            {data.download.consistency}%
35                        </p>
36                        <span className="consistency-detail">±{convertSpeed(data.download.stdDev, preferences)} {speedUnit}</span>
37                    </div>
38                    <FontAwesomeIcon icon={faArrowDown} className={getConsistencyColor(data.download.consistency)} />
39                </div>
40
41                <div className="consistency-item">
42                    <div className="consistency-info">
43                        <h2>{t("latest.up")}</h2>
44                        <p className={getConsistencyColor(data.upload.consistency)}>
45                            {data.upload.consistency}%
46                        </p>
47                        <span className="consistency-detail">±{convertSpeed(data.upload.stdDev, preferences)} {speedUnit}</span>
48                    </div>
49                    <FontAwesomeIcon icon={faArrowUp} className={getConsistencyColor(data.upload.consistency)} />
50                </div>
51
52                <div className="consistency-item">
53                    <div className="consistency-info">
54                        <h2>{t("latest.ping")}</h2>
55                        <p className="icon-orange">
56                            ±{data.ping.stdDev} {t("latest.ping_unit")}
57                        </p>
58                        <span className="consistency-detail">{t("statistics.consistency.ping_variance")}</span>
59                    </div>
60                    <FontAwesomeIcon icon={faPingPongPaddleBall} className="icon-orange" />
61                </div>
62            </div>
63        </StatisticContainer>
64    );
65};