added account summary chart
This commit is contained in:
sairaj mote
parent
813855faf2
commit
3459283f76
58
css/main.css
58
css/main.css
@ -636,12 +636,12 @@ details[open] > summary .icon {
|
||||
justify-content: center;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.8rem;
|
||||
background-color: var(--accent-color--light);
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
.activity-card__icon .icon {
|
||||
height: 1.3rem;
|
||||
width: 1.3rem;
|
||||
fill: var(--accent-color);
|
||||
fill: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.activity-card__title {
|
||||
font-size: 0.95rem;
|
||||
@ -728,8 +728,13 @@ details[open] > summary .icon {
|
||||
}
|
||||
|
||||
#user_section {
|
||||
display: grid;
|
||||
-ms-flex-line-pack: start;
|
||||
align-content: flex-start;
|
||||
gap: 2rem;
|
||||
overflow-y: auto;
|
||||
padding: 1.5rem;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
#user_section h4 {
|
||||
margin-bottom: 1rem;
|
||||
@ -739,11 +744,58 @@ details[open] > summary .icon {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding: 1.5rem;
|
||||
height: 16rem;
|
||||
height: 15rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
#chart_legend {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
font-size: 0.8rem;
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.legend::before {
|
||||
content: "";
|
||||
margin-right: 0.5rem;
|
||||
width: 1.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.legend:nth-of-type(1)::before {
|
||||
background-color: var(--green);
|
||||
}
|
||||
.legend:nth-of-type(2)::before {
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.balance-card {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -554,11 +554,11 @@ details {
|
||||
justify-content: center;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.8rem;
|
||||
background-color: var(--accent-color--light);
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
.icon{
|
||||
height: 1.3rem;
|
||||
width: 1.3rem;
|
||||
fill: var(--accent-color);
|
||||
fill: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
}
|
||||
&__title{
|
||||
@ -644,18 +644,56 @@ details {
|
||||
}
|
||||
}
|
||||
#user_section{
|
||||
display: grid;
|
||||
align-content: flex-start;
|
||||
gap: 2rem;
|
||||
overflow-y: auto;
|
||||
padding: 1.5rem;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
h4{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
#account_chart_container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 1.5rem;
|
||||
height: 16rem;
|
||||
height: 15rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
#chart_legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.8rem;
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
&::before {
|
||||
content: '';
|
||||
margin-right: 0.5rem;
|
||||
width: 1.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
&:nth-of-type(1){
|
||||
&::before{
|
||||
background-color: var(--green);
|
||||
}
|
||||
}
|
||||
&:nth-of-type(2){
|
||||
&::before{
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
}
|
||||
}
|
||||
.balance-card{
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
|
||||
108
index.html
108
index.html
@ -197,42 +197,62 @@
|
||||
</div>
|
||||
</section>
|
||||
<section id="user_section">
|
||||
<h4 class="flex align-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon button__icon--left" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Account summary
|
||||
<button class="button justify-right" onclick="refreshBalance()">
|
||||
Refresh
|
||||
</button>
|
||||
</h4>
|
||||
<div id="account_chart_container">
|
||||
<canvas id="account_summary_chart"></canvas>
|
||||
<div>
|
||||
<h4 class="flex align-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon button__icon--left" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z" />
|
||||
<path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z" />
|
||||
</svg>
|
||||
Account summary
|
||||
<button class="button justify-right" onclick="refreshBalance()">
|
||||
Refresh
|
||||
</button>
|
||||
</h4>
|
||||
<div id="account_chart_container">
|
||||
<canvas id="account_summary_chart"></canvas>
|
||||
<div id="chart_legend">
|
||||
<div class="legend">Deposit</div>
|
||||
<div class="legend">Loan</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balance-card">
|
||||
<div class="balance-card__icon">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><g><path d="M19.83,7.5l-2.27-2.27c0.07-0.42,0.18-0.81,0.32-1.15C17.96,3.9,18,3.71,18,3.5C18,2.67,17.33,2,16.5,2 c-1.64,0-3.09,0.79-4,2l-5,0C4.46,4,2,6.46,2,9.5S4.5,21,4.5,21l5.5,0v-2h2v2l5.5,0l1.68-5.59L22,14.47V7.5H19.83z M13,9H8V7h5V9z M16,11c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C17,10.55,16.55,11,16,11z"/></g></svg>
|
||||
</div>
|
||||
<div class="balance-card__token">Total deposit</div>
|
||||
<div id="total_deposit" class="balance-card__amount"></div>
|
||||
</div>
|
||||
<div class="balance-card">
|
||||
<div class="balance-card__icon">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.65,8.5H10.42a5.18,5.18,0,0,0-4,1.95L3.75,13.74a5,5,0,0,0-.68,5.31l0,0h0a5.07,5.07,0,0,0,4.5,2.73h7.88A5.08,5.08,0,0,0,20,19.05h0a5.39,5.39,0,0,0,.43-1.2,4.91,4.91,0,0,0-1-4.06l-2.66-3.34A5.17,5.17,0,0,0,12.65,8.5Z"/><path d="M9.71,6.59h3.94A2.94,2.94,0,0,0,16,5.39h0a1.13,1.13,0,0,0-.23-1.57,1.11,1.11,0,0,0-.95-.18h0a1.2,1.2,0,0,1-.92-.18l-.28-.21a3.64,3.64,0,0,0-4.22,0h0a1.18,1.18,0,0,1-1,.16L8.2,3.35a1.13,1.13,0,0,0-1.36.84A1.17,1.17,0,0,0,7,5H7A3.18,3.18,0,0,0,9.71,6.59Z"/></svg>
|
||||
</div>
|
||||
<div class="balance-card__token">Total loan</div>
|
||||
<div id="total_loan" class="balance-card__amount"></div>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="flex align-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon button__icon--left" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
My balance
|
||||
<button class="button justify-right" onclick="refreshBalance()">
|
||||
Refresh
|
||||
</button>
|
||||
</h4>
|
||||
<div class="balance-card">
|
||||
<div class="balance-card__icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 5a1 1 0 100 2h1a2 2 0 011.732 1H7a1 1 0 100 2h2.732A2 2 0 018 11H7a1 1 0 00-.707 1.707l3 3a1 1 0 001.414-1.414l-1.483-1.484A4.008 4.008 0 0011.874 10H13a1 1 0 100-2h-1.126a3.976 3.976 0 00-.41-1H13a1 1 0 100-2H7z" clip-rule="evenodd" />
|
||||
<div>
|
||||
<h4 class="flex align-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon button__icon--left" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
My balance
|
||||
</h4>
|
||||
<div class="balance-card">
|
||||
<div class="balance-card__icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 5a1 1 0 100 2h1a2 2 0 011.732 1H7a1 1 0 100 2h2.732A2 2 0 018 11H7a1 1 0 00-.707 1.707l3 3a1 1 0 001.414-1.414l-1.483-1.484A4.008 4.008 0 0011.874 10H13a1 1 0 100-2h-1.126a3.976 3.976 0 00-.41-1H13a1 1 0 100-2H7z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="balance-card__token">Rupee</div>
|
||||
<div id="rupee_balance" class="balance-card__amount"></div>
|
||||
</div>
|
||||
<div class="balance-card__token">Rupee</div>
|
||||
<div id="rupee_balance" class="balance-card__amount"></div>
|
||||
</div>
|
||||
<div class="balance-card">
|
||||
<div class="balance-card__icon">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.36,15.39c1.83,0,4.26-2.49,4.36-4.74-5.65-.19-4.91.47-7.28,2.39,2.19-2.4,1.42-7.79-1.43-10V6.17c2.33,1.49,2.21,5.14,0,7.15-2.23-2-2.27-5.69,0-7.15V3c-2.83,2.26-3.62,7.66-1.44,10-2.36-1.93-1.63-2.58-7.28-2.39.1,2.26,2.55,4.73,4.36,4.74,0,0-1.93.22-2.74-2.62,2.38-.37,4.29-.14,6.28,2-.79-.11-4.89,1.13-4.38,3.26.53.06,3,.3,3.58-.83-.17.18-1.25.5-1.53.05.38-1.39,2.32-2,2.32-2-1,1.82-.48,4.63.82,5.72,1.31-1.08,1.8-3.95.82-5.72,0,0,1.95.6,2.32,2-.29.46-1.36.12-1.53-.05.58,1.14,3.06.88,3.58.83.49-2.17-3.58-3.36-4.38-3.26,2-2.17,3.92-2.39,6.28-2C18.3,15.62,16.36,15.39,16.36,15.39ZM12,19.46c-.91-.79-.5-3,0-3.59C12.5,16.45,12.91,18.66,12,19.46Z"/></svg>
|
||||
<div class="balance-card">
|
||||
<div class="balance-card__icon">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.36,15.39c1.83,0,4.26-2.49,4.36-4.74-5.65-.19-4.91.47-7.28,2.39,2.19-2.4,1.42-7.79-1.43-10V6.17c2.33,1.49,2.21,5.14,0,7.15-2.23-2-2.27-5.69,0-7.15V3c-2.83,2.26-3.62,7.66-1.44,10-2.36-1.93-1.63-2.58-7.28-2.39.1,2.26,2.55,4.73,4.36,4.74,0,0-1.93.22-2.74-2.62,2.38-.37,4.29-.14,6.28,2-.79-.11-4.89,1.13-4.38,3.26.53.06,3,.3,3.58-.83-.17.18-1.25.5-1.53.05.38-1.39,2.32-2,2.32-2-1,1.82-.48,4.63.82,5.72,1.31-1.08,1.8-3.95.82-5.72,0,0,1.95.6,2.32,2-.29.46-1.36.12-1.53-.05.58,1.14,3.06.88,3.58.83.49-2.17-3.58-3.36-4.38-3.26,2-2.17,3.92-2.39,6.28-2C18.3,15.62,16.36,15.39,16.36,15.39ZM12,19.46c-.91-.79-.5-3,0-3.59C12.5,16.45,12.91,18.66,12,19.46Z"/></svg>
|
||||
</div>
|
||||
<div class="balance-card__token">FLO</div>
|
||||
<div id="flo_balance" class="balance-card__amount"></div>
|
||||
</div>
|
||||
<div class="balance-card__token">FLO</div>
|
||||
<div id="flo_balance" class="balance-card__amount"></div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
@ -851,6 +871,9 @@
|
||||
getRef('flo_balance').textContent = floBalance
|
||||
})
|
||||
.catch(error => notify(error, 'error'))
|
||||
const {depositTotal, loanTotal} = bank_app.getUserDetails(myFloID)
|
||||
getRef('total_deposit').textContent = depositTotal
|
||||
getRef('total_loan').textContent = loanTotal
|
||||
}
|
||||
function getArrayOfObj(obj) {
|
||||
const arrayOfObj = []
|
||||
@ -958,6 +981,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
function selectGraphColors(){
|
||||
const colors = []
|
||||
const green = getComputedStyle(document.body).getPropertyValue('--green')
|
||||
const yellow = getComputedStyle(document.body).getPropertyValue('--yellow')
|
||||
return [green, yellow]
|
||||
}
|
||||
|
||||
document.querySelector('theme-toggle').addEventListener('themechange', e => {
|
||||
selectGraphColors()
|
||||
accountChart.data.datasets[0].backgroundColor = selectGraphColors()
|
||||
accountChart.update()
|
||||
})
|
||||
|
||||
function renderChart(params) {
|
||||
const ctx = getRef('account_summary_chart').getContext('2d');
|
||||
const {depositTotal, loanTotal} = bank_app.getUserDetails(myFloID)
|
||||
@ -968,11 +1004,9 @@
|
||||
datasets: [{
|
||||
label: 'Account summary',
|
||||
data: [depositTotal, loanTotal],
|
||||
backgroundColor: [
|
||||
'rgb(54, 162, 235)',
|
||||
'rgb(255, 99, 132)',
|
||||
],
|
||||
hoverOffset: 4
|
||||
backgroundColor: selectGraphColors(),
|
||||
hoverOffset: 4,
|
||||
borderWidth: 0
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user