Michilis/lnbits
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Chart polish (#2973)

Browse Source
This commit is contained in:
Vlad Stan
2025-02-17 14:30:16 +02:00
committed by GitHub
parent 60de308c8f
commit c08623277e
7 changed files with 170 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lnbits/static/js/payments.js
+34 -27
View File
@@ -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
lnbits/static/js/wallet.js
+30 -9
View File
@@ -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
)
}
]
}