Update chart on snapshot page

nummi/main/static/main/css/chart.css

@@ -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}

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;

nummi/main/templates/main/plot/category.html

@@ -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>

nummi/main/templates/main/plot/history.html

@@ -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>

nummi/main/templates/main/snapshot_form.html

@@ -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">
+            {% include "main/plot/category.html" %}
-                {% 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>
         {% endif %}
         {% if not snapshot.adding %}
             <h2>{% translate "Transactions" %} ({{ snapshot.sum|pmvalue }} / {{ snapshot.diff|pmvalue }})</h2>

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"),
+                        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(
+            data["categories"] = {
-                map(
+                "data": _categories,
-                    lambda x: abs(x) if x else 0,
+                "max": max(
-                    data["categories"]
+                    _categories.aggregate(
-                    .aggregate(
                         max=models.Max("sum_p"),
                         min=models.Min("sum_m"),
-                    )
+                    ).values(),
-                    .values(),
+                ),
-                )
+            }
-            )
-            data["cat_lim_m"] = -data["cat_lim"]
 
         return data | {
             "new_transaction_url": reverse_lazy(