From 8155f3c8c46b7e38bd3a3fbdf995d342288f6d92 Mon Sep 17 00:00:00 2001
From: Guy Davis <guy@guyware.nz>
Date: Sun, 3 Mar 2024 09:39:34 +1300
Subject: [PATCH] [guivis/KeepPolling#12] - integrate chartkick library - add
 pie chart to results for polls - show legend below chart with results

---
 keeppolling/settings.py                 |  1 +
 landing/templates/landing/landing.html  |  3 ++
 polls/templates/polls/poll_results.html | 19 +++++++-----
 polls/views.py                          | 35 ++++++++++++++++++++-
 requirements.txt                        |  3 +-
 static/css/fonts.css                    | 10 ++++++
 static/css/landing.css                  | 41 +++++++++++++++++++++++++
 static/css/style.css                    |  8 ++---
 templates/base_template.html            |  2 +-
 9 files changed, 107 insertions(+), 15 deletions(-)

diff --git a/keeppolling/settings.py b/keeppolling/settings.py
index 6c1bf80..5ce0329 100644
--- a/keeppolling/settings.py
+++ b/keeppolling/settings.py
@@ -40,6 +40,7 @@ INSTALLED_APPS = [
     'django.contrib.staticfiles',
     "landing",
     "polls",
+    "chartkick.django",
 ]
 
 MIDDLEWARE = [
diff --git a/landing/templates/landing/landing.html b/landing/templates/landing/landing.html
index 18f1f90..eebf6fb 100644
--- a/landing/templates/landing/landing.html
+++ b/landing/templates/landing/landing.html
@@ -6,6 +6,9 @@
 
 <link rel="stylesheet" href="{% static 'css/landing.css' %}"/>
 
+<script src="{% static 'chartkick/Chart.bundle.js' %}"></script>
+<script src="{% static 'chartkick/chartkick.js' %}"></script>
+
 {% endblock %}
 
 {% block content %}
diff --git a/polls/templates/polls/poll_results.html b/polls/templates/polls/poll_results.html
index bd23e5b..d6cccbe 100644
--- a/polls/templates/polls/poll_results.html
+++ b/polls/templates/polls/poll_results.html
@@ -4,14 +4,17 @@
 <div class="h2 kanit-light-italic">
     Review the poll results below
 </div>
-<div>
-    {% for result in results %}
-    <div>
-        {{ result.option.text }} - {{ result.count }}
+<div class="results">
+    <div class="chart">
+        {{ chart }}
     </div>
-    {% empty %}
-    <div>
-        No options defined for Question!
+    <div class="legend">
+        {% for legend_entry in legend %}
+        <div>
+            <div class="circle" style="background-color: {{ legend_entry.color }};"></div>
+            <div class="b3 kanit-regular grower">{{ legend_entry.option }}</div>
+            <div class="b2 kanit-regular">{{ legend_entry.count }}</div>
+        </div>
+        {% endfor %}
     </div>
-    {% endfor %}
 </div>
diff --git a/polls/views.py b/polls/views.py
index 99fe6f6..0857594 100644
--- a/polls/views.py
+++ b/polls/views.py
@@ -1,3 +1,4 @@
+from chartkick.django import PieChart
 from django.contrib.auth.decorators import login_required
 from django.db.models import Count
 from django.shortcuts import render, get_object_or_404
@@ -51,7 +52,39 @@ def poll_results(
     ).annotate(
         count=Count("option")
     )
-    context["results"] = results
+
+    colors = [
+        "#dd966b",
+        "#a1b0f7",
+        "#ffd83d",
+        "#8ac3a3",
+        "#dec2cb",
+    ]
+    legend = []
+    index = 0
+    for vote in results:
+        legend.append(
+            {
+                "color": colors[index % len(colors)],
+                "option": vote.option.text,
+                "count": vote.count,
+            }
+        )
+        index += 1
+
+    chart_data = {
+        vote.option.text: vote.count
+        for vote in results
+    }
+
+    context["chart"] = PieChart(
+        data=chart_data,
+        width="384px",
+        height="384px",
+        legend=False,
+        colors=colors,
+    )
+    context["legend"] = legend
 
     return render(
         request,
diff --git a/requirements.txt b/requirements.txt
index c9a2ad7..8b6f700 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,4 +1,5 @@
 Django==5.0.2
 gunicorn==21.2.0
 whitenoise==6.6.0
-whitenoise[brotli]
\ No newline at end of file
+whitenoise[brotli]
+chartkick==1.0.1
\ No newline at end of file
diff --git a/static/css/fonts.css b/static/css/fonts.css
index dead8e4..598d261 100644
--- a/static/css/fonts.css
+++ b/static/css/fonts.css
@@ -10,6 +10,16 @@
     font-size: 20px;
 }
 
+.b1 {
+    font-size: 24px;
+}
+.b2 {
+    font-size: 16px;
+}
+.b3 {
+    font-size: 14px;
+}
+
 .kanit-thin {
   font-family: "Kanit", sans-serif;
   font-weight: 100;
diff --git a/static/css/landing.css b/static/css/landing.css
index bd5b100..e0f1be7 100644
--- a/static/css/landing.css
+++ b/static/css/landing.css
@@ -84,4 +84,45 @@
     border-bottom-left-radius: 16px;
     border-bottom-right-radius: 16px;
     border-bottom-style: none;
+}
+
+.results {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+}
+
+.chart {
+    margin: 0px 32px;
+}
+
+.legend {
+    display: flex;
+    flex-direction: column;
+    padding: 16px 16px;
+    background-color: var(--primary-400);
+    border-radius: 16px;
+}
+.legend > div {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    min-width: 400px;
+    padding: 8px;
+    border-bottom-color: var(--accent-400);
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    background-color: var(--neutral-200);
+}
+.legend > div:first-of-type {
+    border-top-width: 1px;
+    border-top-style: solid;
+    border-top-color: var(--accent-400);
+}
+.circle {
+    width: 25px;
+    height: 25px;
+    background-color: var(--neutral-500);
+    border-radius: 50px;
 }
\ No newline at end of file
diff --git a/static/css/style.css b/static/css/style.css
index de74fc4..ebda633 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -14,6 +14,10 @@ body {
     background-color: var(--neutral-200);
 }
 
+.grower {
+    flex-grow: 1;
+}
+
 header {
     display: flex;
     padding: 16px 32px;
@@ -21,10 +25,6 @@ header {
     background-color: var(--neutral-100);
 }
 
-.title {
-    flex-grow: 1;
-}
-
 .content {
     flex-grow: 1;
     z-index: 2;
diff --git a/templates/base_template.html b/templates/base_template.html
index 0ff6845..0bf51b6 100644
--- a/templates/base_template.html
+++ b/templates/base_template.html
@@ -30,7 +30,7 @@
     })
 </script>
 <header>
-    <div class="title h0 kanit-semibold">
+    <div class="h0 kanit-semibold grower">
         Keep Polling
     </div>
     {% if user.is_authenticated %}