Merge pull request #607 from CartoDB/CDB-3473

Fixed mapviews graph for organization users

lib/assets/javascripts/cartodb/dashboard/dashboard_user_stats.js

@@ -426,7 +426,7 @@ cdb.admin.dashboard.UserStats = cdb.core.View.extend({
       .empty()
       .append($stats);
 
-    var organization_user_stats = new cdb.admin.D3Stats({
+    var organization_user_stats = new cdb.admin.SimpleD3Stats({
       el: this.$("section.stats .mapviews"),
       api_calls: this.model.get('api_calls'),
       width: 233

lib/assets/javascripts/cartodb/dashboard/users/simpled3Stats.js

@@ -0,0 +1,127 @@
+/**
+ * Show the request user has made in the last times (month or 21 days)
+ *
+ * It just prints the requests data as a simple chart.
+ * It needs the data as an Array to work.
+ *
+ * Usage example:
+ *
+ *    // Simple D3 API Requests
+ *    new cdb.admin.SimpleD3Stats({
+ *      el: $el,
+ *      stats: { 2013-12-05: 3, 2013-12-06: 0, 2013-12-07: 30, 2013-12-08: 100, 2013-12-09: 0 }
+ *    });
+ */
+
+cdb.admin.SimpleD3Stats = cdb.admin.D3Stats.extend({
+
+  render: function() {
+
+    var self = this;
+
+    // SVG
+    var width  = this.options.width
+      , height = this.options.height
+      , svg    = d3.select(this.$("div.stats")[0])
+                .append("svg")
+                .attr("width", width)
+                .attr("height", height + 2)
+      , max = _.max(_(this.requests).map(function(m){ return parseInt(m, 10) }));
+
+    // Get scales and create the line
+    var x = d3.scale.linear().domain([0, this.requests.length]).range([0, width])
+      , y = d3.scale.linear().domain([0,max]).range([height,2])
+      , line = d3.svg.line()
+      .x(function(d,i) { return x(i); })
+      .y(function(d)   { return y(d); })
+      , area = d3.svg.area()
+      .x(function(d,i) { return x(i); })
+      .y0(function(d)  { return height + 3; })
+      .y1(function(d)  { return y(d); });
+
+    var div;
+
+    // Creates the tooltip
+    if (!$(".mapviews_tooltip").length) {
+
+      var div = d3.select("body").append("div")
+        .attr("class", "mapviews_tooltip")
+        .style("opacity", 1e-6);
+
+      div.append("span");
+
+      div.append("div")
+        .attr("class", "tip")
+
+    } else {
+      div = d3.select(".mapviews_tooltip")
+    }
+
+    function mouseover() {
+      div.transition().duration(200).style("opacity", 1);
+    }
+
+    function mousemove() {
+      var x0    = d3.mouse(this)[0];
+      var y0    = d3.mouse(this)[1];
+      var n     = x.invert(x0) | 0;
+      var value = self.requests[n];
+      var total =  _.reduce(self.requests, function(memo, num){ return memo + num; }, 0);
+      var w = $(".mapviews_tooltip").width();
+
+      $(".mapviews_tooltip span").html(self._formatNumber(value || 0));
+
+      $(".mapviews_tooltip .tip")
+        .css("left", (w/2 + 0) + "px")
+
+      div
+        .style("left", (d3.event.pageX - w/2 - 2) + "px")
+        .style("top", (d3.event.pageY - 45) + "px")
+
+    }
+
+    function mouseout() {
+      div.transition().duration(200).style("opacity", 1e-6);
+    }
+
+    svg
+      .on("mouseover", mouseover)
+      .on("mousemove", mousemove)
+      .on("mouseout", mouseout)
+
+    // display the line by appending an svg:path element with the data line we created above
+    svg.append("svg:path")
+      .attr("d", area(this.requests))
+      .style("fill", "#ECF5FA")
+
+    var l = svg.append("svg:path")
+    .attr("d", line(this.requests))
+    .style("fill", "none")
+    .style("stroke-width", this.options.stroke_width)
+    .style("stroke", "#409FCE")
+
+
+    if (this.options.show_today) {
+
+      var lx = this.requests.length - 1;
+      var ly = this.requests[this.requests.length - 1];
+
+      if (lx != null && ly != null) {
+        circle = svg.append("svg:circle")
+          .attr("cx", x(lx))
+          .attr("cy", y(ly))
+          .attr("r", 2)
+          .style("stroke", "none")
+          .style("fill", "#409FCE")
+      }
+    }
+
+    // Put total api calls
+    this.$("p").html(
+        "<strong>" + this._formatNumber(_.reduce(this.requests, function(memo, num){ return memo + num; }, 0)) + "</strong> map views last " + _.size(this.requests) + " days"
+        )
+
+      return this;
+  }
+
+});