Improve calendar table

nummi/history/templates/history/plot.html

@@ -3,13 +3,14 @@
 {% load transaction_extras %}
 {% load i18n %}
 <div class="calendar">
-    <table class="full-width">
+    <table>
         <thead>
             <tr>
                 {% if not year %}
                     <th scope="col">{% translate "Year" %}</th>
                 {% endif %}
                 {% calendar_head %}
+                <th scope="col">{% translate "Total" %}</th>
             </tr>
         </thead>
         <tbody>
@@ -24,16 +25,17 @@
                         {% empty_calendar_cells_start m.month.month %}
                         {% endif %}
                         {% if m %}
-                            <td class="{% if m.sum > 0 %}p{% else %}m{% endif %}"
+                            <td class="month {% if m.sum > 0 %}p{% else %}m{% endif %}"
                                 style="--opacity: {% calendar_opacity m.sum history.max.sum %}"
                                 title="{{ m.sum|pmrvalue }}">{% up_down_icon m.sum %}</td>
                         {% else %}
-                            <td></td>
+                            <td class="month"></td>
                         {% endif %}
                         {% if forloop.parentloop.first and forloop.last %}
                         {% empty_calendar_cells_end m.month.month %}
                         {% endif %}
                     {% endfor %}
+                    <td class="total">{{ y_data|sum_year|pmrvalue }}</td>
                 </tr>
             {% endfor %}
         </tbody>

nummi/history/templatetags/history_extras.py

@@ -60,3 +60,8 @@ def calendar_head():
     th = (f"""<th>{month:02d}</th>""" for month in months)
 
     return mark_safe("".join(th))
+
+
+@register.filter
+def sum_year(y_data):
+    return sum(y["sum"] for y in y_data)

nummi/main/static/main/css/plot.css

@@ -95,13 +95,16 @@ table.full-width col.bar {
         border-top: none;
       }
 
-      td {
+      td.month {
         text-align: center;
         background-color: color-mix(
           in hsl,
           var(--td-bg, var(--bg)) var(--opacity),
           var(--bg)
         );
+        padding: 0;
+        width: 4rem;
+        height: 4rem;
         &.p {
           --td-bg: var(--green);
         }
@@ -109,6 +112,11 @@ table.full-width col.bar {
           --td-bg: var(--red);
         }
       }
+      td.total {
+        text-align: right;
+        font-weight: 650;
+        font-feature-settings: var(--num);
+      }
     }
   }
 }