Merge pull request #41 from differentreality/stats_update

Move events stats in Statistics, add ticket distribution

app/views/admin/stats/_events.html.haml

@@ -0,0 +1,41 @@
+-if @events.count > 0
+  %h2{:style => "text-align: center"}
+    = "Events (#{@events.count})"
+  
+  .row-fluid
+    %h3 
+      %u Types per event state
+    - if !@conference.event_types.empty?
+      = render :partial => "events_types"
+    - else
+      %h4
+        %i There are no tracks defined for this conference!
+
+  .row-fluid
+    %h3 
+      %u Tracks per event state
+      - if @no_track_all.count > 0
+        %i= " (#{pluralize(@no_track_all.count, 'event')} not assigned to a track)"
+    - if !@conference.tracks.empty?
+      = render :partial => "events_tracks"
+    - else
+      %h4
+        %i There are no tracks defined for this conference!
+
+  .row-fluid
+    .span12
+      %h3 Proposal Submissions over time
+    .row-fluid
+      .span12#events_time
+    = render :partial => "events_time"
+
+  .row-fluid
+    .span12
+      %br
+      %h3 Overview of all events
+    .row-fluid
+      .span12#events_table
+    = render :partial => "events_table"
+
+- else
+  %h5 There are no submitted events yet.

app/views/admin/stats/_events_table.html.haml

@@ -0,0 +1,34 @@
+%table.table.table-bordered.table-striped
+  %thead
+    %th
+    - @mystates.each do |state|
+      %th{:colspan => 2, :style => "text-align:center"}
+        State "#{state.name}"
+    %th{:colspan => 2, :style => "text-align:center"}
+      Total
+      %br
+      No & Time
+
+  %tr
+    %td
+      %b Total
+      - @mystates.each do |mystate|
+        %td
+          %b
+            = @eventstats["#{mystate.name}"]["count"]
+        %td
+          %b
+            #{@eventstats["#{mystate.name}"]["length"] / 60} h #{@eventstats["#{mystate.name}"]["length"] - @eventstats["#{mystate.name}"]["length"] / 60 * 60} m
+      %td
+        %b= @events.count
+      %td
+        %b= show_time(@eventstats["totallength"])
+
+  - @mytypes.each do |mytype|
+    %tr
+      %td= "#{mytype.title} (#{show_time(mytype.length)})"
+      - @mystates.each do |mystate|
+        %td= @eventstats["#{mytype.title}"]["#{mystate.name}"]["type_state_count"] unless @eventstats["#{mytype.title}"]["#{mystate.name}"] == nil
+        %td= show_time(@eventstats["#{mytype.title}"]["#{mystate.name}"]["type_state_length"]) unless @eventstats["#{mytype.title}"]["#{mystate.name}"] == nil
+      %td= @eventstats["#{mytype.title}"]["count"]
+      %td= show_time(@eventstats["#{mytype.title}"]["length"])

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>

app/views/admin/stats/_events_tracks.html.haml

@@ -0,0 +1,35 @@
+.row-fluid
+  - if !@track_state['new'].empty?
+    .span4
+      %h4 New Submissions
+      - if @no_track_new.count > 0
+        %h5= "#{pluralize(@no_track_new.count, 'event')} not assigned to a track"
+      - else
+        %h5      
+      .row-fluid
+        .span12#events_tracks_new
+      = render :partial => "events_tracks_new"
+
+  - if !@track_state['unconfirmed'].empty?
+    .span4
+      %h4 Accepted (Unconfirmed)
+      - if @no_track_unconfirmed.count > 0
+        %h5= "#{pluralize(@no_track_unconfirmed.count, 'event')} not assigned to a track"
+      - else
+        %h5 All events assigned to track!
+
+      .row-fluid
+        .span12#events_tracks_unconfirmed
+      = render :partial => "events_tracks_unconfirmed"
+
+  - if !@track_state['confirmed'].empty?
+    .span4
+      %h4 Accepted (Confirmed)
+      - if @no_track_confirmed.count > 0
+        %h5= "#{pluralize(@no_track_confirmed.count, 'event')} not assigned to a track"
+      - else
+        %h5 All events assigned to track!
+
+      .row-fluid
+        .span12#events_tracks_confirmed
+      = render :partial => "events_tracks_confirmed"

