Add data generation in the backend

client/collections/events.js

@@ -78,59 +78,6 @@ define([
                     n: data.count
                 });
             });
-        },
-
-        /*
-         *  Return list of properties
-         */
-        properties: function() {
-            return _.uniq(this.reduce(function(memo, e) {
-                memo.push.apply(memo, _.keys(e.get("properties", {})));
-                return memo;
-            }, []));
-        },
-
-
-        /*
-         *	Get data series for these events collection
-         */
-        dataSeries: function(options) {
-        	options = _.defaults(options || {}, {
-        		'interval': 1000,
-                'period': -1,
-                'property': null,
-                'transform': _.size
-        	});
-
-            // Sort the collection
-            this.sort();
-
-            // Build a map (x->[list of values])
-        	var seriesMap = {};
-        	this.each(function(e) {
-                // Check period
-                var t = e.get("timestamp");
-                if (options.period > 0 && t < (Date.now() - options.period)) {
-                    return;
-                }
-
-                // index
-        		t = Math.floor(t / options.interval)*options.interval;
-
-                // value
-                var v = !options.property ? 1 : e.get("properties."+options.property, 0);
-        		seriesMap[t] = seriesMap[t] || [];
-                seriesMap[t].push(v);
-        	});
-            //console.log("seriesMap (x->[list of values]) ", seriesMap);
-
-            // Transform to (x->y)
-            _.each(seriesMap, function(values, x) {
-                seriesMap[x] = options.transform(values);
-            });
-            //console.log("seriesMap (x->y) ", seriesMap);
-
-        	return _.pairs(seriesMap);
         }
     });
 

client/models/eventinfo.js

@@ -0,0 +1,61 @@
+define([
+    "hr/hr",
+    "api",
+    "notifications",
+    "models/user"
+], function(hr, api, notifications, User) {
+    /*
+     *  EventInfo model represent informations given by the api using /api/<token>/event/<namespace>/<event>
+     *  about some events.
+     *  It used to get a list of all properties names and types of an events collection.
+     */
+    var EventInfo = hr.Model.extend({
+        defaults: {
+        	'event': null,
+            'namespace': null,
+            'properties': {},
+            'timestamp': 0,
+        },
+
+        /*
+         *  Constructor
+         */
+        initialize: function() {
+            EventInfo.__super__.initialize.apply(this, arguments);
+
+            // Signal eventsi n relatime
+            notifications.on("events:new", function(e) {
+                if (e.report() == this.report()) {
+                    this.trigger("events:new", e);
+                }
+            }, this);
+            return this;
+        },
+
+        /*
+         * Load info about events
+         */
+        load: function(eventNamespace, eventName) {
+            var that = this;
+            return api.request("get", User.current.get('token')+"/event/"+eventNamespace+"/"+eventName, {}).done(function(data) {
+                that.set(data);
+            });
+        },
+
+        /*
+         *  Return report id
+         */
+        report: function() {
+            return this.get("namespace")+"/"+this.get("event");
+        },
+
+        /*
+         *  Return model for the event
+         */
+        model: function() {
+            return User.current.models.getModel(this);
+        }
+    });
+
+    return EventInfo;
+});

client/models/eventmodel.js

