display details about hovered stats

financeplanner/static/financeplanner/style.css

@@ -148,10 +148,19 @@ tr:hover {
     color: #CC6622;
 }
 
-#date-panel {
-    width: 80%;
+#big-stat-panel {
+    width: 100%;
     opacity: 50%;
-    font-size: 1.5em;
+    font-size: 1.4em;
+    height: 1.4em;
+    text-align: center;
+}
+
+#small-stat-panel {
+    width: 100%;
+    opacity: 50%;
+    font-size: 0.8em;
+    height: 0.8em;
     text-align: center;
 }
 

financeplanner/templates/financeplanner/index.html

@@ -11,13 +11,12 @@
 {% block content %}
     <div class="main-container flex-col-centering">
         {% if daily_stats %}
-            <div id="date-panel">-</div>
+            <div id="big-stat-panel"></div>
+            <div id="small-stat-panel"></div>
             <div id="graph">
                 {% for stat in daily_stats %}
                     <div class="graph-bar{% if stat.highlighted %} highlighted{% endif %}"
-                         id="graph-bar-{{ stat.id }}"
-                         onmouseover="showGraphBarDate('{{ stat.date|date:"d.m.y" }}')"
-                         onmouseleave="clearGraphBarDate()">
+                         id="graph-bar-{{ stat.id }}">
                     </div>
                 {% endfor %}
             </div>
@@ -154,7 +153,8 @@
 
     <script type="text/javascript">
         const graph = document.getElementById('graph');
-        const datePanel = document.getElementById('date-panel');
+        const bigStatPanel = document.getElementById('big-stat-panel');
+        const smallStatPanel = document.getElementById('small-stat-panel');
         const irrExpCheckbox = document.getElementById('irregular-expenses-checkbox');
 
         {% for stat in daily_stats %}
@@ -186,14 +186,6 @@
             }
         }
 
-        function showGraphBarDate(dateStr) {
-            datePanel.innerText = dateStr;
-        }
-
-        function clearGraphBarDate() {
-            datePanel.innerText = '-';
-        }
-
         function applyGraphBarHeights() {
             if (irrExpCheckbox.checked) {
                 {% for stat in daily_stats %}
@@ -212,5 +204,20 @@
         graph.addEventListener('mousemove', (event) => doDragScroll(event));
         irrExpCheckbox.addEventListener('change', () => applyGraphBarHeights());
         window.onload = applyGraphBarHeights;
+
+        {% for stat in daily_stats %}
+            graphBar{{ stat.id }}.addEventListener('mouseover', () => function () {
+                if (irrExpCheckbox.checked) {
+                    bigStatPanel.innerText = '{{ stat|stat_header:True }}';
+                } else {
+                    bigStatPanel.innerText = '{{ stat|stat_header:False }}';
+                }
+                smallStatPanel.innerText = '{{ stat|stat_details }}';
+            }());
+            graphBar{{ stat.id }}.addEventListener('mouseleave', () => function () {
+                bigStatPanel.innerText = '';
+                smallStatPanel.innerText = '';
+            }());
+        {% endfor %}
     </script>
 {% endblock %}

financeplanner/templatetags/custom_tags.py

@@ -1,5 +1,7 @@
 from django import template
+from django.template.defaultfilters import date
 
+from financeplanner.calc import DailyStat
 from financeplanner.utils import format_price
 
 register = template.Library()
@@ -8,3 +10,24 @@ register = template.Library()
 @register.filter(name="euro")
 def euro(value):
     return format_price(value) or "-"
+
+
+@register.filter(name="stat_header")
+def stat_header(value: DailyStat, irregular):
+    return " | ".join([
+        date(value.date, "d.m.y"),
+        euro(value.resulting_amount_irregular if irregular else value.resulting_amount)
+    ])
+
+
+@register.filter(name="stat_details")
+def stat_details(value: DailyStat):
+    parts = []
+    if value.balance_amount is not None:
+        parts.append(f"Balance: {euro(value.balance_amount)}")
+    for trans in value.actual_transactions:
+        parts.append(f"{trans.subject}: {euro(trans.amount)}")
+    result = " | ".join(parts) or "-"
+    if len(result) > 80:
+        return result[:47] + "..."
+    return result