Optimize PlayersOnlineTooltip requests on 0 player points

Author: AuroraLS3

Plan/common/src/main/java/com/djrapitops/plan/delivery/webserver/resolver/json/PlayersOnlineJSONResolver.java

@@ -80,7 +80,7 @@ public boolean canAccess(Request request) {
                     @ApiResponse(responseCode = "400", description = "If 'date' parameter is not specified or invalid")
             },
             parameters = {
-                    @Parameter(in = ParameterIn.QUERY, name = "date", description = "Epoch millisecond", required = true),
+                    @Parameter(in = ParameterIn.QUERY, name = "date", description = "Epoch millisecond"),
                     @Parameter(in = ParameterIn.QUERY, name = "server", description = "Server UUID")
             },
             requestBody = @RequestBody(content = @Content(examples = @ExampleObject()))
@@ -95,8 +95,7 @@ public Optional<Response> resolve(Request request) {
     private List<PlayerIdentifier> getResponse(Request request) {
         URIQuery query = request.getQuery();
         try {
-            Long date = query.get("date").map(Long::parseLong)
-                    .orElseThrow(() -> new BadRequestException("Missing date"));
+            long date = query.get("date").map(Long::parseLong).orElseGet(System::currentTimeMillis);
             if (query.get("server").isPresent()) {
                 ServerUUID serverUUID = identifiers.getServerUUID(request);
                 return jsonFactory.playersOnlineOn(date, serverUUID);

Plan/common/src/main/java/com/djrapitops/plan/settings/locale/lang/HtmlLang.java

@@ -537,7 +537,7 @@ public enum HtmlLang implements Lang {
     LABEL_WEEK_DAYS("html.label.weekdays", "'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'"),
     QUERY_ARE_ACTIVITY_GROUP("html.query.filter.activity.text", "are in Activity Groups"),
     QUERY_ON_DATE("html.query.filter.onDate", "on"),
-    QUERY_ON_SERVER("html.query.filter.onDate", "on server(s)"),
+    QUERY_ON_SERVER("html.query.filter.onServer", "on server(s)"),
     QUERY_ANY_SERVER("html.query.filter.anyServer", "any server"),
     QUERY_JOINED_WITH_ADDRESS("html.query.filter.joinAddress.text", "joined with address"),
     QUERY_JOINED_FROM_COUNTRY("html.query.filter.country.text", "have joined from country"),

Plan/common/src/test/java/com/djrapitops/plan/delivery/webserver/AccessControlTest.java

@@ -172,7 +172,9 @@ static Stream<Arguments> testCases() {
                 Arguments.of("/theme-editor", WebPermission.ACCESS_THEME_EDITOR, 200, 403),
                 Arguments.of("/theme-editor/new", WebPermission.ACCESS_THEME_EDITOR, 200, 403),
                 Arguments.of("/theme-editor/delete", WebPermission.ACCESS_THEME_EDITOR, 200, 403),
-                Arguments.of("/theme-editor/default", WebPermission.ACCESS_THEME_EDITOR, 200, 403)
+                Arguments.of("/theme-editor/default", WebPermission.ACCESS_THEME_EDITOR, 200, 403),
+                Arguments.of("/v1/playersOnline", WebPermission.PAGE_NETWORK_OVERVIEW_GRAPHS_ONLINE, 200, 403),
+                Arguments.of("/v1/playersOnline?server=" + TestConstants.SERVER_UUID_STRING, WebPermission.PAGE_SERVER_OVERVIEW_PLAYERS_ONLINE_GRAPH, 200, 403)
         );
     }
 

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

@@ -3,7 +3,7 @@ import {useTranslation} from "react-i18next";
 import {tooltip} from "../../util/graphs";
 import LineGraph from "./LineGraph";
 import {ChartLoader} from "../navigation/Loader";
-import {PlayersOnlineTooltip} from "./tooltip/PlayersOnlineTooltip.jsx";
+import {PlayersOnlineTooltip, useTooltipOptions} from "./tooltip/PlayersOnlineTooltip.jsx";
 
 
 const PlayersOnlineGraph = ({data, identifier, selectedRange, extremes, onSetExtremes, color, showPlayersOnline}) => {
@@ -24,31 +24,15 @@ const PlayersOnlineGraph = ({data, identifier, selectedRange, extremes, onSetExt
 
     const [hoveredDate, setHoveredDate] = useState(undefined);
     const onMouseLeave = () => setHoveredDate(undefined);
-    const extraOptions = useMemo(() => {
-        return showPlayersOnline ? {
-            plotOptions: {
-                series: {
-                    point: {
-                        events: {
-                            mouseOver: e => {
-                                setHoveredDate(e.target.x)
-                            },
-                            click: e => {
-                                setHoveredDate(e.target.point.x)
-                            }
-                        }
-                    }
-                }
-            }
-        } : {};
-    }, [showPlayersOnline, setHoveredDate]);
+    const extraOptions = useTooltipOptions(showPlayersOnline, setHoveredDate);
 
     if (!data) return <ChartLoader/>;
 
     return (
         <>
             {showPlayersOnline && (
-                <PlayersOnlineTooltip id="players-online-graph" hoveredDate={hoveredDate} identifier={identifier}/>)}
+                <PlayersOnlineTooltip id="players-online-graph" hoveredDate={hoveredDate} identifier={identifier}/>
+            )}
             <LineGraph id="players-online-graph"
                        series={series}
                        selectedRange={selectedRange}

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

@@ -1,10 +1,10 @@
-import React, {useEffect, useMemo, useState} from "react";
+import React, {useEffect, useState} from "react";
 import {useTranslation} from "react-i18next";
 import {tooltip, translateLinegraphButtons} from "../../util/graphs";
 import LineGraph from './LineGraph'
 import {ChartLoader} from "../navigation/Loader";
 import {useTheme} from "../../hooks/themeHook";
-import {PlayersOnlineTooltip} from "./tooltip/PlayersOnlineTooltip.jsx";
+import {PlayersOnlineTooltip, useTooltipOptions} from "./tooltip/PlayersOnlineTooltip.jsx";
 
 const StackedPlayersOnlineGraph = ({data}) => {
     const {t} = useTranslation();
@@ -66,31 +66,14 @@ const StackedPlayersOnlineGraph = ({data}) => {
 
     const [hoveredDate, setHoveredDate] = useState(undefined);
     const onMouseLeave = () => setHoveredDate(undefined);
-    const extraOptions = useMemo(() => {
-        return showPlayersOnline ? {
-            plotOptions: {
-                series: {
-                    point: {
-                        events: {
-                            mouseOver: e => {
-                                setHoveredDate(e.target.x)
-                            },
-                            click: e => {
-                                setHoveredDate(e.target.point.x)
-                            }
-                        }
-                    }
-                }
-            }
-        } : {};
-    }, [showPlayersOnline, setHoveredDate]);
+
+    const extraOptions = useTooltipOptions(showPlayersOnline, setHoveredDate);
 
     if (!data) return <ChartLoader/>;
 
     return (
         <>
-            {showPlayersOnline && (<PlayersOnlineTooltip id="stacked-players-online-graph" hoveredDate={hoveredDate}
-                                                         identifier={null}/>)}
+            <PlayersOnlineTooltip id="stacked-players-online-graph" hoveredDate={hoveredDate} identifier={null}/>
             <LineGraph id="stacked-players-online-graph"
                        options={graphOptions} extraOptions={extraOptions} onMouseLeave={onMouseLeave}/>
         </>

Plan/react/dashboard/src/components/graphs/tooltip/PlayersOnlineTooltip.jsx

@@ -1,9 +1,30 @@
 import {useTranslation} from "react-i18next";
-import React, {useCallback, useEffect, useState} from "react";
+import React, {useCallback, useEffect, useMemo, useState} from "react";
 import {fetchPlayersOnline} from "../../../service/serverService.js";
 import {Card, CardBody} from "react-bootstrap";
 import FormattedDate from "../../text/FormattedDate.jsx";
 
+export const useTooltipOptions = (showPlayersOnline, setHoveredDate) => {
+    return useMemo(() => {
+        return showPlayersOnline ? {
+            plotOptions: {
+                series: {
+                    point: {
+                        events: {
+                            mouseOver: e => {
+                                setHoveredDate(e.target.y > 0 ? e.target.x : undefined)
+                            },
+                            click: e => {
+                                setHoveredDate(e.target.point.y > 0 ? e.target.point.x : undefined)
+                            }
+                        }
+                    }
+                }
+            }
+        } : {};
+    }, [showPlayersOnline, setHoveredDate]);
+}
+
 export const PlayersOnlineTooltip = ({id, hoveredDate, identifier}) => {
     const {t} = useTranslation();