Redesign results page

- Replace chart with table
- Analyze tiebreak
- Merge all info in a single list of cards

Closes #25
Closes #13

Gemfile

@@ -10,6 +10,5 @@ gem 'base64', '0.1.1'
 gem 'forwardable', '1.3.2'
 gem 'bcrypt'
 gem 'gettext'
-gem 'chartkick'
 gem 'mail'
 gem 'redcarpet'

Gemfile.lock

@@ -23,7 +23,6 @@ GEM
     bcrypt (3.1.20)
     benchmark (0.4.0)
     bigdecimal (3.1.9)
-    chartkick (5.1.4)
     concurrent-ruby (1.3.5)
     connection_pool (2.5.0)
     date (3.4.1)
@@ -108,7 +107,6 @@ PLATFORMS
 DEPENDENCIES
   base64 (= 0.1.1)
   bcrypt
-  chartkick
   forwardable (= 1.3.2)
   gettext
   mail

vedia.rb

@@ -9,7 +9,6 @@ require 'sinatra/activerecord'
 require 'bcrypt'
 require 'gettext'
 require 'securerandom'
-require 'chartkick'
 require 'mail'
 require 'ostruct'
 require 'tzinfo'

views/layout.erb

@@ -9,8 +9,7 @@
     <% else %>
       <title>Vedia</title>
     <% end %>
-    <script src="/chartkick.js"></script>
-    <script src="/Chart.bundle.js"></script>
+    <script src="/bootstrap.js"></script>
     <link rel="stylesheet" href="/bootstrap.css">
     <link rel="stylesheet" href="/bootstrap-icons.css">
     <link rel="stylesheet" href="/style.css">

views/style.erb

@@ -17,4 +17,8 @@
     background-color: <%= v[:color] %>;
   }
 
+  .mj-cell-<%= v[:id] %> {
+    background-color: <%= v[:color] %> !important;
+  }
+
 <% end %>

views/votes_show_closed.erb

@@ -19,17 +19,6 @@
   </div>
 </div>
 
-<h2 class="mb-4"><%= _("Candidates") %></h2>
-
-<% @vote.candidates.each do |candidate| %>
-  <div class="card mb-4">
-    <div class="card-body">
-      <h3 class="mb-3"><%= candidate.name %></h3>
-      <%= markdown(candidate.description) %>
-    </div>
-  </div>
-<% end %>
-
 <div class="mb-5"></div>
 
 <h2 class="mb-4"><%= _("Results") %></h2>
@@ -40,49 +29,115 @@
 
 <% else %>
 
