highperfocused/lnbits
1
0
Fork 0
mirror of https://github.com/lnbits/lnbits.git synced 2025-03-26 17:51:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: UI / UX improvements to Users balance / tx chart (#2672)

Browse Source 
* 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
This commit is contained in:
blackcoffeexbt 2024-09-11 08:40:41 +01:00 committed by GitHub
parent 6c8d56e40c
commit 7a5e7fbd8c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 49 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lnbits/core/templates/users/index.html
View File

@ -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>

49
lnbits/static/js/users.js
View File

@ -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