pixies

1import StatisticContainer from "@/pages/Statistics/components/StatisticContainer";
2import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
3import {faArrowDown, faArrowUp, faPingPongPaddleBall, faWaveSquare} from "@fortawesome/free-solid-svg-icons";
4import "./styles.sass";
5import {getIconBySpeed} from "@/common/utils/TestUtil";
6import {useContext} from "react";
7import {ConfigContext} from "@/common/contexts/Config";
8import {StatusContext} from "@/common/contexts/Status";
9import {PreferencesContext} from "@/common/contexts/Preferences";
10import {convertSpeed, getSpeedUnit} from "@/common/utils/FormatUtil";
11import {t} from "i18next";
12
13export const LatestTestChart = (props) => {
14
15    const [config] = useContext(ConfigContext);
16    const [status] = useContext(StatusContext);
17    const [preferences] = useContext(PreferencesContext);
18    const speedUnit = getSpeedUnit(preferences);
19
20    if (!props.test) return <></>;
21    if (config === null) return <></>;
22
23    const hasJitter = props.test.jitter !== null && props.test.jitter !== undefined;
24
25    return (
26        <StatisticContainer title={t("latest.latest")} onClick={props.onClick} running={status.running} expanded={props.expanded}>
27            <div className="info-container">
28                <div className="test-container">
29                    <div className="test-info">
30                        <h2>{t("latest.ping")}</h2>
31                        <p className={"icon-" + getIconBySpeed(props.test.ping, config.ping, false)}>
32                            {(props.test.ping === -1 ? "N/A" : props.test.ping) + " " + t("latest.ping_unit")}
33                            {hasJitter && <span className="jitter-value"><FontAwesomeIcon icon={faWaveSquare} className="jitter-icon" />{props.test.jitter}</span>}
34                        </p>
35                    </div>
36                    <FontAwesomeIcon icon={faPingPongPaddleBall}
37                                     className={"icon-" + getIconBySpeed(props.test.ping, config.ping, false)}/>
38                </div>
39                <div className="test-container">
40                    <div className="test-info">
41                        <h2>{t("latest.up")}</h2>
42                        <p className={"icon-" + getIconBySpeed(props.test.upload, config.upload, true)}>
43                            {(props.test.upload === -1 ? "N/A" : convertSpeed(props.test.upload, preferences)) + " " + speedUnit}</p>
44                    </div>
45                    <FontAwesomeIcon icon={faArrowUp}
46                                     className={"icon-" + getIconBySpeed(props.test.upload, config.upload, true)}/>
47                </div>
48                <div className="test-container">
49                    <div className="test-info">
50                        <h2>{t("latest.down")}</h2>
51                        <p className={"icon-" + getIconBySpeed(props.test.download, config.download, true)}>
52                            {(props.test.download === -1 ? "N/A" : convertSpeed(props.test.download, preferences)) + " " + speedUnit}</p>
53                    </div>
54                    <FontAwesomeIcon icon={faArrowDown}
55                                     className={"icon-" + getIconBySpeed(props.test.download, config.download, true)}/>
56                </div>
57            </div>
58        </StatisticContainer>
59    );
60
61}