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

comparison now works as required

Browse Source
This commit is contained in:
Damien De Paoli
2025-02-13 21:51:39 +11:00
parent 14de3f1790
commit 1272d3a786
4 changed files with 66 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
templates/index.html
View File

@@ -3,8 +3,10 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Finance Form</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>
@@ -21,34 +23,53 @@
{% for r in DISP %}
<div class="row align-items-center">
{% for el in r %}
{% if COMP and COMP['vars'][el.varname] != finance[el.varname] %}
{% set extra=" text-primary" %}
{% else %}
{% set extra="" %}
{% endif %}
<div class="{{el.cl}}">
<div class="input-group">
{% if el.display=="select" %}
<label for="{{el.varname}}" class="col-form-label me-2 text-end float-end">{{el.label}}</label>
<select class="form-select border border-primary text-primary" id="{{el.varname}}" name="{{el.varname}}" style="width: 120px;" onchange="this.form.submit()">
<option value="0">Never</option>
{% for el in range( 1,7 ) %}
<option value="{{el}}">{{el}} years</option>
{% endfor %}
</select>
{% elif el.display=="date" %}
<label for="{{el.varname}}" class="col-form-label me-2 text-end float-end">{{el.label}}</label>
<input type="number" step="any" class="form-control text-end float-end border border-primary" onchange="this.form.submit()" style="max-width: 120px;"
id="{{el.varname}}" name="{{el.varname}}" value="{{ finance[el.varname] }}" {{el.display}}>
<input type="date" class="form-control text-end float-end border border-primary" id="{{el.datevarname}}" style="max-width: 150px;"
name="{{el.datevarname}}" value="{{ finance[el.datevarname] }}" onchange="this.form.submit()">
{% else %}
<label for="{{el.varname}}" class="col-form-label me-2 text-end float-end">{{el.label}}</label>
{% if el.display== "readonly" %}
{% set bg="bg-light" %}
{% set bd="" %}
<label for="{{el.varname}}"
{% if el.display=="select" %}
{% if COMP and COMP['vars'][el.varname] != finance[el.varname] %}
data-bs-toggle="tooltip" title="Comparison was: {{COMP['vars'][el.varname]}}"
{% endif %}
class="col-form-label me-2 text-end float-end {{extra}}">{{el.label}}
</label>
<select class="form-select border border-primary text-primary" id="{{el.varname}}" name="{{el.varname}}" style="width: 120px;"
onchange="this.form.submit()">
<option value="0">Never</option>
{% for el in range( 1,7 ) %}
<option value="{{el}}">{{el}} years</option>
{% endfor %}
</select>
{% elif el.display=="date" %}
{% if COMP and COMP['vars'][el.varname] != finance[el.varname] %}
data-bs-toggle="tooltip" title="Comparison was: {{COMP['vars'][el.varname]}}"
{% endif %}
class="col-form-label me-2 text-end float-end {{extra}}">{{el.label}}
</label>
<input type="number" step="any" class="form-control text-end float-end border border-primary" onchange="this.form.submit()" style="max-width: 120px;"
id="{{el.varname}}" name="{{el.varname}}" value="{{ finance[el.varname] }}" {{el.display}}>
<input type="date" class="form-control text-end float-end border border-primary" id="{{el.datevarname}}" style="max-width: 150px;"
name="{{el.datevarname}}" value="{{ finance[el.datevarname] }}" onchange="this.form.submit()">
{% else %}
{% set bg="" %}
{% set bd="border-1 border-primary" %}
{% if COMP and COMP['vars'][el.varname] != finance[el.varname] %}
data-bs-toggle="tooltip" title="Comparison was: {{COMP['vars'][el.varname]}}"
{% endif %}
class="col-form-label me-2 text-end float-end {{extra}}">{{el.label}}
</label>
{% if el.display== "readonly" %}
{% set bg="bg-light" %}
{% set bd="" %}
{% else %}
{% set bg="" %}
{% set bd="border-1 border-primary" %}
{% endif %}
<input type="number" step="any" class="{{bg}} form-control text-end float-end {{bd}}" onchange="this.form.submit()" style="max-width: 120px;"
id="{{el.varname}}" name="{{el.varname}}" value="{{ finance[el.varname] }}" {{el.display}}>
{% endif %}
<input type="number" step="any" class="{{bg}} form-control text-end float-end {{bd}}" onchange="this.form.submit()" style="max-width: 120px;"
id="{{el.varname}}" name="{{el.varname}}" value="{{ finance[el.varname] }}" {{el.display}}>
{% endif %}
</div>
</div>
{% endfor %}
@@ -99,7 +120,8 @@
<div class="alert alert-success">Super kicks in!!!</div>
{% endif %}
{% if COMP %}
<div class="alert alert-info">Note: value in blue<br>above is value we<br>should have been<br>at when comparing<br> to saved values</div>
<div style="width:168px" class="alert alert-info">Note: The blue $ figure above is the final value of compared to set. Hover over blue labels above to see what compared to value was</div>
{% endif %}
</div>
<div class="col-auto">
@@ -146,25 +168,26 @@
window.onload = function() {
$('#Sell_shares').val( {{finance['Sell_shares']}} )
$('#compare_to').val( {{finance['compare_to']}} )
};
var tooltipTriggerList = [].slice.call(document.querySelectorAll("[data-bs-toggle='tooltip']"))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) })
};
document.addEventListener('DOMContentLoaded', function () {
// Parse the savings_data from Flask
const savingsData = JSON.parse('{{ savings | tojson }}');
const chartData = savingsData.map(entry => [new Date(entry[0]).getTime(), parseFloat(entry[1])]);
{% if COMP %}
const compSavingsData = JSON.parse('{{ COMP['savings_data'] | tojson }}');
const compChartData = compSavingsData.map(entry => [new Date(entry[0]).getTime(), parseFloat(entry[1])]);
const compSavingsData = JSON.parse('{{ COMP['savings_data'] | tojson }}');
const compChartData = compSavingsData.map(entry => [new Date(entry[0]).getTime(), parseFloat(entry[1])]);
{% endif %}
// Get the legend name and vars for the tooltip
const legendName = 'Savings';
const vars = JSON.parse('{{ finance | tojson }}');
// Tooltip content from vars
const tooltipContent = Object.entries(vars).map(([key, value]) => `${key}: ${value}`).join('<br>');
console.log(tooltipContent)
// Calculate plot bands for each year with alternating background colors
const plotBands = [];
@@ -194,6 +217,8 @@
});
const annotations = [];
// the al, x, offset are used to make the altenrate 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
var al='left'
var x=-130
@@ -218,7 +243,7 @@
});
if( offset == 150 ) { offset=100 } else { offset=150 }
if( done == 2 ) {
if( al=='right' ) { console.log('change to left'); al='left'; x=-130 } else { console.log('change to right'); al='right'; x=130 }
if( al=='right' ) { al='left'; x=-130 } else { al='right'; x=130 }
done=0
}
done++
@@ -236,13 +261,12 @@
plotBands: plotBands // Alternating background for years
},
yAxis: { title: { text: 'Amount ($)' } },
legend: { labelFormatter: function () { return `<span title="${tooltipContent}">${legendName}</span>`; } },
tooltip: { pointFormat: '{point.x:%Y-%m-%d}: <b>{point.y:.2f}</b>' },
annotations: annotations, // Add annotations
series: [
{ name: legendName, data: chartData, marker: { radius: 2 } }
{ name: "Savings", data: chartData, marker: { radius: 2 } }
{% if COMP %}
,{ name: "TEST", data: compChartData, marker: { radius: 2 } }
,{ name: "{{COMP['vars']['name']}}", data: compChartData, marker: { radius: 2 } }
{% endif %}
]
});