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

add donut

Browse source
This commit is contained in:
Gwenhael Le Moine 2019-11-21 11:23:20 +01:00
parent f5c541ae13
commit 2f6b3e193c
No known key found for this signature in database
GPG key ID: FDFE3669426707A7
1 changed files with 74 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

114
public/pure.html
View file

@ -1,55 +1,89 @@
<html> <html>
<head> <head>
<script> <script>
const fetch_from_API = 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();
};
const API = { const API = {
balance: async (period, categories, depth) => { balance: (period, categories, depth) => fetch_from_API( "/api/ledger/balance",
let url = new URL( "/api/ledger/balance", `${location.protocol}//${location.host}` ); { period: period,
url.search = new URLSearchParams( { period: period, categories: categories,
categories: categories, depth: depth } ),
depth: depth } );
const response = await fetch( url );
const myJson = await response.json(); //extract JSON from the http response
// do something with myJson
console.log(myJson);
},
register: async (period, categories) => { register: (period, categories) => fetch_from_API( "/api/ledger/register",
let url = new URL( "/api/ledger/register", `${location.protocol}//${location.host}` ); { period: period,
url.search = new URLSearchParams( { period: period, categories: categories } ),
categories: categories } );
const response = await fetch( url );
const myJson = await response.json(); //extract JSON from the http response
// do something with myJson
console.log(myJson);
},
graph_values: async (period, categories, granularity) => { graph_values: (period, categories, granularity) => fetch_from_API( "/api/ledger/graph_values",
let url = new URL( "/api/ledger/graph_values", `${location.protocol}//${location.host}` ); { period: period,
url.search = new URLSearchParams( { period: period, categories: categories,
categories: categories, granularity: granularity } ),
granularity: granularity } );
const response = await fetch( url );
const myJson = await response.json(); //extract JSON from the http response
// do something with myJson
console.log(myJson);
},
accounts: async () => {
let url = new URL( "/api/ledger/accounts", `${location.protocol}//${location.host}` );
const response = await fetch( url );
const myJson = await response.json(); //extract JSON from the http response
// do something with myJson
console.log(myJson);
},
accounts: () => fetch_from_API( "/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}`;
}
};
const UI = {
donut: ( element, dataset ) => {
let filed_percent = 0;
const data_to_donut_segment = ( data ) => {
const stroke_dashoffset = ( percent ) => {
let offset = ( 100 - filed_percent ) + 25;
return offset > 100 ? offset - 100 : offset;
};
const donut_segment = `<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="${data.color}" stroke-width="3" stroke-dasharray="${data.percent} ${100 - data.percent}" stroke-dashoffset="${stroke_dashoffset( data.percent )}"></circle>`;
filed_percent += data.percent;
return donut_segment;
};
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="3"></circle>
${dataset.map( line => data_to_donut_segment( line ) ).join("")}
</svg><pre>${JSON.stringify( dataset )}</pre>`;
}
};
</script> </script>
</head> </head>
<body> <body>
<script> <div id="donut"></div>
API.balance( "2019", ["Expenses", "Assets"].join(" "), 2 );
API.accounts(); <script>
const period = (new Date()).toISOString().split("T")[0].slice( 0, -3 );
API.balance( period, ["Expenses"].join(" "), 2 )
.then( balance => {
const total = balance.reduce( (memo, line) => memo + line.amount, 0 );
UI.donut( document.getElementById( "donut" ),
balance.map( line => {
line.color = Utils.text_to_color( line.account );
line.percent = ( line.amount / total ) * 100;
return line;
} ) );
} );
</script> </script>
</body> </body>
</html> </html>