ddp/finplan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Damien De Paoli
2026-01-18 22:23:04 +11:00
parent a46b8f895a
commit e104dd8270
2 changed files with 38 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
calc.py
View File

@@ -34,7 +34,7 @@ def bill_amount_today(finance, day, bill_data, bt_id_name, total ):
def add_annotation(finance, dt, total, delta, text): def add_annotation(finance, dt, total, delta, text):
tm = dt.timestamp() * 1000 tm = dt.timestamp() * 1000
if delta > 0: if delta >= 0:
text += f": ${int(abs(delta))}" text += f": ${int(abs(delta))}"
else: else:
text += f": -${int(abs(delta))}" text += f": -${int(abs(delta))}"

52
templates/index.html
View File

@@ -17,7 +17,7 @@
<style> <style>
.col-form-label { width:140px; } .col-form-label { width:140px; }
html { font-size: 75% !important; } html { font-size: 75% !important; }
@media (max-width: 2000px) { html { font-size: 70% !important; } } @media (max-width: 2000px) { html { font-size: 69% !important; } }
</style> </style>
</head> </head>
<body> <body>
@@ -302,11 +302,42 @@
}); });
const annotations = []; const annotations = [];
// offset is used to make the next annotation be on slightly different vertical offsets (size is based on $'s) // this annotation stuff is painful, its in y-coords for the point
// HACK: start at 13, later we adjust in steps of 50s allowing 4 steps, then we go back to top // (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
var offset=13 // 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 // Add annotations for changes greater than 5000
{% for a in finance['annotations'] %} {% 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({ annotations.push({
labels: [{ labels: [{
point: { point: {
@@ -316,20 +347,11 @@
xAxis: 0, xAxis: 0,
yAxis: 0 yAxis: 0
}, },
x: -70, x: offset_x,
{% if '-$' in a['label'] %} y: offset_y,
y: offset,
{% else %}
y: -20,
{% endif %}
text: '{{a['label']}}' text: '{{a['label']}}'
}], labelOptions: { allowOverlap: true } }], labelOptions: { allowOverlap: true }
}); });
{% if a['y'] > 200000 %}
offset = ({{loop.index}} * 50 % 200) +50
{% else %}
offset = -100
{% endif %}
{% endfor %} {% endfor %}
document.keep = annotations document.keep = annotations