From 252dc2336488582838585bf3be07cb1e2bd14b9d Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Tue, 16 Sep 2025 23:24:19 +1000
Subject: [PATCH] make payment annotations show as negatives, use this to make
 annotations of adding go above graph, and generally payment annotaions below
 the line.  Then switch to have the last few annoations above the graph
 regardless as we run out of room at that end of the graph

---
 calc.py              |  2 +-
 templates/index.html | 52 +++++++++++++++++++++++++-------------------
 2 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/calc.py b/calc.py
index 8e1f04b..8cdcd09 100644
--- a/calc.py
+++ b/calc.py
@@ -25,7 +25,7 @@ def bill_amount_today(finance, day, bill_data, bt_id_name, total ):
             if b['amount'] > 1000:
                 n=bt_id_name[ b['bill_type'] ]
                 print( f"bill_amt_today {n} for {day_str} has amt={amt}" )
-                add_annotation(finance, day, total-amt, amt, f"Pay {n}" )
+                add_annotation(finance, day, total-amt, -amt, f"Pay {n}" )
         # bills are desc order so if the bill is before the day we are after then stop looking
         if b['bill_date'] < day_str:
             return amt
diff --git a/templates/index.html b/templates/index.html
index 88828f7..6c5cae6 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -187,10 +187,10 @@
     </form>
 
     <div id="tab-graph" class="tab-pane">
-      <div class="row mt-4 highcharts-dark" id="container" style="width:100%; height:800px;"></div>
+      <div class="row mt-4 highcharts-dark" id="graph" style="width:100%; height:800px;"></div>
     </div>
     <div id="tab-compgraph" class="tab-pane">
-      <div class="row mt-4 highcharts-dark" id="container-comp" style="width:100%; height:800px;"></div>
+      <div class="row mt-4 highcharts-dark" id="graph-comp" style="width:100%; height:800px;"></div>
     </div>
  </div>
     <script type="text/javascript">
@@ -272,8 +272,8 @@
             });
 
             const annotations = [];
-            // the al, x, offset are used to make the alternate annotations be on slightly different vertical offsets (size is based on $'s)
-            // al alternates every 2 annotations left / right (so 2 left, then 2 right), x is just used to also move the label more left/right to get the connecting line
+            // offset is used to make the next annotation be on slightly different vertical offsets (size is based on $'s)
+            // HACK: start at 13, later we adjust in steps of 50s allowing 4 steps, then we go back to top
             var offset=13
             // Add annotations for changes greater than 5000
             {% for a in finance['annotations'] %}
@@ -287,16 +287,24 @@
                             yAxis: 0
                         },
                         x: -70,
-                        y: offset,
+                        {% if '-$' in a['label'] %}
+                            y: offset,
+                        {% else %}
+                            y: -20,
+                        {% endif %}
                         text: '{{a['label']}}'
                     }], labelOptions: { allowOverlap: true }
                 });
-                offset = ({{loop.index}} * 50 % 200) +50
+                {% if a['y'] > 200000 %}
+                    offset = ({{loop.index}} * 50 % 200) +50
+                {% else %}
+                    offset = -100
+                {% endif %}
             {% endfor %}
             document.keep = annotations
 
             // Highcharts configuration
-            Highcharts.chart('container', {
+            Highcharts.chart('graph', {
                 chart: { type: 'line' },
                 colors: [ 'orange' ],
                 title: { text: 'Savings Over Time' },
@@ -306,20 +314,20 @@
                     plotBands: plotBands // Alternating background for years 
                 },
                 yAxis: { title: { text: 'Amount ($)' } },
-                tooltip: { 
-                            pointFormatter: function () 
-                            { 
-                                if( this.series.symbol == 'circle' ) { s='\u25CF' } else { s='\u2B25' }
-                                return '<span style="color:' + this.point.color + '">' + s + '</span> <b>' + this.point.y + ':</b> ' + this.series.name + '<br>'
-                            }, shared:true 
-                        },
+                tooltip: {
+                    pointFormatter: function () 
+                    {
+                        if( this.series.symbol == 'circle' ) { s='\u25CF' } else { s='\u2B25' }
+                        return '<span style="color:' + this.point.color + '">' + s + '</span> <b>' + this.point.y + ':</b> ' + this.series.name + '<br>'
+                    }, shared:true 
+                },
                 annotations: annotations, // Add annotations
                 series: [ { name: "Savings", data: chartData, marker: { radius: 2 } } ]
             });
 
             {% if COMP %}
             // Highcharts configuration
-            Highcharts.chart('container-comp', {
+            Highcharts.chart('graph-comp', {
                 chart: { type: 'line' },
                 colors: [
                     'orange', // Custom color 1
@@ -332,13 +340,13 @@
                     plotBands: plotBands // Alternating background for years 
                 },
                 yAxis: { title: { text: 'Amount ($)' } },
-                tooltip: { 
-                            pointFormatter: function () 
-                            { 
-                                if( this.series.symbol == 'circle' ) { s='\u25CF' } else { s='\u2B25' }
-                                return '<span style="color:' + this.point.color + '">' + s + '</span> <b>' + this.point.y + ':</b> ' + this.series.name + '<br>'
-                            }, shared:true 
-                        },
+                tooltip: {
+                    pointFormatter: function () 
+                    {
+                        if( this.series.symbol == 'circle' ) { s='\u25CF' } else { s='\u2B25' }
+                        return '<span style="color:' + this.point.color + '">' + s + '</span> <b>' + this.point.y + ':</b> ' + this.series.name + '<br>'
+                    }, shared:true 
+                },
                 series: [
                     { name: "Savings", data: chartData, marker: { radius: 2 } }
                     ,{ name: "{{COMP['vars']['name']}}", data: compChartData, marker: { radius: 2 } }