diff --git a/modoboa/extensions/stats/graphics.py b/modoboa/extensions/stats/graphics.py
index 63592bd85..bc3ebb195 100644
--- a/modoboa/extensions/stats/graphics.py
+++ b/modoboa/extensions/stats/graphics.py
@@ -141,10 +141,13 @@ class GraphicSet(object):
return [graphic.display_name for graphic in self._graphics]
def export(self, rrdfile, start, end):
- return dict(
- (graph.display_name, graph.export(rrdfile, start, end))
- for graph in self.graphics
- )
+ result = {}
+ for graph in self.graphics:
+ result[graph.display_name] = {
+ "title": graph.title.encode("utf-8"),
+ "curves": graph.export(rrdfile, start, end)
+ }
+ return result
class MailTraffic(GraphicSet):
diff --git a/modoboa/extensions/stats/static/stats/css/rickshaw.css b/modoboa/extensions/stats/static/stats/css/rickshaw.css
deleted file mode 100644
index 89f258caf..000000000
--- a/modoboa/extensions/stats/static/stats/css/rickshaw.css
+++ /dev/null
@@ -1 +0,0 @@
-.rickshaw_graph .detail{pointer-events:none;position:absolute;top:0;z-index:2;background:rgba(0,0,0,.1);bottom:0;width:1px;transition:opacity .25s linear;-moz-transition:opacity .25s linear;-o-transition:opacity .25s linear;-webkit-transition:opacity .25s linear}.rickshaw_graph .detail.inactive{opacity:0}.rickshaw_graph .detail .item.active{opacity:1}.rickshaw_graph .detail .x_label{font-family:Arial,sans-serif;border-radius:3px;padding:6px;opacity:.5;border:1px solid #e0e0e0;font-size:12px;position:absolute;background:#fff;white-space:nowrap}.rickshaw_graph .detail .x_label.left{left:0}.rickshaw_graph .detail .x_label.right{right:0}.rickshaw_graph .detail .item{position:absolute;z-index:2;border-radius:3px;padding:.25em;font-size:12px;font-family:Arial,sans-serif;opacity:0;background:rgba(0,0,0,.4);color:#fff;border:1px solid rgba(0,0,0,.4);margin-left:1em;margin-right:1em;margin-top:-1em;white-space:nowrap}.rickshaw_graph .detail .item.left{left:0}.rickshaw_graph .detail .item.right{right:0}.rickshaw_graph .detail .item.active{opacity:1;background:rgba(0,0,0,.8)}.rickshaw_graph .detail .item:after{position:absolute;display:block;width:0;height:0;content:"";border:5px solid transparent}.rickshaw_graph .detail .item.left:after{top:1em;left:-5px;margin-top:-5px;border-right-color:rgba(0,0,0,.8);border-left-width:0}.rickshaw_graph .detail .item.right:after{top:1em;right:-5px;margin-top:-5px;border-left-color:rgba(0,0,0,.8);border-right-width:0}.rickshaw_graph .detail .dot{width:4px;height:4px;margin-left:-2px;margin-top:-2px;border-radius:5px;position:absolute;box-shadow:0 0 2px rgba(0,0,0,.6);background:#fff;border-width:2px;border-style:solid;display:none;background-clip:padding-box}.rickshaw_graph .detail .dot.active{display:block}.rickshaw_graph{position:relative}.rickshaw_graph svg{display:block;overflow:hidden}.rickshaw_graph .x_tick{position:absolute;top:0;bottom:0;width:0;border-left:1px dotted rgba(0,0,0,.2);pointer-events:none}.rickshaw_graph .x_tick .title{position:absolute;font-size:12px;font-family:Arial,sans-serif;opacity:.5;white-space:nowrap;margin-left:3px;bottom:1px}.rickshaw_annotation_timeline{height:1px;border-top:1px solid #e0e0e0;margin-top:10px;position:relative}.rickshaw_annotation_timeline .annotation{position:absolute;height:6px;width:6px;margin-left:-2px;top:-3px;border-radius:5px;background-color:rgba(0,0,0,.25)}.rickshaw_graph .annotation_line{position:absolute;top:0;bottom:-6px;width:0;border-left:2px solid rgba(0,0,0,.3);display:none}.rickshaw_graph .annotation_line.active{display:block}.rickshaw_graph .annotation_range{background:rgba(0,0,0,.1);display:none;position:absolute;top:0;bottom:-6px}.rickshaw_graph .annotation_range.active{display:block}.rickshaw_graph .annotation_range.active.offscreen{display:none}.rickshaw_annotation_timeline .annotation .content{background:#fff;color:#000;opacity:.9;padding:5px;box-shadow:0 0 2px rgba(0,0,0,.8);border-radius:3px;position:relative;z-index:20;font-size:12px;padding:6px 8px 8px;top:18px;left:-11px;width:160px;display:none;cursor:pointer}.rickshaw_annotation_timeline .annotation .content:before{content:"\25b2";position:absolute;top:-11px;color:#fff;text-shadow:0 -1px 1px rgba(0,0,0,.8)}.rickshaw_annotation_timeline .annotation.active,.rickshaw_annotation_timeline .annotation:hover{background-color:rgba(0,0,0,.8);cursor:none}.rickshaw_annotation_timeline .annotation .content:hover{z-index:50}.rickshaw_annotation_timeline .annotation.active .content{display:block}.rickshaw_annotation_timeline .annotation:hover .content{display:block;z-index:50}.rickshaw_graph .y_axis,.rickshaw_graph .x_axis_d3{fill:none}.rickshaw_graph .y_ticks .tick,.rickshaw_graph .x_ticks_d3 .tick{stroke:rgba(0,0,0,.16);stroke-width:2px;shape-rendering:crisp-edges;pointer-events:none}.rickshaw_graph .y_grid .tick,.rickshaw_graph .x_grid_d3 .tick{z-index:-1;stroke:rgba(0,0,0,.2);stroke-width:1px;stroke-dasharray:1 1}.rickshaw_graph .y_grid .tick[data-y-value="0"]{stroke-dasharray:1 0}.rickshaw_graph .y_grid path,.rickshaw_graph .x_grid_d3 path{fill:none;stroke:none}.rickshaw_graph .y_ticks path,.rickshaw_graph .x_ticks_d3 path{fill:none;stroke:gray}.rickshaw_graph .y_ticks text,.rickshaw_graph .x_ticks_d3 text{opacity:.5;font-size:12px;pointer-events:none}.rickshaw_graph .x_tick.glow .title,.rickshaw_graph .y_ticks.glow text{fill:#000;color:#000;text-shadow:-1px 1px 0 rgba(255,255,255,.1),1px -1px 0 rgba(255,255,255,.1),1px 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1),0 -1px 0 rgba(255,255,255,.1),1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1),-1px -1px 0 rgba(255,255,255,.1)}.rickshaw_graph .x_tick.inverse .title,.rickshaw_graph .y_ticks.inverse text{fill:#fff;color:#fff;text-shadow:-1px 1px 0 rgba(0,0,0,.8),1px -1px 0 rgba(0,0,0,.8),1px 1px 0 rgba(0,0,0,.8),0 1px 0 rgba(0,0,0,.8),0 -1px 0 rgba(0,0,0,.8),1px 0 0 rgba(0,0,0,.8),-1px 0 0 rgba(0,0,0,.8),-1px -1px 0 rgba(0,0,0,.8)}.rickshaw_legend{font-family:Arial;font-size:12px;color:#fff;background:#404040;display:inline-block;padding:12px 5px;border-radius:2px;position:relative}.rickshaw_legend:hover{z-index:10}.rickshaw_legend .swatch{width:10px;height:10px;border:1px solid rgba(0,0,0,.2)}.rickshaw_legend .line{clear:both;line-height:140%;padding-right:15px}.rickshaw_legend .line .swatch{display:inline-block;margin-right:3px;border-radius:2px}.rickshaw_legend .label{margin:0;white-space:nowrap;display:inline;font-size:inherit;background-color:transparent;color:inherit;font-weight:400;line-height:normal;padding:0;text-shadow:none}.rickshaw_legend .action:hover{opacity:.6}.rickshaw_legend .action{margin-right:.2em;font-size:10px;opacity:.2;cursor:pointer;font-size:14px}.rickshaw_legend .line.disabled{opacity:.4}.rickshaw_legend ul{list-style-type:none;margin:0;padding:0;margin:2px;cursor:pointer}.rickshaw_legend li{padding:0 0 0 2px;min-width:80px;white-space:nowrap}.rickshaw_legend li:hover{background:rgba(255,255,255,.08);border-radius:3px}.rickshaw_legend li:active{background:rgba(255,255,255,.2);border-radius:3px}
\ No newline at end of file
diff --git a/modoboa/extensions/stats/static/stats/css/stats.css b/modoboa/extensions/stats/static/stats/css/stats.css
index b0565e636..adb4ac2c7 100644
--- a/modoboa/extensions/stats/static/stats/css/stats.css
+++ b/modoboa/extensions/stats/static/stats/css/stats.css
@@ -1,43 +1,28 @@
-/*svg {
- width: 100%;
-}*/
-
.chart {
position: relative;
- /*margin-bottom: 10px;
- padding-right: 40px;*/
-}
-
-/*.legend {
- position: absolute;
- right: 10px;
- top: 0px;
- background-color: transparent;
- color: #404040;
-}*/
-
-#tooltip {
- position: absolute;
- z-index: 20;
- top: 60px;
- display: none;
+ margin-bottom: 20px;
}
.grid .tick {
- stroke: lightgrey;
- opacity: 0.7;
+ stroke: darkgrey;
+ stroke-dasharray: 1, 2;
+ opacity: 0.9;
}
.grid path {
stroke-width: 0;
}
.line_over {
- stroke: gray;
+ stroke: darkgrey;
stroke-width: 1.5px;
- stroke-dasharray: 5, 5;
+ stroke-dasharray: 1, 2;
display: none;
}
+.axis {
+ font-size: 0.7em;
+}
+
.axis path,
.axis line {
fill: none;
@@ -50,23 +35,27 @@
}
.brush .extent {
- stroke: #fff;
- fill-opacity: .125;
- shape-rendering: crispEdges;
+ stroke: #fff;
+ fill-opacity: .125;
+ shape-rendering: crispEdges;
}
.legend rect {
- fill: none;
- stroke: black;
- opacity: 0;
+ fill: none;
+ stroke: black;
+ opacity: 0;
}
.tip {
- font-size: 0.9em;
- padding: 5px;
- background: rgba(0, 0, 0, 0.6);
- color: #fff;
- border-radius: 5px;
+ position: absolute;
+ z-index: 20;
+ top: 60px;
+ display: none;
+ font-size: 0.9em;
+ padding: 5px;
+ background: rgba(0, 0, 0, 0.6);
+ color: #fff;
+ border-radius: 5px;
}
.tip p {
diff --git a/modoboa/extensions/stats/static/stats/js/graphic.js b/modoboa/extensions/stats/static/stats/js/graphic.js
index 5c02b409c..fbf6cd64a 100644
--- a/modoboa/extensions/stats/static/stats/js/graphic.js
+++ b/modoboa/extensions/stats/static/stats/js/graphic.js
@@ -1,99 +1,305 @@
-var Graphic = function(data, options) {
- this.initialize(data, options);
+/*
+ *
+ */
+var Graphic = function(selector, data, options) {
+ this.initialize(selector, data, options);
};
Graphic.prototype = {
constructor: Graphic,
defaults: {
-
+ height: 300,
+ preview_height: 80,
+ brush_height: 7,
+ margin: {
+ left: 50,
+ top: 10,
+ bottom: 20
+ }
},
- initialize: function(data, options) {
+ initialize: function(selector, data, options) {
this.options = $.extend({}, this.defaults, options);
- this.graphics = {};
- this.setup(data);
- $(window).resize($.proxy(this.resize_graphics, this));
+ this.selector = selector;
+ this.data = data;
+ $(window).resize($.proxy(this.resize, this));
+ this.render();
},
- setup: function(data) {
- $.each(data.graphs, $.proxy(function(id, graph) {
- var chart = new Rickshaw.Graph({
- element: document.getElementById(id),
- renderer: 'area',
- stroke: true,
- series: graph,
- height: 350
- });
-
- var preview = new Rickshaw.Graph.RangeSlider.Preview({
- graph: chart,
- element: document.getElementById(id + '_preview')
- });
-
- var xAxis = new Rickshaw.Graph.Axis.Time({
- graph: chart,
- ticksTreatment: 'glow'
- });
-
- var yAxis = new Rickshaw.Graph.Axis.Y({
- graph: chart
- });
-
- var previewXAxis = new Rickshaw.Graph.Axis.Time({
- graph: preview.previews[0],
- /*timeFixture: new Rickshaw.Fixtures.Time.Local(),*/
- ticksTreatment: 'glow'
- });
-
- var hoverDetail = new Rickshaw.Graph.HoverDetail( {
- graph: chart,
- xFormatter: function(x) {
- return new Date(x * 1000).toString();
- }
- });
-
- var legend = new Rickshaw.Graph.Legend({
- graph: chart,
- element: document.getElementById(id + '_legend')
- });
-
- var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
- graph: chart,
- legend: legend
- });
-
- chart.render();
- xAxis.render();
- yAxis.render();
- previewXAxis.render();
-
- this.graphics[id] = {
- chart: chart, preview: preview
- };
- }, this));
+ resize: function() {
+ this.remove();
+ this.render();
},
- resize_graphics: function(e) {
- $.each(this.graphics, function(id, graphic) {
- var w = $('#' + id).parent().width();
- $.each(graphic, function(id, object) {
- object.configure({width: w});
- object.render();
- });
- });
+ remove: function() {
+ this.container.select("svg").remove();
+ $(this.container[0][0]).empty();
},
- update: function(data) {
- $.each(data.graphs, $.proxy(function(id, graph) {
- var $parent = $('#' + id).parent();
- $('#' + id).remove();
- $('#' + id + '_legend').remove();
- $('#' + id + '_preview').remove();
- $parent.append($("", {id: id}));
- $parent.append($("", {id: id + '_preview'}));
- $parent.append($("", {id: id + '_legend', 'class': 'legend'}));
- }, this));
- this.setup(data);
+ height: function() {
+ return this.options.height + 2 * this.options.margin.top
+ + 2 * this.options.margin.bottom + this.options.preview_height
+ + this.options.brush_height;
+ },
+
+ render: function() {
+ var $element = $(this.selector);
+ var width = $element.width();
+ this.container = d3.select(this.selector)
+ .append("div")
+ .attr("class", "chart");
+ this.container.append("h6")
+ .html(this.data.title);
+ var svg = this.container
+ .append("svg")
+ .attr("width", width)
+ .attr("height", this.height());
+
+ svg.append("defs").append("clipPath")
+ .attr("id", "clip")
+ .append("rect")
+ .attr("width", width - 2 * this.options.margin.left)
+ .attr("height", this.options.height + 30);
+
+ var x = d3.time.scale().range([0, width - 2 * this.options.margin.left]),
+ x2 = d3.time.scale().range([0, width - 2 * this.options.margin.left]);
+ var xAxis = d3.svg.axis().scale(x).orient("bottom"),
+ xAxis2 = d3.svg.axis().scale(x2).orient("bottom");
+ var y = d3.scale.linear().range([this.options.height, 0]),
+ y2 = d3.scale.linear().range([this.options.preview_height, 0]);
+ var bisectDate = d3.bisector(function(d) { return d.x * 1000; }).left;
+
+ var brush = d3.svg.brush()
+ .x(x2)
+ .on("brush", brushed);
+
+ var points = [];
+
+ x.domain(d3.extent(this.data.curves[0].data.map(function(d) { return d.x * 1000; })));
+ y.domain([
+ d3.min(this.data.curves, function(d) { return d3.min(d.data, function(v) { return v.y; }); }),
+ d3.max(this.data.curves, function(d) { return d3.max(d.data, function(v) { return v.y; }); })
+ ]);
+ x2.domain(x.domain());
+ y2.domain(y.domain());
+
+ var yAxis = d3.svg.axis().scale(y).orient("left");
+
+ var area = d3.svg.area()
+ .interpolate("monotone")
+ .x(function(d) { return x(d.x * 1000); })
+ .y0(this.options.height)
+ .y1(function(d) { return y(d.y); });
+
+ var area2 = d3.svg.area()
+ .interpolate("monotone")
+ .x(function(d) { return x2(d.x * 1000); })
+ .y0(this.options.preview_height)
+ .y1(function(d) { return y2(d.y); });
+
+ var focus = svg.append("g")
+ .attr("class", "focus")
+ .attr("width", width - 2 * this.options.margin.left)
+ .attr("height", this.options.height)
+ .attr("pointer-events", "all")
+ .attr("transform",
+ "translate(" + this.options.margin.left + ",0)");
+
+ var context = svg.append("g")
+ .attr("class", "context")
+ .attr("transform", "translate(" + this.options.margin.left + "," + (this.options.height + this.options.margin.top + this.options.margin.bottom + this.options.brush_height) + ")");
+
+ var curve2 = context.selectAll(".curve")
+ .data(this.data.curves)
+ .enter().append("g")
+ .attr("class", "curve");
+
+ var curvegroup = focus.append("g")
+ .attr('clip-path', 'url(#clip)');
+
+ var curve = curvegroup.selectAll(".curve")
+ .data(this.data.curves)
+ .enter().append("g")
+ .attr("class", "curve");
+
+ var line = focus.append("line")
+ .attr("class", "line_over")
+ .attr("x1", 0)
+ .attr("y1", 0)
+ .attr("x2", 0)
+ .attr("y2", this.options.height);
+
+ var rect = focus.append("rect")
+ .attr("fill", "none")
+ .attr("width", width - 2 * this.options.margin.left)
+ .attr("height", this.options.height);
+
+ var tooltip = this.container
+ .append("div")
+ .attr("class", "remove")
+ .attr("class", "tip");
+
+ var path = curve.append("path")
+ .attr("class", "area")
+ .attr("d", function(d, i) {
+ var path = this;
+
+ points[path] = {};
+ d.data.forEach(function(d) {
+ points[path][d.x] = d.y;
+ });
+ focus.append("circle")
+ .attr("class", "tracker tracker-" + i)
+ .attr("r", 4);
+ return area(d.data);
+ })
+ .attr("data-legend", function(d) { return d.name; })
+ .attr("stroke", function(d) { return d.color; })
+ .attr("stroke-width", "2px")
+ .attr("stroke-opacity", 0.8)
+ .style("fill", function(d) { return d.color; });
+
+ function make_x_axis() {
+ return d3.svg.axis()
+ .scale(x)
+ .orient("bottom")
+ .ticks(6)
+ .tickSize(-this.options.height, 0, 0)
+ .tickFormat("");
+ }
+
+ function make_y_axis() {
+ return d3.svg.axis()
+ .scale(y)
+ .orient("left")
+ .ticks(6)
+ .tickSize(-(width - 2 * this.options.margin.left), 0, 0)
+ .tickFormat("");
+ }
+
+ var xrules = make_x_axis.apply(this);
+ focus.append("g")
+ .attr("class", "grid")
+ .attr("transform", "translate(0," + (this.options.height) + ")")
+ .call(xrules);
+
+ focus.append("g")
+ .attr("class", "grid")
+ .call(make_y_axis.apply(this));
+
+ focus.append("g")
+ .attr("class", "x axis")
+ .attr("transform", "translate(0," + this.options.height + ")")
+ .call(xAxis);
+ focus.append("g")
+ .attr("class", "y axis")
+ .call(yAxis);
+
+ var data = this.data.curves;
+ rect
+ .on("mouseover", function(d) {
+ line.style("display", "block");
+ tooltip.style("display", "block");
+ data.forEach(function(d, cid) {
+ var display = d3.selectAll("[data-legend='" + d.name + "']")
+ .style("display");
+ if (display == "none") {
+ return;
+ }
+ focus.select(".tracker-" + cid).style("display", "block");
+ });
+ })
+ .on("mousemove", function(d) {
+ var mousex = d3.mouse(this)[0],
+ mousey = d3.mouse(this)[1];
+ var date = x.invert(mousex);
+ var text = "";
+
+ line.attr("x1", mousex)
+ .attr("x2", mousex);
+
+ data.forEach(function(d, cid) {
+ var display = d3.selectAll("[data-legend='" + d.name + "']")
+ .style("display");
+ if (display == "none") {
+ return;
+ }
+ var i = bisectDate(d.data, date.getTime(), 1),
+ d0 = d.data[i - 1],
+ d1 = d.data[i],
+ point = date.getTime() - (d0.x * 1000) > (d1.x * 1000) - date.getTime() ? d1 : d0;
+ text += "" + d.name + ": " + point.y.toFixed(3) + "
";
+
+ var tracker_x = x(point.x * 1000),
+ tracker_y = y(point.y);
+
+ focus.selectAll(".tracker-" + cid)
+ .style("fill", d.color)
+ .attr("cx", tracker_x)
+ .attr("cy", tracker_y);
+ });
+ if (mousex + tooltip[0][0].clientWidth >= width - 2 * 40) {
+ tooltip
+ .style("left", (mousex - (tooltip[0][0].clientWidth - 30)) + "px");
+ } else {
+ tooltip.style("left", (mousex + 60) + "px");
+ }
+ tooltip.html("" + date + "
" + text);
+ })
+ .on("mouseout", function(d) {
+ tooltip.style("display", "none");
+ line.style("display", "none");
+ focus.selectAll(".tracker").style("display", "none");
+ });
+
+ var legend = focus.append("g")
+ .attr("class", "legend")
+ .attr("transform", "translate(50,10)")
+ .style("font-size", "12px")
+ .call(d3.legend);
+
+ curve2.append("path")
+ .attr("class", "area2")
+ .attr("d", function(d) { return area2(d.data); })
+ .attr("stroke", function(d) { return d.color; })
+ .attr("stroke-width", "2px")
+ .attr("stroke-opacity", 0.8)
+ .attr("data-legend", function(d) { return d.name; })
+ .style("fill", function(d) { return d.color; });
+
+ context.append("g")
+ .attr("class", "x axis")
+ .attr("transform", "translate(0," + this.options.preview_height + ")")
+ .call(xAxis2);
+
+ function make_preview_x_axis() {
+ return d3.svg.axis()
+ .scale(x2)
+ .orient("bottom")
+ .ticks(6)
+ .tickSize(-this.options.preview_height, 0, 0)
+ .tickFormat("");
+ }
+
+ context.append("g")
+ .attr("class", "grid")
+ .attr("transform", "translate(0," + (this.options.preview_height) + ")")
+ .call(make_preview_x_axis.apply(this));
+
+ context.append("g")
+ .attr("class", "x brush")
+ .call(brush)
+ .selectAll("rect")
+ .attr("y", -6)
+ .attr("height", this.options.preview_height + this.options.brush_height);
+
+ function brushed() {
+ x.domain(brush.empty() ? x2.domain() : brush.extent());
+ focus.selectAll(".area")
+ .attr("d", function(d) { return area(d.data); });
+ focus.select(".x.axis").call(xAxis);
+ focus.select(".grid").call(xrules);
+ }
}
};
diff --git a/modoboa/extensions/stats/static/stats/js/graphicset.js b/modoboa/extensions/stats/static/stats/js/graphicset.js
deleted file mode 100644
index cdfcb8e0a..000000000
--- a/modoboa/extensions/stats/static/stats/js/graphicset.js
+++ /dev/null
@@ -1,300 +0,0 @@
-/*
- *
- */
-var Graphic = function(selector, options) {
- this.initialize(selector, options);
-};
-
-Graphic.prototype = {
- constructor: Graphic,
-
- defaults: {
- height: 300,
- preview_height: 80,
- brush_height: 7,
- margin: {
- left: 40,
- top: 10,
- bottom: 20
- }
- },
-
- initialize: function(selector, data, options) {
- this.options = $.extend({}, this.defaults, options);
- this.selector = selector;
- this.data = data;
- $(window).resize($.proxy(this.resize, this));
- this.render();
- },
-
- resize: function() {
- d3.selectAll("svg").remove();
- this.render();
- },
-
- height: function() {
- return this.options.height + 2 * this.options.margin.top
- + 2 * this.options.margin.bottom + this.options.preview_height
- + this.options.brush_height;
- },
-
- render: function() {
- var $element = $(this.selector);
- var width = $element.width();
- var container = d3.select(this.selector)
- .append("div")
- .attr("class", "chart");
- var svg = container
- .append("svg")
- .attr("width", width)
- .attr("height", this.height());
-
- svg.append("defs").append("clipPath")
- .attr("id", "clip")
- .append("rect")
- .attr("width", width - 2 * this.options.margin.left)
- .attr("height", this.options.height);
-
- var x = d3.time.scale().range([0, width - 2 * this.options.margin.left]),
- x2 = d3.time.scale().range([0, width - 2 * this.options.margin.left]);
- var xAxis = d3.svg.axis().scale(x).orient("bottom"),
- xAxis2 = d3.svg.axis().scale(x2).orient("bottom");
- var y = d3.scale.linear().range([this.options.height, 0]),
- y2 = d3.scale.linear().range([this.options.preview_height, 0]);
- var bisectDate = d3.bisector(function(d) { return d.x * 1000; }).left;
-
- var brush = d3.svg.brush()
- .x(x2)
- .on("brush", brushed);
-
- var points = [];
-
- x.domain(d3.extent(this.data[0].data.map(function(d) { return d.x * 1000; })));
- y.domain([
- d3.min(this.data, function(d) { return d3.min(d.data, function(v) { return v.y; }); }),
- d3.max(this.data, function(d) { return d3.max(d.data, function(v) { return v.y; }); })
- ]);
- x2.domain(x.domain());
- y2.domain(y.domain());
-
- var yAxis = d3.svg.axis().scale(y).orient("left");
-
- var area = d3.svg.area()
- .interpolate("cardinal")
- .x(function(d) { return x(d.x * 1000); })
- .y0(this.options.height)
- .y1(function(d) { return y(d.y); });
-
- var area2 = d3.svg.area()
- .interpolate("cardinal")
- .x(function(d) { return x2(d.x * 1000); })
- .y0(this.options.preview_height)
- .y1(function(d) { return y2(d.y); });
-
- var focus = svg.append("g")
- .attr("class", "focus")
- .attr("width", width - 2 * this.options.margin.left)
- .attr("height", this.options.height)
- .attr("pointer-events", "all")
- .attr("transform",
- "translate(" + this.options.margin.left + ",0)");// + this.options.margin.top * 2 + ")");
-
- var context = svg.append("g")
- .attr("class", "context")
- .attr("transform", "translate(" + this.options.margin.left + "," + (this.options.height + this.options.margin.top + this.options.margin.bottom + this.options.brush_height) + ")");
-
- var curve2 = context.selectAll(".curve")
- .data(this.data)
- .enter().append("g")
- .attr("class", "curve");
-
- var curvegroup = focus.append("g")
- .attr('clip-path', 'url(#clip)');
-
- var curve = curvegroup.selectAll(".curve")
- .data(this.data)
- .enter().append("g")
- .attr("class", "curve");
-
- var line = focus.append("line")
- .attr("class", "line_over")
- .attr("x1", 0)
- .attr("y1", 0)
- .attr("x2", 0)
- .attr("y2", 300);
-
- var rect = focus.append("rect")
- .attr("fill", "none")
- .attr("width", width - 2 * this.options.margin.left)
- .attr("height", this.options.height);
-
- var tooltip = d3.select(".chart")
- .append("div")
- .attr("id", "tooltip")
- .attr("class", "remove")
- .attr("class", "tip");
-
- var path = curve.append("path")
- .attr("class", "area")
- .attr("d", function(d, i) {
- var path = this;
-
- points[path] = {};
- d.data.forEach(function(d) {
- points[path][d.x] = d.y;
- });
- focus.append("circle")
- .attr("class", "tracker tracker-" + i)
- .attr("r", 4);
- return area(d.data);
- })
- .attr("data-legend", function(d) { return d.name; })
- .attr("stroke", function(d) { return d.color; })
- .attr("stroke-width", "2px")
- .attr("stroke-opacity", 0.8)
- .style("fill", function(d) { return d.color; });
-
- function make_x_axis() {
- return d3.svg.axis()
- .scale(x)
- .orient("bottom")
- .ticks(5)
- .tickSize(-this.options.height, 0, 0)
- .tickFormat("");
- }
-
- function make_y_axis() {
- return d3.svg.axis()
- .scale(y)
- .orient("left")
- .ticks(5)
- .tickSize(-(width - 2 * this.options.margin.left), 0, 0)
- .tickFormat("");
- }
-
- focus.append("g")
- .attr("class", "grid")
- .attr("transform", "translate(0," + (this.options.height + this.options.margin.top) + ")")
- .call(make_x_axis.apply(this));
-
- focus.append("g")
- .attr("class", "grid")
- .call(make_y_axis.apply(this));
-
- focus.append("g")
- .attr("class", "x axis")
- .attr("transform", "translate(0," + this.options.height + ")")
- .call(xAxis);
- focus.append("g")
- .attr("class", "y axis")
- .call(yAxis);
-
- var data = this.data;
- rect
- .on("mouseover", function(d) {
- line.style("display", "block");
- tooltip.style("display", "block");
- data.forEach(function(d, cid) {
- var display = d3.selectAll("[data-legend='" + d.name + "']")
- .style("display");
- if (display == "none") {
- return;
- }
- focus.select(".tracker-" + cid).style("display", "block");
- });
- })
- .on("mousemove", function(d) {
- var mousex = d3.mouse(this)[0],
- mousey = d3.mouse(this)[1];
- var date = x.invert(mousex);
- var element = document.getElementById("tooltip");
- var text = "";
-
- line.attr("x1", mousex)
- .attr("x2", mousex);
-
- data.forEach(function(d, cid) {
- var display = d3.selectAll("[data-legend='" + d.name + "']")
- .style("display");
- if (display == "none") {
- return;
- }
- var i = bisectDate(d.data, date.getTime(), 1),
- d0 = d.data[i - 1],
- d1 = d.data[i],
- point = date.getTime() - (d0.x * 1000) > (d1.x * 1000) - date.getTime() ? d1 : d0;
- text += "" + d.name + ": " + point.y.toFixed(3) + "
";
-
- var tracker_x = x(point.x * 1000),
- tracker_y = y(point.y);
-
- focus.selectAll(".tracker-" + cid)
- .style("fill", d.color)
- .attr("cx", tracker_x)
- .attr("cy", tracker_y);
- });
- if (mousex + element.clientWidth >= width - 2 * 40) {
- tooltip
- .style("left", (mousex - (element.clientWidth - 30)) + "px");
- } else {
- tooltip.style("left", (mousex + 50) + "px");
- }
- tooltip.html("" + date + "
" + text);
- })
- .on("mouseout", function(d) {
- tooltip.style("display", "none");
- line.style("display", "none");
- focus.selectAll(".tracker").style("display", "none");
- });
-
- var legend = focus.append("g")
- .attr("class", "legend")
- .attr("transform", "translate(50,10)")
- .style("font-size", "12px")
- .call(d3.legend);
-
- curve2.append("path")
- .attr("class", "area2")
- .attr("d", function(d) { return area2(d.data); })
- .attr("stroke", function(d) { return d.color; })
- .attr("stroke-width", "2px")
- .attr("stroke-opacity", 0.8)
- .attr("data-legend", function(d) { return d.name; })
- .style("fill", function(d) { return d.color; });
-
- context.append("g")
- .attr("class", "x axis")
- .attr("transform", "translate(0," + this.options.preview_height + ")")
- .call(xAxis2);
-
- context.append("g")
- .attr("class", "x brush")
- .call(brush)
- .selectAll("rect")
- .attr("y", -6)
- .attr("height", this.options.preview_height + this.options.brush_height);
-
- function brushed() {
- x.domain(brush.empty() ? x2.domain() : brush.extent());
- focus.selectAll(".area")
- .attr("d", function(d) { return area(d.data); });
- focus.select(".x.axis").call(xAxis);
- }
- }
-};
-
-/*
- *
- */
-var GraphicSet = function(selector, data, options) {
- this.initialize(selector, data, options);
-};
-
-GraphicSet.prototype = {
- constructor: GraphicSet,
-
- initialize: function(selector, data, options) {
- var graph = new Graphic(selector, data.graphs.averagetraffic, options);
- }
-
-};
diff --git a/modoboa/extensions/stats/static/stats/js/rickshaw.js b/modoboa/extensions/stats/static/stats/js/rickshaw.js
deleted file mode 100644
index e9924a43a..000000000
--- a/modoboa/extensions/stats/static/stats/js/rickshaw.js
+++ /dev/null
@@ -1,3 +0,0 @@
-var Rickshaw={namespace:function(namespace,obj){var parts=namespace.split(".");var parent=Rickshaw;for(var i=1,length=parts.length;i=3){if(s.data[2].xthis.window.xMax)isInRange=false;return isInRange}return true};this.onUpdate=function(callback){this.updateCallbacks.push(callback)};this.onConfigure=function(callback){this.configureCallbacks.push(callback)};this.registerRenderer=function(renderer){this._renderers=this._renderers||{};this._renderers[renderer.name]=renderer};this.configure=function(args){this.config=this.config||{};if(args.width||args.height){this.setSize(args)}Rickshaw.keys(this.defaults).forEach(function(k){this.config[k]=k in args?args[k]:k in this?this[k]:this.defaults[k]},this);Rickshaw.keys(this.config).forEach(function(k){this[k]=this.config[k]},this);var renderer=args.renderer||this.renderer&&this.renderer.name||"stack";this.setRenderer(renderer,args);this.configureCallbacks.forEach(function(callback){callback(args)})};this.setRenderer=function(r,args){if(typeof r=="function"){this.renderer=new r({graph:self});this.registerRenderer(this.renderer)}else{if(!this._renderers[r]){throw"couldn't find renderer "+r}this.renderer=this._renderers[r]}if(typeof args=="object"){this.renderer.configure(args)}};this.setSize=function(args){args=args||{};if(typeof window!==undefined){var style=window.getComputedStyle(this.element,null);var elementWidth=parseInt(style.getPropertyValue("width"),10);var elementHeight=parseInt(style.getPropertyValue("height"),10)}this.width=args.width||elementWidth||400;this.height=args.height||elementHeight||250;this.vis&&this.vis.attr("width",this.width).attr("height",this.height)};this.initialize(args)};Rickshaw.namespace("Rickshaw.Fixtures.Color");Rickshaw.Fixtures.Color=function(){this.schemes={};this.schemes.spectrum14=["#ecb796","#dc8f70","#b2a470","#92875a","#716c49","#d2ed82","#bbe468","#a1d05d","#e7cbe6","#d8aad6","#a888c2","#9dc2d3","#649eb9","#387aa3"].reverse();this.schemes.spectrum2000=["#57306f","#514c76","#646583","#738394","#6b9c7d","#84b665","#a7ca50","#bfe746","#e2f528","#fff726","#ecdd00","#d4b11d","#de8800","#de4800","#c91515","#9a0000","#7b0429","#580839","#31082b"];this.schemes.spectrum2001=["#2f243f","#3c2c55","#4a3768","#565270","#6b6b7c","#72957f","#86ad6e","#a1bc5e","#b8d954","#d3e04e","#ccad2a","#cc8412","#c1521d","#ad3821","#8a1010","#681717","#531e1e","#3d1818","#320a1b"];this.schemes.classic9=["#423d4f","#4a6860","#848f39","#a2b73c","#ddcb53","#c5a32f","#7d5836","#963b20","#7c2626","#491d37","#2f254a"].reverse();this.schemes.httpStatus={503:"#ea5029",502:"#d23f14",500:"#bf3613",410:"#efacea",409:"#e291dc",403:"#f457e8",408:"#e121d2",401:"#b92dae",405:"#f47ceb",404:"#a82a9f",400:"#b263c6",301:"#6fa024",302:"#87c32b",307:"#a0d84c",304:"#28b55c",200:"#1a4f74",206:"#27839f",201:"#52adc9",202:"#7c979f",203:"#a5b8bd",204:"#c1cdd1"};this.schemes.colorwheel=["#b5b6a9","#858772","#785f43","#96557e","#4682b4","#65b9ac","#73c03a","#cb513a"].reverse();this.schemes.cool=["#5e9d2f","#73c03a","#4682b4","#7bc3b8","#a9884e","#c1b266","#a47493","#c09fb5"];this.schemes.munin=["#00cc00","#0066b3","#ff8000","#ffcc00","#330099","#990099","#ccff00","#ff0000","#808080","#008f00","#00487d","#b35a00","#b38f00","#6b006b","#8fb300","#b30000","#bebebe","#80ff80","#80c9ff","#ffc080","#ffe680","#aa80ff","#ee00cc","#ff8080","#666600","#ffbfff","#00ffcc","#cc6699","#999900"]};Rickshaw.namespace("Rickshaw.Fixtures.RandomData");Rickshaw.Fixtures.RandomData=function(timeInterval){var addData;timeInterval=timeInterval||1;var lastRandomValue=200;var timeBase=Math.floor((new Date).getTime()/1e3);this.addData=function(data){var randomValue=Math.random()*100+15+lastRandomValue;var index=data[0].length;var counter=1;data.forEach(function(series){var randomVariance=Math.random()*20;var v=randomValue/25+counter++ +(Math.cos(index*counter*11/960)+2)*15+(Math.cos(index/7)+2)*7+(Math.cos(index/17)+2)*1;series.push({x:index*timeInterval+timeBase,y:v+randomVariance})});lastRandomValue=randomValue*.85};this.removeData=function(data){data.forEach(function(series){series.shift()});timeBase+=timeInterval}};Rickshaw.namespace("Rickshaw.Fixtures.Time");Rickshaw.Fixtures.Time=function(){var self=this;this.months=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];this.units=[{name:"decade",seconds:86400*365.25*10,formatter:function(d){return parseInt(d.getUTCFullYear()/10,10)*10}},{name:"year",seconds:86400*365.25,formatter:function(d){return d.getUTCFullYear()}},{name:"month",seconds:86400*30.5,formatter:function(d){return self.months[d.getUTCMonth()]}},{name:"week",seconds:86400*7,formatter:function(d){return self.formatDate(d)}},{name:"day",seconds:86400,formatter:function(d){return d.getUTCDate()}},{name:"6 hour",seconds:3600*6,formatter:function(d){return self.formatTime(d)}},{name:"hour",seconds:3600,formatter:function(d){return self.formatTime(d)}},{name:"15 minute",seconds:60*15,formatter:function(d){return self.formatTime(d)}},{name:"minute",seconds:60,formatter:function(d){return d.getUTCMinutes()}},{name:"15 second",seconds:15,formatter:function(d){return d.getUTCSeconds()+"s"}},{name:"second",seconds:1,formatter:function(d){return d.getUTCSeconds()+"s"}},{name:"decisecond",seconds:1/10,formatter:function(d){return d.getUTCMilliseconds()+"ms"}},{name:"centisecond",seconds:1/100,formatter:function(d){return d.getUTCMilliseconds()+"ms"}}];this.unit=function(unitName){return this.units.filter(function(unit){return unitName==unit.name}).shift()};this.formatDate=function(d){return d3.time.format("%b %e")(d)};this.formatTime=function(d){return d.toUTCString().match(/(\d+:\d+):/)[1]};this.ceil=function(time,unit){var date,floor,year;if(unit.name=="month"){date=new Date(time*1e3);floor=Date.UTC(date.getUTCFullYear(),date.getUTCMonth())/1e3;if(floor==time)return time;year=date.getUTCFullYear();var month=date.getUTCMonth();if(month==11){month=0;year=year+1}else{month+=1}return Date.UTC(year,month)/1e3}if(unit.name=="year"){date=new Date(time*1e3);floor=Date.UTC(date.getUTCFullYear(),0)/1e3;if(floor==time)return time;year=date.getUTCFullYear()+1;return Date.UTC(year,0)/1e3}return Math.ceil(time/unit.seconds)*unit.seconds}};Rickshaw.namespace("Rickshaw.Fixtures.Time.Local");Rickshaw.Fixtures.Time.Local=function(){var self=this;this.months=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];this.units=[{name:"decade",seconds:86400*365.25*10,formatter:function(d){return parseInt(d.getFullYear()/10,10)*10}},{name:"year",seconds:86400*365.25,formatter:function(d){return d.getFullYear()}},{name:"month",seconds:86400*30.5,formatter:function(d){return self.months[d.getMonth()]}},{name:"week",seconds:86400*7,formatter:function(d){return self.formatDate(d)}},{name:"day",seconds:86400,formatter:function(d){return d.getDate()}},{name:"6 hour",seconds:3600*6,formatter:function(d){return self.formatTime(d)}},{name:"hour",seconds:3600,formatter:function(d){return self.formatTime(d)}},{name:"15 minute",seconds:60*15,formatter:function(d){return self.formatTime(d)}},{name:"minute",seconds:60,formatter:function(d){return d.getMinutes()}},{name:"15 second",seconds:15,formatter:function(d){return d.getSeconds()+"s"}},{name:"second",seconds:1,formatter:function(d){return d.getSeconds()+"s"}},{name:"decisecond",seconds:1/10,formatter:function(d){return d.getMilliseconds()+"ms"}},{name:"centisecond",seconds:1/100,formatter:function(d){return d.getMilliseconds()+"ms"}}];this.unit=function(unitName){return this.units.filter(function(unit){return unitName==unit.name}).shift()};this.formatDate=function(d){return d3.time.format("%b %e")(d)};this.formatTime=function(d){return d.toString().match(/(\d+:\d+):/)[1]};this.ceil=function(time,unit){var date,floor,year;if(unit.name=="day"){var nearFuture=new Date((time+unit.seconds-1)*1e3);var rounded=new Date(0);rounded.setMilliseconds(0);rounded.setSeconds(0);rounded.setMinutes(0);rounded.setHours(0);rounded.setDate(nearFuture.getDate());rounded.setMonth(nearFuture.getMonth());rounded.setFullYear(nearFuture.getFullYear());return rounded.getTime()/1e3}if(unit.name=="month"){date=new Date(time*1e3);floor=new Date(date.getFullYear(),date.getMonth()).getTime()/1e3;if(floor==time)return time;year=date.getFullYear();var month=date.getMonth();if(month==11){month=0;year=year+1}else{month+=1}return new Date(year,month).getTime()/1e3}if(unit.name=="year"){date=new Date(time*1e3);floor=new Date(date.getUTCFullYear(),0).getTime()/1e3;if(floor==time)return time;year=date.getFullYear()+1;return new Date(year,0).getTime()/1e3}return Math.ceil(time/unit.seconds)*unit.seconds}};Rickshaw.namespace("Rickshaw.Fixtures.Number");Rickshaw.Fixtures.Number.formatKMBT=function(y){var abs_y=Math.abs(y);if(abs_y>=1e12){return y/1e12+"T"}else if(abs_y>=1e9){return y/1e9+"B"}else if(abs_y>=1e6){return y/1e6+"M"}else if(abs_y>=1e3){return y/1e3+"K"}else if(abs_y<1&&y>0){return y.toFixed(2)}else if(abs_y===0){return""}else{return y}};Rickshaw.Fixtures.Number.formatBase1024KMGTP=function(y){var abs_y=Math.abs(y);if(abs_y>=0x4000000000000){return y/0x4000000000000+"P"}else if(abs_y>=1099511627776){return y/1099511627776+"T"}else if(abs_y>=1073741824){return y/1073741824+"G"}else if(abs_y>=1048576){return y/1048576+"M"}else if(abs_y>=1024){return y/1024+"K"}else if(abs_y<1&&y>0){return y.toFixed(2)}else if(abs_y===0){return""}else{return y}};Rickshaw.namespace("Rickshaw.Color.Palette");Rickshaw.Color.Palette=function(args){var color=new Rickshaw.Fixtures.Color;args=args||{};this.schemes={};this.scheme=color.schemes[args.scheme]||args.scheme||color.schemes.colorwheel;this.runningIndex=0;this.generatorIndex=0;if(args.interpolatedStopCount){var schemeCount=this.scheme.length-1;var i,j,scheme=[];for(i=0;iself.graph.x.range()[1]){if(annotation.element){annotation.line.classList.add("offscreen");annotation.element.style.display="none"}annotation.boxes.forEach(function(box){if(box.rangeElement)box.rangeElement.classList.add("offscreen")});return}if(!annotation.element){var element=annotation.element=document.createElement("div");element.classList.add("annotation");this.elements.timeline.appendChild(element);element.addEventListener("click",function(e){element.classList.toggle("active");annotation.line.classList.toggle("active");annotation.boxes.forEach(function(box){if(box.rangeElement)box.rangeElement.classList.toggle("active")})},false)}annotation.element.style.left=left+"px";annotation.element.style.display="block";annotation.boxes.forEach(function(box){var element=box.element;if(!element){element=box.element=document.createElement("div");element.classList.add("content");element.innerHTML=box.content;annotation.element.appendChild(element);annotation.line=document.createElement("div");annotation.line.classList.add("annotation_line");self.graph.element.appendChild(annotation.line);if(box.end){box.rangeElement=document.createElement("div");box.rangeElement.classList.add("annotation_range");self.graph.element.appendChild(box.rangeElement)}}if(box.end){var annotationRangeStart=left;var annotationRangeEnd=Math.min(self.graph.x(box.end),self.graph.x.range()[1]);if(annotationRangeStart>annotationRangeEnd){annotationRangeEnd=left;annotationRangeStart=Math.max(self.graph.x(box.end),self.graph.x.range()[0])}var annotationRangeWidth=annotationRangeEnd-annotationRangeStart;box.rangeElement.style.left=annotationRangeStart+"px";box.rangeElement.style.width=annotationRangeWidth+"px";box.rangeElement.classList.remove("offscreen")}annotation.line.classList.remove("offscreen");annotation.line.style.left=left+"px"})},this)};this.graph.onUpdate(function(){self.update()})};Rickshaw.namespace("Rickshaw.Graph.Axis.Time");Rickshaw.Graph.Axis.Time=function(args){var self=this;this.graph=args.graph;this.elements=[];this.ticksTreatment=args.ticksTreatment||"plain";this.fixedTimeUnit=args.timeUnit;var time=args.timeFixture||new Rickshaw.Fixtures.Time;this.appropriateTimeUnit=function(){var unit;var units=time.units;var domain=this.graph.x.domain();var rangeSeconds=domain[1]-domain[0];units.forEach(function(u){if(Math.floor(rangeSeconds/u.seconds)>=2){unit=unit||u}});return unit||time.units[time.units.length-1]};this.tickOffsets=function(){var domain=this.graph.x.domain();var unit=this.fixedTimeUnit||this.appropriateTimeUnit();var count=Math.ceil((domain[1]-domain[0])/unit.seconds);var runningTick=domain[0];var offsets=[];for(var i=0;iself.graph.x.range()[1])return;var element=document.createElement("div");element.style.left=self.graph.x(o.value)+"px";element.classList.add("x_tick");element.classList.add(self.ticksTreatment);var title=document.createElement("div");title.classList.add("title");title.innerHTML=o.unit.formatter(new Date(o.value*1e3));element.appendChild(title);self.graph.element.appendChild(element);self.elements.push(element)})};this.graph.onUpdate(function(){self.render()})};Rickshaw.namespace("Rickshaw.Graph.Axis.X");Rickshaw.Graph.Axis.X=function(args){var self=this;var berthRate=.1;this.initialize=function(args){this.graph=args.graph;this.orientation=args.orientation||"top";this.pixelsPerTick=args.pixelsPerTick||75;if(args.ticks)this.staticTicks=args.ticks;if(args.tickValues)this.tickValues=args.tickValues;this.tickSize=args.tickSize||4;this.ticksTreatment=args.ticksTreatment||"plain";if(args.element){this.element=args.element;this._discoverSize(args.element,args);this.vis=d3.select(args.element).append("svg:svg").attr("height",this.height).attr("width",this.width).attr("class","rickshaw_graph x_axis_d3");this.element=this.vis[0][0];this.element.style.position="relative";this.setSize({width:args.width,height:args.height})}else{this.vis=this.graph.vis}this.graph.onUpdate(function(){self.render()})};this.setSize=function(args){args=args||{};if(!this.element)return;this._discoverSize(this.element.parentNode,args);this.vis.attr("height",this.height).attr("width",this.width*(1+berthRate));var berth=Math.floor(this.width*berthRate/2);this.element.style.left=-1*berth+"px"};this.render=function(){if(this._renderWidth!==undefined&&this.graph.width!==this._renderWidth)this.setSize({auto:true});var axis=d3.svg.axis().scale(this.graph.x).orient(this.orientation);axis.tickFormat(args.tickFormat||function(x){return x});if(this.tickValues)axis.tickValues(this.tickValues);this.ticks=this.staticTicks||Math.floor(this.graph.width/this.pixelsPerTick);var berth=Math.floor(this.width*berthRate/2)||0;var transform;if(this.orientation=="top"){var yOffset=this.height||this.graph.height;transform="translate("+berth+","+yOffset+")"}else{transform="translate("+berth+", 0)"}if(this.element){this.vis.selectAll("*").remove()}this.vis.append("svg:g").attr("class",["x_ticks_d3",this.ticksTreatment].join(" ")).attr("transform",transform).call(axis.ticks(this.ticks).tickSubdivide(0).tickSize(this.tickSize));var gridSize=(this.orientation=="bottom"?1:-1)*this.graph.height;this.graph.vis.append("svg:g").attr("class","x_grid_d3").call(axis.ticks(this.ticks).tickSubdivide(0).tickSize(gridSize)).selectAll("text").each(function(){this.parentNode.setAttribute("data-x-value",this.textContent)});this._renderHeight=this.graph.height};this._discoverSize=function(element,args){if(typeof window!=="undefined"){var style=window.getComputedStyle(element,null);var elementHeight=parseInt(style.getPropertyValue("height"),10);if(!args.auto){var elementWidth=parseInt(style.getPropertyValue("width"),10)}}this.width=(args.width||elementWidth||this.graph.width)*(1+berthRate);this.height=args.height||elementHeight||40};this.initialize(args)};Rickshaw.namespace("Rickshaw.Graph.Axis.Y");Rickshaw.Graph.Axis.Y=Rickshaw.Class.create({initialize:function(args){this.graph=args.graph;this.orientation=args.orientation||"right";this.pixelsPerTick=args.pixelsPerTick||75;if(args.ticks)this.staticTicks=args.ticks;if(args.tickValues)this.tickValues=args.tickValues;this.tickSize=args.tickSize||4;this.ticksTreatment=args.ticksTreatment||"plain";this.tickFormat=args.tickFormat||function(y){return y};this.berthRate=.1;if(args.element){this.element=args.element;this.vis=d3.select(args.element).append("svg:svg").attr("class","rickshaw_graph y_axis");this.element=this.vis[0][0];this.element.style.position="relative";this.setSize({width:args.width,height:args.height})}else{this.vis=this.graph.vis}var self=this;this.graph.onUpdate(function(){self.render()})},setSize:function(args){args=args||{};if(!this.element)return;if(typeof window!=="undefined"){var style=window.getComputedStyle(this.element.parentNode,null);var elementWidth=parseInt(style.getPropertyValue("width"),10);if(!args.auto){var elementHeight=parseInt(style.getPropertyValue("height"),10)}}this.width=args.width||elementWidth||this.graph.width*this.berthRate;this.height=args.height||elementHeight||this.graph.height;this.vis.attr("width",this.width).attr("height",this.height*(1+this.berthRate));var berth=this.height*this.berthRate;if(this.orientation=="left"){this.element.style.top=-1*berth+"px"}},render:function(){if(this._renderHeight!==undefined&&this.graph.height!==this._renderHeight)this.setSize({auto:true});this.ticks=this.staticTicks||Math.floor(this.graph.height/this.pixelsPerTick);var axis=this._drawAxis(this.graph.y);this._drawGrid(axis);this._renderHeight=this.graph.height},_drawAxis:function(scale){var axis=d3.svg.axis().scale(scale).orient(this.orientation);axis.tickFormat(this.tickFormat);if(this.tickValues)axis.tickValues(this.tickValues);if(this.orientation=="left"){var berth=this.height*this.berthRate;var transform="translate("+this.width+", "+berth+")"}if(this.element){this.vis.selectAll("*").remove()}this.vis.append("svg:g").attr("class",["y_ticks",this.ticksTreatment].join(" ")).attr("transform",transform).call(axis.ticks(this.ticks).tickSubdivide(0).tickSize(this.tickSize));return axis},_drawGrid:function(axis){var gridSize=(this.orientation=="right"?1:-1)*this.graph.width;this.graph.vis.append("svg:g").attr("class","y_grid").call(axis.ticks(this.ticks).tickSubdivide(0).tickSize(gridSize)).selectAll("text").each(function(){this.parentNode.setAttribute("data-y-value",this.textContent)})}});Rickshaw.namespace("Rickshaw.Graph.Axis.Y.Scaled");Rickshaw.Graph.Axis.Y.Scaled=Rickshaw.Class.create(Rickshaw.Graph.Axis.Y,{initialize:function($super,args){if(typeof args.scale==="undefined"){throw new Error("Scaled requires scale")}this.scale=args.scale;if(typeof args.grid==="undefined"){this.grid=true
-}else{this.grid=args.grid}$super(args)},_drawAxis:function($super,scale){var domain=this.scale.domain();var renderDomain=this.graph.renderer.domain().y;var extents=[Math.min.apply(Math,domain),Math.max.apply(Math,domain)];var extentMap=d3.scale.linear().domain([0,1]).range(extents);var adjExtents=[extentMap(renderDomain[0]),extentMap(renderDomain[1])];var adjustment=d3.scale.linear().domain(extents).range(adjExtents);var adjustedScale=this.scale.copy().domain(domain.map(adjustment)).range(scale.range());return $super(adjustedScale)},_drawGrid:function($super,axis){if(this.grid){$super(axis)}}});Rickshaw.namespace("Rickshaw.Graph.Behavior.Series.Highlight");Rickshaw.Graph.Behavior.Series.Highlight=function(args){this.graph=args.graph;this.legend=args.legend;var self=this;var colorSafe={};var activeLine=null;var disabledColor=args.disabledColor||function(seriesColor){return d3.interpolateRgb(seriesColor,d3.rgb("#d8d8d8"))(.8).toString()};this.addHighlightEvents=function(l){l.element.addEventListener("mouseover",function(e){if(activeLine)return;else activeLine=l;self.legend.lines.forEach(function(line){if(l===line){if(self.graph.renderer.unstack&&(line.series.renderer?line.series.renderer.unstack:true)){var seriesIndex=self.graph.series.indexOf(line.series);line.originalIndex=seriesIndex;var series=self.graph.series.splice(seriesIndex,1)[0];self.graph.series.push(series)}return}colorSafe[line.series.name]=colorSafe[line.series.name]||line.series.color;line.series.color=disabledColor(line.series.color)});self.graph.update()},false);l.element.addEventListener("mouseout",function(e){if(!activeLine)return;else activeLine=null;self.legend.lines.forEach(function(line){if(l===line&&line.hasOwnProperty("originalIndex")){var series=self.graph.series.pop();self.graph.series.splice(line.originalIndex,0,series);delete line.originalIndex}if(colorSafe[line.series.name]){line.series.color=colorSafe[line.series.name]}});self.graph.update()},false)};if(this.legend){this.legend.lines.forEach(function(l){self.addHighlightEvents(l)})}};Rickshaw.namespace("Rickshaw.Graph.Behavior.Series.Order");Rickshaw.Graph.Behavior.Series.Order=function(args){this.graph=args.graph;this.legend=args.legend;var self=this;if(typeof window.$=="undefined"){throw"couldn't find jQuery at window.$"}if(typeof window.$.ui=="undefined"){throw"couldn't find jQuery UI at window.$.ui"}$(function(){$(self.legend.list).sortable({containment:"parent",tolerance:"pointer",update:function(event,ui){var series=[];$(self.legend.list).find("li").each(function(index,item){if(!item.series)return;series.push(item.series)});for(var i=self.graph.series.length-1;i>=0;i--){self.graph.series[i]=series.shift()}self.graph.update()}});$(self.legend.list).disableSelection()});this.graph.onUpdate(function(){var h=window.getComputedStyle(self.legend.element).height;self.legend.element.style.height=h})};Rickshaw.namespace("Rickshaw.Graph.Behavior.Series.Toggle");Rickshaw.Graph.Behavior.Series.Toggle=function(args){this.graph=args.graph;this.legend=args.legend;var self=this;this.addAnchor=function(line){var anchor=document.createElement("a");anchor.innerHTML="✔";anchor.classList.add("action");line.element.insertBefore(anchor,line.element.firstChild);anchor.onclick=function(e){if(line.series.disabled){line.series.enable();line.element.classList.remove("disabled")}else{if(this.graph.series.filter(function(s){return!s.disabled}).length<=1)return;line.series.disable();line.element.classList.add("disabled")}}.bind(this);var label=line.element.getElementsByTagName("span")[0];label.onclick=function(e){var disableAllOtherLines=line.series.disabled;if(!disableAllOtherLines){for(var i=0;idomainX){dataIndex=Math.abs(domainX-data[i].x)0){alignables.forEach(function(el){el.classList.remove("left");el.classList.add("right")});var rightAlignError=this._calcLayoutError(alignables);if(rightAlignError>leftAlignError){alignables.forEach(function(el){el.classList.remove("right");el.classList.add("left")})}}if(typeof this.onRender=="function"){this.onRender(args)}},_calcLayoutError:function(alignables){var parentRect=this.element.parentNode.getBoundingClientRect();var error=0;var alignRight=alignables.forEach(function(el){var rect=el.getBoundingClientRect();if(!rect.width){return}if(rect.right>parentRect.right){error+=rect.right-parentRect.right}if(rect.left=self.previewWidth){frameAfterDrag[0]-=frameAfterDrag[1]-self.previewWidth;frameAfterDrag[1]=self.previewWidth}}self.graphs.forEach(function(graph){var domainScale=d3.scale.linear().interpolate(d3.interpolateRound).domain([0,self.previewWidth]).range(graph.dataDomain());var windowAfterDrag=[domainScale(frameAfterDrag[0]),domainScale(frameAfterDrag[1])];if(frameAfterDrag[0]===0){windowAfterDrag[0]=undefined}if(frameAfterDrag[1]===self.previewWidth){windowAfterDrag[1]=undefined}graph.window.xMin=windowAfterDrag[0];graph.window.xMax=windowAfterDrag[1];graph.update()})}function onMousedown(){drag.target=d3.event.target;drag.start=self._getClientXFromEvent(d3.event,drag);self.frameBeforeDrag=self.currentFrame.slice();d3.event.preventDefault?d3.event.preventDefault():d3.event.returnValue=false;d3.select(document).on("mousemove.rickshaw_range_slider_preview",onMousemove);d3.select(document).on("mouseup.rickshaw_range_slider_preview",onMouseup);d3.select(document).on("touchmove.rickshaw_range_slider_preview",onMousemove);d3.select(document).on("touchend.rickshaw_range_slider_preview",onMouseup);d3.select(document).on("touchcancel.rickshaw_range_slider_preview",onMouseup)}function onMousedownLeftHandle(datum,index){drag.left=true;onMousedown()}function onMousedownRightHandle(datum,index){drag.right=true;onMousedown()}function onMousedownMiddleHandle(datum,index){drag.left=true;drag.right=true;drag.rigid=true;onMousedown()}function onMouseup(datum,index){d3.select(document).on("mousemove.rickshaw_range_slider_preview",null);d3.select(document).on("mouseup.rickshaw_range_slider_preview",null);d3.select(document).on("touchmove.rickshaw_range_slider_preview",null);d3.select(document).on("touchend.rickshaw_range_slider_preview",null);d3.select(document).on("touchcancel.rickshaw_range_slider_preview",null);delete self.frameBeforeDrag;drag.left=false;drag.right=false;drag.rigid=false}element.select("rect.left_handle").on("mousedown",onMousedownLeftHandle);element.select("rect.right_handle").on("mousedown",onMousedownRightHandle);element.select("rect.middle_handle").on("mousedown",onMousedownMiddleHandle);element.select("rect.left_handle").on("touchstart",onMousedownLeftHandle);element.select("rect.right_handle").on("touchstart",onMousedownRightHandle);element.select("rect.middle_handle").on("touchstart",onMousedownMiddleHandle)},_getClientXFromEvent:function(event,drag){switch(event.type){case"touchstart":case"touchmove":var touchList=event.changedTouches;var touch=null;for(var touchIndex=0;touchIndexyMax)yMax=y});if(!series.length)return;if(series[0].xxMax)xMax=series[series.length-1].x});xMin-=(xMax-xMin)*this.padding.left;xMax+=(xMax-xMin)*this.padding.right;yMin=this.graph.min==="auto"?yMin:this.graph.min||0;yMax=this.graph.max===undefined?yMax:this.graph.max;if(this.graph.min==="auto"||yMin<0){yMin-=(yMax-yMin)*this.padding.bottom}if(this.graph.max===undefined){yMax+=(yMax-yMin)*this.padding.top}return{x:[xMin,xMax],y:[yMin,yMax]}},render:function(args){args=args||{};var graph=this.graph;var series=args.series||graph.series;var vis=args.vis||graph.vis;vis.selectAll("*").remove();var data=series.filter(function(s){return!s.disabled}).map(function(s){return s.stack});var pathNodes=vis.selectAll("path.path").data(data).enter().append("svg:path").classed("path",true).attr("d",this.seriesPathFactory());if(this.stroke){var strokeNodes=vis.selectAll("path.stroke").data(data).enter().append("svg:path").classed("stroke",true).attr("d",this.seriesStrokeFactory())}var i=0;series.forEach(function(series){if(series.disabled)return;series.path=pathNodes[0][i];if(this.stroke)series.stroke=strokeNodes[0][i];this._styleSeries(series);i++},this)},_styleSeries:function(series){var fill=this.fill?series.color:"none";var stroke=this.stroke?series.color:"none";series.path.setAttribute("fill",fill);series.path.setAttribute("stroke",stroke);series.path.setAttribute("stroke-width",this.strokeWidth);if(series.className){d3.select(series.path).classed(series.className,true)}if(series.className&&this.stroke){d3.select(series.stroke).classed(series.className,true)}},configure:function(args){args=args||{};Rickshaw.keys(this.defaults()).forEach(function(key){if(!args.hasOwnProperty(key)){this[key]=this[key]||this.graph[key]||this.defaults()[key];return}if(typeof this.defaults()[key]=="object"){Rickshaw.keys(this.defaults()[key]).forEach(function(k){this[key][k]=args[key][k]!==undefined?args[key][k]:this[key][k]!==undefined?this[key][k]:this.defaults()[key][k]},this)}else{this[key]=args[key]!==undefined?args[key]:this[key]!==undefined?this[key]:this.graph[key]!==undefined?this.graph[key]:this.defaults()[key]}},this)},setStrokeWidth:function(strokeWidth){if(strokeWidth!==undefined){this.strokeWidth=strokeWidth}},setTension:function(tension){if(tension!==undefined){this.tension=tension}}});Rickshaw.namespace("Rickshaw.Graph.Renderer.Line");Rickshaw.Graph.Renderer.Line=Rickshaw.Class.create(Rickshaw.Graph.Renderer,{name:"line",defaults:function($super){return Rickshaw.extend($super(),{unstack:true,fill:false,stroke:true})},seriesPathFactory:function(){var graph=this.graph;var factory=d3.svg.line().x(function(d){return graph.x(d.x)}).y(function(d){return graph.y(d.y)}).interpolate(this.graph.interpolation).tension(this.tension);factory.defined&&factory.defined(function(d){return d.y!==null});return factory}});Rickshaw.namespace("Rickshaw.Graph.Renderer.Stack");Rickshaw.Graph.Renderer.Stack=Rickshaw.Class.create(Rickshaw.Graph.Renderer,{name:"stack",defaults:function($super){return Rickshaw.extend($super(),{fill:true,stroke:false,unstack:false})},seriesPathFactory:function(){var graph=this.graph;var factory=d3.svg.area().x(function(d){return graph.x(d.x)}).y0(function(d){return graph.y(d.y0)}).y1(function(d){return graph.y(d.y+d.y0)}).interpolate(this.graph.interpolation).tension(this.tension);factory.defined&&factory.defined(function(d){return d.y!==null});return factory}});Rickshaw.namespace("Rickshaw.Graph.Renderer.Bar");Rickshaw.Graph.Renderer.Bar=Rickshaw.Class.create(Rickshaw.Graph.Renderer,{name:"bar",defaults:function($super){var defaults=Rickshaw.extend($super(),{gapSize:.05,unstack:false});delete defaults.tension;return defaults},initialize:function($super,args){args=args||{};this.gapSize=args.gapSize||this.gapSize;$super(args)},domain:function($super){var domain=$super();var frequentInterval=this._frequentInterval(this.graph.stackedData.slice(-1).shift());domain.x[1]+=Number(frequentInterval.magnitude);return domain},barWidth:function(series){var frequentInterval=this._frequentInterval(series.stack);var barWidth=this.graph.x(series.stack[0].x+frequentInterval.magnitude*(1-this.gapSize));return barWidth},render:function(args){args=args||{};var graph=this.graph;var series=args.series||graph.series;var vis=args.vis||graph.vis;vis.selectAll("*").remove();var barWidth=this.barWidth(series.active()[0]);var barXOffset=0;var activeSeriesCount=series.filter(function(s){return!s.disabled}).length;var seriesBarWidth=this.unstack?barWidth/activeSeriesCount:barWidth;var transform=function(d){var matrix=[1,0,0,d.y<0?-1:1,0,d.y<0?graph.y.magnitude(Math.abs(d.y))*2:0];return"matrix("+matrix.join(",")+")"};series.forEach(function(series){if(series.disabled)return;var barWidth=this.barWidth(series);var nodes=vis.selectAll("path").data(series.stack.filter(function(d){return d.y!==null})).enter().append("svg:rect").attr("x",function(d){return graph.x(d.x)+barXOffset}).attr("y",function(d){return graph.y(d.y0+Math.abs(d.y))*(d.y<0?-1:1)}).attr("width",seriesBarWidth).attr("height",function(d){return graph.y.magnitude(Math.abs(d.y))}).attr("transform",transform);Array.prototype.forEach.call(nodes[0],function(n){n.setAttribute("fill",series.color)});if(this.unstack)barXOffset+=seriesBarWidth},this)},_frequentInterval:function(data){var intervalCounts={};for(var i=0;i0){this[0].data.forEach(function(plot){item.data.push({x:plot.x,y:0})})}else if(item.data.length===0){item.data.push({x:this.timeBase-(this.timeInterval||0),y:0})}this.push(item);if(this.legend){this.legend.addLine(this.itemByName(item.name))}},addData:function(data,x){var index=this.getIndex();Rickshaw.keys(data).forEach(function(name){if(!this.itemByName(name)){this.addItem({name:name})}},this);this.forEach(function(item){item.data.push({x:x||(index*this.timeInterval||1)+this.timeBase,y:data[item.name]||0})},this)},getIndex:function(){return this[0]&&this[0].data&&this[0].data.length?this[0].data.length:0},itemByName:function(name){for(var i=0;i1;i--){this.currentSize+=1;this.currentIndex+=1;this.forEach(function(item){item.data.unshift({x:((i-1)*this.timeInterval||1)+this.timeBase,y:0,i:i})},this)}}},addData:function($super,data,x){$super(data,x);this.currentSize+=1;this.currentIndex+=1;if(this.maxDataPoints!==undefined){while(this.currentSize>this.maxDataPoints){this.dropData()}}},dropData:function(){this.forEach(function(item){item.data.splice(0,1)});this.currentSize-=1},getIndex:function(){return this.currentIndex}});
\ No newline at end of file
diff --git a/modoboa/extensions/stats/static/stats/js/stats.js b/modoboa/extensions/stats/static/stats/js/stats.js
index f85614325..b4237f64b 100644
--- a/modoboa/extensions/stats/static/stats/js/stats.js
+++ b/modoboa/extensions/stats/static/stats/js/stats.js
@@ -80,13 +80,17 @@ Stats.prototype = {
},
graphs_cb: function(data) {
- this.graphicset = new GraphicSet("#gset", data);
-
- /*if (this.graphic === undefined) {
- this.graphic = new Graphic(data, {});
- } else {
- this.graphic.update(data);
- }*/
+ if (this.graphics !== undefined) {
+ $.each(this.graphics, function(id, graphic) {
+ graphic.remove();
+ });
+ }
+ this.graphics = [];
+ $.each(data.graphs, $.proxy(function(id, graphdef) {
+ this.graphics.push(
+ new Graphic("#gset", graphdef)
+ );
+ }, this));
},
search_domain: function(value) {