Reworked online activity overview graphs

- Placed all 3 graphs under 3 different tabs
- Renamed 'Unique & New' -> 'Day by Day' graph
- Added PunchCard graph

Plan/common/src/main/java/com/djrapitops/plan/system/json/GraphJSONParser.java

@@ -17,6 +17,7 @@
 package com.djrapitops.plan.system.json;
 
 import com.djrapitops.plan.data.container.Ping;
+import com.djrapitops.plan.data.container.Session;
 import com.djrapitops.plan.data.store.mutators.MutatorFunctions;
 import com.djrapitops.plan.data.store.mutators.PingMutator;
 import com.djrapitops.plan.data.store.mutators.TPSMutator;
@@ -25,10 +26,7 @@ import com.djrapitops.plan.data.time.WorldTimes;
 import com.djrapitops.plan.db.Database;
 import com.djrapitops.plan.db.access.queries.analysis.ActivityIndexQueries;
 import com.djrapitops.plan.db.access.queries.analysis.PlayerCountQueries;
-import com.djrapitops.plan.db.access.queries.objects.GeoInfoQueries;
+import com.djrapitops.plan.db.access.queries.objects.*;
-import com.djrapitops.plan.db.access.queries.objects.PingQueries;
-import com.djrapitops.plan.db.access.queries.objects.TPSQueries;
-import com.djrapitops.plan.db.access.queries.objects.WorldTimesQueries;
 import com.djrapitops.plan.system.database.DBSystem;
 import com.djrapitops.plan.system.settings.config.PlanConfig;
 import com.djrapitops.plan.system.settings.paths.TimeSettings;
@@ -187,4 +185,13 @@ public class GraphJSONParser {
                 ",\"avg_ping_series\":" + pingGraph.getAvgGraph().toHighChartsSeries() +
                 ",\"max_ping_series\":" + pingGraph.getMaxGraph().toHighChartsSeries() + '}';
     }
+
+    public Map<String, Object> punchCardJSONAsMap(UUID serverUUID) {
+        long now = System.currentTimeMillis();
+        long monthAgo = now - TimeUnit.DAYS.toMillis(30L);
+        List<Session> sessions = dbSystem.getDatabase().query(
+                SessionQueries.fetchServerSessionsWithoutKillOrWorldData(monthAgo, now, serverUUID)
+        );
+        return Collections.singletonMap("punchCard", graphs.special().punchCard(sessions).getDots());
+    }
 }

Plan/common/src/main/java/com/djrapitops/plan/system/webserver/pages/json/GraphsJSONHandler.java

@@ -76,6 +76,8 @@ public class GraphsJSONHandler implements PageHandler {
                 return new JSONResponse(graphJSON.geolocationGraphsJSONAsMap(serverUUID));
             case "ping":
                 return new JSONResponse(graphJSON.pingGraphsJSON(serverUUID));
+            case "punchCard":
+                return new JSONResponse(graphJSON.punchCardJSONAsMap(serverUUID));
             default:
                 throw new BadRequestException("unknown 'type' parameter: " + type);
         }

Plan/common/src/main/resources/assets/plan/web/js/graphs.js

@@ -143,7 +143,8 @@ function onlineActivityCalendar(id, events, firstDay) {
 
         events: events,
 
-        height: 'parent',
+        height: 490,
+        contentHeight: 485,
         header: {
             left: 'title',
             center: '',
@@ -151,9 +152,7 @@ function onlineActivityCalendar(id, events, firstDay) {
         }
     });
 
