working

lnbits/core/templates/core/wallet.html

@@ -83,7 +83,9 @@
                     <small> {{LNBITS_DENOMINATION}}</small>
                   </h6>
                 </div>
+              
               </q-card-section>
+
             </q-card>
           </div>
         </q-scroll-area>
@@ -95,7 +97,11 @@
           , width: $q.screen.lt.md && mobileSimple ? '90% !important': ''
         } : ''"
         >
+        <div v-show="$q.screen.gt.sm" style="width: 100%; height: 100%;" class="absolute float-left">
+          <canvas  ref="transactionChart"></canvas>
+        </div>
           <q-card-section>
+            
             <h3 class="q-my-none text-no-wrap">
               <strong v-text="formattedBalance"></strong>
               <small> {{LNBITS_DENOMINATION}}</small>
@@ -105,6 +111,7 @@
                 class="q-ml-md"
               ></lnbits-update-balance>
             </h3>
+
             <div class="row">
               <div class="col">
                 <div v-if="g.wallet.currency">

lnbits/static/js/components/payment-list.js

@@ -237,5 +237,6 @@ window.app.component('payment-list', {
   },
   created() {
     if (this.lazy === undefined) this.fetchPayments()
+
   }
 })

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() {