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

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

templates/index.html

@@ -78,6 +78,19 @@
         </div>
     {% endfor %}
 
+    <!-- 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 %}
+        <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 %}
+    </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 #}
@@ -156,7 +169,7 @@
                 </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="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'] %}
@@ -170,8 +183,16 @@
                 </div>
           </div>
         </div>
+    </div>
     </form>
+
+    <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,10 +272,9 @@
             });
 
             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({
@@ -273,10 +294,32 @@
                 offset = ({{loop.index}} * 50 % 200) +50
             {% endfor %}
             document.keep = annotations
-            {% endif %}
 
             // 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">