@@ -24,7 +24,7 @@ define([
          */
         icon: function() {
             var icon = this.get('icon', "");
-            if (icon.length > 0 && icon[0] == '$') {
+            if (icon && icon[0] == '$') {
                 icon = '/static/images/models/'+icon.slice(1)+'.png';
             }
             return icon || '/static/images/models/default.png';

client/resources/templates/events.chart.line.html

@@ -46,7 +46,7 @@ <h3 class="model-name"><%- model.get('name') %></h3>
 				Default
 			</label>
 		</div>
-		<% _.each(properties, function(name) { %>
+		<% _.each(properties, function(propertyType, name) { %>
 			<div class="checkbox">
 				<label>
 					<input type="checkbox" value="<%- name %>" <% if (_.contains(settings.properties, name)) { %>checked<% } %>>

client/views/events.chart.js

@@ -4,8 +4,8 @@ define([
     "api",
     "models/user",
     "models/eventmodel",
-    "collections/events"
-], function(hr, _, api, User, EventModel, Events) { 
+    "models/eventinfo"
+], function(hr, _, api, User, EventModel, EventInfo) { 
 
     var EventsChartView = hr.View.extend({
         className: "events-chart",
@@ -29,15 +29,11 @@ define([
             _.defaults(this.settings, this.defaultSettings);
             _.extend(this.settings, this.loadSettings());
 
-
-            // Create events collection
-            this.collection = new Events({
-                'eventName': this.eventName,
-                'namespace': this.eventNamespace,
-                'limit': this.settings.limit || 100
-            });
-            this.collection.on("add remove",  _.throttle(this.updateChart, 500), this);
-            this.updateData();
+            // Create event info
+            this.eventInfo = new EventInfo();
+            this.eventInfo.on("change", this.render, this);
+            this.eventInfo.on("events:new",  _.throttle(this.updateChart, 1500), this);
+            this.eventInfo.load(this.eventNamespace, this.eventName);
             return this;
         },
 
@@ -60,23 +56,24 @@ define([
         /*
          *  Load events data
          */
-        updateData: function() {
-            this.collection.options.limit = this.settings.limit || 100;
-            this.collection.reset([]);
-            this.collection.getSpecific();
-            return this;
+        updateData: function(options) {
+            options = _.defaults(options || {}, {
+                'start': 0,
+                'limit': this.settings.limit || 10000,
+                'interval': 1000,
+                'period': -1,
+                'property': null,
+                'transform': _.size
+            });
+
+            return api.request("get", User.current.get('token')+"/data/"+this.eventNamespace+"/"+this.eventName, options);
         },
 
         /*
          *  Return model for these events
          */
         getModel: function() {
-            var def = new EventModel({}, {
-                'event': this.eventName,
-                'namespace': this.eventNamespace,
-                'name': this.eventName
-            });
-            return User.current.models.getModel(this.report, def);
+            return this.eventInfo.model();
         },
 
         /*

client/views/events.chart.line.js

@@ -75,7 +75,7 @@ define([
         initialize: function() {
             EventsChartLineView.__super__.initialize.apply(this, arguments);
 
-
+            this.chart = null;
 
             return this;
         },
@@ -86,13 +86,13 @@ define([
         templateContext: function() {
             return {
                 'model': this.getModel(),
-                'event': this.eventName,
+                'event': this.eventInfo,
 
                 'transforms': this.dataTransforms,
                 'intervals': this.dataIntervals,
                 'periods': this.dataPeriods,
-                'properties': this.collection.properties(),
                 'limits': this.dataLimits,
+                'properties': this.eventInfo.get("properties"),
 
                 'settings': this.settings
             };
@@ -104,39 +104,59 @@ define([
         finish: function() {
             EventsChartLineView.__super__.finish.apply(this, arguments);
 
+            this.chart = $.plot(this.$(".chart"), [], {
+                'xaxis': {
+                    'mode': 'time'
+                }
+            });
+
+            return this.updateChart();
+        },
+
+        /*
+         *  Events list change : refresh the chart
+         */
+        updateChart: function() {
+            var that = this;
             var series = [];
+            var seriesD = [];
             var properties = this.settings.properties;
 
+            if (this.chart == null) return this;
+
             _.each(properties, function(property) {
-                var data = this.collection.dataSeries({
+                var d = this.updateData({
                     'transform': this.dataTransforms[this.settings.transform],
                     'property': property,
                     'period': this.settings.period,
                     'interval': this.settings.interval
                 });
-
-                series.push({
-                    'data': data,
-                    'hoverable': true,
-                    'lines': {
-                        'show': true
-                    },
-                    'points': {
-                        'show': true
-                    },
-                    'lines': {
-                        'show': true,
-                        'fill': true,
-                        'fillColor': "rgba(255, 255, 255, 0.8)"
-                    }
+                d.done(function(data) {
+                    series.push({
+                        'data': data.data,
+                        'label': property || 'Default',
+                        'hoverable': true,
+                        'clickable': true,
+                        'lines': {
+                            'show': true
+                        },
+                        'points': {
+                            'show': true
+                        },
+                        'lines': {
+                            'show': true,
+                            'fill': true,
+                            'fillColor': "rgba(255, 255, 255, 0.8)"
+                        }
+                    });
                 });
+                seriesD.push(d);
             }, this);
 
-
-            $.plot(this.$(".chart"), series, {
-                'xaxis': {
-                    'mode': 'time'
-                }
+            hr.Deferred.when.apply(null, seriesD).done(function() {
+                that.chart.setData(series);
+                that.chart.setupGrid();
+                that.chart.draw();  
             });
 
             return this;
@@ -193,7 +213,7 @@ define([
         actionSelectLimit: function(e) {
             this.settings.limit = parseInt(this.$(".select-limit").val());
             this.saveSettings();
-            this.updateData();
+            //this.updateData();
         },
 
         /*

examples/python/reportr.py

@@ -68,7 +68,7 @@ def request(self, method, url, bearer_auth=True, **req_kwargs):
 
         return super(Reportr, self).request(method, url, **req_kwargs)
 
-    def track(self, event, namespace="main", **kwargs):
+    def track(self, namespace, event, **kwargs):
         """
         Track an event
 
@@ -82,7 +82,7 @@ def track(self, event, namespace="main", **kwargs):
             "data": base64.b64encode(json.dumps(kwargs))
         })
 
-    def model(self, event, namespace="main", **kwargs):
+    def model(self, namespace, event, **kwargs):
         """
         Define a model for an event type
 

examples/python/test.py

@@ -1,10 +1,11 @@
+import time 
 from random import randint
 from reportr import Reportr
 
 # Create a Reportr Client
 client = Reportr(
-	host="http://www.reportr.io",
-	token="fb5dfd49-760a-4bce-bf67-fa6131283c71")
+	host="http://localhost:5000",
+	token="9deab9d0-2f2a-4e6a-ae05-5451cbbf2973")
 
 # Define model for our event
 client.model("reportr", "ping",
@@ -13,6 +14,9 @@
 	icon="$message")
 
 # Track an event
-client.track("reportr", "ping", properties={
-	"n": randint(0, 100)
-})
+for i in range(5000):
+	client.track("reportr", "ping", properties={
+		"i": i,
+		"n": randint(0, 100)
+	})
+	time.sleep(0.4)