nathan/onboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add basic pie charts for todos

Browse Source
This commit is contained in:
Nathan Chapman 2021-07-28 21:03:35 -06:00
parent 3bc69dc047
commit 8de723328c
4 changed files with 32 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
board/templates/board/employee_list.html
View File

@ -6,16 +6,18 @@
<p><a href="{% url 'employee-pre' %}" class="action-button">Add employee from email</a> or <a href="{% url 'employee-create' %}">Add employee from scratch</a></p> <p><a href="{% url 'employee-pre' %}" class="action-button">Add employee from email</a> or <a href="{% url 'employee-create' %}">Add employee from scratch</a></p>
<section> <section>
{% for employee in employee_list %} {% for employee in employee_list %}
<p> <div class="employee__item">
<a href="{% url 'employee-detail' employee.pk %}"><strong>{{employee.full_name}}</strong></a><br> <div class="pie_chart" type="pie" percent="0%">
<small>Hire date: {{employee.hire_date|date:"SHORT_DATE_FORMAT"}}</small><br> <svg viewBox="0 0 64 64">
<small>Department: {{employee.department}}</small> <circle class="pie" r="32" cx="32" cy="32" style="stroke-width: 64;"></circle>
</p> <circle class="slice" r="32" cx="32" cy="32" style="stroke-width: 64;stroke-dasharray: {% widthratio employee.todos_completed employee.todos_total 201 %} 200;"></circle>
<div class="pie_chart" type="pie" percent="0%"> </svg>
<svg viewBox="0 0 64 64"> </div>
<circle class="pie" r="32" cx="32" cy="32" style="stroke-width: 64;"></circle> <p>
<circle class="slice" r="32" cx="32" cy="32" style="stroke-width: 64;stroke-dasharray: 0 201.06192982974676;"></circle> <a href="{% url 'employee-detail' employee.pk %}"><strong>{{employee.full_name}}</strong></a><br>
</svg> <small>Hire date: {{employee.hire_date|date:"SHORT_DATE_FORMAT"}}</small><br>
<small>Department: {{employee.department}}</small>
</p>
</div> </div>
{% endfor %} {% endfor %}
</section> </section>

11
board/views.py
View File

@ -5,7 +5,11 @@ from django.views.generic.edit import FormView, CreateView, UpdateView, DeleteVi
from django.views.generic.detail import DetailView from django.views.generic.detail import DetailView
from django.views.generic.list import ListView from django.views.generic.list import ListView
from django.contrib.auth.mixins import LoginRequiredMixin from django.contrib.auth.mixins import LoginRequiredMixin
from django.db.models import Q
from django.db.models import (Exists, OuterRef,
Prefetch, Subquery, Count, Sum, F, Q, Value)
from django.db.models.functions import Length, Upper
from .models import Employee, LogEntry, Todo, Event from .models import Employee, LogEntry, Todo, Event
from .forms import ( from .forms import (
@ -32,7 +36,10 @@ class SearchResultsView(ListView):
# Employees # Employees
class EmployeeListView(LoginRequiredMixin, ListView): class EmployeeListView(LoginRequiredMixin, ListView):
model = Employee model = Employee
queryset = Employee.objects.filter(archived=False).order_by('hire_date') queryset = Employee.objects.filter(archived=False).order_by('hire_date').annotate(
todos_total=Count('todo'),
todos_completed=Count('pk', filter=Q(todo__completed=True)),
)
class EmployeeArchivedView(LoginRequiredMixin, ListView): class EmployeeArchivedView(LoginRequiredMixin, ListView):
model = Employee model = Employee

1
onboard/settings.py
View File

@ -53,6 +53,7 @@ MIDDLEWARE = [
'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware', 'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware',
'onboard.middleware.TimezoneMiddleware',
] ]
ROOT_URLCONF = 'onboard.urls' ROOT_URLCONF = 'onboard.urls'

12
static/styles/main.css
View File

@ -314,6 +314,13 @@ hgroup {
} }
.employee__item {
display: grid;
grid-template-columns: 0.25fr 4fr;
column-gap: 1rem;
align-items: center;
}
.log_entry { .log_entry {
display: grid; display: grid;
@ -351,8 +358,9 @@ hgroup {
.pie_chart { .pie_chart {
display: inline-block; display: inline-block;
width: 1.125em; width: 2rem;
height: 1.125em; height: 2rem;
} }