Compare commits
3 Commits
1c112e6f6b
...
a75db565ee
| Author | SHA1 | Date | |
|---|---|---|---|
| a75db565ee | |||
| b1614760a6 | |||
| 670a63cfd7 |
13
TODO
13
TODO
@@ -1,11 +1,14 @@
|
||||
UI:
|
||||
* use key_dates to highlight when I quit, when we own car
|
||||
* do I want to save the front tab?
|
||||
|
||||
* have a comparison management capability - somehow, at least be able to delete csets (can I put an x inside the menu? OR, have a manage button and pop-up?)
|
||||
|
||||
* maybe a help/note/set of links somehow, to common things: e.g. macquarie int rate page, inflation source, etc.
|
||||
- also then could effectively take those "notes" out of db.py and incorporate, so that when I update stuff it gets done right
|
||||
- in fact, I *COULD* have a basic date check/workflow, e.g. its been more than X days since Y was updated, click here
|
||||
and it walks me through the manual update steps and when I finish its datestamped until next time
|
||||
|
||||
For bills:
|
||||
[DONE] * calc quit date based on finance data
|
||||
[DONE] * calc date of car lease end or buyout
|
||||
* use this to populate bill estimates, so this allows totals / year and simplifies calc.py
|
||||
|
||||
* might need to be able to mark a specific bill as an outlier:
|
||||
- so we ignore the data somehow (think Gas is messing with my bills)
|
||||
- and even electricity, water, etc. for when we were away in Europe but mostly gas/elec
|
||||
|
||||
@@ -78,100 +78,121 @@
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<h5 align="center" class="mt-4">Fortnighthly Savings data:
|
||||
{% if COMP %}
|
||||
{# get comparison date so we can use it below in loop to know when to print it out #}
|
||||
{% set comp_yr=COMP['date'][:4] %}
|
||||
{% set comp_mon=COMP['date'][5:7] %}
|
||||
{% set comp_day=COMP['date'][8:10 ] %}
|
||||
{% set comp_done=namespace( val=0 ) %}
|
||||
{% else %}
|
||||
{# we dont need to do a comparison, so consider it done before we begin #}
|
||||
{% set comp_done=namespace( val=1 ) %}
|
||||
{% endif %}
|
||||
</h5>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-auto"> <div class="pt-1 pb-1 mb-0 alert text-center bg-secondary text-light">2025</div>
|
||||
|
||||
{# inside started if below, we add blank lines to the start of the year so the dates line up #}
|
||||
{% for _ in range( 0, padding ) %}
|
||||
<br>
|
||||
{% endfor %}
|
||||
|
||||
{% set car_done=namespace( val=0 ) %}
|
||||
|
||||
{% for date, dollars in savings %}
|
||||
{% set yr=date[:4] %}
|
||||
{% set mon=date[5:7] %}
|
||||
{% set day=date[8:10 ] %}
|
||||
|
||||
{% set car_yr=key_dates['D_hyundai_owned'][:4] %}
|
||||
{% set car_mon=key_dates['D_hyundai_owned'][5:7] %}
|
||||
{% set car_day=key_dates['D_hyundai_owned'][8:10 ] %}
|
||||
|
||||
{% if yr|int > first_yr|int and mon == '01' and day|int <= 14 %}
|
||||
</div><div class="col-auto">
|
||||
<div class="pt-1 pb-1 mb-0 alert text-center bg-secondary text-light">{{yr}}</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if date == key_dates['D_quit_date'] %}
|
||||
<font class="text-warning">
|
||||
<label data-bs-toggle="tooltip" title="D quits">
|
||||
{% elif (yr == car_yr and mon == car_mon and day >= car_day and car_done.val == 0) %}
|
||||
{%set car_done.val=1 %}
|
||||
<font class="text-warning">
|
||||
<label data-bs-toggle="tooltip" title="We own car">
|
||||
{% else %}
|
||||
<font class="text-secondary">
|
||||
<label>
|
||||
{% endif %}
|
||||
{{ date }}:
|
||||
{{ '$%0.2f' % dollars|float }}<br>
|
||||
</label>
|
||||
</font><br>
|
||||
{% if comp_done.val == 0 and yr == comp_yr and mon == comp_mon and day|int >= comp_day|int %}
|
||||
<font class="text-info">
|
||||
{{ COMP['date'] }}:
|
||||
{{ '$%0.2f' % COMP['amount']|float }}<br>
|
||||
</font>
|
||||
{% set comp_done.val=1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if depletion_date %}
|
||||
<div class="alert alert-danger">Run out of $'s:<br>{{depletion_date}}</div>
|
||||
<!-- create tabbed view for each bill type -->
|
||||
<nav id="ft-nav" class="nav nav-tabs pt-3">
|
||||
<button class="nav-link" id="tab-but-findata" data-bs-toggle="tab" data-bs-target="#tab-findata" type="button" role="tab" aria-controls="tab1" aria-selected="true" >Fortnighthly Savings data</button>
|
||||
<button class="nav-link" id="tab-but-graph" data-bs-toggle="tab" data-bs-target="#tab-graph" type="button" role="tab" aria-controls="tab2" aria-selected="true" >Graph of savings over time</button>
|
||||
{% if COMP %}
|
||||
<button class="nav-link" id="tab-but-compgraph" data-bs-toggle="tab" data-bs-target="#tab-compgraph" type="button" role="tab" aria-controls="tab3" aria-selected="true" >Comparison graph</button>
|
||||
{% else %}
|
||||
<div class="alert alert-success">Super kicks in!!!</div>
|
||||
<button class="nav-link" id="tab-but-compgraph" data-bs-toggle="tab" data-bs-target="#tab-compgraph" type="button" role="tab" aria-controls="tab3" aria-selected="true" disabled>Comparison graph</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="alert alert-warning">
|
||||
<h6 class="alert-heading">SUMMARY/BUDGET</h6>
|
||||
{% for label, value in BUDGET %}
|
||||
<div>
|
||||
{{label}} {{value}}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="tab-content">
|
||||
<div id="tab-findata" class="tab-pane">
|
||||
<h5 align="center" class="mt-4">Fortnighthly Savings data:
|
||||
{% if COMP %}
|
||||
{# get comparison date so we can use it below in loop to know when to print it out #}
|
||||
{% set comp_yr=COMP['date'][:4] %}
|
||||
{% set comp_mon=COMP['date'][5:7] %}
|
||||
{% set comp_day=COMP['date'][8:10 ] %}
|
||||
{% set comp_done=namespace( val=0 ) %}
|
||||
{% else %}
|
||||
{# we dont need to do a comparison, so consider it done before we begin #}
|
||||
{% set comp_done=namespace( val=1 ) %}
|
||||
{% endif %}
|
||||
</h5>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-auto"> <div class="pt-1 pb-1 mb-0 alert text-center bg-secondary text-light">2025</div>
|
||||
|
||||
{# inside started if below, we add blank lines to the start of the year so the dates line up #}
|
||||
{% for _ in range( 0, padding ) %}
|
||||
<br>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div id="comp_col" class="col-auto">
|
||||
<div class="input-group">
|
||||
<button type="button" class="btn btn-info me-2 rounded" data-bs-toggle="modal" data-bs-target="#save_modal">Save</button>
|
||||
<button type="submit" class="disabled btn btn-info rounded-start" onClick="$('#vals_form').submit() disabled">Compare to:</button>
|
||||
<select class="form-select border border-info text-info" id="compare_to" name="compare_to" onchange="$('#vals_form').submit()">
|
||||
{% for el in finance['COMP_SETS'] %}
|
||||
<option value="{{el[0]}}">{{el[1]}}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
{% if COMP %}
|
||||
<div style="display:none" id="comp_alert" class="alert alert-info mt-2">Note: {{ '$%0.2f' % COMP['amount']|float }} is the final value of the compared to data (with a buffer of: {{ '$%0.2f' % COMP['buffer']|float }}). Hover over blue labels above to see what compared to values differed</div>
|
||||
|
||||
{% set car_done=namespace( val=0 ) %}
|
||||
|
||||
{% for date, dollars in savings %}
|
||||
{% set yr=date[:4] %}
|
||||
{% set mon=date[5:7] %}
|
||||
{% set day=date[8:10 ] %}
|
||||
|
||||
{% set car_yr=key_dates['D_hyundai_owned'][:4] %}
|
||||
{% set car_mon=key_dates['D_hyundai_owned'][5:7] %}
|
||||
{% set car_day=key_dates['D_hyundai_owned'][8:10 ] %}
|
||||
|
||||
{% if yr|int > first_yr|int and mon == '01' and day|int <= 14 %}
|
||||
</div><div class="col-auto">
|
||||
<div class="pt-1 pb-1 mb-0 alert text-center bg-secondary text-light">{{yr}}</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if date == key_dates['D_quit_date'] %}
|
||||
<font class="text-warning">
|
||||
<label data-bs-toggle="tooltip" title="D quits">
|
||||
{% elif (yr == car_yr and mon == car_mon and day >= car_day and car_done.val == 0) %}
|
||||
{%set car_done.val=1 %}
|
||||
<font class="text-warning">
|
||||
<label data-bs-toggle="tooltip" title="We own car">
|
||||
{% else %}
|
||||
<font class="text-secondary">
|
||||
<label>
|
||||
{% endif %}
|
||||
{{ date }}:
|
||||
{{ '$%0.2f' % dollars|float }}<br>
|
||||
</label>
|
||||
</font><br>
|
||||
{% if comp_done.val == 0 and yr == comp_yr and mon == comp_mon and day|int >= comp_day|int %}
|
||||
<font class="text-info">
|
||||
{{ COMP['date'] }}:
|
||||
{{ '$%0.2f' % COMP['amount']|float }}<br>
|
||||
</font>
|
||||
{% set comp_done.val=1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if depletion_date %}
|
||||
<div class="alert alert-danger">Run out of $'s:<br>{{depletion_date}}</div>
|
||||
{% else %}
|
||||
<div class="alert alert-success">Super kicks in!!!</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="alert alert-warning">
|
||||
<h6 class="alert-heading">SUMMARY/BUDGET</h6>
|
||||
{% for label, value in BUDGET %}
|
||||
<div>
|
||||
{{label}} {{value}}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div id="comp_col" class="col-auto">
|
||||
<div class="input-group">
|
||||
<button type="button" class="btn btn-info me-2 rounded" data-bs-toggle="modal" data-bs-target="#save_modal">Save Comparison set</button>
|
||||
<button type="submit" class="disabled btn btn-info rounded-start" onClick="$('#vals_form').submit() disabled">Compare to:</button>
|
||||
<select class="form-select border border-info text-info" id="compare_to" name="compare_to" onchange="$('#vals_form').submit()">
|
||||
{% for el in finance['COMP_SETS'] %}
|
||||
<option value="{{el[0]}}">{{el[1]}}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
{% if COMP %}
|
||||
<div style="display:none" id="comp_alert" class="alert alert-info mt-2">Note: {{ '$%0.2f' % COMP['amount']|float }} is the final value of the compared to data (with a buffer of: {{ '$%0.2f' % COMP['buffer']|float }}). Hover over blue labels above to see what compared to values differed</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="row mt-4 highcharts-dark" id="container" style="width:100%; height:800px;"></div>
|
||||
|
||||
<div id="tab-graph" class="tab-pane">
|
||||
<div class="row mt-4 highcharts-dark" id="container" 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>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
// make these global so we can also use them in the /save route (via modal)
|
||||
const savingsData = JSON.parse('{{ savings | tojson }}');
|
||||
@@ -209,6 +230,7 @@
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
$('#tab-but-findata').click()
|
||||
// Parse the savings_data from Flask
|
||||
const chartData = savingsData.map(entry => [new Date(entry[0]).getTime(), parseFloat(entry[1])]);
|
||||
{% if COMP %}
|
||||
@@ -250,33 +272,54 @@
|
||||
});
|
||||
|
||||
const annotations = [];
|
||||
// the al, x, offset are used to make the altenrate annotations be on slightly different vertical offsets (size is based on $'s)
|
||||
// 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
|
||||
var offset=13
|
||||
{% if not COMP %}
|
||||
// Add annotations for changes greater than 5000
|
||||
{% for a in finance['annotations'] %}
|
||||
annotations.push({
|
||||
labels: [{
|
||||
point: {
|
||||
x: {{a['x']}},
|
||||
y: {{a['y']}},
|
||||
crop: true,
|
||||
xAxis: 0,
|
||||
yAxis: 0
|
||||
},
|
||||
x: -70,
|
||||
y: offset,
|
||||
text: '{{a['label']}}'
|
||||
}], labelOptions: { allowOverlap: true }
|
||||
});
|
||||
offset = ({{loop.index}} * 50 % 200) +50
|
||||
{% endfor %}
|
||||
document.keep = annotations
|
||||
{% endif %}
|
||||
// Add annotations for changes greater than 5000
|
||||
{% for a in finance['annotations'] %}
|
||||
annotations.push({
|
||||
labels: [{
|
||||
point: {
|
||||
x: {{a['x']}},
|
||||
y: {{a['y']}},
|
||||
crop: true,
|
||||
xAxis: 0,
|
||||
yAxis: 0
|
||||
},
|
||||
x: -70,
|
||||
y: offset,
|
||||
text: '{{a['label']}}'
|
||||
}], labelOptions: { allowOverlap: true }
|
||||
});
|
||||
offset = ({{loop.index}} * 50 % 200) +50
|
||||
{% endfor %}
|
||||
document.keep = annotations
|
||||
|
||||
// Highcharts configuration
|
||||
Highcharts.chart('container', {
|
||||
chart: { type: 'line' },
|
||||
colors: [ 'orange' ],
|
||||
title: { text: 'Savings Over Time' },
|
||||
xAxis: {
|
||||
type: 'datetime',
|
||||
title: { text: 'Date' },
|
||||
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
|
||||
},
|
||||
annotations: annotations, // Add annotations
|
||||
series: [ { name: "Savings", data: chartData, marker: { radius: 2 } } ]
|
||||
});
|
||||
|
||||
{% if COMP %}
|
||||
// Highcharts configuration
|
||||
Highcharts.chart('container-comp', {
|
||||
chart: { type: 'line' },
|
||||
colors: [
|
||||
'orange', // Custom color 1
|
||||
@@ -296,14 +339,12 @@
|
||||
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 %}
|
||||
,{ name: "{{COMP['vars']['name']}}", data: compChartData, marker: { radius: 2 } }
|
||||
{% endif %}
|
||||
]
|
||||
});
|
||||
{% endif %}
|
||||
});
|
||||
</script>
|
||||
<div id="save_modal" class="modal modal-lg" tabindex="-1">
|
||||
|
||||
Reference in New Issue
Block a user