From e104dd82701bae90b4014b8fdb50c1d6512c5acc Mon Sep 17 00:00:00 2001 From: Damien De Paoli Date: Sun, 18 Jan 2026 22:23:04 +1100 Subject: [PATCH] Applying several hacks to draw labels better -- still not close to great, but bearable now. First we consider 0 amts as non-negative for annotations so they go up not down on the graph :) Second, I am applying a rough approach of knowing where the last label was drawn and draw below that, only do this for negative amts, and even then the difference between y-coords in the y-axis scale and pixels for offsets of labels, just are too annoying --- calc.py | 2 +- templates/index.html | 52 +++++++++++++++++++++++++++++++------------- 2 files changed, 38 insertions(+), 16 deletions(-) diff --git a/calc.py b/calc.py index b9e801a..6c67f4c 100644 --- a/calc.py +++ b/calc.py @@ -34,7 +34,7 @@ def bill_amount_today(finance, day, bill_data, bt_id_name, total ): def add_annotation(finance, dt, total, delta, text): tm = dt.timestamp() * 1000 - if delta > 0: + if delta >= 0: text += f": ${int(abs(delta))}" else: text += f": -${int(abs(delta))}" diff --git a/templates/index.html b/templates/index.html index 763d9b8..2da3aad 100644 --- a/templates/index.html +++ b/templates/index.html @@ -17,7 +17,7 @@ @@ -302,11 +302,42 @@ }); const annotations = []; - // 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 + // this annotation stuff is painful, its in y-coords for the point + // (based on graphs y-axis, but then needs an offset in absolute pixels) so this two coord systems makes it hard to keep the labels going, there + // are a few hacks below that probably will break if the data changes too much + var last_y = {{finance['annotations'][0]['y']}} + var how_many_up = 0 + var how_many_down = 0 + var offset_y = 0 + var offset_x = 0 + // Add annotations for changes greater than 5000 {% for a in finance['annotations'] %} + {% if '-$' in a['label'] %} + how_many_down += 1 + offset_y = ({{a['y']}} - last_y)/650 + 25*how_many_down + offset_x = -60-10*how_many_down + if( how_many_down > 12 ) + how_many_down =0 +// console.log( "{{a['label']}} U:" + how_many_up + ", D: " + how_many_down + ", last_y=" + last_y + ", y={{a['y']}}, offset_y=" + offset_y + ", offset_x=" + offset_x ) + last_y = {{a['y']}} + {% else %} + how_many_up += 1 + offset_y = -25 + {% if a['y'] > 400000 %} + offset_x = -80 -30*(6-how_many_up) + console.log('do the hack') + {% else %} + offset_x = -50 -10*how_many_up + console.log('not hack') + {% endif %} + if( how_many_up > 3 ) + how_many_up=0 + {% endif %} + + {% if a['y'] < 210000 %} + offset_y -= 300 + {% endif %} annotations.push({ labels: [{ point: { @@ -316,20 +347,11 @@ xAxis: 0, yAxis: 0 }, - x: -70, - {% if '-$' in a['label'] %} - y: offset, - {% else %} - y: -20, - {% endif %} + x: offset_x, + y: offset_y, text: '{{a['label']}}' }], labelOptions: { allowOverlap: true } }); - {% if a['y'] > 200000 %} - offset = ({{loop.index}} * 50 % 200) +50 - {% else %} - offset = -100 - {% endif %} {% endfor %} document.keep = annotations