[guivis/KeepPolling#12]

- integrate chartkick library
- add pie chart to results for polls
- show legend below chart with results

keeppolling/settings.py

@@ -40,6 +40,7 @@ INSTALLED_APPS = [
     'django.contrib.staticfiles',
     "landing",
     "polls",
+    "chartkick.django",
 ]
 
 MIDDLEWARE = [

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 %}

polls/templates/polls/poll_results.html

@@ -4,14 +4,17 @@
 <div class="h2 kanit-light-italic">
     Review the poll results below
 </div>
-<div>
+<div class="results">
-    {% for result in results %}
+    <div class="chart">
-    <div>
+        {{ chart }}
-        {{ result.option.text }} - {{ result.count }}
     </div>
-    {% empty %}
+    <div class="legend">
-    <div>
+        {% for legend_entry in legend %}
-        No options defined for Question!
+        <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>

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,

requirements.txt

@@ -2,3 +2,4 @@ Django==5.0.2
 gunicorn==21.2.0
 whitenoise==6.6.0
 whitenoise[brotli]
+chartkick==1.0.1

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;

static/css/landing.css

@@ -85,3 +85,44 @@
     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;
+}

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;

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 %}