HTML/CSS only plot implemented for history on homepage

This commit is contained in:
Edgar P. Burkhart 2023-04-17 17:22:34 +02:00
parent ee7e6e60a7
commit 656449db9f
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
17 changed files with 155 additions and 148 deletions

View file

@ -0,0 +1,79 @@
.plot table {
border-collapse: collapse;
width: 100%;
}
.plot tr {
padding-bottom: .5rem;
}
.plot th {text-align: center}
.plot th.r {text-align: right}
.plot th.l {text-align: left}
.plot td, .plot th, .plot td.bar div {
position: relative;
height: 2rem;
line-height: 2rem;
}
.plot td, .plot th {
padding: .5rem var(--gap);
}
.plot td:not(.bar), .plot tbody th {
width: 8rem;
}
.plot td.bar {
position: relative;
padding: 0;
}
.plot td.bar div {
position: absolute;
top: 0;
}
.plot td.m {
text-align: right;
}
.plot td.value {
padding: 0 var(--gap);
font-feature-settings: var(--num);
text-align: right;
}
.plot td.bar div:not(.tot) {
width: 0;
box-sizing: border-box;
z-index: 1;
display: inline-block;
}
.plot td.bar.p div {
left: 0;
border-radius: 0 var(--radius) var(--radius) 0;
}
.plot td.bar.m div {
right: 0;
border-radius: var(--radius) 0 0 var(--radius);
}
.plot td.bar.m div:not(.tot) {
background: var(--red-1);
}
.plot td.bar.p div:not(.tot) {
background: var(--green-1);
}
.plot td.bar div.tot {
z-index: 10;
height: .5rem;
background: black;
}
.plot td.bar div.tot span {
position: absolute;
display: inline-block;
white-space: nowrap;
margin: 0 var(--gap);
font-weight: 650;
top: .5rem;
line-height: 1.5rem;
height: 1.5rem;
font-feature-settings: var(--num);
}
.plot td.bar.p div.tot span {left: 0}
.plot td.bar.m div.tot span {right: 0}

View file

@ -21,8 +21,6 @@
{{ form }}
</form>
{% if form.instance.transactions %}
<img src="{% url "plot-category" form.instance.id %}"
alt="Graph representing value over time"/>
<h2>{% translate "Transactions" %}</h2>
{% include "main/table/transaction.html" %}
{% endif %}

View file

@ -10,6 +10,9 @@
<link rel="stylesheet"
href="{% static 'main/css/table.css' %}"
type="text/css"/>
<link rel="stylesheet"
href="{% static 'main/css/plot.css' %}"
type="text/css"/>
{% endblock %}
{% block body %}
{% if accounts %}
@ -25,6 +28,8 @@
{% if transactions %}
<h2>{% translate "Transactions" %}</h2>
{% include "main/table/transaction.html" %}
<h2>{% translate "History" %}</h2>
{% include "main/plot/history.html" %}
{% endif %}
{% if categories %}
<h2>{% translate "Categories" %}</h2>

View file

@ -0,0 +1,40 @@
{% load main_extras %}
{% load i18n %}
<div class="plot">
<table>
<thead>
<tr>
<th scope="col">{% translate "Month" %}</th>
<th class="l" scope="col" colspan="2">{% translate "Expenses" %}</th>
<th class="r" scope="col" colspan="2">{% translate "Income" %}</th>
</tr>
</thead>
<tbody>
{% spaceless %}
{% for date in history.data %}
<tr>
<th scope="row">{{ date.month|date:"M y" }}</th>
<td class="value">{{ date.sum_m|pmrvalue }}</td>
<td class="bar m">
<div style="width: {% widthratio date.sum_m history.max -100 %}%"></div>
{% if date.sum < 0 %}
<div class="tot" style="width:{% widthratio date.sum history.max -100 %}%">
<span>{{ date.sum|pmrvalue }}</span>
</div>
{% endif %}
</td>
<td class="bar p">
<div style="width: {% widthratio date.sum_p history.max 100 %}%"></div>
{% if date.sum > 0 %}
<div class="tot" style="width:{% widthratio date.sum history.max 100 %}%">
<span>{{ date.sum|pmrvalue }}</span>
</div>
{% endif %}
</td>
<td class="value">{{ date.sum_p|pmrvalue }}</td>
</tr>
{% endfor %}
{% endspaceless %}
</tbody>
</table>
</div>

View file

@ -40,7 +40,7 @@
<i class="fa fa-{{ cat.category__icon }}"></i>
<a href="{% url 'category' cat.category %}">{{ cat.category__name }}</a>
{% else %}
<i class="fa fa-wallet"></i></i>
<i class="fa fa-wallet"></i>
{% endif %}
</div>
<div class="value left">{{ cat.sum_m|pmvalue }}</div>

View file