app/views/admin/stats/_events_tracks_confirmed.html

@@ -0,0 +1,79 @@
+<style>
+
+.arc path {
+  stroke: #fff;
+}
+
+</style>
+
+<script>
+
+var width = 250,
+    height = 250,
+    radius = Math.min(width, height) / 2;
+
+var color = d3.scale.ordinal()
+    .range(["#5254a3", "#6b6ecf", "#9c9ede "]);
+
+var arc = d3.svg.arc()
+    .outerRadius(radius - 10)
+    .innerRadius(0);
+
+var pie = d3.layout.pie()
+    .sort(null)
+    .value(function(d) { return d.value; });
+
+// Where to put the chart
+var svg = d3.select("#events_tracks_confirmed").append("svg")
+    .attr("width", width)
+    .attr("height", height)
+  .append("g")
+    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
+
+var data = <%=raw @track_state['confirmed'].to_json%>;
+
+var g = svg.selectAll(".arc")
+    .data(pie(data))
+  .enter().append("g")
+    .attr("class", "arc");
+
+g.append("path")
+    .attr("d", arc)
+    .style("fill", function(d) { return color(d.data.status); });
+
+// Put text inside every piece of the pie-chart
+g.append("text")
+    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
+    .attr("dy", ".35em")
+    .style("text-anchor", "middle")
+    .text(function(d) { return d.data.status; });
+
+// Title of chart
+svg.append("text")
+    .attr("class", "title")
+    .attr("x", radius)
+    .attr("y", -radius+10)
+    .text("% of pre-registered");
+
+// Create & position legend
+var legend = d3.select("#events_tracks_confirmed").append("svg")
+    .attr("class", "legend")
+    .attr("width", radius*2)
+    .attr("height", radius)
+  .selectAll("g")
+    .data(color.domain().slice().reverse())
+  .enter().append("g")
+    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
+
+legend.append("rect")
+    .attr("width", 18)
+    .attr("height", 18)
+    .style("fill", color);
+
+legend.append("text")
+    .attr("x", 24)
+    .attr("y", 9)
+    .attr("dy", ".15em")
+        .text(function(d) { return d + " (" + data.filter(function(v){return v.status === d;})[0].value + " or " + data.filter(function(v){return v.status === d;})[0].percent + "%)" ; });
+
+</script>

app/views/admin/stats/_events_tracks_new.html

@@ -0,0 +1,79 @@
+<style>
+
+.arc path {
+  stroke: #fff;
+}
+
+</style>
+
+<script>
+
+var width = 250,
+    height = 250,
+    radius = Math.min(width, height) / 2;
+
+var color = d3.scale.ordinal()
+    .range(["#5254a3", "#6b6ecf", "#9c9ede "]);
+
+var arc = d3.svg.arc()
+    .outerRadius(radius - 10)
+    .innerRadius(0);
+
+var pie = d3.layout.pie()
+    .sort(null)
+    .value(function(d) { return d.value; });
+
+// Where to put the chart
+var svg = d3.select("#events_tracks_new").append("svg")
+    .attr("width", width)
+    .attr("height", height)
+  .append("g")
+    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
+
+var data = <%=raw @track_state['new'].to_json%>;
+
+var g = svg.selectAll(".arc")
+    .data(pie(data))
+  .enter().append("g")
+    .attr("class", "arc");
+
+g.append("path")
+    .attr("d", arc)
+    .style("fill", function(d) { return color(d.data.status); });
+
+// Put text inside every piece of the pie-chart
+g.append("text")
+    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
+    .attr("dy", ".35em")
+    .style("text-anchor", "middle")
+    .text(function(d) { return d.data.status; });
+
+// Title of chart
+svg.append("text")
+    .attr("class", "title")
+    .attr("x", radius)
+    .attr("y", -radius+10)
+    .text("% of pre-registered");
+
+// Create & position legend
+var legend = d3.select("#events_tracks_new").append("svg")
+    .attr("class", "legend")
+    .attr("width", radius*2)
+    .attr("height", radius)
+  .selectAll("g")
+    .data(color.domain().slice().reverse())
+  .enter().append("g")
+    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
+
+legend.append("rect")
+    .attr("width", 18)
+    .attr("height", 18)
+    .style("fill", color);
+
+legend.append("text")
+    .attr("x", 24)
+    .attr("y", 9)
+    .attr("dy", ".15em")
+        .text(function(d) { return d + " (" + data.filter(function(v){return v.status === d;})[0].value + " or " + data.filter(function(v){return v.status === d;})[0].percent + "%)" ; });
+
+</script>

