Fix issue where ping value with decimals throws errors

Author: AuroraLS3

Plan/react/dashboard/src/components/cards/server/values/ServerAsNumbersCard.jsx

@@ -29,7 +29,7 @@ const ServerAsNumbersCard = ({data}) => {
                 </h6>
             </Card.Header>
             <ExtendableCardBody
-                id={data.player_kills !== undefined ? 'card-body-server-as-numbers' : 'card-body-network-as-numbers'}>
+                id={data.player_kills === undefined ? 'card-body-network-as-numbers' : 'card-body-server-as-numbers'}>
                 <CurrentUptime uptime={data.current_uptime}/>
                 <hr/>
                 <Datapoint name={t('html.label.totalPlayers')}
@@ -58,7 +58,7 @@ const ServerAsNumbersCard = ({data}) => {
                            color={'playtime'} icon={faClock}
                            value={<FormattedTime timeMs={data.player_playtime}/>}/>
                 {data.session_length_avg && <Datapoint name={t('html.label.averageSessionLength')}
-                           color={'sessions'} icon={faClock}
+                                                       color={'sessions'} icon={faClock}
                                                        value={<FormattedTime timeMs={data.session_length_avg}/>}/>}
                 <Datapoint name={t('html.label.sessions')}
                            color={'sessions'} icon={faCalendarCheck}

Plan/react/dashboard/src/components/table/PingTable.jsx

@@ -6,11 +6,13 @@ import {usePreferences} from "../../hooks/preferencesHook.jsx";
 import DataTablesTable from "./DataTablesTable.jsx";
 import {localeService, reverseRegionLookupMap} from "../../service/localeService.js";
 import {usePingFormatter} from "../../util/format/usePingFormatter.js";
+import {useDecimalFormatter} from "../../util/format/useDecimalFormatter.js";
 
 const PingTable = ({countries}) => {
     const {t} = useTranslation();
     const {preferencesLoaded} = usePreferences();
     const {formatPing} = usePingFormatter();
+    const {formatDecimals} = useDecimalFormatter();
 
     const columns = [{
         title: <><Fa icon={faGlobe}/> {t('html.label.country')}</>,
@@ -34,7 +36,7 @@ const PingTable = ({countries}) => {
         return {
             country: location,
             pingAverage: country.avg_ping,
-            pingAverageFormatted: formatPing(country.avg_ping),
+            pingAverageFormatted: formatPing(formatDecimals(country.avg_ping)),
             pingMax: country.max_ping,
             pingMaxFormatted: formatPing(country.max_ping),
             pingMin: country.min_ping,

Plan/react/dashboard/src/util/format/usePingFormatter.js

@@ -10,12 +10,19 @@ export const usePingFormatter = () => {
 
     const formatPing = useCallback((value) => {
         if (isNumber(value) && !String(value).includes("ms")) {
-            const parts = formatter.formatToParts({milliseconds: value});
+            const split = isNumber(value) ? [value] : value.split('.');
+            const parts = formatter.formatToParts({milliseconds: split[0]});
 
-            return parts.map((part) => {
+            const ints = parts.map((part, i) => part.type === 'integer' ? i : -1)
+                .filter((i) => i >= 0);
+            const lastIndex = ints[ints.length - 1];
+            return parts.map((part, i) => {
                 if (part.type === 'group') {
                     return '';
                 }
+                if (lastIndex === i && split.length > 1) {
+                    return part.value + '.' + split[1];
+                }
                 return part.value;
             }).join('');
         }