From 9e65f05906df6ff9470af9e9a049287429e9784d Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 22 Jun 2025 19:53:02 +0200
Subject: [PATCH] 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.

---
 static/js/index.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

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