app/views/admin/stats/_events_tracks_unconfirmed.html

@@ -0,0 +1,79 @@
+<style>
+
+.arc path {
+  stroke: #fff;
+}
+
+</style>
+
+<script>
+
+var width = 250,
+    height = 250,
+    radius = Math.min(width, height) / 2;
+
+var color = d3.scale.ordinal()
+    .range(["#5254a3", "#6b6ecf", "#9c9ede "]);
+
+var arc = d3.svg.arc()
+    .outerRadius(radius - 10)
+    .innerRadius(0);
+
+var pie = d3.layout.pie()
+    .sort(null)
+    .value(function(d) { return d.value; });
+
+// Where to put the chart
+var svg = d3.select("#events_tracks_unconfirmed").append("svg")
+    .attr("width", width)
+    .attr("height", height)
+  .append("g")
+    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
+
+var data = <%=raw @track_state['unconfirmed'].to_json%>;
+
+var g = svg.selectAll(".arc")
+    .data(pie(data))
+  .enter().append("g")
+    .attr("class", "arc");
+
+g.append("path")
+    .attr("d", arc)
+    .style("fill", function(d) { return color(d.data.status); });
+
+// Put text inside every piece of the pie-chart
+g.append("text")
+    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
+    .attr("dy", ".35em")
+    .style("text-anchor", "middle")
+    .text(function(d) { return d.data.status; });
+
+// Title of chart
+svg.append("text")
+    .attr("class", "title")
+    .attr("x", radius)
+    .attr("y", -radius+10)
+    .text("% of pre-registered");
+
+// Create & position legend
+var legend = d3.select("#events_tracks_unconfirmed").append("svg")
+    .attr("class", "legend")
+    .attr("width", radius*2)
+    .attr("height", radius)
+  .selectAll("g")
+    .data(color.domain().slice().reverse())
+  .enter().append("g")
+    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
+
+legend.append("rect")
+    .attr("width", 18)
+    .attr("height", 18)
+    .style("fill", color);
+
+legend.append("text")
+    .attr("x", 24)
+    .attr("y", 9)
+    .attr("dy", ".15em")
+        .text(function(d) { return d + " (" + data.filter(function(v){return v.status === d;})[0].value + " or " + data.filter(function(v){return v.status === d;})[0].percent + "%)" ; });
+
+</script>

app/views/admin/stats/_events_types.html.haml

@@ -0,0 +1,19 @@
+.row-fluid
+  - if !@type_state['new'].empty?
+    .span4
+      %h4 New Submissions: #{@type_state['new'].map{|x| x["value"]}.sum}
+      .row-fluid
+        .span12#events_types_new
+      = render :partial => "events_types_new"
+  - if !@type_state['unconfirmed'].empty?
+    .span4
+      %h4 Accepted (Unconfirmed): #{@type_state['unconfirmed'].map{|x| x["value"]}.sum}
+      .row-fluid
+        .span12#events_types_unconfirmed
+      = render :partial => "events_types_unconfirmed"
+  - if !@type_state['confirmed'].empty?       
+    .span4
+      %h4 Accepted (Confirmed): #{@type_state['confirmed'].map{|x| x["value"]}.sum}
+      .row-fluid
+        .span12#events_types_confirmed
+      = render :partial => "events_types_confirmed"

