historgram

app/assets/stylesheets/application.scss

@@ -2,3 +2,4 @@
 @import "scaffolds";
 @import "recipients";
 @import "school_categories";
+@import "questions";

app/assets/stylesheets/questions.scss

@@ -1,3 +1,40 @@
 // Place all the styles related to the Questions controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
+
+.answers {
+  width: 100%;
+  border-bottom: 1px solid #ccc;
+
+  .answer {
+    border-top: 1px solid #ccc;
+
+    .text {
+      width: 50%;
+    }
+
+    td {
+      line-height: 2em;
+      div {
+        margin: 0.25em 0;
+        height: 1.5em;
+      }
+    }
+
+    .bar0 {
+      background-color: red;
+    }
+    .bar1 {
+      background-color: orange;
+    }
+    .bar2 {
+      background-color: lightgreen;
+    }
+    .bar3 {
+      background-color: green;
+    }
+    .bar4 {
+      background-color: gray;
+    }
+  }
+}

app/models/question.rb

@@ -23,11 +23,11 @@ class Question < ApplicationRecord
   scope :for_category, -> (category) { where(category: category) }
 
   def options
-    [option1, option2, option3, option4, option5].map(&:downcase).map(&:strip)
+    [option1, option2, option3, option4, option5]
   end
 
   def option_index(answer)
-    options.index(answer.downcase.strip)
+    options.map(&:downcase).map(&:strip).index(answer.downcase.strip)
   end
 
   def aggregated_responses_for_school(school)

app/views/questions/_question.html.haml

@@ -24,13 +24,13 @@
 
     .clearfix
 
-    .show-hide
+    .show-hide.px-2
       %p
         %a{"aria-controls" => "histogram#{question.id}", "aria-expanded" => "false", "data-toggle" => "collapse", :href => "#histogram#{question.id}"}
-          = "<span class='toggle'>Show</span> Histogram".html_safe
-        &nbsp; | &nbsp;
+          Histogram
+        &nbsp;&nbsp;|&nbsp;&nbsp;
         %a{"aria-controls" => "raw-data#{question.id}", "aria-expanded" => "false", "data-toggle" => "collapse", :href => "#raw-data#{question.id}"}
-          = "<span class='toggle'>Show</span> Raw Data".html_safe
+          Raw Data
 
       .collapse{id: "histogram#{question.id}"}
         = render 'shared/histogram', data: aggregated_responses

app/views/shared/_histogram.html.haml

@@ -1,2 +1,12 @@
-%p
-  =# data.inspect
+- histogram = data.responses.map(&:answer_index).group_by { |a| a.to_s }
+%table.answers
+  %tbody
+    - data.question.options.each_with_index do |option, index|
+      %tr.answer
+        - group = histogram[(index + 1).to_s]
+        - width = (100 * (group.blank? ? 0 : group.length)) / histogram.values.flatten.length
+        %td.text
+          = "#{option}:"
+          = group.blank? ? 0 : group.length
+        %td.count
+          %div{class: "bar#{index}", style: "width: #{width}%"}