@ -6,12 +6,12 @@ register = template.Library()
@register.filter
def value(val, pm=False):
def value(val, pm=False, r=2):
if not val:
return mark_safe("&ndash;")
_prefix = ""
_suffix = "&nbsp;€"
_val = formats.number_format(val, 2, use_l10n=True, force_grouping=True)
_val = formats.number_format(val, r, use_l10n=True, force_grouping=True)
if val > 0:
if pm:
@ -28,6 +28,11 @@ def pmvalue(val):
return value(val, True)
@register.filter
def pmrvalue(val):
return value(val, True, r=0)
@register.inclusion_tag("main/tag/form_buttons.html")
def form_buttons(instance):
return {

View file

@ -41,12 +41,34 @@ class IndexView(LoginRequiredMixin, TemplateView):
_max = 8
_transactions = Transaction.objects.filter(user=self.request.user)
_snapshots = Snapshot.objects.filter(user=self.request.user)
_history = (
_transactions.filter(category__budget=True)
.values(month=models.functions.TruncMonth("date"))
.annotate(
sum_p=models.Sum("value", filter=models.Q(value__gt=0)),
sum_m=models.Sum("value", filter=models.Q(value__lt=0)),
sum=models.Sum("value"),
)
.order_by("-month")
)
res = {
"accounts": Account.objects.filter(user=self.request.user),
"transactions": _transactions[:_max],
"categories": Category.objects.filter(user=self.request.user),
"snapshots": _snapshots[:_max],
"history": {
"data": _history,
"max": max(
map(
lambda x: abs(x) if x else 0,
_history.aggregate(
max=models.Max("sum_p"),
min=models.Min("sum_m"),
).values(),
)
),
},
}
if _transactions.count() > _max:
res["transactions_url"] = reverse_lazy("transactions")
@ -233,9 +255,7 @@ class SnapshotUpdateView(NummiUpdateView):
)
if _transactions:
data["categories"] = (
_transactions.values(
"category", "category__name", "category__icon"
)
_transactions.values("category", "category__name", "category__icon")
.annotate(
sum=models.Sum("value"),
sum_m=models.Sum("value", filter=models.Q(value__lt=0)),

View file

@ -19,7 +19,6 @@ from django.urls import include, path
urlpatterns = i18n_patterns(
path("", include("main.urls")),
path("plot/", include("plot.urls")),
path("admin/", admin.site.urls),
prefix_default_language=False,
)

View file

View file

@ -1 +0,0 @@
# Register your models here.

View file

@ -1,6 +0,0 @@
from django.apps import AppConfig
class PlotConfig(AppConfig):
default_auto_field = "django.db.models.BigAutoField"
name = "plot"

View file

@ -1 +0,0 @@
# Create your models here.

View file

@ -1,13 +0,0 @@
font.family: Inter
lines.linewidth: 2
figure.autolayout: True
figure.figsize: 8, 4
figure.dpi: 300
axes.prop_cycle: cycler('color', ["66cc66", "338033", "99ff99", "802653", "cc6699"])
axes.axisbelow: True
axes.grid: True
svg.fonttype: none

View file

@ -1 +0,0 @@
# Create your tests here.

View file

@ -1,9 +0,0 @@
from django.urls import path
from . import views
urlpatterns = [
path("timeline", views.timeline, name="plot-timeline"),
path("categories", views.categories, name="plot-categories"),
path("category/<uuid>", views.category, name="plot-category"),
]

View file

@ -1,108 +0,0 @@
import io
import matplotlib
import matplotlib.pyplot as plt
from django.contrib.auth.decorators import login_required
from django.db import models
from django.http import HttpResponse
from django.shortcuts import get_object_or_404
from django.utils.translation import gettext as _
from matplotlib import dates as mdates
from main.models import Category, Snapshot, Transaction
matplotlib.use("Agg")
plt.style.use("./plot/nummi.mplstyle")
@login_required
def timeline(request):
_snapshots = Snapshot.objects.all()
fig, ax = plt.subplots()
ax.step(
[s.date for s in _snapshots],
[s.value for s in _snapshots],
where="post",
)
ax.set(ylabel=_("Snapshots"), ylim=0)
ax.xaxis.set_major_formatter(
mdates.ConciseDateFormatter(ax.xaxis.get_major_locator())
)
ax.autoscale(True, "x", True)
_io = io.StringIO()
fig.savefig(_io, format="svg")
return HttpResponse(_io.getvalue(), headers={"Content-Type": "image/svg+xml"})
@login_required
def categories(request):
_categories = Category.objects.filter(budget=True)
fig, ax = plt.subplots(figsize=(8, _categories.count() / 4))
ax.barh(
[str(c) for c in _categories][::-1],
[
Transaction.objects.filter(category=c).aggregate(sum=models.Sum("value"))[
"sum"
]
for c in _categories
][::-1],
)
_io = io.StringIO()
fig.savefig(_io, format="svg")
return HttpResponse(_io.getvalue(), headers={"Content-Type": "image/svg+xml"})
@login_required
def category(request, uuid):
_category = get_object_or_404(Category, id=uuid)
_values_p = (
Transaction.objects.filter(category=_category)
.filter(value__gt=0)
.annotate(m=models.functions.TruncMonth("date"))
.values("m")
.annotate(sum=models.Sum("value"))
.order_by("m")
)
_values_m = (
Transaction.objects.filter(category=_category)
.filter(value__lt=0)
.annotate(m=models.functions.TruncMonth("date"))
.values("m")
.annotate(sum=models.Sum("value"))
.order_by("m")
)
fig, ax = plt.subplots()
ax.bar(
[v["m"] for v in _values_p],
[v["sum"] for v in _values_p],
width=12,
color="#66cc66",
)
ax.bar(
[v["m"] for v in _values_m],
[v["sum"] for v in _values_m],
width=12,
color="#cc6699",
)
ax.xaxis.set_major_formatter(
mdates.ConciseDateFormatter(ax.xaxis.get_major_locator())
)
ax.autoscale(True, "x", True)
_ym, _yp = ax.get_ylim()
ax.set(ylim=(min(_ym, 0), max(_yp, 0)))
ax.set(ylabel=f"{_category.name} (€)")
_io = io.StringIO()
fig.savefig(_io, format="svg")
return HttpResponse(_io.getvalue(), headers={"Content-Type": "image/svg+xml"})