Add map visualization

README.md

@@ -115,11 +115,11 @@ Events models define information about how to display an event in the dashboard.
 
 #### Special properties for events
 
-When you track events using the API, you can define some specials properties that can be use by Reportr for advanced used. Special properties always begin with '$'.
+When you track events using the API, you can define some specials properties that can be use by Reportr for advanced used. Special properties always begin with '@'.
 
 ```
-$lat : latitude for location
-$lng : longitude for location
+@lat : latitude for location
+@lng : longitude for location
 ```
 
 ## Trackers

client/build.js

@@ -41,5 +41,8 @@ exports.config = {
     },
     "paths": {
 
-    }
+    },
+
+    // Config and args
+    "args": config.client
 };

client/resources/templates/reports/map.html

@@ -0,0 +1,9 @@
+<div class="report-options">
+	<div class="checkbox">
+		<label>
+			<input type="checkbox" value="lines" <% if (settings.lines) { %>checked<% } %>>
+			Draw lines between positions
+		</label>
+	</div>
+</div>
+<div class="map"></div>

client/stylesheets/main.less

@@ -14,3 +14,4 @@
 @import "reports/list.less";
 @import "reports/lastvalue.less";
 @import "reports/count.less";
+@import "reports/map.less";

client/stylesheets/reports/map.less

@@ -0,0 +1,5 @@
+.report-map {
+	.map {
+		height: 330px;
+	}
+}

client/views/report.js

@@ -51,15 +51,16 @@ define([
          */
         templateContext: function() {
             return {
-                'report': this.report
+                'report': this.report,
+                'settings': this.report.settings
             };
         },
 
         /*
          *  Events list change : refresh the chart
          */
         updateChart: function() {
-            return this.render();
+            return this;
         },
 
         /*

client/views/reports/map.js

@@ -0,0 +1,162 @@
+define([
+    "hr/hr",
+    "hr/args",
+    "vendors/moment",
+    "api",
+    "collections/events",
+    "views/report"
+], function(hr, args, moment, api, Events, Report) { 
+
+    /*
+     *  This report visualization display a map with events (need properties $lat and $lng)
+     */
+
+    var ReportMapView = Report.visualization({
+        'id': 'map',
+        'name': 'Map'
+    }, {
+        className: "report-map",
+        template: "reports/map.html",
+        events: {
+            'change input': 'actionChangeSettings'
+        },
+        defaultSettings: {
+            'limit': 100,
+            'lines': true
+        },
+
+        /*
+         *  Constructor
+         */
+        initialize: function() {
+            ReportMapView.__super__.initialize.apply(this, arguments);
+
+            // Map
+            this.map = null;
+            this.previousMarker = null;
+
+            // Collection
+            this.collection = new Events({
+                'limit': 100,
+                'eventName': this.report.eventName,
+                'eventNamespace': this.report.eventNamespace
+            });
+            this.collection.on("add", this.addEventMarker, this);
+            this.collection.getSpecific();
+
+            ReportMapView.loadMapApi(_.bind(this.render), this);
+
+            return this;
+        },
+
+        finish: function() {
+            ReportMapView.__super__.finish.apply(this, arguments);
+
+            if (!ReportMapView.apiReady) return this;
+
+            this.map = new google.maps.Map(this.$(".map").get(0), {
+                'center': new google.maps.LatLng(51.508742,-0.120850),
+                'zoom':2,
+                'disableDefaultUI': true,
+                'mapTypeId': google.maps.MapTypeId.ROADMAP
+            });
+
+            this.collection.each(_.bind(this.addEventMarker, this));
+
+            return this;
+        },
+
+        /*
+         *  Add an event
+         */
+        addEventMarker: function(e) {
+            var that = this;
+            if (this.map == null) return this;
+
+            var lat = e.get("properties.@lat");
+            var lng = e.get("properties.@lng");
+
+            if (lat == null || lng == null) return this;
+
+            var position = new google.maps.LatLng(lat, lng);
+            var marker = new google.maps.Marker({
+                'position': position,
+                'map': this.map,
+                'title': e.get("event")
+            });
+            google.maps.event.addListener(marker, 'click', function() {
+                var infowindow = new google.maps.InfoWindow({
+                    'content': moment(e.get("timestamp")).fromNow() + " ("+lat.toFixed(3)+", "+lng.toFixed(3)+")"
+                });
+                infowindow.open(that.map, marker);
+            });
+
+            // Draw line
+            if (this.report.settings.lines && this.previousMarker) {
+                var line = new google.maps.Polyline({
+                    path: [
+                        this.previousMarker.getPosition(),
+                        position
+                    ],
+                    geodesic: true,
+                    strokeColor: '#FF0000',
+                    strokeOpacity: 1.0,
+                    strokeWeight: 2
+                });
+
+                line.setMap(this.map);
+            }
+
+
+            this.previousMarker = marker;
+
+            return this;
+        },
+
+        /*
+         * (action) Change settings
+         */
+        actionChangeSettings: function(e) {
+            var p = $(e.currentTarget).attr("value");
+            this.report.settings[p] = $(e.currentTarget).is(":checked");
+            this.report.saveSettings();
+            this.updateChart();
+        }
+    }, {
+        apiLoaded: false,
+        apiReady: false,
+
+        /*
+         *  Load the google map api
+         */
+        loadMapApi: function(callback) {
+            if (ReportMapView.apiReady) {
+                callback();
+                return;
+            }
+
+            $(window).on("googleMapAPI", callback);
+
+            if (!ReportMapView.apiLoaded) {
+                window.gmapInitialize = function() {
+                    ReportMapView.apiReady = true;
+                    $(window).trigger("googleMapAPI");
+                };
+
+                function loadScript() {
+                    var script = document.createElement("script");
+                    script.type = "text/javascript";
+                    script.src = "http://maps.googleapis.com/maps/api/js?key="+args.map.apiKey+"&sensor=false&callback=gmapInitialize";
+                    document.body.appendChild(script);
+                }
+
+                ReportMapView.apiLoaded = true;
+                window.load = loadScript();
+            }
+        }
+    });
+
+    ReportMapView.loadMapApi();
+
+    return ReportMapView;
+});

