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

add chart into component

Browse Source
This commit is contained in:
dni ⚡ 2024-12-20 08:54:17 +01:00
parent 06c6815ec9
commit bc5f431c3e
No known key found for this signature in database
GPG Key ID: D1F416F29AD26E87
4 changed files with 117 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
lnbits/core/templates/core/wallet.html
View File

@ -167,20 +167,9 @@
</q-card>
</div>
<div class="col-3" v-show="$q.screen.gt.md">
<q-card class="q-ml-md q-pa-none" style="height: 135px">
<q-card-section style="padding: 0">
<canvas
ref="transactionChart"
style="
height: 135px;
width: 100%;
margin: 0;
padding: 0;
transform: translate(-2%, 4%);
"
></canvas>
</q-card-section>
</q-card>
<wallet-payment-chart
:wallet="this.g.wallet"
></wallet-payment-chart>
</div>
</div>

97
lnbits/static/js/components/payment-chart.js
View File

@ -131,3 +131,100 @@ window.app.component('payment-chart', {
}
}
})
window.app.component('wallet-payment-chart', {
template: '#wallet-payment-chart',
name: 'wallet-payment-chart',
props: ['wallet'],
mixins: [window.windowMixin],
data() {
return {
chartData: [],
primaryColor: this.$q.localStorage.getItem('lnbits.primaryColor')
}
},
mounted() {
LNbits.api
.request(
'GET',
'/api/v1/payments/history?group=hour',
this.wallet.adminkey
)
.then(response => {
this.chartData = response.data
this.$nextTick(() => {
this.transactionChart = new Chart(
this.$refs.transactionChart.getContext('2d'),
{
type: 'line',
options: {
responsive: true,
maintainAspectRatio: false,
layout: {
padding: 0,
margin: 0
},
plugins: {
legend: {
display: false
},
title: {
display: false
},
tooltip: {
enabled: true, // Enable tooltips to show data on hover
callbacks: {
// Custom tooltip callback to show amount and time
label: tooltipItem => {
const index = tooltipItem.dataIndex
const transaction = this.chartData[index] // Match tooltip point with transaction
const amount = transaction.balance
return [
`Balance: ${tooltipItem.raw / 1000}sats`, // Display cumulative balance
`Amount: ${amount / 1000}sats`
]
}
}
}
},
elements: {
point: {
radius: 4, // Points will now be visible
hoverRadius: 6 // Increase point size on hover
}
},
scales: {
x: {
display: false
},
y: {
display: false
}
}
},
data: {
labels: this.chartData.map(
tx => new Date(tx.date).toLocaleString() // Use time for labels
),
datasets: [
{
label: 'Cumulative Balance',
data: this.chartData.map(tx => tx.balance / 1000), // Display cumulative balance
backgroundColor: LNbits.utils.hexAlpha(
this.primaryColor,
0.3
),
borderColor: this.primaryColor,
borderWidth: 2,
fill: true,
tension: 0.2
}
]
}
}
)
})
})
.catch(LNbits.utils.notifyApiError)
}
})

81
lnbits/static/js/wallet.js
View File

@ -100,84 +100,6 @@ window.app = Vue.createApp({
}
},
methods: {
computeCumulativeBalance(transactions) {
let balance = 0
return transactions.map(transaction => {
balance += transaction.amount // Use the amount field for the balance
return balance
})
},
initCharts() {
this.transactionChart = new Chart(
this.$refs.transactionChart.getContext('2d'),
{
type: 'line',
options: {
responsive: true,
maintainAspectRatio: false,
layout: {
padding: 0,
margin: 0
},
plugins: {
legend: {
display: false
},
title: {
display: false
},
tooltip: {
enabled: true, // Enable tooltips to show data on hover
callbacks: {
// Custom tooltip callback to show amount and time
label: tooltipItem => {
const index = tooltipItem.dataIndex
const transaction = this.transactions[index] // Match tooltip point with transaction
const amount = transaction.amount
return [
`Balance: ${tooltipItem.raw / 1000}sats`, // Display cumulative balance
`Amount: ${amount / 1000}sats`
]
}
}
}
},
elements: {
point: {
radius: 4, // Points will now be visible
hoverRadius: 6 // Increase point size on hover
}
},
scales: {
x: {
display: false
},
y: {
display: false
}
}
},
data: {
labels: this.transactions.map(
tx => new Date(tx.time).toLocaleString() // Use time for labels
),
datasets: [
{
label: 'Cumulative Balance',
data: this.computeCumulativeBalance(this.transactions),
backgroundColor: LNbits.utils.hexAlpha(this.primaryColor, 0.3),
borderColor: this.primaryColor,
borderWidth: 2,
fill: true,
tension: 0.2
}
]
}
}
)
},
msatoshiFormat(value) {
return LNbits.utils.formatSat(value / 1000)
},
@ -777,9 +699,6 @@ window.app = Vue.createApp({
this.update.currency = this.g.wallet.currency
this.receive.units = ['sat', ...window.currencies]
this.updateFiatBalance()
this.fetchPayments().then(() => {
this.initCharts()
})
},
watch: {
updatePayments() {

17
lnbits/templates/components.vue
View File

@ -973,3 +973,20 @@
</q-dialog>
</span>
</template>
<template id="wallet-payment-chart">
<q-card class="q-ml-md q-pa-none" style="height: 135px">
<q-card-section style="padding: 0">
<canvas
ref="transactionChart"
style="
height: 135px;
width: 100%;
margin: 0;
padding: 0;
transform: translate(-2%, 4%);
"
></canvas>
</q-card-section>
</q-card>
</template>