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

granularity

Browse source
This commit is contained in:
Gwenhael Le Moine 2019-11-21 15:37:07 +01:00
parent cff645a9cf
commit 5151b2fc79
No known key found for this signature in database
GPG key ID: FDFE3669426707A7
1 changed files with 56 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
public/pure.html
View file

@ -12,20 +12,9 @@
}; };
const API = { const API = {
balance: (period, categories, depth) => fetch_from_API( "/api/ledger/balance", balance: (period, categories, depth) => fetch_from_API( "/api/ledger/balance", { period: period, categories: categories, depth: depth } ),
{ period: period, register: (period, categories) => fetch_from_API( "/api/ledger/register", { period: period, categories: categories } ),
categories: categories, graph_values: (period, categories, granularity) => fetch_from_API( "/api/ledger/graph_values", { period: period, categories: categories, granularity: granularity } ),
depth: depth } ),
register: (period, categories) => fetch_from_API( "/api/ledger/register",
{ period: period,
categories: categories } ),
graph_values: (period, categories, granularity) => fetch_from_API( "/api/ledger/graph_values",
{ period: period,
categories: categories,
granularity: granularity } ),
accounts: () => fetch_from_API( "/api/ledger/accounts" ) accounts: () => fetch_from_API( "/api/ledger/accounts" )
} }
@ -68,35 +57,60 @@
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="${thickness}"></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("")} ${dataset.map( line => data_to_donut_segment( line ) ).join("")}
</svg><pre>${JSON.stringify( dataset )}</pre>`; </svg>`;
} }
}; };
let current_period; let current_period;
const Period = { let granularity = 3;
set: ( period ) => {
current_period = period;
document.querySelector( "#period #display" ).innerHTML = current_period.toISOString();
monthly( current_period.toISOString().split("T")[0].slice( 0, -3 ), "#month" ); const Controls = {
}, period: {
get: () => current_period, set: ( period ) => {
prev: () => { current_period = period;
current_period.setMonth( current_period.getMonth() - 1 ); const months = { 0: 'Janvier',
Period.set( current_period ); 1: 'Février',
}, 2: 'Mars',
next: () => { 3: 'Avril',
current_period.setMonth( current_period.getMonth() + 1 ); 4: 'Mai',
Period.set( current_period ); 5: 'Juin',
6: 'Juillet',
7: 'Août',
8: 'Septembre',
9: 'Octobre',
10: 'Novembre',
11: 'Décembre' };
document.querySelector( "#period #display" ).innerHTML = `${months[ current_period.getMonth() ]} ${current_period.getFullYear()}`;
monthly();
},
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 );
},
}, },
granularity: {
set: ( value ) => {
if ( !isNaN( parseInt( value ) ) ) {
granularity = parseInt( value );
monthly();
}
}
}
}; };
const monthly = ( month, element_selector ) => { const monthly = () => {
API.balance( month, ["Expenses"].join(" "), 3 ) API.balance( current_period.toISOString().split("T")[0].slice( 0, -3 ), ["Expenses"].join(" "), granularity )
.then( balance => { .then( balance => {
const total = balance.reduce( (memo, line) => memo + line.amount, 0 ); const total = balance.reduce( (memo, line) => memo + line.amount, 0 );
UI.donut( document.querySelector( `${element_selector} #donut` ), UI.donut( document.querySelector( `#month #donut` ),
balance.sort( (a, b) => b.amount - a.amount ) balance.sort( (a, b) => b.amount - a.amount )
.map( line => { .map( line => {
line.color = Utils.text_to_color( line.account ); line.color = Utils.text_to_color( line.account );
@ -110,17 +124,22 @@
</script> </script>
</head> </head>
<body> <body>
<div id="period"> <div id="controls">
<button onclick="Period.prev()">-</button> <div id="period">
<button onclick="Period.next()">+</button> <button onclick="Controls.period.prev()">-</button>
<h3 id="display"></h3> <button onclick="Controls.period.next()">+</button>
<h3 id="display"></h3>
</div>
<div id="granularity">
<input oninput="Controls.granularity.set( this.value );">
</div>
</div> </div>
<div id="month"> <div id="month">
<div id="donut" style="height: 256; width: 256;"></div> <div id="donut" style="height: 256; width: 256;"></div>
</div> </div>
<script> <script>
Period.set( new Date() ); Controls.period.set( new Date() );
</script> </script>
</body> </body>
</html> </html>