client/views/views.js

@@ -5,6 +5,7 @@ define([
     'views/reports/count',
     'views/reports/lastvalue',
     'views/reports/list',
+    'views/reports/map',
 
     'views/reports',
     'views/report'

config.js

@@ -19,6 +19,13 @@ module.exports =  {
 		"url": process.env.MONGOLAB_URI || process.env.MONGOHQ_URL || 'mongodb://localhost/reportr'
 	},
 
+	/* Client configuration */
+	"client": {
+		"map": {
+			"apiKey": "AIzaSyAAeM47baWKdmKoqWeIuK5bQCxtur6mWm0"
+		}
+	},
+
 	/* Trackers */
 	"trackers": [
 		{

examples/python/test.py

@@ -1,22 +1,6 @@
-import time 
-from random import randint
 from reportr import Reportr
 
 # Create a Reportr Client
 client = Reportr(
 	host="http://localhost:5000",
-	token="9deab9d0-2f2a-4e6a-ae05-5451cbbf2973")
-
-# Define model for our event
-client.model("reportr", "ping",
-	name="Ping",
-	description="Ping tests for the Reportr API with random value.",
-	icon="$message")
-
-# Track an event
-for i in range(5000):
-	client.track("reportr", "ping", properties={
-		"i": i,
-		"n": randint(0, 100)
-	})
-	time.sleep(0.4)
+	token="003ece3d-9086-442d-b1b2-ab83c1c6e7bc")

examples/python/test_location.py

@@ -0,0 +1,30 @@
+import random
+import time
+from test import client
+
+"""
+Simple test for tracking location
+"""
+
+# Create the bounding box
+#set longitude values - Y values
+minx = -180
+maxx = 180
+
+#set latitude values - X values
+miny = -23.5
+maxy = 23.5
+
+# Define model for our event
+client.model("phone", "location",
+	name="Phone Location",
+	description="Locations of my phone.",
+	icon="$location")
+
+# Track location
+for i in range(5000):
+	client.track("phone", "location", properties={
+		"@lat": random.uniform(minx, maxx),
+		"@lng": random.uniform(miny,maxy)
+	})
+	time.sleep(2)

public/static/application.css

@@ -1289,3 +1289,4 @@ a .icon-rotate-90:before,a .icon-rotate-180:before,a .icon-rotate-270:before,a .
 .report-lastvalue{text-align:center;}.report-lastvalue .value{text-align:center;font-size:60px;line-height:100px;}
 .report-count{text-align:center;padding:35px;}.report-count .counter{text-align:center;font-size:80px;line-height:100px;}
 .report-count .speed{text-align:center;font-size:30px;line-height:50px;font-weight:200;}.report-count .speed.speed-positive{color:#27ae60;}
+.report-map .map{height:330px;}