diff --git a/lnbits/core/templates/core/wallet.html b/lnbits/core/templates/core/wallet.html index 47f373dcd..5bf20a657 100644 --- a/lnbits/core/templates/core/wallet.html +++ b/lnbits/core/templates/core/wallet.html @@ -83,7 +83,9 @@ {{LNBITS_DENOMINATION}} + + @@ -95,7 +97,11 @@ , width: $q.screen.lt.md && mobileSimple ? '90% !important': '' } : ''" > +
+ +
+

{{LNBITS_DENOMINATION}} @@ -105,6 +111,7 @@ class="q-ml-md" >

+
diff --git a/lnbits/static/js/components/payment-list.js b/lnbits/static/js/components/payment-list.js index 7d32ab2a7..3c2b128fe 100644 --- a/lnbits/static/js/components/payment-list.js +++ b/lnbits/static/js/components/payment-list.js @@ -237,5 +237,6 @@ window.app.component('payment-list', { }, created() { if (this.lazy === undefined) this.fetchPayments() + } }) diff --git a/lnbits/static/js/wallet.js b/lnbits/static/js/wallet.js index a9fd62932..318dc885c 100644 --- a/lnbits/static/js/wallet.js +++ b/lnbits/static/js/wallet.js @@ -59,7 +59,10 @@ window.app = Vue.createApp({ adminkeyHidden: true, hasNfc: false, nfcReaderAbortController: null, - primaryColor: this.$q.localStorage.getItem('lnbits.primaryColor') + primaryColor: this.$q.localStorage.getItem('lnbits.primaryColor'), + transactions: [], + transactionChart: null, + paymentsRef: null, } }, computed: { @@ -97,6 +100,64 @@ window.app = Vue.createApp({ } }, methods: { + computeCumulativeBalance(transactions) { + let balance = 0; + return transactions.map(amount => (balance += amount)); + }, + initCharts() { + this.transactionChart = new Chart( + this.$refs.transactionChart.getContext('2d'), + { + type: 'line', + options: { + responsive: true, + maintainAspectRatio: false, + layout: { + padding: 0, + margin: 0, // Remove padding around the chart + }, + plugins: { + legend: { + display: false, + }, + title: { + display: false, + }, + }, + elements: { + point: { + radius: 0, + }, + }, + scales: { + x: { + display: false + }, + y: { + display: false + }, + }, + }, + data: { + labels: this.transactions.map((tx) => + new Date(tx.date).toLocaleDateString() + ), + datasets: [ + { + label: 'Cumulative Balance', + data: this.computeCumulativeBalance(this.transactions), + backgroundColor: LNbits.utils.hexAlpha(this.primaryColor, 0.05), + borderColor: this.primaryColor, + borderWidth: 1, + fill: true, + tension: 0.2, + }, + ], + }, + } + ); + }, + msatoshiFormat(value) { return LNbits.utils.formatSat(value / 1000) }, @@ -652,7 +713,25 @@ window.app = Vue.createApp({ dismissPaymentMsg() LNbits.utils.notifyApiError(err) }) - } + }, + handleWallet(wallet) { + console.log('Wallet from child:', wallet); + }, + fetchPayments() { + return LNbits.api + .getPayments(this.g.wallet, "sortby=time&direction=asc&status[ne]=failed") + .then(response => { + console.log(response.data.data) + for (let payment of response.data.data) { + this.transactions.push(payment.amount) + } + console.log(this.transactions) + }) + .catch(err => { + this.paymentsTable.loading = false + LNbits.utils.notifyApiError(err) + }) + }, }, created() { const urlParams = new URLSearchParams(window.location.search) @@ -669,6 +748,9 @@ window.app = Vue.createApp({ this.update.currency = this.g.wallet.currency this.receive.units = ['sat', ...window.currencies] this.updateFiatBalance() + this.fetchPayments().then(() => { + this.initCharts() + }) }, watch: { updatePayments() {