Added World Map to the Geo Location panel on the HTML report.

Area and bar charts are still available for this panel.
Closes allinurl#524

Author: allinurl

.gitignore

@@ -97,6 +97,8 @@ Makefile.in
 /src/facss.h
 /src/hoganjs.h
 /src/tpls.h
+/src/countries110m.h
+/src/topojsonjs.h
 
 # intermediate resources
 /resources/css/app.css.tmp
@@ -107,3 +109,5 @@ Makefile.in
 /resources/js/d3.v?.min.js.tmp
 /resources/js/hogan.min.js.tmp
 /resources/tpls.html.tmp
+/resources/countries-110m.json.tmp
+/resources/js/topojson.v3.min.js.tmp

Makefile.am

@@ -9,7 +9,9 @@ dist_noinst_DATA =                 \
   resources/css/fa.min.css         \
   resources/js/app.js              \
   resources/js/charts.js           \
+  resources/countries-110m.json    \
   resources/js/d3.v7.min.js        \
+  resources/js/topojson.v3.min.js  \
   resources/js/hogan.min.js
 
 noinst_PROGRAMS = bin2c
@@ -21,7 +23,9 @@ BUILT_SOURCES =       \
   src/facss.h         \
   src/appcss.h        \
   src/d3js.h          \
+  src/topojsonjs.h    \
   src/hoganjs.h       \
+  src/countries110m.h \
   src/chartsjs.h      \
   src/appjs.h
 
@@ -31,14 +35,18 @@ CLEANFILES =                          \
   src/facss.h                         \
   src/appcss.h                        \
   src/d3js.h                          \
+  src/topojsonjs.h                    \
   src/hoganjs.h                       \
+  src/countries110m.h                 \
   src/chartsjs.h                      \
   src/appjs.h                         \
   resources/tpls.html.tmp             \
+  resources/countries-110m.json.tmp   \
   resources/css/bootstrap.min.css.tmp \
   resources/css/fa.min.css.tmp        \
   resources/css/app.css.tmp           \
   resources/js/d3.v7.min.js.tmp       \
+  resources/js/topojson.v3.min.js.tmp \
   resources/js/hogan.min.js.tmp       \
   resources/js/charts.js.tmp          \
   resources/js/app.js.tmp
@@ -51,6 +59,14 @@ if HAS_SEDTR
 else
 	./bin2c $(srcdir)/resources/tpls.html src/tpls.h tpls
 endif
+# countries.json
+src/countries110m.h: bin2c$(EXEEXT) $(srcdir)/resources/countries-110m.json
+if HAS_SEDTR
+	cat $(srcdir)/resources/countries-110m.json | sed "s/^[[:space:]]*//" | sed "/^$$/d" | tr -d "\r\n" > $(srcdir)/resources/countries-110m.json.tmp
+	./bin2c $(srcdir)/resources/countries-110m.json.tmp src/countries110m.h countries_json
+else
+	./bin2c $(srcdir)/resources/countries-110m.json src/countries110m.h countries_json
+endif
 # Bootstrap
 src/bootstrapcss.h: bin2c$(EXEEXT) $(srcdir)/resources/css/bootstrap.min.css
 if HAS_SEDTR
@@ -83,6 +99,14 @@ if HAS_SEDTR
 else
 	./bin2c $(srcdir)/resources/js/d3.v7.min.js src/d3js.h d3_js
 endif
+# topojson.js
+src/topojsonjs.h: bin2c$(EXEEXT) $(srcdir)/resources/js/topojson.v3.min.js
+if HAS_SEDTR
+	cat $(srcdir)/resources/js/topojson.v3.min.js | sed "s/^[[:space:]]*//" | sed "/^$$/d" | tr -d "\r\n" > $(srcdir)/resources/js/topojson.v3.min.js.tmp
+	./bin2c $(srcdir)/resources/js/topojson.v3.min.js.tmp src/topojsonjs.h topojson_js
+else
+	./bin2c $(srcdir)/resources/js/topojson.v3.min.js src/topojsonjs.h topojson_js
+endif
 # Hogan.js
 src/hoganjs.h: bin2c$(EXEEXT) $(srcdir)/resources/js/hogan.min.js
 if HAS_SEDTR

resources/countries-110m.json

@@ -1144,3 +1144,19 @@ html.dark.purple,
 .dark.purple .line1 {
 	stroke: #d048b6;
 }
+.country {
+	fill: #ccc;
+	stroke: #fff;
+	stroke-width: 0.5px;
+}
+.country:hover {
+	fill: #b3b3b3;
+}
+.dark .country {
+	fill: #ccc;
+	stroke: #222;
+	stroke-width: 0.5px;
+}
+.dark .legend-svg text {
+	fill: #FFF;
+}

resources/css/app.css

@@ -1094,6 +1094,16 @@ GoAccess.Charts = {
 		return arr.join(' ');
 	},
 
+	getWMap: function (panel, plotUI, data) {
+		var chart = WorldMap(d3.select("#chart-" + panel));
+		chart.width($("#chart-" + panel).getBoundingClientRect().width);
+		chart.height(400);
+		chart.metric(plotUI['d3']['y0']['key']);
+		chart.opts(plotUI);
+
+		return chart;
+	},
+
 	getAreaSpline: function (panel, plotUI, data) {
 		var dualYaxis = plotUI['d3']['y1'];
 
@@ -1186,6 +1196,9 @@ GoAccess.Charts = {
 		case 'bar':
 			chart = this.getVBar(panel, plotUI, data);
 			break;
+		case 'wmap':
+			chart = this.getWMap(panel, plotUI, data);
+			break;
 		}
 
 		return chart;
@@ -1196,7 +1209,7 @@ GoAccess.Charts = {
 		d3.select('#chart-' + panel + '>.chart-tooltip-wrap')
 			.remove();
 		// remove svg
-		d3.select('#chart-' + panel).select('svg')
+		d3.select('#chart-' + panel).selectAll('svg')
 			.remove();
 		// add chart to the document
 		d3.select("#chart-" + panel)