Michilis/lnbits
1
0
Fork 0
Code Issues Pull Requests Actions 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
lnbits/core/templates/core/wallet.html
+9 -9
View File
@@ -89,9 +89,7 @@
</q-scroll-area> </q-scroll-area>
<div class="row"> <div class="row">
<div class="col-lg-9 col-12"> <div class="col-lg-9 col-12">
<q-card <q-card
:style="$q.screen.lt.md ? { :style="$q.screen.lt.md ? {
background: $q.screen.lt.md ? 'none !important': '' background: $q.screen.lt.md ? 'none !important': ''
, boxShadow: $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': '' , width: $q.screen.lt.md && mobileSimple ? '90% !important': ''
} : ''" } : ''"
> >
<q-card-section> <q-card-section>
<h3 class="q-my-none text-no-wrap"> <h3 class="q-my-none text-no-wrap">
<strong v-text="formattedBalance"></strong> <strong v-text="formattedBalance"></strong>
@@ -168,22 +165,25 @@
</div> </div>
</div> </div>
</q-card> </q-card>
</div> </div>
<div class="col-3" v-show="$q.screen.gt.md"> <div class="col-3" v-show="$q.screen.gt.md">
<q-card class="q-ml-md q-pa-none " style="height: 135px;"> <q-card class="q-ml-md q-pa-none" style="height: 135px">
<q-card-section style=" padding: 0;"> <q-card-section style="padding: 0">
<canvas <canvas
ref="transactionChart" 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> ></canvas>
</q-card-section> </q-card-section>
</q-card> </q-card>
</div> </div>
</div> </div>
<q-card <q-card
:style=" :style="
$q.screen.lt.md $q.screen.lt.md
lnbits/static/js/wallet.js
+30 -31
View File
@@ -101,11 +101,11 @@ window.app = Vue.createApp({
}, },
methods: { methods: {
computeCumulativeBalance(transactions) { computeCumulativeBalance(transactions) {
let balance = 0; let balance = 0
return transactions.map(transaction => { return transactions.map(transaction => {
balance += transaction.amount; // Use the amount field for the balance balance += transaction.amount // Use the amount field for the balance
return balance; return balance
}); })
}, },
initCharts() { initCharts() {
@@ -118,49 +118,49 @@ window.app = Vue.createApp({
maintainAspectRatio: false, maintainAspectRatio: false,
layout: { layout: {
padding: 0, padding: 0,
margin: 0, margin: 0
}, },
plugins: { plugins: {
legend: { legend: {
display: false, display: false
}, },
title: { title: {
display: false, display: false
}, },
tooltip: { tooltip: {
enabled: true, // Enable tooltips to show data on hover enabled: true, // Enable tooltips to show data on hover
callbacks: { callbacks: {
// Custom tooltip callback to show amount and time // Custom tooltip callback to show amount and time
label: (tooltipItem) => { label: tooltipItem => {
const index = tooltipItem.dataIndex; const index = tooltipItem.dataIndex
const transaction = this.transactions[index]; // Match tooltip point with transaction const transaction = this.transactions[index] // Match tooltip point with transaction
const amount = transaction.amount; const amount = transaction.amount
return [ return [
`Balance: ${tooltipItem.raw /1000}sats`, // Display cumulative balance `Balance: ${tooltipItem.raw / 1000}sats`, // Display cumulative balance
`Amount: ${amount / 1000}sats`, `Amount: ${amount / 1000}sats`
]; ]
}, }
}, }
}, }
}, },
elements: { elements: {
point: { point: {
radius: 4, // Points will now be visible radius: 4, // Points will now be visible
hoverRadius: 6, // Increase point size on hover hoverRadius: 6 // Increase point size on hover
}, }
}, },
scales: { scales: {
x: { x: {
display: false, display: false
}, },
y: { y: {
display: false, display: false
}, }
}, }
}, },
data: { data: {
labels: this.transactions.map(tx => labels: this.transactions.map(
new Date(tx.time).toLocaleString() // Use time for labels tx => new Date(tx.time).toLocaleString() // Use time for labels
), ),
datasets: [ datasets: [
{ {
@@ -170,15 +170,14 @@ window.app = Vue.createApp({
borderColor: this.primaryColor, borderColor: this.primaryColor,
borderWidth: 2, borderWidth: 2,
fill: true, fill: true,
tension: 0.2, tension: 0.2
},
],
},
} }
); ]
}
}
)
}, },
msatoshiFormat(value) { msatoshiFormat(value) {
return LNbits.utils.formatSat(value / 1000) return LNbits.utils.formatSat(value / 1000)
}, },