app/views/admin/stats/_events_types_confirmed.html

@@ -0,0 +1,78 @@
+<style>
+
+.arc path {
+  stroke: #fff;
+}
+
+</style>
+
+<script>
+
+var width = 250,
+    height = 250,
+    radius = Math.min(width, height) / 2;
+
+var color = d3.scale.category20();    
+
+var arc = d3.svg.arc()
+    .outerRadius(radius - 10)
+    .innerRadius(0);
+
+var pie = d3.layout.pie()
+    .sort(null)
+    .value(function(d) { return d.value; });
+
+// Where to put the chart
+var svg = d3.select("#events_types_confirmed").append("svg")
+    .attr("width", width)
+    .attr("height", height)
+  .append("g")
+    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
+
+var data = <%=raw @type_state['confirmed'].to_json%>;
+
+var g = svg.selectAll(".arc")
+    .data(pie(data))
+  .enter().append("g")
+    .attr("class", "arc");
+
+g.append("path")
+    .attr("d", arc)
+    .style("fill", function(d) { return color(d.data.status); });
+
+// Put text inside every piece of the pie-chart
+g.append("text")
+    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
+    .attr("dy", ".35em")
+    .style("text-anchor", "middle")
+    .text(function(d) { return d.data.status; });
+
+// Title of chart
+svg.append("text")
+    .attr("class", "title")
+    .attr("x", radius)
+    .attr("y", -radius+10)
+    .text("% of pre-registered");
+
+// Create & position legend
+var legend = d3.select("#events_types_confirmed").append("svg")
+    .attr("class", "legend")
+    .attr("width", radius*2)
+    .attr("height", radius)
+  .selectAll("g")
+    .data(color.domain().slice().reverse())
+  .enter().append("g")
+    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
+
+legend.append("rect")
+    .attr("width", 18)
+    .attr("height", 18)
+    .style("fill", color);
+
+legend.append("text")
+    .attr("x", 24)
+    .attr("y", 9)
+    .attr("dy", ".15em")
+        .text(function(d) { return d + " (" + data.filter(function(v){return v.status === d;})[0].value + " or " + data.filter(function(v){return v.status === d;})[0].percent + "%)" ; });
+
+</script>

app/views/admin/stats/_events_types_new.html

@@ -0,0 +1,78 @@
+<style>
+
+.arc path {
+  stroke: #fff;
+}
+
+</style>
+
+<script>
+
+var width = 250,
+    height = 250,
+    radius = Math.min(width, height) / 2;
+
+var color = d3.scale.category20();
+
+var arc = d3.svg.arc()
+    .outerRadius(radius - 10)
+    .innerRadius(0);
+
+var pie = d3.layout.pie()
+    .sort(null)
+    .value(function(d) { return d.percent; });
+
+// Where to put the chart
+var svg = d3.select("#events_types_new").append("svg")
+    .attr("width", width)
+    .attr("height", height)
+  .append("g")
+    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
+
+var data = <%=raw @type_state['new'].to_json%>;
+
+var g = svg.selectAll(".arc")
+    .data(pie(data))
+  .enter().append("g")
+    .attr("class", "arc");
+
+g.append("path")
+    .attr("d", arc)
+    .style("fill", function(d) { return color(d.data.status); });
+
+// Put text inside every piece of the pie-chart
+g.append("text")
+    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
+    .attr("dy", ".35em")
+    .style("text-anchor", "middle")
+    .text(function(d) { return d.data.status; });
+
+// Title of chart
+svg.append("text")
+    .attr("class", "title")
+    .attr("x", radius)
+    .attr("y", -radius+10)
+    .text("% of pre-registered");
+
+// Create & position legend
+var legend = d3.select("#events_types_new").append("svg")
+    .attr("class", "legend")
+    .attr("width", radius*2)
+    .attr("height", radius)
+  .selectAll("g")
+    .data(color.domain().slice().reverse())
+  .enter().append("g")
+    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
+
+legend.append("rect")
+    .attr("width", 18)
+    .attr("height", 18)
+    .style("fill", color);
+
+legend.append("text")
+    .attr("x", 24)
+    .attr("y", 9)
+    .attr("dy", ".15em")
+        .text(function(d) { return d + " (" + data.filter(function(v){return v.status === d;})[0].value + " or " + data.filter(function(v){return v.status === d;})[0].percent + "%)" ; });
+
+</script>

