From 8cf48cfdf57c451b47fbd2e5b90c2ebf0c7919dc Mon Sep 17 00:00:00 2001 From: "Edgar P. Burkhart" Date: Tue, 18 Apr 2023 09:31:11 +0200 Subject: [PATCH] Update chart on snapshot page --- nummi/main/static/main/css/chart.css | 59 -------------------- nummi/main/static/main/css/plot.css | 12 ++-- nummi/main/templates/main/plot/category.html | 58 +++++++++++++++++++ nummi/main/templates/main/plot/history.html | 6 ++ nummi/main/templates/main/snapshot_form.html | 41 +------------- nummi/main/views.py | 30 ++++------ 6 files changed, 85 insertions(+), 121 deletions(-) delete mode 100644 nummi/main/static/main/css/chart.css create mode 100644 nummi/main/templates/main/plot/category.html diff --git a/nummi/main/static/main/css/chart.css b/nummi/main/static/main/css/chart.css deleted file mode 100644 index fdf6ec2..0000000 --- a/nummi/main/static/main/css/chart.css +++ /dev/null @@ -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} diff --git a/nummi/main/static/main/css/plot.css b/nummi/main/static/main/css/plot.css index 6754896..034ea56 100644 --- a/nummi/main/static/main/css/plot.css +++ b/nummi/main/static/main/css/plot.css @@ -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; diff --git a/nummi/main/templates/main/plot/category.html b/nummi/main/templates/main/plot/category.html new file mode 100644 index 0000000..0ad4584 --- /dev/null +++ b/nummi/main/templates/main/plot/category.html @@ -0,0 +1,58 @@ +{% load main_extras %} +{% load i18n %} +
+ + + + + + + + + + + + + + + + + {% spaceless %} + {% for cat in categories.data %} + + + + + + + + + {% endfor %} + {% endspaceless %} + +
{% translate "Category" %}{% translate "Expenses" %}{% translate "Income" %}
+ {% if cat.category %}{{ cat.category__name }}{% endif %} + + {% if cat.category %} + + {% else %} + + {% endif %} + {{ cat.sum_m|pmrvalue }} +
+ {% if cat.sum < 0 %} +
+ {{ cat.sum|pmrvalue }} +
+ {% endif %} + 		+
+ {% if cat.sum > 0 %} +
+ {{ cat.sum|pmrvalue }} +
+ {% endif %} + 		{{ cat.sum_p|pmrvalue }}
+
diff --git a/nummi/main/templates/main/plot/history.html b/nummi/main/templates/main/plot/history.html index 6670b59..60157af 100644 --- a/nummi/main/templates/main/plot/history.html +++ b/nummi/main/templates/main/plot/history.html @@ -2,6 +2,12 @@ {% load i18n %}
+ + + + + + diff --git a/nummi/main/templates/main/snapshot_form.html b/nummi/main/templates/main/snapshot_form.html index 8785ed8..3ecfb5b 100644 --- a/nummi/main/templates/main/snapshot_form.html +++ b/nummi/main/templates/main/snapshot_form.html @@ -12,7 +12,7 @@ href="{% static 'main/css/table.css' %}" type="text/css"/> {% endblock %} {% block body %} @@ -33,44 +33,7 @@ {% if categories %}

{% translate "Categories" %}

-
- {% for cat in categories %} -
- {% if cat.category %} - - {{ cat.category__name }} - {% else %} - - {% endif %} -
-
{{ cat.sum_m|pmvalue }}
-
-
- {% if cat.sum < 0 %} -
- {{ cat.sum|pmvalue }} -
- {% endif %} -
-
-
- {% if cat.sum >= 0 %} -
- {{ cat.sum|pmvalue }} -
- {% endif %} -
-
{{ cat.sum_p|pmvalue }}
- {% endfor %} -
+ {% include "main/plot/category.html" %} {% endif %} {% if not snapshot.adding %}

{% translate "Transactions" %} ({{ snapshot.sum|pmvalue }} / {{ snapshot.diff|pmvalue }})

diff --git a/nummi/main/views.py b/nummi/main/views.py index 6103e5d..794c2a1 100644 --- a/nummi/main/views.py +++ b/nummi/main/views.py @@ -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(
{% translate "Month" %}