diff --git a/EXPORTS/finance_data_snapshot-31-01-2025.csv b/EXPORTS/finance_data_snapshot-31-01-2025.csv index 4009442..a6acd81 100644 --- a/EXPORTS/finance_data_snapshot-31-01-2025.csv +++ b/EXPORTS/finance_data_snapshot-31-01-2025.csv @@ -22,6 +22,6 @@ 2025-11-12,410660.56,2026-10-14,337111.91,2027-10-13,238202.3,2028-10-11,191045.16,2029-10-10,137624.31,2030-10-09,55704.53,,,,,,,Overseas_trip_date,2025-06-01 2025-11-26,406370.89,2026-10-28,322702.74,2027-10-27,234658.94,2028-10-25,187361.11,2029-10-24,133793.99,2030-10-23,51722.12,,,,,,,Mark_reno_date,2025-09-01 2025-12-10,381758.47,2026-11-11,319692.08,2027-11-10,232115.41,2028-11-08,184475.65,2029-11-07,130534.62,2030-11-06,47961.98,,,,,,,Sell_shares,6 - 2025-12-24,377458.1,2026-11-25,270448.27,2027-11-24,228560.53,2028-11-22,180779.63,2029-11-21,126691.85,2030-11-20,43966.63,,,,,, - ,,2026-12-09,268232.01,2027-12-08,225946.99,2028-12-06,177828.21,2029-12-05,123371.23,2030-12-04,40153.28,,,,,, + 2025-12-24,377458.1,2026-11-25,270448.27,2027-11-24,228560.53,2028-11-22,180779.63,2029-11-21,126691.85,2030-11-20,43966.63,,,,,,CBA,0 + ,,2026-12-09,268232.01,2027-12-08,225946.99,2028-12-06,177828.21,2029-12-05,123371.23,2030-12-04,40153.28,,,,,,TLS,0 ,,2026-12-23,264801.78,2027-12-22,222380.56,2028-12-20,174120.17,2029-12-19,119515.97,2030-12-18,36144.95,,,,,, diff --git a/README b/README index 347e081..515b94b 100644 --- a/README +++ b/README @@ -1,12 +1,4 @@ TODO: - * compare feature - [done] -- decided this is best supported by removing export to CSV function, and instead offering export to comparisons database (with a user-defined name) - [done] -- then maintain DB of "sets" of comparisons - [done] -- then can allow graph compare of current data to 1 (or more) exported comparions set - -- and show differences in graph including visually of any var changes in legend / or with tooltips - - specifically legend is not working - - tooltip (for legend?) not working - - highlighting differences in vars at top (maybe via colour of label? and a tooltip?) * make save button create a comparison set to use (also consider how to clean / re-create db initial values from code -- easily could just drop/recreate per table, and only drop finance, not csets) * then delete export button diff --git a/db.py b/db.py index 1892ce1..51ec6dd 100644 --- a/db.py +++ b/db.py @@ -62,7 +62,9 @@ def init_db(): CBA_price REAL, Overseas_trip_date STRING, Mark_reno_date STRING, - Sell_shares INTEGER + Sell_shares INTEGER, + CBA INTEGER, + TLS INTEGER )''') cur.execute('''CREATE TABLE IF NOT EXISTS comparison_savings_data ( @@ -153,13 +155,13 @@ def insert_cset( data ): name, D_Salary, D_Num_fortnights_pay, School_Fees, Car_loan_via_pay, Car_loan, Car_balloon, Living_Expenses, Savings, Interest_Rate, Inflation, Mich_present, Overseas_trip, Mark_reno, D_leave_owed_in_days, D_TLS_shares, M_TLS_shares, D_CBA_shares, - TLS_price, CBA_price, Overseas_trip_date, Mark_reno_date, Sell_shares + TLS_price, CBA_price, Overseas_trip_date, Mark_reno_date, Sell_shares, CBA, TLS ) VALUES ( :name, :D_Salary, :D_Num_fortnights_pay, :School_Fees, :Car_loan_via_pay, :Car_loan, :Car_balloon, :Living_Expenses, :Savings, :Interest_Rate, :Inflation, :Mich_present, :Overseas_trip, :Mark_reno, :D_leave_owed_in_days, :D_TLS_shares, :M_TLS_shares, :D_CBA_shares, - :TLS_price, :CBA_price, :Overseas_trip_date, :Mark_reno_date, :Sell_shares + :TLS_price, :CBA_price, :Overseas_trip_date, :Mark_reno_date, :Sell_shares, :CBA, :TLS ) ''', data['vars']) cset_id = cur.lastrowid diff --git a/templates/index.html b/templates/index.html index 3a238e8..d7929c1 100644 --- a/templates/index.html +++ b/templates/index.html @@ -3,8 +3,10 @@ - + + Finance Form + @@ -21,34 +23,53 @@ {% for r in DISP %}
{% for el in r %} + {% if COMP and COMP['vars'][el.varname] != finance[el.varname] %} + {% set extra=" text-primary" %} + {% else %} + {% set extra="" %} + {% endif %}
- {% if el.display=="select" %} - - - {% elif el.display=="date" %} - - - - {% else %} - - {% if el.display== "readonly" %} - {% set bg="bg-light" %} - {% set bd="" %} + + + {% 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}} + + + {% 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}} + + {% if el.display== "readonly" %} + {% set bg="bg-light" %} + {% set bd="" %} + {% else %} + {% set bg="" %} + {% set bd="border-1 border-primary" %} + {% endif %} + {% endif %} - - {% endif %}
{% endfor %} @@ -99,7 +120,8 @@
Super kicks in!!!
{% endif %} {% if COMP %} -
Note: value in blue
above is value we
should have been
at when comparing
to saved values
+
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
+ {% endif %}
@@ -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('
'); - 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 `${legendName}`; } }, tooltip: { pointFormat: '{point.x:%Y-%m-%d}: {point.y:.2f}' }, 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 %} ] });