app/views/admin/stats/_events_types_unconfirmed.html

@@ -0,0 +1,78 @@
+<style>
+
+.arc path {
+  stroke: #fff;
+}
+
+</style>
+
+<script>
+
+var width = 250,
+    height = 250,
+    radius = Math.min(width, height) / 2;
+
+var color = d3.scale.category20();
+
+var arc = d3.svg.arc()
+    .outerRadius(radius - 10)
+    .innerRadius(0);
+
+var pie = d3.layout.pie()
+    .sort(null)
+    .value(function(d) { return d.value; });
+
+// Where to put the chart
+var svg = d3.select("#events_types_unconfirmed").append("svg")
+    .attr("width", width)
+    .attr("height", height)
+  .append("g")
+    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
+
+var data = <%=raw @type_state['unconfirmed'].to_json%>;
+
+var g = svg.selectAll(".arc")
+    .data(pie(data))
+  .enter().append("g")
+    .attr("class", "arc");
+
+g.append("path")
+    .attr("d", arc)
+    .style("fill", function(d) { return color(d.data.status); });
+
+// Put text inside every piece of the pie-chart
+g.append("text")
+    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
+    .attr("dy", ".35em")
+    .style("text-anchor", "middle")
+    .text(function(d) { return d.data.status; });
+
+// Title of chart
+svg.append("text")
+    .attr("class", "title")
+    .attr("x", radius)
+    .attr("y", -radius+10)
+    .text("% of pre-registered");
+
+// Create & position legend
+var legend = d3.select("#events_types_unconfirmed").append("svg")
+    .attr("class", "legend")
+    .attr("width", radius*2)
+    .attr("height", radius)
+  .selectAll("g")
+    .data(color.domain().slice().reverse())
+  .enter().append("g")
+    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
+
+legend.append("rect")
+    .attr("width", 18)
+    .attr("height", 18)
+    .style("fill", color);
+
+legend.append("text")
+    .attr("x", 24)
+    .attr("y", 9)
+    .attr("dy", ".15em")
+        .text(function(d) { return d + " (" + data.filter(function(v){return v.status === d;})[0].value + " or " + data.filter(function(v){return v.status === d;})[0].percent + "%)" ; });
+
+</script>

app/views/admin/stats/_registered_time.html

@@ -1,7 +1,7 @@
 <script>
 
 var registered = '<%= h @registrations.count%>';
-var data = <%=raw @mydays.to_json %>;
+var data = <%=raw @registered_time.to_json %>;
 
 var valueLabelWidth = 10; // space reserved for value labels (right)
 var barHeight = 24; // height of one bar

app/views/admin/stats/_registrations.html.haml

@@ -1,35 +1,42 @@
 .row-fluid
   .span4
-    - if @attendees > 0
-      %h4{:style => "text-indent: 25px"}= "Registrations - Attendees (#{(@attendees.to_f / @registered * 100).round }%)"
+    - if @registered > 0 
+      - if @attendees > 0
+        %h4{:style => "text-indent: 25px"}= "Registrations - Attendees (#{(@attendees.to_f / @registered * 100).round }%)"
+      - else
+        %h4{:style => "text-indent: 25px"}= "Registrations - Attendees"
+      .row-fluid
+        .span12#registrations_attendees
+          = render :partial => "registrations_attendees"
     - else
-      %h4{:style => "text-indent: 25px"}= "Registrations - Attendees"
-    .row-fluid
-      .span12#registrations_attendees
+      %h5 There are no registrations yet.
+
 
   .span4
-    %h4{:style => "text-indent: 10px"}= "Attendance of pre-registered"
-    .row-fluid
-      .span12#registered_attended
+    - if @registered > 0
+      %h4{:style => "text-indent: 10px"}= "Attendance of pre-registered"
+      .row-fluid
+        .span12#registered_attended
+          = render :partial => "registered_attended"
 
   .span4
