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
This commit is contained in:
2
calc.py
2
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))}"
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<style>
|
||||
.col-form-label { width:140px; }
|
||||
html { font-size: 75% !important; }
|
||||
@media (max-width: 2000px) { html { font-size: 70% !important; } }
|
||||
@media (max-width: 2000px) { html { font-size: 69% !important; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user