From 7a5e7fbd8c34e307362d4d0c0b6664f6c532c415 Mon Sep 17 00:00:00 2001
From: blackcoffeexbt <87530449+blackcoffeexbt@users.noreply.github.com>
Date: Wed, 11 Sep 2024 08:40:41 +0100
Subject: [PATCH] feat: UI / UX improvements to Users balance / tx chart
 (#2672)

* Updates to user manager chart to add axis label, bubble radius depending on balance and bubble labels with wallet info

* Fixed bg colour missing on toggle admin on user manager table
---
 lnbits/core/templates/users/index.html |  4 +--
 lnbits/static/js/users.js              | 49 ++++++++++++++++++++++++--
 2 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/lnbits/core/templates/users/index.html b/lnbits/core/templates/users/index.html
index 43a28642e..8e82cd069 100644
--- a/lnbits/core/templates/users/index.html
+++ b/lnbits/core/templates/users/index.html
@@ -7,7 +7,7 @@ include "users/_createWalletDialog.html" %}
 
 <div class="row q-col-gutter-md justify-center">
   <div class="col q-gutter-y-md" style="width: 300px">
-    <div style="width: 600px">
+    <div style="width: 100%; max-width: 2000px">
       <canvas ref="chart1"></canvas>
     </div>
   </div>
@@ -70,7 +70,7 @@ include "users/_createWalletDialog.html" %}
                   v-if="!props.row.is_super_user"
                   icon="build"
                   size="sm"
-                  :color="props.row.is_admin ? 'primary' : ''"
+                  :color="props.row.is_admin ? 'primary' : 'grey'"
                   @click="toggleAdmin(props.row.id)"
                 >
                   <q-tooltip>Toggle Admin</q-tooltip>
diff --git a/lnbits/static/js/users.js b/lnbits/static/js/users.js
index f620b2ba1..436bbf1a2 100644
--- a/lnbits/static/js/users.js
+++ b/lnbits/static/js/users.js
@@ -164,6 +164,41 @@ new Vue({
     this.chart1 = new Chart(this.$refs.chart1.getContext('2d'), {
       type: 'bubble',
       options: {
+        scales: {
+          xAxes: [
+            {
+              type: 'linear',
+              ticks: {
+                beginAtZero: true
+              },
+              scaleLabel: {
+                display: true,
+                labelString: 'Tx count'
+              }
+            }
+          ],
+          yAxes: [
+            {
+              type: 'linear',
+              ticks: {
+                beginAtZero: true
+              },
+              scaleLabel: {
+                display: true,
+                labelString: 'User balance in million sats'
+              }
+            }
+          ]
+        },
+        tooltips: {
+          callbacks: {
+            label: function (tooltipItem, data) {
+              const dataset = data.datasets[tooltipItem.datasetIndex]
+              const dataPoint = dataset.data[tooltipItem.index]
+              return dataPoint.customLabel || ''
+            }
+          }
+        },
         layout: {
           padding: 10
         }
@@ -171,7 +206,7 @@ new Vue({
       data: {
         datasets: [
           {
-            label: 'Balance - TX Count in million sats',
+            label: 'Wallet balance vs transaction count',
             backgroundColor: 'rgb(255, 99, 132)',
             data: []
           }
@@ -291,10 +326,20 @@ new Vue({
       })
 
       const data = filtered.map(user => {
+        const labelUsername = `${user.username ? 'User: ' + user.username + '. ' : ''}`
+        const userBalanceSats = Math.floor(
+          user.balance_msat / 1000
+        ).toLocaleString()
         return {
           x: user.transaction_count,
           y: user.balance_msat / 1000000000,
-          r: 3
+          r: 4,
+          customLabel:
+            labelUsername +
+            'Balance: ' +
+            userBalanceSats +
+            ' sats. Tx count: ' +
+            user.transaction_count
         }
       })
       this.chart1.data.datasets[0].data = data