54 lines
1.8 KiB
JavaScript
54 lines
1.8 KiB
JavaScript
import React from "react";
|
|
import {useTranslation} from "react-i18next";
|
|
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
|
|
import {faGlobe, faSignal} from "@fortawesome/free-solid-svg-icons";
|
|
import {formatDecimals} from "../../util/formatters.js";
|
|
import {usePreferences} from "../../hooks/preferencesHook.jsx";
|
|
import DataTablesTable from "./DataTablesTable.jsx";
|
|
|
|
const PingTable = ({countries}) => {
|
|
const {t} = useTranslation();
|
|
const {preferencesLoaded, decimalFormat} = usePreferences();
|
|
|
|
const columns = [{
|
|
title: <><Fa icon={faGlobe}/> {t('html.label.country')}</>,
|
|
data: "country"
|
|
}, {
|
|
title: <><Fa icon={faSignal}/> {t('html.label.averagePing')}</>,
|
|
data: {_: "pingAverage", display: "pingAverageFormatted"}
|
|
}, {
|
|
title: <><Fa icon={faSignal}/> {t('html.label.bestPing')}</>,
|
|
data: {_: "pingMin", display: "pingMinFormatted"}
|
|
}, {
|
|
title: <><Fa icon={faSignal}/> {t('html.label.worstPing')}</>,
|
|
data: {_: "pingMax", display: "pingMaxFormatted"}
|
|
}];
|
|
|
|
const rows = countries.map(country => {
|
|
return {
|
|
country: country.country,
|
|
pingAverage: country.avg_ping,
|
|
pingAverageFormatted: formatDecimals(country.avg_ping, decimalFormat) + " ms",
|
|
pingMax: country.max_ping,
|
|
pingMaxFormatted: country.max_ping + " ms",
|
|
pingMin: country.min_ping,
|
|
pingMinFormatted: country.min_ping + " ms"
|
|
};
|
|
});
|
|
const options = {
|
|
responsive: true,
|
|
deferRender: true,
|
|
columns: columns,
|
|
data: rows,
|
|
paginationCount: 2,
|
|
order: [[0, "desc"]]
|
|
}
|
|
|
|
if (!preferencesLoaded) return <></>;
|
|
|
|
return (
|
|
<DataTablesTable id={"ping-table"} options={options} colorClass={"bg-amber"}/>
|
|
)
|
|
};
|
|
|
|
export default PingTable; |