mirror of
https://github.com/lnbits/lnbits.git
synced 2025-03-18 05:41:54 +01:00
added to card, bg idea was terrible
This commit is contained in:
arcbtc
dni ⚡
parent
1f0deaeb2c
commit
3135d519f4
@ -87,89 +87,103 @@
|
||||
</q-card>
|
||||
</div>
|
||||
</q-scroll-area>
|
||||
<q-card
|
||||
:style="$q.screen.lt.md ? {
|
||||
background: $q.screen.lt.md ? 'none !important': ''
|
||||
, boxShadow: $q.screen.lt.md ? 'none !important': ''
|
||||
, margin: $q.screen.lt.md && mobileSimple ? 'auto !important': ''
|
||||
, width: $q.screen.lt.md && mobileSimple ? '90% !important': ''
|
||||
} : ''"
|
||||
>
|
||||
<div
|
||||
v-show="$q.screen.gt.sm"
|
||||
style="width: 100%; height: 100%"
|
||||
class="absolute float-left"
|
||||
>
|
||||
<canvas ref="transactionChart"></canvas>
|
||||
</div>
|
||||
<q-card-section>
|
||||
<h3 class="q-my-none text-no-wrap">
|
||||
<strong v-text="formattedBalance"></strong>
|
||||
<small> {{LNBITS_DENOMINATION}}</small>
|
||||
<lnbits-update-balance
|
||||
:wallet_id="this.g.wallet.id"
|
||||
@credit-value="handleBalanceUpdate"
|
||||
class="q-ml-md"
|
||||
></lnbits-update-balance>
|
||||
</h3>
|
||||
<div class="row">
|
||||
<div class="col-lg-9 col-12">
|
||||
|
||||
<q-card
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div v-if="g.wallet.currency">
|
||||
<span
|
||||
class="text-h5 text-italic"
|
||||
v-text="formattedFiatBalance"
|
||||
style="opacity: 0.75"
|
||||
></span>
|
||||
:style="$q.screen.lt.md ? {
|
||||
background: $q.screen.lt.md ? 'none !important': ''
|
||||
, boxShadow: $q.screen.lt.md ? 'none !important': ''
|
||||
, margin: $q.screen.lt.md && mobileSimple ? 'auto !important': ''
|
||||
, width: $q.screen.lt.md && mobileSimple ? '90% !important': ''
|
||||
} : ''"
|
||||
>
|
||||
|
||||
<q-card-section>
|
||||
<h3 class="q-my-none text-no-wrap">
|
||||
<strong v-text="formattedBalance"></strong>
|
||||
<small> {{LNBITS_DENOMINATION}}</small>
|
||||
<lnbits-update-balance
|
||||
:wallet_id="this.g.wallet.id"
|
||||
@credit-value="handleBalanceUpdate"
|
||||
class="q-ml-md"
|
||||
></lnbits-update-balance>
|
||||
</h3>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div v-if="g.wallet.currency">
|
||||
<span
|
||||
class="text-h5 text-italic"
|
||||
v-text="formattedFiatBalance"
|
||||
style="opacity: 0.75"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-btn
|
||||
@click="mobileSimple = !mobileSimple"
|
||||
color="primary"
|
||||
class="float-right lt-md"
|
||||
size="sm"
|
||||
flat
|
||||
:icon="mobileSimple ? 'unfold_more' : 'unfold_less'"
|
||||
:label="mobileSimple ? $t('more') : $t('less')"
|
||||
></q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<div class="row q-pb-md q-px-md q-col-gutter-md gt-sm">
|
||||
<div class="col">
|
||||
<q-btn
|
||||
unelevated
|
||||
color="primary"
|
||||
class="full-width"
|
||||
@click="showParseDialog"
|
||||
:label="$t('paste_request')"
|
||||
></q-btn>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-btn
|
||||
@click="mobileSimple = !mobileSimple"
|
||||
unelevated
|
||||
color="primary"
|
||||
class="float-right lt-md"
|
||||
size="sm"
|
||||
flat
|
||||
:icon="mobileSimple ? 'unfold_more' : 'unfold_less'"
|
||||
:label="mobileSimple ? $t('more') : $t('less')"
|
||||
class="full-width"
|
||||
@click="showReceiveDialog"
|
||||
:label="$t('create_invoice')"
|
||||
></q-btn>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-btn
|
||||
unelevated
|
||||
color="secondary"
|
||||
icon="photo_camera"
|
||||
@click="showCamera"
|
||||
:label="$t('scan')"
|
||||
>
|
||||
<q-tooltip
|
||||
><span v-text="$t('camera_tooltip')"></span
|
||||
></q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<div class="row q-pb-md q-px-md q-col-gutter-md gt-sm">
|
||||
<div class="col">
|
||||
<q-btn
|
||||
unelevated
|
||||
color="primary"
|
||||
class="full-width"
|
||||
@click="showParseDialog"
|
||||
:label="$t('paste_request')"
|
||||
></q-btn>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-btn
|
||||
unelevated
|
||||
color="primary"
|
||||
class="full-width"
|
||||
@click="showReceiveDialog"
|
||||
:label="$t('create_invoice')"
|
||||
></q-btn>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-btn
|
||||
unelevated
|
||||
color="secondary"
|
||||
icon="photo_camera"
|
||||
@click="showCamera"
|
||||
:label="$t('scan')"
|
||||
>
|
||||
<q-tooltip
|
||||
><span v-text="$t('camera_tooltip')"></span
|
||||
></q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
</div>
|
||||
</q-card>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<q-card
|
||||
:style="
|
||||
$q.screen.lt.md
|
||||
|
||||
@ -101,9 +101,13 @@ window.app = Vue.createApp({
|
||||
},
|
||||
methods: {
|
||||
computeCumulativeBalance(transactions) {
|
||||
let balance = 0
|
||||
return transactions.map(amount => (balance += amount))
|
||||
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'),
|
||||
@ -114,49 +118,66 @@ window.app = Vue.createApp({
|
||||
maintainAspectRatio: false,
|
||||
layout: {
|
||||
padding: 0,
|
||||
margin: 0 // Remove padding around the chart
|
||||
margin: 0,
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
display: false,
|
||||
},
|
||||
title: {
|
||||
display: false
|
||||
}
|
||||
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: 0
|
||||
}
|
||||
radius: 4, // Points will now be visible
|
||||
hoverRadius: 6, // Increase point size on hover
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: false
|
||||
display: false,
|
||||
},
|
||||
y: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
data: {
|
||||
labels: this.transactions.map(tx =>
|
||||
new Date(tx.date).toLocaleDateString()
|
||||
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.05),
|
||||
backgroundColor: LNbits.utils.hexAlpha(this.primaryColor, 0.3),
|
||||
borderColor: this.primaryColor,
|
||||
borderWidth: 1,
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.2
|
||||
}
|
||||
]
|
||||
}
|
||||
tension: 0.2,
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
)
|
||||
);
|
||||
},
|
||||
|
||||
|
||||
msatoshiFormat(value) {
|
||||
return LNbits.utils.formatSat(value / 1000)
|
||||
@ -726,7 +747,13 @@ window.app = Vue.createApp({
|
||||
.then(response => {
|
||||
console.log(response.data.data)
|
||||
for (let payment of response.data.data) {
|
||||
this.transactions.push(payment.amount)
|
||||
record = {
|
||||
payment_hash: payment.payment_hash,
|
||||
amount: payment.amount,
|
||||
description: payment.description,
|
||||
time: payment.time
|
||||
}
|
||||
this.transactions.push(record)
|
||||
}
|
||||
console.log(this.transactions)
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user