lnbits-exts/satmachineclient
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions 2

Enhance chart styling and interactivity: Improve placeholder chart appearance with enhanced styling, update Chart.js configuration for better visual clarity, and add tooltip functionality for displaying values in a user-friendly format.

Browse source
This commit is contained in:
padreug 2025-06-22 19:53:02 +02:00
parent 6da61d953b
commit 9e65f05906
1 changed files with 9 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

12
static/js/index.js
View file

@ -327,7 +327,7 @@ window.app = Vue.createApp({
placeholderGradient.addColorStop(0, 'rgba(255, 149, 0, 0.3)') placeholderGradient.addColorStop(0, 'rgba(255, 149, 0, 0.3)')
placeholderGradient.addColorStop(1, 'rgba(255, 149, 0, 0.05)') placeholderGradient.addColorStop(1, 'rgba(255, 149, 0, 0.05)')
// Show placeholder chart // Show placeholder chart with enhanced styling
this.dcaChart = new Chart(ctx, { this.dcaChart = new Chart(ctx, {
type: 'line', type: 'line',
data: { data: {
@ -343,7 +343,8 @@ window.app = Vue.createApp({
pointRadius: 8, pointRadius: 8,
pointBackgroundColor: '#FFFFFF', pointBackgroundColor: '#FFFFFF',
pointBorderColor: '#FF9500', pointBorderColor: '#FF9500',
pointBorderWidth: 3 pointBorderWidth: 3,
pointHoverRadius: 10
}] }]
}, },
options: { options: {
@ -357,7 +358,12 @@ window.app = Vue.createApp({
bodyColor: '#FFFFFF', bodyColor: '#FFFFFF',
borderColor: '#FF9500', borderColor: '#FF9500',
borderWidth: 2, borderWidth: 2,
cornerRadius: 8 cornerRadius: 8,
callbacks: {
label: function(context) {
return `${context.parsed.y.toLocaleString()} sats`
}
}
} }
}, },
scales: { scales: {