-<table class="table mb-4">
-  <tr>
-    <th></th>
-    <th><%= _("Rank") %></th>
-    <th><%= _("Candidate") %></th>
-    <th><%= _("Majority Judgment") %></th>
-    <th><%= _("Proponents") %></th>
-    <th><%= _("Opponents") %></th>
-  </tr>
-  <% i = 0 %>
-  <% @vote.candidates.sort { |a, b| a.mj <=> b.mj }.reverse.each do |candidate| %>
-  <% i = i + 1 %>
-  <% if i == 1 %>
-    <tr class="table-success">
-      <td><i class="bi bi-trophy-fill"></i></td>
-      <td><%= i %></i></td>
-  <% else %>
-    <tr>
-      <td></td>
-      <td><%= i %></td>
-  <% end %>
-    <td><%= candidate.name %></td>
-    <% value = settings.values.select { |e| e[:id] == candidate.mj.mj }.first %>
-    <td class="h5"><span class="badge bg-<%= value[:id] %>"><%= _(value[:label]) %></span></td>
-    <td><%= candidate.mj.proponents %></td>
-    <td><%= candidate.mj.opponents %></td>
-  </tr>
-  <% end %>
-</table>
-
-<%
-data = []
-colors = []
-settings.values.reverse.each do |v|
-  d = { name: _(v[:label]), data: [] }
-  @vote.candidates.sort { |a, b| a.mj <=> b.mj }.reverse.each do |c|
-    d[:data] << [c.name, c.mj.count[v[:id]]]
-  end
-  data << d
-  colors << v[:color]
-end
-%>
-<%= bar_chart data, colors: colors, stacked: true, legend: 'bottom' %>
+<% r = 0 %>
+<% @results = @vote.candidates.sort { |a, b| a.mj <=> b.mj }.reverse %>
+<% @results.each do |c| %>
+  <% r = r + 1 %>
+  <div class="card mb-4">
+    <div class="card-body">
+      <% if r == 1 %>
+        <p class="fs-5">
+          <i class="bi bi-trophy-fill"></i>
+          <%= _("Winning candidate") %>
+        </p>
+        <p><%= _("The winning candidate is the candidate with the highest median vote (↓), called <a href='https://en.wikipedia.org/wiki/Majority_judgment'><i>majority judgment</i></a>.") %></p>
+      <% end %>
+      <p class="fs-5">
+        <%= "##{r}" %>
+        <% value = settings.values.select { |e| e[:id] == c.mj.mj }.first %>
+        <span class="badge bg-<%= value[:id] %>"><%= _(value[:label]) %></span>
+      </p>
+      <h3><%= c.name %></h3>
+      <table class="table table-borderless">
+        <tr>
+          <% (1..c.mj.n).each do |i| %>
+            <td class="text-center <% unless i == c.mj.majority %>opacity-0<% end %>">↓</td>
+          <% end %>
+        </tr>
+        <tr>
+          <% settings.values.reverse.each do |v| %>
+            <% (1..c.mj.count[v[:id]]).each do |r| %>
+              <td class="mj-cell-<%= v[:id] %>">&nbsp;</td>
+            <% end %>
+          <% end %>
+        </tr>
+      </table>
+      <p class="d-inline-flex gap-3">
+        <a class="btn btn-outline-primary" data-bs-toggle="collapse" href="#description-<%= r %>" role="button" aria-expanded="false" aria-controls="description-<%= r %>">
+          <%= _("See description") %>
+        </a>
+        <% if r > 1 and c.mj.mj == @results.first.mj.mj %>
+          <a class="btn btn-primary" data-bs-toggle="collapse" href="#tiebreak-<%= r %>" role="button" aria-expanded="false" aria-controls="tiebreak-<%= r %>">
+            <%= _("Analyze tiebreak") %>
+          </a>
+        <% end %>
+      </p>
+      <div class="collapse" id="description-<%= r %>">
+        <%= markdown(c.description) %>
+      </div>
+      <% if r > 1 and c.mj.mj == @results.first.mj.mj %>
+        <div class="collapse" id="tiebreak-<%= r %>">
+          <p>
+            <%= _("This candidate and the winning candidate have the same majority judgment.") %>
+          </p>
+          <p><%= _("To break the tie, we remove the vote that corresponds to the majority judgment one-by-one until one candidate has a better majority judgment than the other.") %></p>
+          <div class="row fw-bold">
+            <div class="col"><%= _("Votes for this candidate") %></div>
+            <div class="col text-end"><%= _("Votes for the winning candidate") %></div>
+          </div>
+          <% n = 0 %>
+          <% c.mj.break_tie(@results.first.mj).each do |a, b| %>
+              <hr>
+            <% if n == 0 %>
+              <div class="row">
+                <div class="col"><%= _("Without removing any vote.") %></div>
+              </div>
+            <% end %>
+            <% if n == 1 %>
+              <div class="row">
+                <div class="col"><%= _("Removing 1 vote.") %></div>
+              </div>
+            <% end %>
+            <% if n > 1 %>
+              <div class="row">
+                <div class="col"><%= _("Removing %{n} votes.") % { n: n } %></div>
+              </div>
+            <% end %>
+            <table class="table table-borderless">
+              <tr>
+                <% (1..a.n).each do |i| %>
+                  <td class="text-center <% unless i == a.majority %>opacity-0<% end %>">↓</td>
+                <% end %>
+                <th class="w-100"></th>
+                <% (1..b.n).each do |i| %>
+                  <td class="text-center <% unless b.n - i + 1 == b.majority %>opacity-0<% end %>">↓</td>
+                <% end %>
+              </tr>
+              <tr>
+                <% settings.values.reverse.each do |v| %>
+                  <% (1..a.count[v[:id]]).each do |r| %>
+                    <td class="mj-cell-<%= v[:id] %>">&nbsp;</td>
+                  <% end %>
+                <% end %>
+                <td class="text-center fw-bold">
+                  <% if a.mj < b.mj %><<% end %>
+                  <% if a.mj > b.mj %>><% end %>
+                  <% if a.mj == b.mj %>=<% end %>
+                </td>
+                <% settings.values.each do |v| %>
+                  <% (1..b.count[v[:id]]).each do |r| %>
+                    <td class="mj-cell-<%= v[:id] %>">&nbsp;</td>
+                  <% end %>
+                <% end %>
+              </tr>
+            </table>
+            <% n = n + 1 %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>
 
 <div class="mb-5"></div>