-    setTimeout(function () {
+    $(id).fullCalendar('render')
-        $(id).fullCalendar('render')
-    }, 1000);
 }
 
 function performanceChart(id, playersOnlineSeries, tpsSeries, cpuSeries, ramSeries, entitySeries, chunkSeries) {

Plan/common/src/main/resources/assets/plan/web/server.html

@@ -338,30 +338,50 @@
                     </div>
 
                     <div class="row">
-                        <!-- New & Unique Players Chart -->
+                        <!-- Online Activity Charts -->
-                        <div class="col-xl-6 col-lg-6 col-sm-12">
+                        <div class="col-xl-12 col-lg-12 col-sm-12">
                             <div class="card shadow mb-4">
-                                <div
+                                <ul class="nav nav-tabs" id="onlineActivityTab" role="tablist">
-                                        class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+                                    <li class="nav-item">
-                                    <h6 class="m-0 font-weight-bold col-black"><i
+                                        <a aria-controls="home" aria-selected="true" class="nav-link active col-black"
-                                            class="fas fa-fw fa-chart-area col-blue"></i>
+                                           data-toggle="tab" href="#unique-tab" id="online-unique-tab" role="tab"><i
-                                        New & Unique Players</h6>
+                                                class="fa fa-fw fa-chart-area col-blue"></i> Day by Day</a>
-                                </div>
+                                    </li>
-                                <div class="chart-area" id="uniqueChart"><span class="loader"></span></div>
+                                    <li class="nav-item">
-                            </div>
+                                        <a aria-controls="profile" aria-selected="false" class="nav-link col-black"
-                        </div>
+                                           data-toggle="tab"
-
+                                           href="#calendar-tab" id="online-calendar-tab" role="tab"><i
-                        <!-- Calendar -->
+                                                class="far fa-fw fa-calendar col-teal"></i> Server Calendar</a>
-                        <div class="col-xl-6 col-lg-6 col-sm-12">
+                                    </li>
-                            <div class="card shadow mb-4">
+                                    <li class="nav-item">
-                                <div
+                                        <a aria-controls="contact" aria-selected="false" class="nav-link col-black"
-                                        class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+                                           data-toggle="tab" href="#punchcard-tab" id="online-punchcard-tab"
-                                    <h6 class="m-0 font-weight-bold col-black"><i
+                                           role="tab"><i class="fa fa-fw fa-braille col-black"></i> Punchcard
-                                            class="far fa-fw fa-calendar-alt col-teal"></i>
+                                            30d</a>
-                                        Calendar</h6>
+                                    </li>
-                                </div>
+                                </ul>
-                                <div class="chart-area" id="calendar" style="height: 500px;">
+                                <div class="tab-content" id="onlineActivityTabContent">
-                                    <span class="loader"></span>
+                                    <div aria-labelledby="online-unique-tab" class="tab-pane fade show active"
+                                         id="unique-tab"
+                                         role="tabpanel">
+                                        <div class="chart-area" id="uniqueChart"><span class="loader"></span></div>
+                                    </div>
+                                    <div aria-labelledby="online-calendar-tab" class="tab-pane fade" id="calendar-tab"
+                                         role="tabpanel">
+                                        <div class="row">
+                                            <div class="col-lg-2 col-sm" style="height: 0;"></div>
+                                            <div class="col-lg-8 col-sm-12" style="height: 550px;">
+                                                <div class="chart-area" id="calendar">
+                                                    <span class="loader"></span>
+                                                </div>
+                                            </div>
+                                            <div class="col-lg-2 col-sm" style="height: 0;"></div>
+                                        </div>
+                                    </div>
+                                    <div aria-labelledby="online-punchcard-tab" class="tab-pane fade" id="punchcard-tab"
+                                         role="tabpanel">
+                                        <div class="chart-area" id="punchCard"><span class="loader"></span></div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -961,7 +981,7 @@
                         <!-- Performance Charts -->
                         <div class="col-xl-12 col-lg-12 col-sm-12">
                             <div class="card shadow mb-4">
-                                <ul class="nav nav-tabs" id="myTab" role="tablist">
+                                <ul class="nav nav-tabs" id="performanceChartTab" role="tablist">
                                     <li class="nav-item">
                                         <a aria-controls="home" aria-selected="true" class="nav-link active col-black"
                                            data-toggle="tab" href="#all" id="performance-all-tab" role="tab"><i
@@ -998,7 +1018,7 @@
                                                 class="fa fa-fw fa-hdd col-blue-grey"></i> Disk Space</a>
                                     </li>
                                 </ul>
-                                <div class="tab-content" id="myTabContent">
+                                <div class="tab-content" id="performanceChartTabContent">
                                     <div aria-labelledby="performance-all-tab" class="tab-pane fade show active"
                                          id="all"
                                          role="tabpanel">
@@ -1603,13 +1623,32 @@
 
     jsonRequest("../v1/graph?type=serverCalendar&server=${serverName}", function (json, error) {
         if (json) {
+            var clicked = false;
+            $('#online-calendar-tab').click(function () {
+                if (!clicked) {
+                    onlineActivityCalendar('#calendar', json.data, json.firstDay);
+                    clicked = true;
+                }
+            });
             $('#calendar').text('');
-            onlineActivityCalendar('#calendar', json.data, json.firstDay);
         } else if (error) {
             $('#calendar').text("Failed to load calendar data: " + error)
         }
     });
 
+    jsonRequest("../v1/graph?type=punchCard&server=${serverName}", function (json, error) {
+        if (json) {
+            var punchCardSeries = {
+                name: 'Relative Join Activity',
+                color: v.colors.punchCard,
+                data: json.punchCard
+            };
+            punchCard('punchCard', punchCardSeries);
+        } else if (error) {
+            $('#punchCard').text("Failed to load graph data: " + error)
+        }
+    });
+
     setLoadingText('Sorting players table..');
 
     jsonRequest("../v1/players?server=${serverName}", function (playersTableJson, error) {

Plan/json-endpoints.md

@@ -74,8 +74,8 @@ Obtain html for data extension tabs and navigation.
 Returns:
 ```javascript
 {
-    navigation: String (html),
+    String (html),
-    tabs: String (html)
+    tabs;: String (html)
 }
 ```
 
@@ -106,6 +106,7 @@ Type | Description
 `activity` | Activity stack graph and pie graph data
 `geolocation` | World Map and bar graph data. World Map uses iso-a3 specification of Country codes and Bar graph uses country names.
 `ping` | Min, Avg, Max ping graph data.
+`punchCard` | PunchCard graph data. (Scatter plot)
 
 ### `GET /v1/player`