gunghogeoduck/osem-fcy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Create charts for registrations

Browse source 
Conflicts:

	app/controllers/admin/stats_controller.rb
	app/views/admin/stats/index.html.haml
This commit is contained in:
differentreality 2013-09-17 15:21:45 +03:00
parent 9cf5c59f28
commit 87551e88f8
9 changed files with 432 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

35
app/views/admin/stats/_registered_time.html
View file

@ -3,14 +3,15 @@
var registered = '<%= h @registrations.count%>';
var data = <%=raw @mydays.to_json %>;
var valueLabelWidth = 40; // space reserved for value labels (right)
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'] / registered * 100; };
@ -20,29 +21,13 @@ var barValues = function(d) { return d['value']; };
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 x = d3.scale.linear().domain([0, 100]).range([0, maxBarWidth]);
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('#c2').append("svg")
var chart = d3.select('#registered_time').append("svg")
.attr('width', maxBarWidth + barLabelWidth + valueLabelWidth)
.attr('height', gridLabelHeight + gridChartOffset + data.length * barHeight);
/*
// grid line labels
var gridContainer = chart.append('g')
.attr('transform', 'translate(' + barLabelWidth + ',' + gridLabelHeight + ')');
gridContainer.selectAll("text").data(x.ticks(10)).enter().append("text")
.attr("x", x)
.attr("dy", -3)
.attr("text-anchor", "middle")
.text(String);
// vertical grid lines
gridContainer.selectAll("line").data(x.ticks(10)).enter().append("line")
.attr("x1", x)
.attr("x2", x)
.attr("y1", 0)
.attr("y2", yScale.rangeExtent()[1] + gridChartOffset)
.style("stroke", "#ccc");*/
// bar labels
var labelsContainer = chart.append('g')
@ -64,18 +49,18 @@ barsContainer.selectAll("rect").data(data).enter().append("rect")
.attr('height', yScale.rangeBand())
.attr('width', function(d) { return x(barValue(d)); })
.attr('stroke', 'white')
.attr('fill', 'steelblue');
.attr('fill', function(d) { return color(barValue(d)); });
// bar value labels
barsContainer.selectAll("text").data(data).enter().append("text")
.attr("x", function(d) { return x(barValue(d)); })
.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) + " registrations (" + d3.round(barValue(d), 0) + "%)"; });
.text(function(d) { return d3.round(barValues(d), 2) + " (" + d3.round(barValue(d), 0) + "%)"; });
// start line
barsContainer.append("line")
.attr("y1", -gridChartOffset)