pixies

1import StatisticContainer from "@/pages/Statistics/components/StatisticContainer";
2import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
3import {faGauge, faMinusCircle, faPlusCircle} from "@fortawesome/free-solid-svg-icons";
4import {useContext} from "react";
5import {t} from "i18next";
6import {PreferencesContext} from "@/common/contexts/Preferences";
7import {convertSpeed, getSpeedUnit} from "@/common/utils/FormatUtil";
8import "./styles.sass";
9
10export const AverageChart = (props) => {
11    const [preferences] = useContext(PreferencesContext);
12    const speedUnit = getSpeedUnit(preferences);
13
14    return (
15        <StatisticContainer title={props.title} size="small" center={true} onClick={props.onClick}>
16            <div className="value-container">
17                <div className="value-item">
18                    <div className="value-info">
19                        <h2>{t("statistics.values.min")}</h2>
20                        <p>{convertSpeed(props.data.min, preferences)} {speedUnit}</p>
21                    </div>
22                    <FontAwesomeIcon icon={faMinusCircle}/>
23                </div>
24                <div className="value-item">
25                    <div className="value-info">
26                        <h2>{t("statistics.values.max")}</h2>
27                        <p>{convertSpeed(props.data.max, preferences)} {speedUnit}</p>
28                    </div>
29                    <FontAwesomeIcon icon={faPlusCircle}/>
30                </div>
31                <div className="value-item">
32                    <div className="value-info">
33                        <h2>{t("statistics.values.avg")}</h2>
34                        <p>{convertSpeed(props.data.avg, preferences)} {speedUnit}</p>
35                    </div>
36                    <FontAwesomeIcon icon={faGauge}/>
37                </div>
38            </div>
39        </StatisticContainer>
40    );
41
42}