Miroirs/credger
1
0
Fork 0
mirror of https://github.com/gwenhael-le-moine/credger.git synced 2024-12-26 09:58:36 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

[WIP] accounts sliders

Browse source 
Signed-off-by: Gwenhael Le Moine <gwenhael.le.moine@gmail.com>
This commit is contained in:
Gwenhael Le Moine 2021-05-22 09:44:54 +02:00
parent 9e1573ef57
commit fe4ac79498
No known key found for this signature in database
GPG key ID: FDFE3669426707A7
1 changed files with 86 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
public/ploty.html
View file

@ -33,23 +33,27 @@
const Controls = { const Controls = {
accounts_list: { accounts_list: {
ui_id: "accounts", init: async ( ui_id ) => {
init: async () => {
let accounts = await API.accounts(); let accounts = await API.accounts();
let ui_accounts = document.querySelector(`#${Controls.accounts_list.ui_id}`); let ui_accounts = document.querySelector(`#${ui_id}`);
ui_accounts.innerHTML = ''; let content = "<select name=\"accounts\" multiple size=\"20\">";
let account_to_option = ( account, selected ) => `<option value="${account.join(':')}" ${selected ? "selected" : ""}>${account.join(':')}</option>`; 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++ ) { 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}"> <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('')} ${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>`; </optgroup>`;
} }
content += "</select>";
ui_accounts.addEventListener( 'change', event => Controls.accounts_list.onchange( event.target ) ); ui_accounts.innerHTML = content;
Controls.accounts_list.onchange( ui_accounts );
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 => { onchange: element => {
selected_accounts = Array.from( element.options ).filter( o => o.selected ).map( o => o.value ); selected_accounts = Array.from( element.options ).filter( o => o.selected ).map( o => o.value );
@ -57,28 +61,79 @@
Controls.main_graph.set( selected_accounts ); 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, accounts_sliders: {
Object.keys(values).map( act => { init: async ( ui_id ) => {
return { let accounts = await API.accounts();
name: act, let ui_accounts = document.querySelector(`#${ui_id}`);
type: "bar", let content = "<select name=\"accounts\" multiple size=\"20\">";
x: values[ act ].map( reg => Utils.readable_date( new Date( reg.date ) ) ),
y: values[ act ].map( reg => reg.amount) let accounts_depths = {};
};
}), let onchange = () => {
{ selected_accounts = Object.keys( accounts_depths )
xaxis: {title: 'Dates'}, .filter( act => accounts_depths[act] > 0 )
yaxis: {title: 'Montant'}, .map( act => accounts.filter( a => a[0] == act && a.length == accounts_depths[act] ) )
barmode: 'relative', .flat();
title: 'Relative Barmode'
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> </head>
<body> <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> <div id="mainGraph" style="float: right; width: 79%;" ></div>
<script> <script>
(async () => { (async () => {
await Controls.accounts_list.init(); Controls.main_graph.init( "mainGraph" );
Controls.main_graph.init(); // Controls.accounts_list.init( "accounts" );
Controls.accounts_sliders.init( "accounts" );
})(); })();
</script> </script>
</body> </body>