From fe4ac79498dcc488ea4437c028efb2cc19d79b17 Mon Sep 17 00:00:00 2001
From: Gwenhael Le Moine <gwenhael.le.moine@gmail.com>
Date: Sat, 22 May 2021 09:44:54 +0200
Subject: [PATCH] [WIP] accounts sliders

Signed-off-by: Gwenhael Le Moine <gwenhael.le.moine@gmail.com>
---
 public/ploty.html | 116 ++++++++++++++++++++++++++++++++++------------
 1 file changed, 86 insertions(+), 30 deletions(-)

diff --git a/public/ploty.html b/public/ploty.html
index fd452fa..e5f92ab 100644
--- a/public/ploty.html
+++ b/public/ploty.html
@@ -33,23 +33,27 @@
 
          const Controls = {
              accounts_list: {
-                 ui_id: "accounts",
-                 init: async () => {
+                 init: async ( ui_id ) => {
                      let accounts = await API.accounts();
-                     let ui_accounts = document.querySelector(`#${Controls.accounts_list.ui_id}`);
-                     ui_accounts.innerHTML = '';
+                     let ui_accounts = document.querySelector(`#${ui_id}`);
+                     let content = "<select name=\"accounts\" multiple size=\"20\">";
 
                      let account_to_option = ( account, selected ) => `<option value="${account.join(':')}" ${selected ? "selected" : ""}>${account.join(':')}</option>`;
 
                      for ( let i = 1 ; i < accounts.reduce( (memo, a) => a.length > memo ? a.length : memo, 0 ) ; i++  ) {
-                         ui_accounts.innerHTML += `
+                         content += `
 <optgroup label="Depth: ${i}">
   ${accounts.filter( a => a.length == i ).map( account => account_to_option( account, ((account.length == 1 && account[0] == "Assets") || (account.length == 2 && account[0] == "Expenses")))).join('')}
 </optgroup>`;
                      }
+                     content += "</select>";
 
-                     ui_accounts.addEventListener( 'change', event => Controls.accounts_list.onchange( event.target ) );
-                     Controls.accounts_list.onchange( ui_accounts );
+                     ui_accounts.innerHTML = content;
+
+                     let ui_accounts_select = document.querySelector(`#${ui_id} select`);
+
+                     ui_accounts_select.addEventListener( 'change', event => Controls.accounts_list.onchange( event.target ) );
+                     Controls.accounts_list.onchange( ui_accounts_select );
                  },
                  onchange: element => {
                      selected_accounts = Array.from( element.options ).filter( o => o.selected ).map( o => o.value );
@@ -57,28 +61,79 @@
                      Controls.main_graph.set( selected_accounts );
                  }
              },
-             main_graph: {
-                 ui_id: 'mainGraph',
-                 init: () => Controls.main_graph.set( selected_accounts ),
-                 set: async accounts => {
-                     /* 1. get graph_values for accounts */
-                     let values = await API.graph_values( "", accounts.join(" "), "monthly" );
 
-                     Plotly.newPlot( Controls.main_graph.ui_id,
-                                     Object.keys(values).map( act => {
-                                         return {
-                                             name: act,
-                                             type: "bar",
-                                             x: values[ act ].map( reg => Utils.readable_date( new Date( reg.date ) ) ),
-                                             y: values[ act ].map( reg => reg.amount)
-                                         };
-                                     }),
-                                     {
-                                         xaxis: {title: 'Dates'},
-                                         yaxis: {title: 'Montant'},
-                                         barmode: 'relative',
-                                         title: 'Relative Barmode'
+             accounts_sliders: {
+                 init: async ( ui_id ) => {
+                     let accounts = await API.accounts();
+                     let ui_accounts = document.querySelector(`#${ui_id}`);
+                     let content = "<select name=\"accounts\" multiple size=\"20\">";
+
+                     let accounts_depths = {};
+
+                     let onchange = () => {
+                         selected_accounts = Object.keys( accounts_depths )
+                                                   .filter( act => accounts_depths[act] > 0 )
+                                                   .map( act => accounts.filter( a => a[0] == act && a.length == accounts_depths[act] ) )
+                                                   .flat();
+
+                         Controls.main_graph.set( selected_accounts );
+                     };
+
+                     ui_accounts.innerHTML = accounts.filter( act => act.length == 1 ).map( act => {
+                         let max_depth = accounts.filter(a => a[0] == act[0]).map(a => a.length).sort().reverse()[0];
+                         let val = 0;
+                         if (act[0] == "Income")
+                             val = 1;
+                         else if (act[0] == "Expenses")
+                             val = 2;
+
+                         accounts_depths[ act[0] ] = val;
+
+                         return `<div style="float: left; width: 100%;"><label for="myRange-${act[0]}" style="float: left;"">${act}</label><input style="float: right;" type="range" min="0" max="${max_depth}" value="${val}" class="slider" name="myRange-${act[0]}" id="myRange-${act[0]}"></div>`;
+                     }).join('');
+
+                     Object.keys( accounts_depths ).forEach( act => {
+                         document.querySelector( `#myRange-${act}` )
+                                 .addEventListener( 'change', event => {
+                                     accounts_depths[act] = event.target.value;
+
+                                     onchange();
+                                 });
                      });
+
+                     onchange();
+                 }
+             },
+
+             main_graph: {
+                 init: ( ui_id ) => {
+                     let layout = {
+                         xaxis: {title: 'Dates'},
+                         yaxis: {title: 'Montant'},
+                         barmode: 'relative',
+                         title: 'Relative Barmode'
+                     };
+
+                     Controls.main_graph.set = async ( accounts ) => {
+                         console.log(accounts)
+                         if (accounts.length < 1)
+                             return;
+
+                         let values = await API.graph_values( "", accounts.map(a => a.join(':')).join(" "), "monthly" );
+
+                         Plotly.react( ui_id,
+                                       Object.keys(values)
+                                             .map( act => {
+                                                 let v = values[ act ].sort( (a, b) => b.date - a.date );
+                                                 return {
+                                                     name: act,
+                                                     type: "bar",
+                                                     x: v.map( reg => new Date( reg.date ) ), //Utils.readable_date( new Date( reg.date ) ) ),
+                                                     y: v.map( reg => reg.amount)
+                                                 };
+                                             } ),
+                                       layout );
+                     };
                  }
              },
          };
@@ -86,14 +141,15 @@
     </head>
     <body>
 
-        <select id="accounts" name="accounts" multiple size="20"  style="float: left; width: 19%;"></select>
+        <div id="accounts" style="float: left; width: 19%;"></div>
 
         <div id="mainGraph" style="float: right; width: 79%;" ></div>
 
         <script>
          (async () => {
-             await Controls.accounts_list.init();
-             Controls.main_graph.init();
+             Controls.main_graph.init( "mainGraph" );
+             // Controls.accounts_list.init( "accounts" );
+             Controls.accounts_sliders.init( "accounts" );
          })();
         </script>
     </body>