Merge

app/views/admin/stats/_events_tracks_confirmed.html

@@ -0,0 +1,99 @@
+<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>