Geolocation graphs to network page

This commit is contained in:
Rsl1122 2019-08-21 16:41:36 +03:00
parent a755973efe
commit 28d7a101c3
4 changed files with 74 additions and 27 deletions

View File

@ -249,6 +249,19 @@ public class GraphJSONParser {
return dataMap; return dataMap;
} }
public Map<String, Object> geolocationGraphsJSONAsMap() {
Database db = dbSystem.getDatabase();
Map<String, Integer> geolocationCounts = db.query(GeoInfoQueries.networkGeolocationCounts());
BarGraph geolocationBarGraph = graphs.bar().geolocationBarGraph(geolocationCounts);
WorldMap worldMap = graphs.special().worldMap(geolocationCounts);
Map<String, Object> dataMap = new HashMap<>();
dataMap.put("geolocation_series", worldMap.getEntries());
dataMap.put("geolocation_bar_series", geolocationBarGraph.getBars());
return dataMap;
}
public String pingGraphsJSON(UUID serverUUID) { public String pingGraphsJSON(UUID serverUUID) {
Database db = dbSystem.getDatabase(); Database db = dbSystem.getDatabase();
long now = System.currentTimeMillis(); long now = System.currentTimeMillis();

View File

@ -98,6 +98,8 @@ public class GraphsJSONHandler implements PageHandler {
return new JSONResponse(graphJSON.uniqueAndNewGraphJSON()); return new JSONResponse(graphJSON.uniqueAndNewGraphJSON());
case "serverPie": case "serverPie":
return new JSONResponse(graphJSON.serverPreferencePieJSONAsMap()); return new JSONResponse(graphJSON.serverPreferencePieJSONAsMap());
case "geolocation":
return new JSONResponse(graphJSON.geolocationGraphsJSONAsMap());
default: default:
throw new BadRequestException("unknown 'type' parameter: " + type); throw new BadRequestException("unknown 'type' parameter: " + type);
} }

View File

@ -619,13 +619,19 @@
<!-- Geolocations --> <!-- Geolocations -->
<div class="col-xl-12 col-lg-12 col-sm-12"> <div class="col-xl-12 col-lg-12 col-sm-12">
<div class="card shadow mb-4"> <div class="card shadow mb-4">
<div <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold col-black"><i <h6 class="m-0 font-weight-bold col-black"><i
class="fas fa-fw fa-globe col-green"></i> class="fas fa-fw fa-globe col-green"></i>
Geolocations</h6> Geolocations</h6>
</div> </div>
<div class="chart-area"></div> <div class="chart-area row" style="height: 100%;">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div id="countryBarChart"><span class="loader"></span></div>
</div>
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<div id="worldMap"><span class="loader"></span></div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -633,30 +639,31 @@
<!-- Connection information --> <!-- Connection information -->
<div class="col-xl-12 col-lg-12 col-sm-12"> <div class="col-xl-12 col-lg-12 col-sm-12">
<div class="card shadow mb-4"> <div class="card shadow mb-4">
<div <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold col-black"><i <h6 class="m-0 font-weight-bold col-black"><i
class="fas fa-fw fa-wifi col-green"></i> class="fas fa-fw fa-wifi col-green"></i>
Connection Information</h6> Connection Information</h6>
</div> </div>
<table class="table mb-0"> <div class="scrollbar">
<thead class="bg-amber"> <table class="table">
<tr> <thead class="bg-amber">
<th><i class=" fa fa-fw fa-globe"></i> Country</th> <tr>
<th><i class=" fa fa-fw fa-signal"></i> Average Ping</th> <th><i class=" fa fa-fw fa-globe"></i> Country</th>
<th><i class=" fa fa-fw fa-signal"></i> Worst Ping</th> <th><i class=" fa fa-fw fa-signal"></i> Average Ping</th>
<th><i class=" fa fa-fw fa-signal"></i> Best Ping</th> <th><i class=" fa fa-fw fa-signal"></i> Worst Ping</th>
</tr> <th><i class=" fa fa-fw fa-signal"></i> Best Ping</th>
</thead> </tr>
<tbody> </thead>
<tr> <tbody>
<td>Local Machine</td> <tr>
<td>-</td> <td>Local Machine</td>
<td>-</td> <td>-</td>
<td>-</td> <td>-</td>
</tr> <td>-</td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -970,6 +977,33 @@
} }
}); });
jsonRequest("../v1/graph?type=geolocation", function (json, error) {
if (json) {
var geolocationSeries = {
name: 'Players',
type: 'map',
mapData: Highcharts.maps['custom/world'],
data: json.geolocation_series,
joinBy: ['iso-a3', 'code']
};
var geolocationBarSeries = {
color: '#4CAF50',
name: 'Players',
data: json.geolocation_bar_series.map(function (bar) {
return bar.value
})
};
var geolocationBarCategories = json.geolocation_bar_series.map(function (bar) {
return bar.label
});
worldMap('worldMap', v.colors.geolocationsLow, v.colors.geolocationsHigh, geolocationSeries);
horizontalBarChart('countryBarChart', geolocationBarCategories, [geolocationBarSeries], 'Players');
} else if (error) {
$('#worldMap').text("Failed to load graph data: " + error);
$('#countryBarChart').text("Failed to load graph data: " + error);
}
});
setLoadingText('Sorting out plugin tables..'); setLoadingText('Sorting out plugin tables..');
$('.server-name').text('${networkDisplayName}'); $('.server-name').text('${networkDisplayName}');

View File

@ -913,8 +913,7 @@
<!-- Geolocations --> <!-- Geolocations -->
<div class="col-xl-12 col-lg-12 col-sm-12"> <div class="col-xl-12 col-lg-12 col-sm-12">
<div class="card shadow mb-4"> <div class="card shadow mb-4">
<div <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold col-black"><i <h6 class="m-0 font-weight-bold col-black"><i
class="fas fa-fw fa-globe col-green"></i> class="fas fa-fw fa-globe col-green"></i>
Geolocations</h6> Geolocations</h6>
@ -934,8 +933,7 @@
<!-- Connection information --> <!-- Connection information -->
<div class="col-xl-12 col-lg-12 col-sm-12"> <div class="col-xl-12 col-lg-12 col-sm-12">
<div class="card shadow mb-4"> <div class="card shadow mb-4">
<div <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold col-black"><i <h6 class="m-0 font-weight-bold col-black"><i
class="fas fa-fw fa-wifi col-green"></i> class="fas fa-fw fa-wifi col-green"></i>
Connection Information</h6> Connection Information</h6>