-    %h4{:style => "text-indent: 25px"}= "% of pre-registered"
-    .row-fluid
-      .span12#preregistered_onsite
+    - if @registered > 0
+      %h4{:style => "text-indent: 25px"}= "% of pre-registered"
+      .row-fluid
+        .span12#preregistered_onsite
+          = render :partial => "preregistered_onsite"
 
 .row-fluid
   .span6
-    %h4= "Other Info"
-    .row-fluid
-      .span12#other_info
+    - if @registered > 0  
+      %h4= "Other Info"
+      .row-fluid
+        .span12#other_info
+          = render :partial => "other_info"
 
   .span6
-    %h4{:style => "text-indent: 98px"}= "Registrations over time"
-    .row-fluid
-      .span12#registered_time
-
-= render :partial => "registered_attended"
-= render :partial => "registered_time"
-= render :partial => "preregistered_onsite"
-= render :partial => "registrations_attendees"
-= render :partial => "other_info"
+    - if @registered > 0
+      %h4{:style => "text-indent: 98px"}= "Registrations over time"
+      .row-fluid
+        .span12#registered_time
+          = render :partial => "registered_time"           

app/views/admin/stats/_registrations_attendees.html

@@ -9,8 +9,8 @@ var registrations = '<%= h @registered %>';
 var attendees = '<%= h @attendees %>';
 
 var data = [
-{"status":"Registrations","value": registrations, "percent": ""},
-{"status":"Attendees","value": attendees, "percent": d3.round(attendees/registrations * 100)+"%"}
+{"status":"Did Not Attend","value": registrations-attendees, "percent": ""},
+{"status":"Attended","value": attendees, "percent": d3.round(attendees/registrations * 100)+"%"}
 ];
 
 var vis = d3.select("#registrations_attendees")
@@ -49,26 +49,7 @@ var arcs = vis.selectAll("g.slice")
     .data(pie)
     .enter()
         .append("svg:g")
-            .attr("class", "slice")
-            .on("mouseover", function(d) {
-                d3.select(this).select("path").transition()
-                    .duration(200)
-                    .attr("d", arcOver)
-                
-                textTop.text(d3.select(this).datum().data.status)
-                    .attr("y", -10);
-                textBottom.text( d3.select(this).datum().data.value)
-                    .attr("y", 10);
-            })
-            .on("mouseout", function(d) {
-                d3.select(this).select("path").transition()
-                    .duration(100)
-                    .attr("d", arc);
-                
-                textTop.text("Registered: " + registrations)
-                    .attr("y", -10);
-                textBottom.text("Attended: " + attendees);
-            });
+            .attr("class", "slice");
 
 arcs.append("svg:path")
     .attr("fill", function(d, i) { return color(i); } )
@@ -92,5 +73,5 @@ legend.append("text")
     .attr("x", 24)
     .attr("y", 9)
     .attr("dy", ".35em")
-    .text(function(d) { return "Total " + d.status; });
+    .text(function(d) { return "Total " + d.status + " (" + d.value + ")"; });
 </script>

app/views/admin/stats/_tickets.html.haml

@@ -1,5 +1,22 @@
-- if @tickets
-  %h2
-    = "Non-Free Tickets(#{@tickets.count})"
-.span4#tickets_time
-= render :partial => "tickets_time"
+- if @tickets.length > 0
+  .row-fluid
+    .span12
+      %h2
+        = "Non-Free Tickets (#{@tickets.count})"
+  .row-fluid
+    .span4
+      %h4 Ticket distribution
+      .row-fluid
+        .span12#tickets_distribution
+          = render :partial => "tickets_distribution"      
+  .row-fluid
+    .span10
+      %h4 Ticket sales over time
+      .row-fluid
+        .span12#tickets_time
+          = render :partial => "tickets_time"
+- else
+  - if @conference.use_supporter_levels
+    %h5 No tickets have been bought yet.
+  - else
+    %h5 There are no tickets set for this conference.

