New "plot chart" visualization

public/src/main.js

@@ -161,6 +161,9 @@ require([
                 return that.reports.loadAll();
             })
             .then(function() {
+                if (that.reports.size() > 0) { 
+                    that.setReport(that.reports.first());
+                }
                 that.update();
             })
             .fail(dialogs.error);

public/src/models/visualization.js

@@ -54,4 +54,4 @@ define([
     });
 
     return Visualization;
-});
+});

public/src/resources/langs/en.json

@@ -207,6 +207,38 @@
                 }
             }
         },
+        "plot": {
+            "title": "Plot Chart",
+            "config": {
+                "sample": {
+                    "label": "Sampling Points",
+                    "help": "X-Axis of this plot"
+                },
+                "fields": {
+                    "label": "Fields",
+                    "help": "Separated by commas"
+                },
+                "limit": {
+                    "label": "Limit",
+                    "help": "Max number of events"
+                },
+                "name": {
+                    "label": "Name",
+                    "help": "Template for the hover series name, see documentation for more infos about templates."
+                },
+                "interpolation": {
+                    "label": "Interpolation",
+                    "linear": "Linear - straight lines between points",
+                    "step-after": "Step After - square steps from point to point",
+                    "cardinal": "Cardinal - smooth curves via cardinal splines (default)",
+                    "basis": "Basis - smooth curves via B-splines"
+                },
+                "fillEmpty": {
+                    "label": "Fill Empty",
+                    "help": "Fill when there is no events with zero values."
+                }
+            }
+        },
         "value": {
             "title": "Last Value",
             "config": {
@@ -230,4 +262,4 @@
             "label": "Language"
         }
     }
-}
+}

public/src/resources/stylesheets/main.less

@@ -15,6 +15,7 @@
 
 @import "visualization.less";
 @import "visualizations/time.less";
+@import "visualizations/plot.less";
 @import "visualizations/bar.less";
 @import "visualizations/value.less";
 @import "visualizations/map.less";

public/src/resources/stylesheets/visualizations/plot.less

@@ -0,0 +1,8 @@
+.visualization.visualization-plot{
+    width: 100%;
+
+    .graph {
+        width: 100%;
+        height: 100%;
+    }
+}

public/src/utils/template.js

@@ -27,4 +27,4 @@ define([
     });
 
     return template;
-});
+});

public/src/views/visualizations/all.js

@@ -4,14 +4,16 @@ define([
     "views/visualizations/table",
     "views/visualizations/value",
     "views/visualizations/time",
+    "views/visualizations/plot",
     "views/visualizations/map"
-], function(resources, bar, table, value, time, map) {
+], function(resources, bar, table, value, time, plot, map) {
 
     return {
         'time': time,
+        'plot': plot,
         'table': table,
         'bar': bar,
         'value': value,
         'map': map
     };
-});
+});

public/src/views/visualizations/plot.js

@@ -0,0 +1,122 @@
+define([
+    "hr/utils",
+    "hr/dom",
+    "hr/hr",
+    "d3",
+    "rickshaw",
+    "core/api",
+    "utils/i18n",
+    "utils/template",
+    "views/visualizations/base",
+    "text!resources/templates/visualizations/time.html"
+], function(_, $, hr, d3, Rickshaw, api, i18n, template, BaseVisualization, templateFile) {
+    window.d3 = d3;
+
+    var INTERPOLATIONS = ['linear', 'step-after', 'cardinal', 'basis'];
+
+    var PlotVisualization = BaseVisualization.extend({
+        className: "visualization visualization-plot",
+        defaults: {},
+        events: {},
+        template: templateFile,
+
+        finish: function() {
+            try {
+                var that = this;
+                var tplMessage = that.model.getConf("name") || "<%- (field? field : 'Count') %>";
+
+                // Build series from data
+                var fieldNames = _.map(this.model.getConf("fields", "").split(","), 
+                    function (str) { return str.trim() }
+                );
+                var sampleName = this.model.getConf("sample", "").trim();
+                var series = _.chain(fieldNames).compact().concat([""])
+                .map(function(field, i, list) {
+                    if (list.length > 1 && !field) return null;
+
+                    return {
+                        name: template(tplMessage, {
+                            'field': field
+                        }),
+                        color: '#a6d87a',
+                        data: _.map(
+                            _.sortBy(
+                                _.filter(
+                                    that.data, 
+                                    function(n) { return n['properties'][field]; }
+                                ), 
+                                function(n) { return n['properties'][sampleName]; }
+                            ), 
+                            function(d) {
+                            return {
+                                x: d.properties[sampleName],
+                                y: field? d.properties[field] : d.n
+                            };
+                        })
+                    }
+                })
+                .compact()
+                .value();
+
+                // Build graph
+                var graph = new Rickshaw.Graph( {
+                    element: this.$('.graph').get(0),
+                    renderer: 'line',
+                    series: series,
+                    interpolation: that.model.getConf("interpolation", "cardinal")
+                });
+                graph.render();
+
+                // Build hover details
+                var hoverDetail = new Rickshaw.Graph.HoverDetail( {
+                    graph: graph,
+                    xFormatter: function(x) {
+                        return template("<%- x %>", {'x': x});
+                    }
+                });
+            } catch(e) {
+                console.error(e);
+            }
+
+            return PlotVisualization.__super__.finish.apply(this, arguments);
+        },
+
+        pull: function() {
+            return api.execute("get:events", {
+                limit: this.model.getConf("limit"),
+                type: this.model.get("eventName"),
+            });
+        }
+    });
+
+    return {
+        title: i18n.t("visualizations.plot.title"),
+        View: PlotVisualization,
+        config: {
+            'sample': {
+                'type': "text",
+                'label': i18n.t("visualizations.plot.config.sample.label"),
+                'help': i18n.t("visualizations.plot.config.sample.help")
+            },
+            'fields': {
+                'type': "text",
+                'label': i18n.t("visualizations.plot.config.fields.label"),
+                'help': i18n.t("visualizations.plot.config.fields.help")
+            },
+            'limit': {
+                'type': "number",
+                'label': i18n.t("visualizations.plot.config.limit.label"),
+                'help': i18n.t("visualizations.plot.config.limit.help"),
+                'default': 1000,
+                'min': 100,
+                'max': 1000000
+            },
+            'interpolation': {
+                'type': "select",
+                'label': i18n.t("visualizations.plot.config.interpolation.label"),
+                'default': "cardinal",
+                'options': _.chain(INTERPOLATIONS). map(function(i) { return [i, i18n.t("visualizations.plot.config.interpolation."+i)] }).object().value()
+            },
+        }
+    };
+});