fix: wallet chart render racecondition (#3595)

This commit is contained in:
dni ⚡ 2025-11-27 13:31:17 +01:00 committed by GitHub
parent 1057b4693f
commit b5f3a46feb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 45 additions and 46 deletions

File diff suppressed because one or more lines are too long

View file

@ -102,63 +102,62 @@ window.app.component('lnbits-wallet-charts', {
if (this.walletBalanceInOut) { if (this.walletBalanceInOut) {
this.walletBalanceInOut.destroy() this.walletBalanceInOut.destroy()
} }
this.walletBalanceInOut = new Chart( const ref = this.$refs.walletBalanceInOut
this.$refs.walletBalanceInOut.getContext('2d'), if (!ref) return
{ this.walletBalanceInOut = new Chart(ref.getContext('2d'), {
type: 'bar', type: 'bar',
options: this.barOptions, options: this.barOptions,
data: { data: {
labels, labels,
datasets: [ datasets: [
{ {
label: 'Balance In', label: 'Balance In',
borderRadius: 5, borderRadius: 5,
data: data.map(s => s.balance_in), data: data.map(s => s.balance_in),
backgroundColor: this.colorPrimary backgroundColor: this.colorPrimary
}, },
{ {
label: 'Balance Out', label: 'Balance Out',
borderRadius: 5, borderRadius: 5,
data: data.map(s => s.balance_out), data: data.map(s => s.balance_out),
backgroundColor: this.colorSecondary backgroundColor: this.colorSecondary
} }
] ]
}
} }
) })
}, },
drawPaymentInOut(data, labels) { drawPaymentInOut(data, labels) {
if (this.walletPaymentInOut) { if (this.walletPaymentInOut) {
this.walletPaymentInOut.destroy() this.walletPaymentInOut.destroy()
} }
this.walletPaymentInOut = new Chart( const ref = this.$refs.walletPaymentInOut
this.$refs.walletPaymentInOut.getContext('2d'), if (!ref) return
{ this.walletPaymentInOut = new Chart(ref.getContext('2d'), {
type: 'bar', type: 'bar',
options: this.barOptions, options: this.barOptions,
data: { data: {
labels, labels,
datasets: [ datasets: [
{ {
label: 'Payments In', label: 'Payments In',
data: data.map(s => s.count_in), data: data.map(s => s.count_in),
backgroundColor: this.colorPrimary backgroundColor: this.colorPrimary
}, },
{ {
label: 'Payments Out', label: 'Payments Out',
data: data.map(s => -s.count_out), data: data.map(s => -s.count_out),
backgroundColor: this.colorSecondary backgroundColor: this.colorSecondary
} }
] ]
}
} }
) })
}, },
drawBalanceChart(data, labels) { drawBalanceChart(data, labels) {
const ref = this.$refs.walletBalanceChart
if (this.walletBalanceChart) { if (this.walletBalanceChart) {
this.walletBalanceChart.destroy() this.walletBalanceChart.destroy()
} }
const ref = this.$refs.walletBalanceChart
if (!ref) return
this.walletBalanceChart = new Chart(ref.getContext('2d'), { this.walletBalanceChart = new Chart(ref.getContext('2d'), {
type: 'line', type: 'line',
options: { options: {