replace tooltip with date on hover above the graph

financeplanner/static/financeplanner/style.css

@@ -148,6 +148,13 @@ tr:hover {
     color: #CC6622;
 }
 
+#date-panel {
+    width: 80%;
+    opacity: 50%;
+    font-size: 1.5em;
+    text-align: center;
+}
+
 #graph {
     flex: 0 0 300px;
     width: 100%;
@@ -216,29 +223,3 @@ tr:hover {
     box-shadow: #FFFCF9 0 0 12px;
     opacity: 100%;
 }
-
-.tooltip {
-    position: relative;
-    display: inline-block;
-}
-
-.tooltip .tooltiptext {
-    visibility: hidden;
-    opacity: 90%;
-    width: 150px;
-    min-height: 50px;
-    background-color: #131211;
-    padding: 6px;
-    border-radius: 4px;
-    position: absolute;
-    bottom: 100%;
-    margin-bottom: 3px;
-    left: 50%;
-    margin-left: -75px;
-    z-index: 1;
-}
-
-.tooltip:hover .tooltiptext {
-    visibility: visible;
-}
-

financeplanner/templates/financeplanner/index.html

@@ -19,17 +19,19 @@
 
 <div class="main-container flex-col-centering">
     {% if graph_data %}
-        <h2>Data from {{ range_start }} til {{ range_end }}</h2>
+        <div id="date-panel">-</div>
         <div id="graph">
             {% for date, stat in graph_data.items %}
                 {% if stat.div_percentage is None %}
-                    <div class="graph-bar weak grey tooltip">
+                    <div class="graph-bar weak grey"
-                        <span class="tooltiptext">{{ date }}<br>unknown</span>
+                         onmouseover="showGraphBarDate('{{ stat.date_string }}')"
+                         onmouseleave="clearGraphBarDate()">
                     </div>
                 {% else %}
-                    <div class="graph-bar {{ stat.div_opacity_class }} {{ stat.div_color_class }} tooltip"
+                    <div class="graph-bar {{ stat.div_opacity_class }} {{ stat.div_color_class }}"
-                         style="height: {{ stat.div_percentage }}%">
+                         style="height: {{ stat.div_percentage }}%"
-                        <span class="tooltiptext">{{ date }}<br>{{ stat.amount }}€</span>
+                         onmouseover="showGraphBarDate('{{ stat.date_string }}')"
+                         onmouseleave="clearGraphBarDate()">
                     </div>
                 {% endif %}
             {% endfor %}
@@ -120,36 +122,45 @@
 </div>
 
 <script type="text/javascript">
-    const slider = document.getElementById('graph');
+    const graph = document.getElementById('graph');
+    const datePanel = document.getElementById('date-panel');
     let scrolling = false;
     let initX;
     let initScrollLeft;
 
     function startDragScroll(event) {
         scrolling = true;
-        slider.classList.add('scrolling');
+        graph.classList.add('scrolling');
-        initX = event.pageX - slider.offsetLeft;
+        initX = event.pageX - graph.offsetLeft;
-        initScrollLeft = slider.scrollLeft;
+        initScrollLeft = graph.scrollLeft;
     }
 
     function stopDragScroll() {
         scrolling = false;
-        slider.classList.remove('scrolling');
+        graph.classList.remove('scrolling');
     }
 
     function doDragScroll(event) {
         if (scrolling) {
             event.preventDefault();
-            const newX = event.pageX - slider.offsetLeft;
+            const newX = event.pageX - graph.offsetLeft;
-            const diff = (newX - initX) * 1.5;
+            const diff = (newX - initX);
-            slider.scrollLeft = initScrollLeft - diff;
+            graph.scrollLeft = initScrollLeft - diff;
         }
     }
 
-    slider.addEventListener('mousedown', (event) => startDragScroll(event));
+    function showGraphBarDate(dateStr) {
-    slider.addEventListener('mouseleave', () => stopDragScroll());
+        datePanel.innerText = dateStr;
-    slider.addEventListener('mouseup', () => stopDragScroll());
+    }
-    slider.addEventListener('mousemove', (event) => doDragScroll(event));
+
+    function clearGraphBarDate() {
+        datePanel.innerText = '-';
+    }
+
+    graph.addEventListener('mousedown', (event) => startDragScroll(event));
+    graph.addEventListener('mouseleave', () => stopDragScroll());
+    graph.addEventListener('mouseup', () => stopDragScroll());
+    graph.addEventListener('mousemove', (event) => doDragScroll(event));
 </script>
 
 </body>

financeplanner/views.py

@@ -151,6 +151,7 @@ def _build_graph_data(range_start, range_end, calculation_start, balance_list, a
     stats = _trim_stats(stats, range_start)
     amount_limit = _calculate_scale(stats)
     for date in stats.keys():
+        stats[date]["date_string"] = format_date(date)
         amount = stats[date]["amount"]
         if amount is None:
             stats[date]["div_percentage"] = None