From 0702bddc6c1093fb1e7214b8cc813b40e9a60830 Mon Sep 17 00:00:00 2001
From: filippo-ferrari <filippo.ferrari.pr@gmail.com>
Date: Thu, 12 Sep 2024 19:35:44 +0200
Subject: [PATCH] fix: improved tooltip of graph

---
 .../munera/views/dashboard/DashboardView.java   | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/main/java/com/application/munera/views/dashboard/DashboardView.java b/src/main/java/com/application/munera/views/dashboard/DashboardView.java
index dc1e968..5248975 100644
--- a/src/main/java/com/application/munera/views/dashboard/DashboardView.java
+++ b/src/main/java/com/application/munera/views/dashboard/DashboardView.java
@@ -207,8 +207,7 @@ public class DashboardView extends Div {
         StringBuilder data = new StringBuilder("[");
         for (Map.Entry<String, Double> entry : personData.entrySet()) {
             double value = entry.getValue();
-            // Green for positive (credits) and red for negative (debits)
-            String color = value >= 0 ? "#90EE90" : "#FF9999";
+            String color = value >= 0 ? "#90EE90" : "#FF9999"; // Green for positive, red for negative
             data.append("{ y: ").append(value).append(", color: '").append(color).append("' },");
         }
         data.setCharAt(data.length() - 1, ']'); // Replace the last comma with a closing bracket
@@ -237,14 +236,22 @@ public class DashboardView extends Div {
                 "plotOptions: {" +
                 "column: {" +
                 "pointWidth: 50," +
-                "threshold: 0" + // Ensure columns are drawn correctly from the zero line
+                "threshold: 0" +
+                "}" +
+                "}," +
+                "tooltip: {" + // Combine default point format with a custom label
+                "useHTML: true," +
+                "formatter: function() {" +
+                "var label = this.y >= 0 ? 'Credit: ' : 'Debit: '; " +
+                "return '<span style=\"color:' + this.point.color + '\">\u25CF</span> ' + '<b>' + this.x + '</b><br/>' + label + Math.abs(this.y);" +
                 "}" +
                 "}," +
                 "series: [{" +
                 "name: 'Balance'," +
-                "data: " + data + // Use the data fetched from DB
+                "data: " + data +
                 "}]" +
-                "});";    }
+                "});";
+    }
 
     private String generatePlaceholderChartScript(String divId, String title) {
         return "Highcharts.chart('" + divId + "', {" +