Fix formatting issues in many places

Author: AuroraLS3

Plan/common/src/main/java/com/djrapitops/plan/delivery/rendering/json/PlayerJSONCreator.java

@@ -229,9 +229,9 @@ private Map<String, Object> createInfoJSONMap(PlayerContainer player, Map<Server
         int bestPing = ping.min();
 
         String unavailable = GenericLang.UNAVAILABLE.getKey();
-        info.put("average_ping", averagePing != -1.0 ? decimals.apply(averagePing) + " ms" : unavailable);
-        info.put("worst_ping", worstPing != -1.0 ? worstPing + " ms" : unavailable);
-        info.put("best_ping", bestPing != -1.0 ? bestPing + " ms" : unavailable);
+        info.put("average_ping", averagePing != -1.0 ? averagePing : unavailable);
+        info.put("worst_ping", worstPing != -1.0 ? worstPing : unavailable);
+        info.put("best_ping", bestPing != -1.0 ? bestPing : unavailable);
         info.put("registered", player.getValue(PlayerKeys.REGISTERED).map(Object.class::cast).orElse("-"));
         info.put("last_seen", player.getValue(PlayerKeys.LAST_SEEN).map(Object.class::cast).orElse("-"));
         info.put("last_seen_raw_value", player.getValue(PlayerKeys.LAST_SEEN).orElse(0L));

Plan/react/dashboard/package.json

@@ -68,6 +68,7 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.4",
+    "baseline-browser-mapping": "^2.10.0",
     "typescript": "^5.9.3",
     "vite": "^7.3.1"
   }

Plan/react/dashboard/src/components/accordion/SessionAccordion.jsx

@@ -12,9 +12,10 @@ import {ChartLoader} from "../navigation/Loader";
 import {usePreferences} from "../../hooks/preferencesHook.jsx";
 import FormattedDate from "../text/FormattedDate.jsx";
 import FormattedTime from "../text/FormattedTime.jsx";
-import {formatDecimals} from "../../util/formatters.js";
 import PlayerPageLinkButton from "../input/button/PlayerPageLinkButton.jsx";
 import ServerPageLinkButton from "../input/button/ServerPageLinkButton.jsx";
