edpibu/nummi
1
Fork 0
Code Issues 4 Releases Activity

Update chart on snapshot page

Browse source
This commit is contained in:
Edgar P. Burkhart 2023-04-18 09:31:11 +02:00
parent 93a800bf79
commit 8cf48cfdf5
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
6 changed files with 85 additions and 121 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
nummi/main/static/main/css/chart.css
View file

@ -1,59 +0,0 @@
.chart {
display: grid;
grid-template-columns: auto auto 1fr 1fr auto;
grid-gap: var(--gap) 0;
}
.chart > div {
position: relative;
height: 2rem;
line-height: 2rem;
}
.chart .left {
text-align: right;
}
.chart .bar,
.chart .value {
display: inline-block;
height: 2rem;
line-height: 2rem;
}
.chart .value {
padding: 0 var(--gap);
font-feature-settings: var(--num);
text-align: right;
}
.chart .bar {
width: 0;
box-sizing: border-box;
z-index: 1;
}
.chart .bar.tot {
position: absolute;
z-index: 10;
height: .5rem;
background: black;
}
.chart .left .bar.tot {right: 0}
.chart .right .bar.tot {left: 0}
.chart .left .bar {border-radius: var(--radius) 0 0 var(--radius)}
.chart .right .bar {border-radius: 0 var(--radius) var(--radius) 0}
.chart .bar_m {background: var(--red-1)}
.chart .bar_p {background: var(--green-1)}
.chart .bar 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);
}
.chart .right .bar span {left: 0}
.chart .left .bar span {right: 0}

12
nummi/main/static/main/css/plot.css
View file

@ -1,33 +1,35 @@
.plot table {
border-collapse: collapse;
width: 100%;
table-layout: auto;
}
.plot col.desc, .plot col.value {width: 8rem}
.plot col.icon {width: 1ch}
.plot tr {
padding-bottom: .5rem;
}
.plot th {text-align: center}
.plot th {text-align: left}
.plot th.r {text-align: right}
.plot th.l {text-align: left}
.plot td.c {text-align: center}
.plot td, .plot th, .plot td.bar div {
position: relative;
height: 2rem;
line-height: 2rem;
white-space: nowrap;
}
.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;
top: .5rem;
}
.plot td.m {
text-align: right;

58
nummi/main/templates/main/plot/category.html Normal file
View file

@ -0,0 +1,58 @@
{% load main_extras %}
{% load i18n %}
<div class="plot">
<table>
<colgroup>
<col class="desc">
<col class="icon">
<col class="value">
<col span="2" class="bar">
<col class="value">
</colgroup>
<thead>
<tr>
<th scope="col" colspan="2">{% translate "Category" %}</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 cat in categories.data %}
<tr>
<th scope="row">
{% if cat.category %}{{ cat.category__name }}{% endif %}
</th>
<td class="c">
{% if cat.category %}
<i class="fa fa-{{ cat.category__icon }}"></i>
{% else %}
<i class="fa fa-wallet"></i>
{% endif %}
</td>
<td class="value">{{ cat.sum_m|pmrvalue }}</td>
<td class="bar m">
<div style="width: {% widthratio cat.sum_m categories.max -100 %}%"></div>
{% if cat.sum < 0 %}
<div class="tot"
style="width:{% widthratio cat.sum categories.max -100 %}%">
<span>{{ cat.sum|pmrvalue }}</span>
</div>
{% endif %}
</td>
<td class="bar p">
<div style="width: {% widthratio cat.sum_p categories.max 100 %}%"></div>
{% if cat.sum > 0 %}
<div class="tot"
style="width:{% widthratio cat.sum categories.max 100 %}%">
<span>{{ cat.sum|pmrvalue }}</span>
</div>
{% endif %}
</td>
<td class="value">{{ cat.sum_p|pmrvalue }}</td>
</tr>
{% endfor %}
{% endspaceless %}
</tbody>
</table>
</div>

6
nummi/main/templates/main/plot/history.html
View file

@ -2,6 +2,12 @@
{% load i18n %}
<div class="plot">
<table>
<colgroup>
<col class="desc">
<col class="value">
<col span="2" class="bar">
<col class="value">
</colgroup>
<thead>
<tr>
<th scope="col">{% translate "Month" %}</th>

41
nummi/main/templates/main/snapshot_form.html
View file

@ -12,7 +12,7 @@
href="{% static 'main/css/table.css' %}"
type="text/css"/>
<link rel="stylesheet"
href="{% static 'main/css/chart.css' %}"
href="{% static 'main/css/plot.css' %}"
type="text/css"/>
{% endblock %}
{% block body %}
@ -33,44 +33,7 @@
</form>
{% if categories %}
<h2>{% translate "Categories" %}</h2>
<div class="chart">
{% for cat in categories %}
<div class="name">
{% if cat.category %}
<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>
{% endif %}
</div>
<div class="value left">{{ cat.sum_m|pmvalue }}</div>
<div class="left">
<div class="bar bar_m"
style="width:{% widthratio cat.sum_m cat_lim_m 100 %}%"
title="{{ cat.sum_m }}"></div>
{% if cat.sum < 0 %}
<div class="bar tot"
style="width:{% widthratio cat.sum cat_lim_m 100 %}%"
title="{{ cat.sum }}">
<span>{{ cat.sum|pmvalue }}</span>
</div>
{% endif %}
</div>
<div class="right">
<div class="bar bar_p"
style="width:{% widthratio cat.sum_p cat_lim 100 %}%"
title="{{ cat.sum_p }}"></div>
{% if cat.sum >= 0 %}
<div class="bar tot"
style="width:{% widthratio cat.sum cat_lim 100 %}%"
title="{{ cat.sum }}">
<span>{{ cat.sum|pmvalue }}</span>
</div>
{% endif %}
</div>
<div class="value right">{{ cat.sum_p|pmvalue }}</div>
{% endfor %}
</div>
{% include "main/plot/category.html" %}
{% endif %}
{% if not snapshot.adding %}
<h2>{% translate "Transactions" %} ({{ snapshot.sum|pmvalue }} / {{ snapshot.diff|pmvalue }})</h2>

30
nummi/main/views.py
View file

@ -60,13 +60,10 @@ class IndexView(LoginRequiredMixin, TemplateView):
"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(),
)
_history.aggregate(
max=models.Max("sum_p"),
min=-models.Min("sum_m"),
).values(),
),
},
}
@ -254,7 +251,7 @@ class SnapshotUpdateView(NummiUpdateView):
"snapshot_transactions", args=(snapshot.pk,)
)
if _transactions:
data["categories"] = (
_categories = (
_transactions.values("category", "category__name", "category__icon")
.annotate(
sum=models.Sum("value"),
@ -263,18 +260,15 @@ class SnapshotUpdateView(NummiUpdateView):
)
.order_by("-sum")
)
data["cat_lim"] = max(
map(
lambda x: abs(x) if x else 0,
data["categories"]
.aggregate(
data["categories"] = {
"data": _categories,
"max": max(
_categories.aggregate(
max=models.Max("sum_p"),
min=models.Min("sum_m"),
)
.values(),
)
)
data["cat_lim_m"] = -data["cat_lim"]
).values(),
),
}
return data | {
"new_transaction_url": reverse_lazy(