2021-05-20 23:07:14 +02:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
|
|
|
|
<!-- Plotly.js -->
|
|
|
|
|
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
|
|
|
|
|
<script>
|
2021-05-21 15:57:39 +02:00
|
|
|
let selected_accounts = [];
|
|
|
|
|
|
2021-05-20 23:07:14 +02:00
|
|
|
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 = {
|
|
|
|
|
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 Controls = {
|
2021-05-21 15:57:39 +02:00
|
|
|
accounts_list: {
|
|
|
|
|
ui_id: "accounts",
|
2021-05-20 23:07:14 +02:00
|
|
|
init: async () => {
|
|
|
|
|
let accounts = await API.accounts();
|
2021-05-21 15:57:39 +02:00
|
|
|
let ui_accounts = document.querySelector(`#${Controls.accounts_list.ui_id}`);
|
|
|
|
|
ui_accounts.innerHTML = '';
|
|
|
|
|
|
|
|
|
|
let account_to_option = ( account, selected ) => `<option value="${account.join(':')}" ${selected ? "selected" : ""}>${account.join(':')}</option>`;
|
2021-05-20 23:07:14 +02:00
|
|
|
|
|
|
|
|
for ( let i = 1 ; i < accounts.reduce( (memo, a) => a.length > memo ? a.length : memo, 0 ) ; i++ ) {
|
2021-05-21 15:57:39 +02:00
|
|
|
ui_accounts.innerHTML += `
|
|
|
|
|
<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>`;
|
2021-05-20 23:07:14 +02:00
|
|
|
}
|
|
|
|
|
|
2021-05-21 15:57:39 +02:00
|
|
|
ui_accounts.addEventListener( 'change', event => Controls.accounts_list.onchange( event.target ) );
|
|
|
|
|
Controls.accounts_list.onchange( ui_accounts );
|
2021-05-20 23:07:14 +02:00
|
|
|
},
|
|
|
|
|
onchange: element => {
|
|
|
|
|
selected_accounts = Array.from( element.options ).filter( o => o.selected ).map( o => o.value );
|
|
|
|
|
|
|
|
|
|
Controls.main_graph.set( selected_accounts );
|
|
|
|
|
}
|
2021-05-21 15:57:39 +02:00
|
|
|
},
|
|
|
|
|
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" );
|
2021-05-20 23:07:14 +02:00
|
|
|
|
2021-05-21 15:57:39 +02:00
|
|
|
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'
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
2021-05-20 23:07:14 +02:00
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
2021-05-21 15:57:39 +02:00
|
|
|
<select id="accounts" name="accounts" multiple size="20" style="float: left; width: 19%;"></select>
|
2021-05-20 23:07:14 +02:00
|
|
|
|
2021-05-21 15:57:39 +02:00
|
|
|
<div id="mainGraph" style="float: right; width: 79%;" ></div>
|
2021-05-20 23:07:14 +02:00
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
(async () => {
|
2021-05-21 15:57:39 +02:00
|
|
|
await Controls.accounts_list.init();
|
2021-05-20 23:07:14 +02:00
|
|
|
Controls.main_graph.init();
|
|
|
|
|
})();
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
