Add peer map to charts

Author: Peter Pratscher

handlers/charts.go

@@ -18,10 +18,14 @@ package handlers
 
 import (
 	"coda-explorer/db"
+	"coda-explorer/services"
 	"coda-explorer/templates"
 	"coda-explorer/types"
 	"coda-explorer/version"
+	"fmt"
+	"github.com/lib/pq"
 	"html/template"
+	"net"
 	"net/http"
 )
 
@@ -33,14 +37,39 @@ func Charts(w http.ResponseWriter, r *http.Request) {
 
 	w.Header().Set("Content-Type", "text/html")
 
-	var stats []*types.Statistic
-	err := db.DB.Select(&stats, "SELECT * FROM statistics WHERE value > 0 ORDER BY ts, indicator")
+	pageData := &types.ChartsPageData{
+		Peers: make(map[string]*types.PeerInfoPageData),
+	}
+	err := db.DB.Select(&pageData.Statistics, "SELECT * FROM statistics WHERE value > 0 ORDER BY ts, indicator")
 	if err != nil {
 		logger.Errorf("error retrieving statistcs data for route %v: %v", r.URL.String(), err)
 		http.Error(w, "Internal server error", 503)
 		return
 	}
 
+	var peers pq.StringArray
+	err = db.DB.Get(&peers, "SELECT peers FROM daemonstatus ORDER BY ts DESC LIMIT 1")
+
+	for _, peer := range peers {
+		ip, _, err := net.SplitHostPort(peer)
+		if err != nil {
+			continue
+		}
+
+		rec, err := services.GeoIpDb.GetRecord(ip)
+
+		if err != nil {
+			continue
+		}
+
+		geoKey := fmt.Sprintf("%v;%v", rec.Latitude, rec.Longitude)
+		if pageData.Peers[geoKey] == nil {
+			pageData.Peers[geoKey] = &types.PeerInfoPageData{}
+		}
+		pageData.Peers[geoKey].PeerCount++
+		pageData.Peers[geoKey].Geo = &rec
+	}
+
 	data := &types.PageData{
 		Meta: &types.Meta{
 			Title:       "coda explorer",
@@ -49,7 +78,7 @@ func Charts(w http.ResponseWriter, r *http.Request) {
 		},
 		ShowSyncingMessage: false,
 		Active:             "charts",
-		Data:               stats,
+		Data:               pageData,
 		Version:            version.Version,
 	}
 

ip2location/IP2LOCATION-LITE-DB1.BIN

@@ -38,7 +38,7 @@ var logger = logrus.New().WithField("module", "services")
 // Init will initialize the services
 func Init() {
 
-	db, err := ip2location.NewIP2Location("ip2location/IP2LOCATION-LITE-DB1.BIN")
+	db, err := ip2location.NewIP2Location("ip2location/IP2LOCATION-LITE-DB5.BIN")
 	if err != nil {
 		logger.Fatalf("error opening ip2location database: %v", err)
 	}

ip2location/IP2LOCATION-LITE-DB5.BIN

@@ -1,4 +1,8 @@
 {{ define "js"}}
+	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
+	<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.9/datamaps.all.min.js" integrity="sha256-Lo7ue3BsvPrQ6MABnTPBDPysEwggoUeJiDKKAeKiDFY=" crossorigin="anonymous"></script>
+
 	<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
 	<script src="/js/chartHelper.js"></script>
 	<script>
@@ -14,7 +18,7 @@
                 return obj
             }, {})
 
-        const data = {{.}}
+        const data = {{.Statistics}}
         const chartData = arrayToObject(data, "indicator")
 
 		const charts = []
@@ -54,6 +58,40 @@
             return val;
         }))
 
+        const peers = {{.Peers}}
+        console.log(peers)
+        var map = new Datamap({
+        	element: document.getElementById('map-peers'),
+            scope: 'world',
+            geographyConfig: {
+                popupOnHover: false,
+                highlightOnHover: false
+            },
+            fills: {
+                defaultFill: '#ABDDA4',
+                PEER: 'blue',
+            }
+        });
+
+
+        var bubbles = []
+        for (var geoKey in peers) {
+            bubbles.push({
+                peerCount: peers[geoKey].PeerCount,
+                country: peers[geoKey].Geo.CountryLong,
+                city: peers[geoKey].Geo.City,
+                radius:  peers[geoKey].PeerCount * 1.5,
+                latitude: peers[geoKey].Geo.Latitude,
+                longitude: peers[geoKey].Geo.Longitude,
+                fillKey: 'PEER',
+            })
+		}
+        map.bubbles(bubbles, {
+            popupTemplate: function(geo, data) {
+                return '<div class="hoverinfo">' + data.country + ' - ' + data.city + ': ' + data.peerCount + ' peers</div>'
+            }
+        });
+
         $('#toggleSwitch').on('change', function(e) {
             charts.forEach((chart) => {
                 chart.updateOptions({
@@ -71,6 +109,9 @@
 {{end}}
 
 {{ define "css"}}
+	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+		  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
+		  crossorigin=""/>
 {{end}}
 
 {{ define "content"}}
@@ -97,7 +138,9 @@ <h1 class="h4 mb-1 mb-md-0">
 			<div id="chart-snark-workers" class="border-bottom mb-2"></div>
 			<div id="chart-snark-fees" class="border-bottom mb-2"></div>
 			<div id="chart-total-staked" class="border-bottom mb-2"></div>
-			<div id="chart-peers"></div>
+			<div id="chart-peers" class="border-bottom mb-2"></div>
+			<span class="ml-2" style="font-size: 14px; font-weight: 900; font-family: Helvetica, Arial, sans-serif; opacity: 1;">Peer Map</span>
+			<div id="map-peers" class="border-bottom mb-2" style="position: relative; margin: 0 auto; width: 750px; height: 500px;"></div>
 		</div>
 	</div>
 {{end}}

services/services.go

@@ -18,6 +18,7 @@ package types
 
 import (
 	"github.com/lib/pq"
+	"github.com/tankbusta/go-ip2location"
 	"time"
 )
 
@@ -94,3 +95,13 @@ type SnarkJobPageData struct {
 	Height         int           `db:"height"`
 	Epoch          int           `db:"epoch"`
 }
+
+type ChartsPageData struct {
+	Statistics []*Statistic
+	Peers      map[string]*PeerInfoPageData
+}
+
+type PeerInfoPageData struct {
+	PeerCount int
+	Geo       *ip2location.IP2LocationEntry
+}