app/views/admin/stats/_tickets_distribution.html

@@ -0,0 +1,79 @@
+<style>
+
+.arc path {
+  stroke: #fff;
+}
+
+</style>
+
+<script>
+
+var width = 250,
+    height = 250,
+    radius = Math.min(width, height) / 2;
+
+var color = d3.scale.ordinal()
+    .range(["#9ECAE1", "#6baed6", "#DEEBF7"]);
+
+var arc = d3.svg.arc()
+    .outerRadius(radius - 10)
+    .innerRadius(0);
+
+var pie = d3.layout.pie()
+    .sort(null)
+    .value(function(d) { return d.value; });
+
+// Where to put the chart
+var svg = d3.select("#tickets_distribution").append("svg")
+    .attr("width", width)
+    .attr("height", height)
+  .append("g")
+    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
+
+var data = <%=raw @tickets_distribution.to_json %>;
+
+var g = svg.selectAll(".arc")
+    .data(pie(data))
+  .enter().append("g")
+    .attr("class", "arc");
+
+g.append("path")
+    .attr("d", arc)
+    .style("fill", function(d) { return color(d.data.status); });
+
+// Put text inside every piece of the pie-chart
+g.append("text")
+    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
+    .attr("dy", ".35em")
+    .style("text-anchor", "middle")
+    .text(function(d) { return d.data.percent +"%"; });
+
+// Title of chart
+svg.append("text")
+    .attr("class", "title")
+    .attr("x", radius)
+    .attr("y", -radius+10)
+    .text("% of pre-registered");
+
+// Create & position legend
+var legend = d3.select("#tickets_distribution").append("svg")
+    .attr("class", "legend")
+    .attr("width", radius * 2)
+    .attr("height", radius)
+  .selectAll("g")
+    .data(color.domain().slice().reverse())
+  .enter().append("g")
+    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
+
+legend.append("rect")
+    .attr("width", 18)
+    .attr("height", 18)
+    .style("fill", color);
+
+legend.append("text")
+    .attr("x", 24)
+    .attr("y", 9)
+    .attr("dy", ".15em")
+    .text(function(d) { return d + " (" + data.filter(function(v){return v.status === d;})[0].value + " or " + data.filter(function(v){return v.status === d;})[0].percent + "%)" ; });
+
+</script>

app/views/admin/stats/_tickets_time.html

@@ -1,86 +1 @@
-<script>
-
-var registered = '<%= h @registrations.count%>';
-var data = <%=raw @mytickets.to_json %>;
-
-var valueLabelWidth = 40; // 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
- 
-// accessor functions 
-var barLabel = function(d) { return d['status']; };
-var barValue = function(d) { return d['value'] / registered * 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 x = d3.scale.linear().domain([0, 100]).range([0, maxBarWidth]);
-
-// svg container element
-var chart = d3.select('#tickets_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')
-  .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', 'steelblue');
-
-// bar value labels
-barsContainer.selectAll("text").data(data).enter().append("text")
-  .attr("x", function(d) { return x(barValue(d)); })
-  .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) + "%)"; });
-// start line
-barsContainer.append("line")
-  .attr("y1", -gridChartOffset)
-  .attr("y2", yScale.rangeExtent()[1] + gridChartOffset)
-  .style("stroke", "#000");
-
- 
-</script>
+(Not yet implemented)

app/views/admin/stats/index.html.haml

@@ -3,6 +3,8 @@
     %ul.nav.nav-tabs#myTab
       %li.active
         %a{:href=>"#registrations", "data-toggle"=>"tab"} Registrations
+      %li
+        %a{:href=>"#events", "data-toggle"=>"tab"} Events       
       %li
         %a{:href=>"#speakers", "data-toggle"=>"tab"} Speakers
       %li
@@ -11,6 +13,8 @@
     .tab-content
       .tab-pane.active#registrations
         = render :partial => 'registrations'
+      .tab-pane#events
+        = render :partial => 'events'
       .tab-pane#speakers
         = render :partial => 'speakers'
       .tab-pane#tickets