From c08623277ed1a6438d27874098e59a4b8b4bf75f Mon Sep 17 00:00:00 2001
From: Vlad Stan <stan.v.vlad@gmail.com>
Date: Mon, 17 Feb 2025 14:30:16 +0200
Subject: [PATCH] Chart polish (#2973)

---
 lnbits/core/services/payments.py          |  2 +
 lnbits/core/templates/core/account.html   | 51 +++++++------
 lnbits/core/templates/core/wallet.html    | 52 ++++++++-----
 lnbits/core/templates/payments/index.html | 93 +++++++++++------------
 lnbits/static/js/payments.js              | 61 ++++++++-------
 lnbits/static/js/wallet.js                | 39 +++++++---
 lnbits/templates/base.html                |  2 +-
 7 files changed, 170 insertions(+), 130 deletions(-)

diff --git a/lnbits/core/services/payments.py b/lnbits/core/services/payments.py
index 069298fe..5ad3389b 100644
--- a/lnbits/core/services/payments.py
+++ b/lnbits/core/services/payments.py
@@ -440,6 +440,8 @@ async def get_payments_daily_stats(
     balance_total: float = 0
 
     _none = PaymentDailyStats(date=datetime.now(timezone.utc))
+    if len(data_in) == 0 and len(data_out) == 0:
+        return []
     if len(data_in) == 0:
         data_in = [_none]
     if len(data_out) == 0:
diff --git a/lnbits/core/templates/core/account.html b/lnbits/core/templates/core/account.html
index 3df72ef8..21d1e7fc 100644
--- a/lnbits/core/templates/core/account.html
+++ b/lnbits/core/templates/core/account.html
@@ -4,34 +4,43 @@
 <!---->
 {% block scripts %} {{ window_vars(user) }}{% endblock %} {% block page %}
 
+<div class="row q-col-gutter-md q-mb-md">
+  <div class="col-12">
+    <q-card>
+      <div>
+        <div class="q-gutter-y-md">
+          <q-tabs v-model="tab" align="left">
+            <q-tab
+              name="user"
+              :label="$t('account_settings')"
+              @update="val => tab = val.name"
+            ></q-tab>
+            <q-tab
+              name="theme"
+              :label="$t('look_and_feel')"
+              @update="val => tab = val.name"
+            ></q-tab>
+            <q-tab
+              name="api_acls"
+              :label="$t('access_control_list')"
+              @update="val => tab = val.name"
+            ></q-tab>
+          </q-tabs>
+        </div>
+      </div>
+    </q-card>
+  </div>
+</div>
+
 <div class="row q-col-gutter-md">
   <div v-if="user" class="col-md-12 col-lg-6 q-gutter-y-md">
     <q-card>
       <q-card-section>
         <div class="row">
           <div class="col">
-            <q-tabs v-model="tab" align="justify">
-              <q-tab
-                name="user"
-                :label="$t('account_settings')"
-                @update="val => tab = val.name"
-              ></q-tab>
-              <q-tab
-                name="theme"
-                :label="$t('look_and_feel')"
-                @update="val => tab = val.name"
-              ></q-tab>
-              <q-tab
-                name="api_acls"
-                :label="$t('access_control_list')"
-                @update="val => tab = val.name"
-              ></q-tab>
-            </q-tabs>
             <q-tab-panels v-model="tab">
               <q-tab-panel name="user">
                 <div v-if="credentialsData.show">
-                  <q-separator></q-separator>
-
                   <q-card-section>
                     <div class="row">
                       <div class="col">
@@ -132,11 +141,10 @@
                   </q-card-section>
                 </div>
                 <div v-else>
-                  <q-card-section>
+                  <q-card-section v-if="user.extra.picture">
                     <div class="row">
                       <div class="col">
                         <q-img
-                          v-if="user.extra.picture"
                           style="max-width: 100px"
                           :src="user.extra.picture"
                           class="float-right"
@@ -144,7 +152,6 @@
                       </div>
                     </div>
                   </q-card-section>
-                  <q-separator></q-separator>
 
                   <q-card-section>
                     <q-input
diff --git a/lnbits/core/templates/core/wallet.html b/lnbits/core/templates/core/wallet.html
index 27e70e96..d7e6c887 100644
--- a/lnbits/core/templates/core/wallet.html
+++ b/lnbits/core/templates/core/wallet.html
@@ -481,27 +481,37 @@
             >{% endfor %}
           </q-card>
           {% endif %}
-          <q-card v-if="chartConfig.showBalance">
-            <q-card-section class="q-pa-none">
-              <div style="height: 200px" class="q-pa-sm">
-                <canvas ref="walletBalanceChart"></canvas>
-              </div>
-            </q-card-section>
-          </q-card>
-          <q-card v-if="chartConfig.showBalanceInOut">
-            <q-card-section class="q-pa-none">
-              <div style="height: 200px" class="q-pa-sm">
-                <canvas ref="walletBalanceInOut"></canvas>
-              </div>
-            </q-card-section>
-          </q-card>
-          <q-card v-if="chartConfig.showPaymentCountInOut">
-            <q-card-section class="q-pa-none">
-              <div style="height: 200px" class="q-pa-sm">
-                <canvas ref="walletPaymentsInOut"></canvas>
-              </div>
-            </q-card-section>
-          </q-card>
+          <div
+            v-show="chartDataPointCount"
+            class="col-12 col-md-5 q-gutter-y-md"
+          >
+            <q-card v-if="chartConfig.showBalance">
+              <q-card-section class="q-pa-none">
+                <div style="height: 200px" class="q-pa-sm">
+                  <canvas ref="walletBalanceChart"></canvas>
+                </div>
+              </q-card-section>
+            </q-card>
+            <q-card v-if="chartConfig.showBalanceInOut">
+              <q-card-section class="q-pa-none">
+                <div style="height: 200px" class="q-pa-sm">
+                  <canvas ref="walletBalanceInOut"></canvas>
+                </div>
+              </q-card-section>
+            </q-card>
+            <q-card v-if="chartConfig.showPaymentCountInOut">
+              <q-card-section class="q-pa-none">
+                <div style="height: 200px" class="q-pa-sm">
+                  <canvas ref="walletPaymentsInOut"></canvas>
+                </div>
+              </q-card-section>
+            </q-card>
+          </div>
+          <div v-if="hasChartActive && !chartDataPointCount">
+            <q-card>
+              <q-card-section> No chart data available</q-card-section>
+            </q-card>
+          </div>
         </div>
       </div>
 
diff --git a/lnbits/core/templates/payments/index.html b/lnbits/core/templates/payments/index.html
index f12ecaab..bfa1e20c 100644
--- a/lnbits/core/templates/payments/index.html
+++ b/lnbits/core/templates/payments/index.html
@@ -8,52 +8,7 @@
     <q-card>
       <div class="q-pa-sm q-pl-lg">
         <div class="row items-center justify-between q-gutter-xs">
-          <div class="col">
-            <div class="float-left">
-              <q-chip
-                v-if="searchDate.timeFrom"
-                removable
-                @remove="removeCreatedFrom()"
-                :label="searchDate.timeFrom"
-                class="ellipsis"
-              >
-              </q-chip>
-
-              <q-icon name="event" class="cursor-pointer">
-                <q-popup-proxy
-                  cover
-                  transition-show="scale"
-                  transition-hide="scale"
-                >
-                  <q-date v-model="searchDate.timeFrom" mask="YYYY-MM-DD">
-                    <div class="row">
-                      <q-btn
-                        label="Search"
-                        color="primary"
-                        flat
-                        @click="fetchPayments()"
-                        class="float-left"
-                        v-close-popup
-                      />
-                    </div>
-                  </q-date>
-                  <q-date v-model="searchDate.timeTo" mask="YYYY-MM-DD">
-                    <div class="row items-center justify-end">
-                      <q-btn v-close-popup label="Close" color="primary" flat />
-                    </div>
-                  </q-date>
-                </q-popup-proxy>
-              </q-icon>
-              <q-chip
-                removable
-                v-if="searchDate.timeTo"
-                @remove="removeCreatedTo()"
-                :label="searchDate.timeTo"
-                class="ellipsis"
-              >
-              </q-chip>
-            </div>
-          </div>
+          <div class="col"></div>
           <div class="float-left">
             <q-checkbox
               dense
@@ -115,7 +70,46 @@
             </q-checkbox>
           </div>
           <q-separator vertical class="q-ma-sm"></q-separator>
-
+          <q-btn icon="event" outline flat>
+            <q-popup-proxy
+              cover
+              transition-show="scale"
+              transition-hide="scale"
+            >
+              <q-date v-model="searchDate" mask="YYYY-MM-DD" range />
+              <div class="row">
+                <div class="col-6">
+                  <q-btn
+                    label="Search"
+                    @click="searchByDate()"
+                    color="primary"
+                    flat
+                    class="float-left"
+                    v-close-popup
+                  />
+                </div>
+                <div class="col-6">
+                  <q-btn
+                    v-close-popup
+                    @click="clearDateSeach()"
+                    label="Clear"
+                    class="float-right"
+                    color="grey"
+                    flat
+                  />
+                </div>
+              </div>
+            </q-popup-proxy>
+            <q-badge
+              v-if="searchDate?.to || searchDate?.from"
+              class="q-mt-lg q-mr-md"
+              color="primary"
+              rounded
+              floating
+              style="border-radius: 6px"
+            />
+          </q-btn>
+          <q-separator vertical class="q-ma-sm"></q-separator>
           <div>
             <q-btn
               v-if="g.user.admin"
@@ -214,7 +208,6 @@
           :columns="paymentsTable.columns"
           v-model:pagination="paymentsTable.pagination"
           :filter="paymentsTable.search"
-          :loading="paymentsTable.loading"
           @request="fetchPayments"
         >
           <template v-slot:header="props">
@@ -272,8 +265,8 @@
                     @click="showDetailsToggle(props.row)"
                     v-if="props.row.status === 'success'"
                     size="14px"
-                    :name="props.row.amount < 0 ? 'call_made' : 'call_received'"
-                    :color="props.row.amount < 0 ? 'pink' : 'green'"
+                    :name="props.row.outgoing ? 'call_made' : 'call_received'"
+                    :color="props.row.outgoing ? 'pink' : 'green'"
                     class="cursor-pointer"
                   ></q-icon>
                   <q-icon
diff --git a/lnbits/static/js/payments.js b/lnbits/static/js/payments.js
index 7a5fe028..315c455a 100644
--- a/lnbits/static/js/payments.js
+++ b/lnbits/static/js/payments.js
@@ -4,10 +4,7 @@ window.PaymentsPageLogic = {
     return {
       payments: [],
       dailyChartData: [],
-      searchDate: {
-        timeFrom: null,
-        timeTo: null
-      },
+      searchDate: {from: null, to: null},
       searchData: {
         wallet_id: null,
         payment_hash: null,
@@ -104,7 +101,7 @@ window.PaymentsPageLogic = {
         },
         search: null,
         hideEmpty: true,
-        loading: true
+        loading: false
       },
       chartsReady: false,
       showDetails: false,
@@ -116,10 +113,6 @@ window.PaymentsPageLogic = {
     this.chartsReady = true
     await this.$nextTick()
     this.initCharts()
-    this.searchDate.timeFrom = moment()
-      .subtract(1, 'month')
-      .format('YYYY-MM-DD')
-    this.searchDate.timeTo = moment().format('YYYY-MM-DD')
     await this.fetchPayments()
   },
   computed: {},
@@ -132,11 +125,11 @@ window.PaymentsPageLogic = {
 
       delete filter['time[ge]']
       delete filter['time[le]']
-      if (this.searchDate.timeFrom) {
-        filter['time[ge]'] = this.searchDate.timeFrom + 'T00:00:00'
+      if (this.searchDate.from) {
+        filter['time[ge]'] = this.searchDate.from + 'T00:00:00'
       }
-      if (this.searchDate.timeTo) {
-        filter['time[le]'] = this.searchDate.timeTo + 'T23:59:59'
+      if (this.searchDate.to) {
+        filter['time[le]'] = this.searchDate.to + 'T23:59:59'
       }
       this.paymentsTable.filter = filter
 
@@ -156,7 +149,7 @@ window.PaymentsPageLogic = {
             p.tag = p.extra.tag
           }
           p.timeFrom = moment(p.created_at).fromNow()
-
+          p.outgoing = p.amount < 0
           p.amount =
             new Intl.NumberFormat(window.LOCALE).format(p.amount / 1000) +
             ' sats'
@@ -173,7 +166,6 @@ window.PaymentsPageLogic = {
         console.error(error)
         LNbits.utils.notifyApiError(error)
       } finally {
-        this.paymentsTable.loading = false
         this.updateCharts(props)
       }
     },
@@ -183,15 +175,30 @@ window.PaymentsPageLogic = {
       }
       await this.fetchPayments()
     },
+    clearDateSeach() {
+      this.searchDate = {from: null, to: null}
+      delete this.paymentsTable.filter['time[ge]']
+      delete this.paymentsTable.filter['time[le]']
+      this.fetchPayments()
+    },
+    searchByDate() {
+      if (typeof this.searchDate === 'string') {
+        this.searchDate = {
+          from: this.searchDate,
+          to: this.searchDate
+        }
+      }
+      if (this.searchDate.from) {
+        this.paymentsTable.filter['time[ge]'] =
+          this.searchDate.from + 'T00:00:00'
+      }
+      if (this.searchDate.to) {
+        this.paymentsTable.filter['time[le]'] = this.searchDate.to + 'T23:59:59'
+      }
 
-    async removeCreatedFrom() {
-      this.searchDate.timeFrom = null
-      await this.fetchPayments()
-    },
-    async removeCreatedTo() {
-      this.searchDate.timeTo = null
-      await this.fetchPayments()
+      this.fetchPayments()
     },
+
     showDetailsToggle(payment) {
       this.paymentDetails = payment
       return (this.showDetails = !this.showDetails)
@@ -303,17 +310,17 @@ window.PaymentsPageLogic = {
           `/api/v1/payments/stats/daily?${noTimeParams}`
         )
 
-        const timeFrom = this.searchDate.timeFrom + 'T00:00:00'
-        const timeTo = this.searchDate.timeTo + 'T00:00:00'
+        const timeFrom = this.searchDate.from + 'T00:00:00'
+        const timeTo = this.searchDate.to + 'T23:59:59'
         this.lnbitsBalance = data[data.length - 1].balance
         data = data.filter(p => {
-          if (this.searchDate.timeFrom && this.searchDate.timeTo) {
+          if (this.searchDate.from && this.searchDate.to) {
             return p.date >= timeFrom && p.date <= timeTo
           }
-          if (this.searchDate.timeFrom) {
+          if (this.searchDate.from) {
             return p.date >= timeFrom
           }
-          if (this.searchDate.timeTo) {
+          if (this.searchDate.to) {
             return p.date <= timeTo
           }
           return true
diff --git a/lnbits/static/js/wallet.js b/lnbits/static/js/wallet.js
index c1ae8e4a..62ab0fb8 100644
--- a/lnbits/static/js/wallet.js
+++ b/lnbits/static/js/wallet.js
@@ -116,6 +116,7 @@ window.WalletPageLogic = {
       primaryColor: this.$q.localStorage.getItem('lnbits.primaryColor'),
       secondaryColor: this.$q.localStorage.getItem('lnbits.secondaryColor'),
       chartData: [],
+      chartDataPointCount: 0,
       chartConfig: {
         showBalance: true,
         showBalanceInOut: true,
@@ -151,6 +152,13 @@ window.WalletPageLogic = {
     },
     wallet() {
       return this.g.wallet
+    },
+    hasChartActive() {
+      return (
+        this.chartConfig.showBalance ||
+        this.chartConfig.showBalanceInOut ||
+        this.chartConfig.showPaymentCountInOut
+      )
     }
   },
   methods: {
@@ -824,11 +832,7 @@ window.WalletPageLogic = {
         this.chartConfig = {}
         return
       }
-      if (
-        !this.chartConfig.showBalance &&
-        !this.chartConfig.showBalanceInOut &&
-        !this.chartConfig.showPaymentCountInOut
-      ) {
+      if (!this.hasChartActive) {
         return
       }
 
@@ -868,6 +872,7 @@ window.WalletPageLogic = {
           day: 'numeric'
         })
       )
+      this.chartDataPointCount = data.length
       return {data, labels}
     },
     refreshCharts() {
@@ -964,12 +969,20 @@ window.WalletPageLogic = {
                   {
                     label: 'Balance In',
                     borderRadius: 5,
-                    data: data.map(s => s.balance_in)
+                    data: data.map(s => s.balance_in),
+                    backgroundColor: LNbits.utils.hexAlpha(
+                      this.primaryColor,
+                      0.3
+                    )
                   },
                   {
                     label: 'Balance Out',
                     borderRadius: 5,
-                    data: data.map(s => s.balance_out)
+                    data: data.map(s => s.balance_out),
+                    backgroundColor: LNbits.utils.hexAlpha(
+                      this.secondaryColor,
+                      0.3
+                    )
                   }
                 ]
               }
@@ -1005,11 +1018,19 @@ window.WalletPageLogic = {
                 datasets: [
                   {
                     label: 'Payments In',
-                    data: data.map(s => s.count_in)
+                    data: data.map(s => s.count_in),
+                    backgroundColor: LNbits.utils.hexAlpha(
+                      this.primaryColor,
+                      0.3
+                    )
                   },
                   {
                     label: 'Payments Out',
-                    data: data.map(s => -s.count_out)
+                    data: data.map(s => -s.count_out),
+                    backgroundColor: LNbits.utils.hexAlpha(
+                      this.secondaryColor,
+                      0.3
+                    )
                   }
                 ]
               }
diff --git a/lnbits/templates/base.html b/lnbits/templates/base.html
index cabd3e63..9fda2c39 100644
--- a/lnbits/templates/base.html
+++ b/lnbits/templates/base.html
@@ -106,7 +106,7 @@
               <span>OFFLINE</span>
             </q-badge>
             <q-btn-dropdown
-              v-if="g.user"
+              v-if="g.user || isUserAuthorized"
               flat
               rounded
               size="sm"