From 28bf18308299d33dd4f4da84b7c52e49dcdcfe75 Mon Sep 17 00:00:00 2001
From: Gwenhael Le Moine <gwenhael.le.moine@gmail.com>
Date: Thu, 20 May 2021 23:07:14 +0200
Subject: [PATCH] use plotly.js

---
 public/ploty.html | 194 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 194 insertions(+)
 create mode 100644 public/ploty.html
diff --git a/public/ploty.html b/public/ploty.html
new file mode 100644
index 0000000..44cc87f
--- /dev/null
+++ b/public/ploty.html
@@ -0,0 +1,194 @@
+<html>
+    <head>
+        <meta charset="UTF-8">
+
+        <!-- Plotly.js -->
+        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+        <script>
+         const API = {
+             fetch: async ( endpoint, params = {} ) => {
+                 let url = new URL( endpoint, `${location.protocol}//${location.host}` );
+                 url.search = new URLSearchParams( params );
+
+                 const response = await fetch( url );
+
+                 return await response.json();
+             },
+
+             balance: ( period, categories, depth ) => API.fetch( "/api/ledger/balance", { period: period, categories: categories, depth: depth } ),
+             register: ( period, categories ) => API.fetch( "/api/ledger/register", { period: period, categories: categories } ),
+             graph_values: ( period, categories, granularity ) => API.fetch( "/api/ledger/graph_values", { period: period, categories: categories, granularity: granularity } ),
+             accounts: () => API.fetch( "/api/ledger/accounts" )
+         }
+
+         const Utils = {
+             text_to_color: text => {
+                 let hash = 0
+                 for (let i = 0; i < text.length; i++)
+                     hash = (((hash << 5) - hash) + text.charCodeAt(i)) | 0;
+                 hash = Math.abs( hash );
+
+                 let shash = hash.toString(16).substr(0, 6).padEnd( 6, '0' );
+
+                 return `#${shash}`;
+             },
+             readable_date: date => {
+                 const months = { 0: 'Janvier', 1: 'Février', 2: 'Mars', 3: 'Avril', 4: 'Mai', 5: 'Juin', 6: 'Juillet', 7: 'Août', 8: 'Septembre', 9: 'Octobre', 10: 'Novembre', 11: 'Décembre' };
+
+                 return `${months[ date.getMonth() ]} ${date.getFullYear()}`;
+             }
+         };
+
+         const UI = {
+             /* https://medium.com/@heyoka/scratch-made-svg-donut-pie-charts-in-html5-2c587e935d72 */
+             donut: ( element, dataset ) => {
+                 const thickness = 9;
+                 let filed_percent = 0;
+                 const data_to_donut_segment = ( data ) => {
+                     if ( data.amount > 0 ) {
+                         const stroke_dashoffset = ( percent ) => {
+                             let offset = 100 - filed_percent;
+
+                             return offset > 100 ? offset - 100 : offset;
+                         };
+
+                         const donut_segment = `<circle class="donut-segment ${data.account.split(':').join(' ')}" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="${data.color}" stroke-width="${thickness}" stroke-dasharray="${data.percent} ${100 - data.percent}" stroke-dashoffset="${stroke_dashoffset( data.percent )}"><title>${data.tooltip}</title></circle>`;
+                         filed_percent += data.percent;
+
+                         return donut_segment;
+                     } else {
+                         return '';
+                     }
+                 };
+
+                 element.innerHTML = `<svg width="100%" height="100%" viewBox="0 0 42 42" class="donut">
+                     <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
+                     <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="${thickness}"></circle>
+
+                     ${dataset.map( line => data_to_donut_segment( line ) ).join("")}
+                 </svg>`;
+             }
+         };
+
+         let selected_accounts = [];
+         let current_period;
+
+         const Controls = {
+             main_graph: {
+                 init: () => Controls.main_graph.set( selected_accounts ),
+                 set: async accounts => {
+                     console.log(accounts)
+                     /* 1. get graph_values for accounts */
+                     let values = await API.graph_values( "", accounts.join(" "), "monthly" );
+
+                     /* 2. forEach account build a {
+                        x: ["2020-01", "2020-02", "2020-03", "2020-04"],
+                        y: [1, 4, 9, 16],
+                        name: 'Account1',
+                        type: 'bar'
+                        } */
+                     let graph_accounts = Object.keys(values).map( act => {
+                         return {
+                             name: act,
+                             type: "bar",
+                             x: values[ act ].map( reg => reg.date),
+                             y: values[ act ].map( reg => reg.amount)
+                         };
+                     });
+
+                     var layout = {
+                         xaxis: {title: 'Dates'},
+                         yaxis: {title: 'Amount'},
+                         barmode: 'relative',
+                         title: 'Relative Barmode'
+                     };
+
+                     Plotly.newPlot('mainGraph', graph_accounts, layout);
+                 }
+             },
+             period: {
+                 init: () => Controls.period.set( new Date() ),
+                 set: period => {
+                     current_period = period;
+
+                     document.querySelector( "#period #display" ).innerHTML = Utils.readable_date( current_period );
+
+                     monthly( current_period, selected_accounts );
+                 },
+                 get: () => current_period,
+                 prev: () => {
+                     current_period.setMonth( current_period.getMonth() - 1 );
+                     Controls.period.set( current_period );
+                 },
+                 next: () => {
+                     current_period.setMonth( current_period.getMonth() + 1 );
+                     Controls.period.set( current_period );
+                 },
+             },
+             accounts: {
+                 init: async () => {
+                     let account_to_option = ( account, selected ) => `<option value="${account.join(':')}" ${selected ? "selected" : ""}>${account.join(':')}</option>`;
+                     let accounts = await API.accounts();
+                     let select = document.querySelector("select#accounts");
+                     select.innerHTML = '';
+
+                     for ( let i = 1 ; i < accounts.reduce( (memo, a) => a.length > memo ? a.length : memo, 0 ) ; i++  ) {
+                         select.innerHTML += `<optgroup label="Depth: ${i}">${accounts.filter( a => a.length == i ).map( account => account_to_option( account, i == 1 )).join('')}</optgroup>`;
+                     }
+
+                     let ui_accounts = document.getElementById("accounts")
+                     ui_accounts.addEventListener( 'change',
+                                                   event => Controls.accounts.onchange( event.target ) );
+                     Controls.accounts.onchange( ui_accounts );
+                 },
+                 onchange: element => {
+                     selected_accounts = Array.from( element.options ).filter( o => o.selected ).map( o => o.value );
+
+                     Controls.main_graph.set( selected_accounts );
+                     monthly( current_period, selected_accounts );
+                 }
+             }
+         };
+
+         const monthly = async ( period, categories ) => {
+             let balance = await API.balance( period.toISOString().split("T")[0].slice( 0, -3 ), categories.join(" "), 999 )
+             const total = balance.reduce( (memo, line) => memo + line.amount, 0 );
+
+             UI.donut( document.querySelector( `#month #donut` ),
+                       balance.sort( (a, b) => b.amount - a.amount )
+                              .map( line => {
+                                  line.color = Utils.text_to_color( line.account );
+                                  line.percent = ( line.amount / total ) * 100;
+                                  line.tooltip = `${line.account} : ${line.amount} €`;
+
+                                  return line;
+                              } ) );
+         };
+        </script>
+    </head>
+    <body>
+        <div id="controls">
+            <div id="period">
+                <button onclick="Controls.period.prev()">-</button>
+                <button onclick="Controls.period.next()">+</button>
+                <h3 id="display"></h3>
+            </div>
+        </div>
+
+        <select id="accounts" name="accounts" multiple size="20"></select>
+
+        <div id="mainGraph"></div>
+
+        <div id="month">
+            <div id="donut" style="height: 256; width: 256;"></div>
+        </div>
+
+        <script>
+         (async () => {
+             await Controls.accounts.init();
+             Controls.main_graph.init();
+             Controls.period.init();
+         })();
+        </script>
+    </body>
+</html>
