+
+ {{ chart }}
- {% empty %}
-
- No options defined for Question!
+
+ {% for legend_entry in legend %}
+
+
+
{{ legend_entry.option }}
+
{{ legend_entry.count }}
+
+ {% endfor %}
- {% endfor %}
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 @@
})