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

Created tabbed interface for the front page, update the TODO to match

Browse Source
This commit is contained in:
Damien De Paoli
2025-09-16 22:51:23 +10:00
parent b1614760a6
commit a75db565ee
2 changed files with 158 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
TODO
View File

@@ -1,14 +1,12 @@
UI: UI:
* rename Save to Create Comparison? (or similar) * do I want to save the front tab?
* create a tabbed lower interface, to give more room to graphs
* add a graph of no comparison and a potential 3rd with comparion (if chosen on first tab of data/numbers)
* 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?) * 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. * 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 - 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 - 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 when I finish, its datestamped until next time and it walks me through the manual update steps and when I finish its datestamped until next time
For bills: For bills:
* might need to be able to mark a specific bill as an outlier: * might need to be able to mark a specific bill as an outlier:

267
templates/index.html
View File

@@ -78,100 +78,121 @@
</div> </div>
{% endfor %} {% endfor %}
<h5 align="center" class="mt-4">Fortnighthly Savings data: <!-- create tabbed view for each bill type -->
{% if COMP %} <nav id="ft-nav" class="nav nav-tabs pt-3">
{# get comparison date so we can use it below in loop to know when to print it out #} <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>
{% set comp_yr=COMP['date'][:4] %} <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>
{% set comp_mon=COMP['date'][5:7] %} {% if COMP %}
{% set comp_day=COMP['date'][8:10 ] %} <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>
{% 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 }}:&nbsp;
{{ '$%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'] }}:&nbsp;
{{ '$%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 %} {% 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 %} {% endif %}
</div> </nav>
<div class="col-auto">
<div class="alert alert-warning"> <div class="tab-content">
<h6 class="alert-heading">SUMMARY/BUDGET</h6> <div id="tab-findata" class="tab-pane">
{% for label, value in BUDGET %} <h5 align="center" class="mt-4">Fortnighthly Savings data:
<div> {% if COMP %}
{{label}} {{value}} {# get comparison date so we can use it below in loop to know when to print it out #}
</div> {% 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 %} {% endfor %}
</div>
<div id="comp_col" class="col-auto"> {% set car_done=namespace( val=0 ) %}
<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> {% for date, dollars in savings %}
<button type="submit" class="disabled btn btn-info rounded-start" onClick="$('#vals_form').submit() disabled">Compare to:</button> {% set yr=date[:4] %}
<select class="form-select border border-info text-info" id="compare_to" name="compare_to" onchange="$('#vals_form').submit()"> {% set mon=date[5:7] %}
{% for el in finance['COMP_SETS'] %} {% set day=date[8:10 ] %}
<option value="{{el[0]}}">{{el[1]}}</option>
{% endfor %} {% set car_yr=key_dates['D_hyundai_owned'][:4] %}
</select> {% set car_mon=key_dates['D_hyundai_owned'][5:7] %}
</div> {% set car_day=key_dates['D_hyundai_owned'][8:10 ] %}
{% 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> {% 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 }}:&nbsp;
{{ '$%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'] }}:&nbsp;
{{ '$%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 %} {% 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> </div>
</form> </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"> <script type="text/javascript">
// make these global so we can also use them in the /save route (via modal) // make these global so we can also use them in the /save route (via modal)
const savingsData = JSON.parse('{{ savings | tojson }}'); const savingsData = JSON.parse('{{ savings | tojson }}');
@@ -209,6 +230,7 @@
}; };
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
$('#tab-but-findata').click()
// Parse the savings_data from Flask // Parse the savings_data from Flask
const chartData = savingsData.map(entry => [new Date(entry[0]).getTime(), parseFloat(entry[1])]); const chartData = savingsData.map(entry => [new Date(entry[0]).getTime(), parseFloat(entry[1])]);
{% if COMP %} {% if COMP %}
@@ -250,33 +272,54 @@
}); });
const annotations = []; 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 // 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 var offset=13
{% if not COMP %} // Add annotations for changes greater than 5000
// Add annotations for changes greater than 5000 {% for a in finance['annotations'] %}
{% for a in finance['annotations'] %} annotations.push({
annotations.push({ labels: [{
labels: [{ point: {
point: { x: {{a['x']}},
x: {{a['x']}}, y: {{a['y']}},
y: {{a['y']}}, crop: true,
crop: true, xAxis: 0,
xAxis: 0, yAxis: 0
yAxis: 0 },
}, x: -70,
x: -70, y: offset,
y: offset, text: '{{a['label']}}'
text: '{{a['label']}}' }], labelOptions: { allowOverlap: true }
}], labelOptions: { allowOverlap: true } });
}); offset = ({{loop.index}} * 50 % 200) +50
offset = ({{loop.index}} * 50 % 200) +50 {% endfor %}
{% endfor %} document.keep = annotations
document.keep = annotations
{% endif %}
// Highcharts configuration // Highcharts configuration
Highcharts.chart('container', { 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' }, chart: { type: 'line' },
colors: [ colors: [
'orange', // Custom color 1 '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>' return '<span style="color:' + this.point.color + '">' + s + '</span> <b>' + this.point.y + ':</b> ' + this.series.name + '<br>'
}, shared:true }, shared:true
}, },
annotations: annotations, // Add annotations
series: [ series: [
{ name: "Savings", data: chartData, marker: { radius: 2 } } { name: "Savings", data: chartData, marker: { radius: 2 } }
{% if COMP %}
,{ name: "{{COMP['vars']['name']}}", data: compChartData, marker: { radius: 2 } } ,{ name: "{{COMP['vars']['name']}}", data: compChartData, marker: { radius: 2 } }
{% endif %}
] ]
}); });
{% endif %}
}); });
</script> </script>
<div id="save_modal" class="modal modal-lg" tabindex="-1"> <div id="save_modal" class="modal modal-lg" tabindex="-1">