Move events stats in Statistics, add ticket distribution

app/views/admin/stats/_events_time.html

@@ -0,0 +1,71 @@
+<script>
+
+var events = '<%= h @events.count%>';
+var data = <%=raw @events_time.to_json %>;
+
+var valueLabelWidth = 10; // space reserved for value labels (right)
+var barHeight = 24; // height of one bar
+var barLabelWidth = 100; // space reserved for bar labels
+var barLabelPadding = 8; // padding between bar and bar labels (left)
+var gridLabelHeight = 18; // space reserved for gridline labels
+var gridChartOffset = 3; // space between start of grid and first bar
+var maxBarWidth = 420; // width of the bar with the max value
+var color = d3.scale.category20();
+
+// accessor functions 
+var barLabel = function(d) { return d['status']; };
+var barValue = function(d) { return d['value'] / events * 100; };
+var barValues = function(d) { return d['value']; };
+ 
+// scales
+var yScale = d3.scale.ordinal().domain(d3.range(0, data.length)).rangeBands([0, data.length * barHeight]);
+var y = function(d, i) { return yScale(i); };
+var yText = function(d, i) { return y(d, i) + yScale.rangeBand() / 2; };
+var yMax = d3.max(data, function(d){ return barValue(d) + 15; });
+var x = d3.scale.linear().domain([0, yMax]).range([0, maxBarWidth]);
+var width = maxBarWidth + barLabelWidth + valueLabelWidth;
+// svg container element
+var chart = d3.select('#events_time').append("svg")
+  .attr('width', maxBarWidth + barLabelWidth + valueLabelWidth)
+  .attr('height', gridLabelHeight + gridChartOffset + data.length * barHeight);
+
+// bar labels
+var labelsContainer = chart.append('g')
+  .attr('transform', 'translate(' + (barLabelWidth - barLabelPadding) + ',' + (gridLabelHeight + gridChartOffset) + ')'); 
+labelsContainer.selectAll('text').data(data).enter().append('text')
+  .attr('y', yText)
+  .attr('stroke', 'none')
+  .attr('fill', 'black')
+  .attr("dy", ".35em") // vertical-align: middle
+  .attr('text-anchor', 'end')
+  .text(barLabel);
+
+// bars
+var barsContainer = chart.append('g')
+  .attr('transform', 'translate(' + barLabelWidth + ',' + (gridLabelHeight + gridChartOffset) + ')');
+
+barsContainer.selectAll("rect").data(data).enter().append("rect")
+  .attr('y', y)
+  .attr('height', yScale.rangeBand())
+  .attr('width', function(d) { return x(barValue(d)); })
+  .attr('stroke', 'white')
+  .attr('fill', function(d) { return color(barValue(d)); });
+
+// bar value labels
+barsContainer.selectAll("text").data(data).enter().append("text")
+  .attr("x", 5)
+  .attr("y", yText)
+  .attr("dx", 3) // padding-left
+  .attr("dy", ".35em") // vertical-align: middle
+  .attr("text-anchor", "start") // text-align: right
+  .attr("fill", "black")
+  .attr("stroke", "none")
+  .text(function(d) { return d3.round(barValues(d), 2) + " (" + d3.round(barValue(d), 0) + "%)"; });
+// start line
+barsContainer.append("line")
+  .attr("y1", -gridChartOffset)
+  .attr("y2", yScale.rangeExtent()[1] + gridChartOffset)
+  .style("stroke", "#000");
+
+ 
+</script>