+import {useDecimalFormatter} from "../../util/format/useDecimalFormatter.js";
+import {usePingFormatter} from "../../util/format/usePingFormatter.js";
 
 const SessionHeader = ({session}) => {
     const {t} = useTranslation();
@@ -33,7 +34,8 @@ const SessionHeader = ({session}) => {
 
 const SessionBody = ({i, session}) => {
     const {t} = useTranslation();
-    const {decimalFormat} = usePreferences();
+    const {formatDecimals} = useDecimalFormatter();
+    const {formatPing} = usePingFormatter();
     return (
         <Row>
             <Col lg={6}>
@@ -55,7 +57,7 @@ const SessionBody = ({i, session}) => {
                 />
                 {session.avg_ping ? <Datapoint
                     icon={faSignal} color={"ping"}
-                    name={t('html.label.averagePing')} value={formatDecimals(session.avg_ping, decimalFormat)} bold
+                    name={t('html.label.averagePing')} value={formatPing(formatDecimals(session.avg_ping))} bold
                 /> : ''}
                 <br/>
                 <Datapoint

Plan/react/dashboard/src/components/calendar/PlayerSessionCalendar.jsx

@@ -1,39 +1,38 @@
-import React from "react";
+import React, {useCallback, useMemo} from "react";
 import FullCalendar from '@fullcalendar/react'
 import dayGridPlugin from '@fullcalendar/daygrid'
 import {useTranslation} from "react-i18next";
-import {formatTimeAmount} from "../../util/format/TimeAmountFormat.js";
-import {formatDateWithPreferences, useDatePreferences} from "../text/FormattedDate.jsx";
-import {useTimePreferences} from "../text/FormattedTime.jsx";
 import {localeService} from "../../service/localeService.js";
+import {useTimeAmountFormatter} from "../../util/format/useTimeAmountFormatter.js";
+import {useDateFormatter} from "../../util/format/useDateFormatter.js";
 
 const PlayerSessionCalendar = ({series, firstDay}) => {
-    const {t} = useTranslation();
+    const {t, i18n} = useTranslation();
 
-    const timePreferences = useTimePreferences();
-    const datePreferences = useDatePreferences();
+    const {formatTime} = useTimeAmountFormatter();
+    const {formatDate} = useDateFormatter();
 
-    const formatTitle = entry => {
+    const formatTitle = useCallback(entry => {
         switch (entry.title) {
             case 'html.label.session':
-                return formatTimeAmount(timePreferences, entry.value) + ' ' + t(entry.title);
+                return formatTime(entry.value) + ' ' + t(entry.title);
             case 'html.label.playtime':
-                return t(entry.title) + ": " + formatTimeAmount(timePreferences, entry.value)
+                return t(entry.title) + ": " + formatTime(entry.value)
             case 'html.label.registered':
-                return t(entry.title) + ": " + formatDateWithPreferences(datePreferences, entry.value)
+                return t(entry.title) + ": " + formatDate(entry.value)
             default:
                 return t(entry.title) + ": " + entry.value;
         }
-    }
+    }, [formatTime, formatDate])
 
-    const actualSeries = series.map(entry => {
+    const actualSeries = useMemo(() => series.map(entry => {
         return {
             title: formatTitle(entry),
             start: entry.start,
             end: entry.end,
             color: entry.color
         }
-    });
+    }), [formatTitle]);
 
     const buttonText = {
         today: t('plugin.generic.today').toLowerCase().replaceAll("'", ''),

Plan/react/dashboard/src/components/calendar/ServerCalendar.jsx

@@ -1,44 +1,43 @@
-import React from "react";
+import React, {useCallback, useMemo} from "react";
 import FullCalendar from '@fullcalendar/react'
 import dayGridPlugin from '@fullcalendar/daygrid'
 import interactionPlugin from '@fullcalendar/interaction'
 import {useTranslation} from "react-i18next";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faHandPointer} from "@fortawesome/free-regular-svg-icons";
-import {useTimePreferences} from "../text/FormattedTime.jsx";
-import {formatTimeAmount} from "../../util/format/TimeAmountFormat.js";
 import {localeService} from "../../service/localeService.js";
+import {useTimeAmountFormatter} from "../../util/format/useTimeAmountFormatter.js";
 
 const ServerCalendar = ({series, firstDay, onSelect}) => {
     const {t} = useTranslation();
+    const {formatTime} = useTimeAmountFormatter();
 
     const explainerStyle = {
         position: "absolute",
         top: "0.5rem",
         right: "1rem"
     };
-    const timePreferences = useTimePreferences();
 
-    const formatTitle = entry => {
+    const formatTitle = useCallback(entry => {
         switch (entry.title) {
             case 'html.label.playtime':
-                return t(entry.title) + ": " + formatTimeAmount(timePreferences, entry.value)
+                return t(entry.title) + ": " + formatTime(entry.value)
             case 'html.calendar.unique':
             case 'html.calendar.new':
                 return t(entry.title) + " " + entry.value
             default:
                 return t(entry.title) + ": " + entry.value;
         }
-    }
+    }, [formatTime, t]);
 
-    const actualSeries = series.map(entry => {
+    const actualSeries = useMemo(() => series.map(entry => {
         return {
             title: formatTitle(entry),
             start: entry.start,
             end: entry.end,
             color: entry.color
         }
-    });
+    }), [series, formatTitle]);
 
     const buttonText = {
         today: t('plugin.generic.today').toLowerCase().replaceAll("'", ''),

Plan/react/dashboard/src/components/cards/player/PlayerOverviewCard.jsx

@@ -28,6 +28,8 @@ import {faSuperpowers} from "@fortawesome/free-brands-svg-icons";
 import Datapoint from "../../Datapoint";
 import FormattedTime from "../../text/FormattedTime.jsx";
 import FormattedDate from "../../text/FormattedDate.jsx";
+import {useDecimalFormatter} from "../../../util/format/useDecimalFormatter.js";
+import {usePingFormatter} from "../../../util/format/usePingFormatter.js";
 
 const PlayerHeadSection = ({player}) => {
     const {t} = useTranslation();
@@ -67,6 +69,8 @@ const PlayerOverviewCard = ({player}) => {
     const {t} = useTranslation();
     const {setHelpModalTopic} = useNavigation();
     const openHelp = useCallback(() => setHelpModalTopic('activity-index'), [setHelpModalTopic]);
+    const {formatDecimals} = useDecimalFormatter();
+    const {formatPing} = usePingFormatter();
 
     return (
         <Card>
@@ -124,7 +128,7 @@ const PlayerOverviewCard = ({player}) => {
                                 <button onClick={openHelp}><Fa className={"col-help-icon"}
                                                                icon={faQuestionCircle}/>
                                 </button></span></>}
-                            value={player.info.activity_index} bold
+                            value={formatDecimals(player.info.activity_index)} bold
                             valueLabel={player.info.activity_index_group}
                             title={t('html.label.activityIndex')}
                         />
@@ -139,15 +143,15 @@ const PlayerOverviewCard = ({player}) => {
                         <hr/>
                         <Datapoint
                             icon={faSignal} color="ping"
-                            name={t('html.label.averagePing')} value={player.info.average_ping}
+                            name={t('html.label.averagePing')} value={formatPing(player.info.average_ping)}
                         />
                         <Datapoint
                             icon={faSignal} color="ping"
-                            name={t('html.label.bestPing')} value={player.info.best_ping}
+                            name={t('html.label.bestPing')} value={formatPing(player.info.best_ping)}
                         />
                         <Datapoint
                             icon={faSignal} color="ping"
-                            name={t('html.label.worstPing')} value={player.info.worst_ping}
+                            name={t('html.label.worstPing')} value={formatPing(player.info.worst_ping)}
                         />
                         <hr/>
                         <Datapoint

Plan/react/dashboard/src/components/cards/server/insights/OnlineActivityInsightsCard.jsx

@@ -9,22 +9,24 @@ import ComparingLabel from "../../../trend/ComparingLabel";
 import End from "../../../layout/End";
 import {CardLoader} from "../../../navigation/Loader";
 import FormattedTime from "../../../text/FormattedTime.jsx";
+import {useTimeAmountFormatter} from "../../../../util/format/useTimeAmountFormatter.js";
 
 const OnlineActivityInsightsCard = ({data}) => {
     const {t} = useTranslation();
+    const {formatTime} = useTimeAmountFormatter();
     if (!data) return <CardLoader/>;
 
     return (
         <InsightsFor30DaysCard id={'online-activity-insights'}>
             <Datapoint name={t('html.label.onlineOnFirstJoin')} icon={faUserGroup} color="players-new"
                        value={data.players_first_join_avg}
-                       trend={<SmallTrend trend={data.players_first_join_avg_trend}/>}/>
+                       trend={<SmallTrend trend={data.players_first_join_trend}/>}/>
             <Datapoint name={t('html.label.firstSessionLength.average')} icon={faUserClock} color="players-new"
                        value={<FormattedTime timeMs={data.first_session_length_avg}/>}
-                       trend={<SmallTrend trend={<FormattedTime timeMs={data.first_session_length_avg_trend}/>}/>}/>
+                       trend={<SmallTrend trend={data.first_session_length_trend} format={formatTime}/>}/>
             <Datapoint name={t('html.label.firstSessionLength.median')} icon={faUserClock} color="players-new"
                        value={<FormattedTime timeMs={data.first_session_length_median}/>}
-                       trend={<SmallTrend trend={<FormattedTime timeMs={data.first_session_length_median_trend}/>}/>}/>
+                       trend={<SmallTrend trend={data.first_session_length_median_trend} format={formatTime}/>}/>
             <Datapoint name={t('html.label.loneJoins')} icon={faCalendar} color="sessions"
                        value={data.lone_joins}
                        trend={<SmallTrend trend={data.lone_joins_trend}/>}/>

Plan/react/dashboard/src/components/cards/server/tables/PlayerbaseTrendsCard.jsx

@@ -9,9 +9,11 @@ import {faClock} from "@fortawesome/free-regular-svg-icons";
 import {TableRow} from "../../../table/TableRow";
 import {CardLoader} from "../../../navigation/Loader";
 import FormattedTime from "../../../text/FormattedTime.jsx";
+import {useTimeAmountFormatter} from "../../../../util/format/useTimeAmountFormatter.js";
 
 const PlayerbaseTrendsCard = ({data}) => {
     const {t} = useTranslation();
+    const {formatTime} = useTimeAmountFormatter();
     if (!data) return <CardLoader/>;
     return (
         <Card id={"playerbase-trends"}>
@@ -33,10 +35,10 @@ const PlayerbaseTrendsCard = ({data}) => {
                 <TableRow icon={faClock} color="playtime"
                           text={t('html.label.averagePlaytime') + ' ' + t('html.label.perPlayer')}
                           values={[
-                              <FormattedTime timeMs={data.playtime_avg_then}/>,
-                              <FormattedTime timeMs={data.playtime_avg_now}/>,
+                              <FormattedTime key={'p-a-t'} timeMs={data.playtime_avg_then}/>,
+                              <FormattedTime key={'p-a-n'} timeMs={data.playtime_avg_now}/>,
                               <BigTrend key={JSON.stringify(data.total_players_trend)}
-                                        trend={<FormattedTime timeMs={data.playtime_avg_trend}/>}/>]}/>
+                                        trend={data.playtime_avg_trend} format={formatTime}/>]}/>
                 <TableRow icon={faClock} color="playtime-afk"
                           text={t('html.label.afk') + ' ' + t('html.label.perPlayer')}
                           values={[data.afk_then, data.afk_now,
@@ -45,17 +47,17 @@ const PlayerbaseTrendsCard = ({data}) => {
                 <TableRow icon={faClock} color="playtime"
                           text={t('html.label.averagePlaytime') + ' ' + t('html.label.perRegularPlayer')}
                           values={[
-                              <FormattedTime timeMs={data.regular_playtime_avg_then}/>,
-                              <FormattedTime timeMs={data.regular_playtime_avg_now}/>,
+                              <FormattedTime key={'rg-pl-avg-th'} timeMs={data.regular_playtime_avg_then}/>,
+                              <FormattedTime key={'rg-pl-av-n'} timeMs={data.regular_playtime_avg_now}/>,
                               <BigTrend key={JSON.stringify(data.regular_playtime_avg_trend)}
-                                        trend={<FormattedTime timeMs={data.regular_playtime_avg_trend}/>}/>]}/>
+                                        trend={data.regular_playtime_avg_trend} format={formatTime}/>]}/>
                 <TableRow icon={faClock} color="sessions"
                           text={t('html.label.averageSessionLength') + ' ' + t('html.label.perRegularPlayer')}
                           values={[
-                              <FormattedTime timeMs={data.regular_session_avg_then}/>,
-                              <FormattedTime timeMs={data.regular_session_avg_now}/>,
+                              <FormattedTime key={'rg-s-a-t'} timeMs={data.regular_session_avg_then}/>,
+                              <FormattedTime key={'rg-s-a-n'} timeMs={data.regular_session_avg_now}/>,
                               <BigTrend key={JSON.stringify(data.regular_session_avg_trend)}
-                                        trend={<FormattedTime timeMs={data.regular_session_avg_trend}/>}/>]}/>
+                                        trend={data.regular_session_avg_trend} format={formatTime}/>]}/>
                 <TableRow icon={faClock} color="playtime-afk"
                           text={t('html.label.afk') + ' ' + t('html.label.perRegularPlayer')}
                           values={[data.regular_afk_avg_then, data.regular_afk_avg_now,

Plan/react/dashboard/src/components/extensions/ExtensionIcon.jsx

@@ -1,5 +1,5 @@
 import {FontAwesomeIcon as Fa} from '@fortawesome/react-fontawesome'
-import {iconTypeToFontAwesomeClass} from "../../util/icons";
+import {iconTypeToFontAwesomeClass} from "../../util/icons.ts";
 import React from "react";
 
 const ExtensionIcon = ({icon}) => {
@@ -13,8 +13,4 @@ const ExtensionIcon = ({icon}) => {
     )
 }
 
-export const toExtensionIconHtmlString = (icon) => {
-    return icon ? `<i class="${iconTypeToFontAwesomeClass(icon.family)} fa-${icon.iconName} ${icon.colorClass}"></i>` : '';
-}
-
 export default ExtensionIcon;

Plan/react/dashboard/src/components/graphs/PlayerbaseGraph.jsx

@@ -1,12 +1,12 @@
 import {useTranslation} from "react-i18next";
-import React, {useEffect} from "react";
+import React, {useEffect, useMemo} from "react";
 import {useTheme} from "../../hooks/themeHook";
 import Highcharts from "highcharts/esm/highstock";
 import "highcharts/esm/modules/no-data-to-display";
 import "highcharts/esm/modules/accessibility";
 import {nameToCssVariable} from "../../util/colors";
-import {formatDateWithPreferences, useDatePreferences} from "../text/FormattedDate.jsx";
-import {localeService} from "../../service/localeService.js";
+import {useI18nFriendlyLanguage} from "../../service/localeService.js";
+import {useDateFormatter} from "../../util/format/useDateFormatter.js";
 
 export const activityGroupToColor = label => {
     switch (label) {
@@ -27,25 +27,16 @@ export const activityGroupToColor = label => {
 
 const PlayerbaseGraph = ({data}) => {
     const {t} = useTranslation()
-    const {nightModeEnabled, graphTheming} = useTheme();
-    const datePreferences = useDatePreferences();
+    const {graphTheming} = useTheme();
+    const {formatDate} = useDateFormatter(false, {
+        pattern: 'MMMM dd',
+        recentDaysPattern: 'MMMM dd'
+    });
 
     const id = 'playerbase-graph';
 
-    useEffect(() => {
-        Highcharts.setOptions({
-            lang: {
-                locale: localeService.getIntlFriendlyLocale(),
-                noData: t('html.label.noDataToDisplay')
-            }
-        })
-        Highcharts.setOptions(graphTheming);
-
-        const labels = data?.activity_labels.map(date => formatDateWithPreferences({
-            ...datePreferences,
-            pattern: 'MMMM dd',
-            recentDaysPattern: 'MMMM dd'
-        }, date));
+    const graphOptions = useMemo(() => {
+        const labels = data?.activity_labels.map(formatDate);
         const series = data?.activity_series.map(dataSet => {
             return {
                 ...dataSet,
@@ -54,7 +45,7 @@ const PlayerbaseGraph = ({data}) => {
             }
         });
 
-        Highcharts.chart(id, {
+        return {
             chart: {
                 noData: t('html.label.noDataToDisplay'),
                 type: "area"
@@ -79,8 +70,22 @@ const PlayerbaseGraph = ({data}) => {
                 }
             },
             series: series
+        };
+    }, [t, data, formatDate]);
+
+    const locale = useI18nFriendlyLanguage();
+    useEffect(() => {
+        Highcharts.setOptions({
+            lang: {
+                locale: locale,
+                noData: t('html.label.noDataToDisplay')
+            }
         })
-    }, [data, graphTheming, id, t, nightModeEnabled, datePreferences])
+    }, [locale]);
+    useEffect(() => {
+        Highcharts.setOptions(graphTheming);
+        Highcharts.chart(id, graphOptions)
+    }, [graphTheming, id, t, graphOptions])
 
     return (
         <div className="chart-area" id={id}>