From 9de7d1a46749343754c9b0aec8fbb9f9544bdf10 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Tue, 23 Dec 2025 11:14:07 +0100
Subject: [PATCH] feat: enhance tooltip functionality in BalanceLineChart;
 implement custom content rendering for improved data presentation and user
 interaction, including dynamic styling and formatting of displayed values

---
 components/statistics/balance-line-chart.tsx | 37 +++++++++++++++++---
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/components/statistics/balance-line-chart.tsx b/components/statistics/balance-line-chart.tsx
index fdbefee..3e03609 100644
--- a/components/statistics/balance-line-chart.tsx
+++ b/components/statistics/balance-line-chart.tsx
@@ -103,11 +103,38 @@ export function BalanceLineChart({
                   tick={{ fill: "var(--muted-foreground)" }}
                 />
                 <Tooltip
-                  formatter={(value: number) => formatCurrency(value)}
-                  contentStyle={{
-                    backgroundColor: "var(--card)",
-                    border: "1px solid var(--border)",
-                    borderRadius: "8px",
+                  content={({ active, payload }) => {
+                    if (!active || !payload?.length) return null;
+                    return (
+                      <div
+                        className="px-3 py-2 rounded-lg shadow-lg"
+                        style={{
+                          backgroundColor: "var(--popover)",
+                          border: "1px solid var(--border)",
+                          opacity: 1,
+                          backdropFilter: "blur(8px)",
+                        }}
+                      >
+                        {payload.map((entry, index) => (
+                          <div
+                            key={`tooltip-${index}`}
+                            className="flex items-center gap-2"
+                            style={{ color: entry.color }}
+                          >
+                            <div
+                              className="w-3 h-3 rounded-full"
+                              style={{ backgroundColor: entry.color }}
+                            />
+                            <span className="text-sm font-medium">
+                              {entry.name}:
+                            </span>
+                            <span className="text-sm font-semibold">
+                              {formatCurrency(entry.value as number)}
+                            </span>
+                          </div>
+                        ))}
+                      </div>
+                    );
                   }}
                 />
                 {mode === "aggregated" ? (