added to card, bg idea was terrible

lnbits/core/templates/core/wallet.html

@@ -87,89 +87,103 @@
             </q-card>
           </div>
         </q-scroll-area>
-        <q-card
+        <div class="row">
-          :style="$q.screen.lt.md ? {
+          <div class="col-lg-9 col-12">
-            background: $q.screen.lt.md ? 'none !important': ''
+            
-          , boxShadow: $q.screen.lt.md ? 'none !important': ''
+            <q-card
-          , margin: $q.screen.lt.md && mobileSimple ? 'auto !important': ''
-          , 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>
-              <lnbits-update-balance
-                :wallet_id="this.g.wallet.id"
-                @credit-value="handleBalanceUpdate"
-                class="q-ml-md"
-              ></lnbits-update-balance>
-            </h3>
 
-            <div class="row">
+            :style="$q.screen.lt.md ? {
-              <div class="col">
+              background: $q.screen.lt.md ? 'none !important': ''
-                <div v-if="g.wallet.currency">
+            , boxShadow: $q.screen.lt.md ? 'none !important': ''
-                  <span
+            , margin: $q.screen.lt.md && mobileSimple ? 'auto !important': ''
-                    class="text-h5 text-italic"
+            , width: $q.screen.lt.md && mobileSimple ? '90% !important': ''
-                    v-text="formattedFiatBalance"
+          } : ''"
-                    style="opacity: 0.75"
+          >
-                  ></span>
+  
+            <q-card-section>
+              <h3 class="q-my-none text-no-wrap">
+                <strong v-text="formattedBalance"></strong>
+                <small> {{LNBITS_DENOMINATION}}</small>
+                <lnbits-update-balance
+                  :wallet_id="this.g.wallet.id"
+                  @credit-value="handleBalanceUpdate"
+                  class="q-ml-md"
+                ></lnbits-update-balance>
+              </h3>
+  
+              <div class="row">
+                <div class="col">
+                  <div v-if="g.wallet.currency">
+                    <span
+                      class="text-h5 text-italic"
+                      v-text="formattedFiatBalance"
+                      style="opacity: 0.75"
+                    ></span>
+                  </div>
                 </div>
+                <div class="col">
+                  <q-btn
+                    @click="mobileSimple = !mobileSimple"
+                    color="primary"
+                    class="float-right lt-md"
+                    size="sm"
+                    flat
+                    :icon="mobileSimple ? 'unfold_more' : 'unfold_less'"
+                    :label="mobileSimple ? $t('more') : $t('less')"
+                  ></q-btn>
+                </div>
+              </div>
+            </q-card-section>
+            <div class="row q-pb-md q-px-md q-col-gutter-md gt-sm">
+              <div class="col">
+                <q-btn
+                  unelevated
+                  color="primary"
+                  class="full-width"
+                  @click="showParseDialog"
+                  :label="$t('paste_request')"
+                ></q-btn>
               </div>
               <div class="col">
                 <q-btn
-                  @click="mobileSimple = !mobileSimple"
+                  unelevated
                   color="primary"
-                  class="float-right lt-md"
+                  class="full-width"
-                  size="sm"
+                  @click="showReceiveDialog"
-                  flat
+                  :label="$t('create_invoice')"
-                  :icon="mobileSimple ? 'unfold_more' : 'unfold_less'"
-                  :label="mobileSimple ? $t('more') : $t('less')"
                 ></q-btn>
               </div>
+              <div class="col">
+                <q-btn
+                  unelevated
+                  color="secondary"
+                  icon="photo_camera"
+                  @click="showCamera"
+                  :label="$t('scan')"
+                >
+                  <q-tooltip
+                    ><span v-text="$t('camera_tooltip')"></span
+                  ></q-tooltip>
+                </q-btn>
+              </div>
             </div>
-          </q-card-section>
+          </q-card>
-          <div class="row q-pb-md q-px-md q-col-gutter-md gt-sm">
+            
-            <div class="col">
-              <q-btn
-                unelevated
-                color="primary"
-                class="full-width"
-                @click="showParseDialog"
-                :label="$t('paste_request')"
-              ></q-btn>
-            </div>
-            <div class="col">
-              <q-btn
-                unelevated
-                color="primary"
-                class="full-width"
-                @click="showReceiveDialog"
-                :label="$t('create_invoice')"
-              ></q-btn>
-            </div>
-            <div class="col">
-              <q-btn
-                unelevated
-                color="secondary"
-                icon="photo_camera"
-                @click="showCamera"
-                :label="$t('scan')"
-              >
-                <q-tooltip
-                  ><span v-text="$t('camera_tooltip')"></span
-                ></q-tooltip>
-              </q-btn>
-            </div>
           </div>
-        </q-card>
+          <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;">
+                <canvas
+                  ref="transactionChart"
+                  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

lnbits/static/js/wallet.js

@@ -101,9 +101,13 @@ window.app = Vue.createApp({
   },
   methods: {
     computeCumulativeBalance(transactions) {
-      let balance = 0
+      let balance = 0;
-      return transactions.map(amount => (balance += amount))
+      return transactions.map(transaction => {
+        balance += transaction.amount; // Use the amount field for the balance
+        return balance;
+      });
     },
+    
     initCharts() {
       this.transactionChart = new Chart(
         this.$refs.transactionChart.getContext('2d'),
@@ -114,49 +118,66 @@ window.app = Vue.createApp({
             maintainAspectRatio: false,
             layout: {
               padding: 0,
-              margin: 0 // Remove padding around the chart
+              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;
+                    return [
+                      `Balance: ${tooltipItem.raw /1000}sats`, // Display cumulative balance
+                      `Amount: ${amount / 1000}sats`,
+                    ];
+                  },
+                },
+              },
             },
             elements: {
               point: {
-                radius: 0
+                radius: 4, // Points will now be visible
-              }
+                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.date).toLocaleDateString()
+              new Date(tx.time).toLocaleString()  // Use time for labels
             ),
             datasets: [
               {
                 label: 'Cumulative Balance',
                 data: this.computeCumulativeBalance(this.transactions),
-                backgroundColor: LNbits.utils.hexAlpha(this.primaryColor, 0.05),
+                backgroundColor: LNbits.utils.hexAlpha(this.primaryColor, 0.3),
                 borderColor: this.primaryColor,
-                borderWidth: 1,
+                borderWidth: 2,
                 fill: true,
-                tension: 0.2
+                tension: 0.2,
-              }
+              },
-            ]
+            ],
-          }
+          },
         }
-      )
+      );
     },
+    
 
     msatoshiFormat(value) {
       return LNbits.utils.formatSat(value / 1000)
@@ -726,7 +747,13 @@ window.app = Vue.createApp({
         .then(response => {
           console.log(response.data.data)
           for (let payment of response.data.data) {
-            this.transactions.push(payment.amount)
+            record = {
+              payment_hash: payment.payment_hash,
+              amount: payment.amount,
+              description: payment.description,
+              time: payment.time
+            }
+            this.transactions.push(record)
           }
           console.log(this.transactions)
         })