highperfocused/lnbits
1
0
Fork 0
mirror of https://github.com/lnbits/lnbits.git synced 2025-08-08 09:11:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

format

Browse Source
This commit is contained in:
Arc
2024-12-20 01:26:47 +00:00
parent 7fbffa20d7
commit 902f3c7c6f
2 changed files with 102 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
lnbits/core/templates/core/wallet.html
View File

@@ -89,9 +89,7 @@
</q-scroll-area>
<div class="row">
<div class="col-lg-9 col-12">
<q-card
:style="$q.screen.lt.md ? {
background: $q.screen.lt.md ? 'none !important': ''
, boxShadow: $q.screen.lt.md ? 'none !important': ''
@@ -99,7 +97,6 @@
, width: $q.screen.lt.md && mobileSimple ? '90% !important': ''
} : ''"
>
<q-card-section>
<h3 class="q-my-none text-no-wrap">
<strong v-text="formattedBalance"></strong>
@@ -168,22 +165,25 @@
</div>
</div>
</q-card>
</div>
<div class="col-3" v-show="$q.screen.gt.md">
<q-card class="q-ml-md q-pa-none " style="height: 135px;">
<q-card-section style=" padding: 0;">
<q-card class="q-ml-md q-pa-none" style="height: 135px">
<q-card-section style="padding: 0">
<canvas
ref="transactionChart"
style="height: 135px; width: 100%; margin: 0; padding: 0; transform: translate(-2%, 4%);"
style="
height: 135px;
width: 100%;
margin: 0;
padding: 0;
transform: translate(-2%, 4%);
"
></canvas>
</q-card-section>
</q-card>
</div>
</div>
<q-card
:style="
$q.screen.lt.md

59
lnbits/static/js/wallet.js
View File

@@ -101,11 +101,11 @@ window.app = Vue.createApp({
},
methods: {
computeCumulativeBalance(transactions) {
let balance = 0;
let balance = 0
return transactions.map(transaction => {
balance += transaction.amount; // Use the amount field for the balance
return balance;
});
balance += transaction.amount // Use the amount field for the balance
return balance
})
},
initCharts() {
@@ -118,49 +118,49 @@ window.app = Vue.createApp({
maintainAspectRatio: false,
layout: {
padding: 0,
margin: 0,
margin: 0
},
plugins: {
legend: {
display: false,
display: false
},
title: {
display: false,
display: false
},
tooltip: {
enabled: true, // Enable tooltips to show data on hover
callbacks: {
// Custom tooltip callback to show amount and time
label: (tooltipItem) => {
const index = tooltipItem.dataIndex;
const transaction = this.transactions[index]; // Match tooltip point with transaction
const amount = transaction.amount;
label: tooltipItem => {
const index = tooltipItem.dataIndex
const transaction = this.transactions[index] // Match tooltip point with transaction
const amount = transaction.amount
return [
`Balance: ${tooltipItem.raw / 1000}sats`, // Display cumulative balance
`Amount: ${amount / 1000}sats`,
];
},
},
},
`Amount: ${amount / 1000}sats`
]
}
}
}
},
elements: {
point: {
radius: 4, // Points will now be visible
hoverRadius: 6, // Increase point size on hover
},
hoverRadius: 6 // Increase point size on hover
}
},
scales: {
x: {
display: false,
display: false
},
y: {
display: false,
},
},
display: false
}
}
},
data: {
labels: this.transactions.map(tx =>
new Date(tx.time).toLocaleString() // Use time for labels
labels: this.transactions.map(
tx => new Date(tx.time).toLocaleString() // Use time for labels
),
datasets: [
{
@@ -170,15 +170,14 @@ window.app = Vue.createApp({
borderColor: this.primaryColor,
borderWidth: 2,
fill: true,
tension: 0.2,
},
],
},
tension: 0.2
}
);
]
}
}
)
},
msatoshiFormat(value) {
return LNbits.utils.formatSat(value / 1000)
},