From e36d4b49e711d63840e28813c90304cbfd3874fa Mon Sep 17 00:00:00 2001
From: filippo-ferrari <filippo.ferrari.pr@gmail.com>
Date: Tue, 2 Jul 2024 22:18:19 +0200
Subject: [PATCH] feat: added first tentative graph

---
 frontend/index.html                           |  2 +-
 .../application/munera/views/MainLayout.java  |  6 +-
 .../munera/views/expenses/DashboardView.java  | 90 +++++++++++++++++++
 3 files changed, 93 insertions(+), 5 deletions(-)
 create mode 100644 src/main/java/com/application/munera/views/expenses/DashboardView.java
diff --git a/frontend/index.html b/frontend/index.html
index d36e593..cf4a1bf 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -7,7 +7,7 @@ This file is auto-generated by Vaadin.
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <style>
+  <script src="https://code.highcharts.com/highcharts.js"></script>  <style>
     body, #outlet {
       height: 100vh;
       width: 100%;
diff --git a/src/main/java/com/application/munera/views/MainLayout.java b/src/main/java/com/application/munera/views/MainLayout.java
index 5773992..a078beb 100644
--- a/src/main/java/com/application/munera/views/MainLayout.java
+++ b/src/main/java/com/application/munera/views/MainLayout.java
@@ -1,9 +1,6 @@
 package com.application.munera.views;
 
-import com.application.munera.views.expenses.CategoriesView;
-import com.application.munera.views.expenses.EventsView;
-import com.application.munera.views.expenses.ExpensesView;
-import com.application.munera.views.expenses.PeopleView;
+import com.application.munera.views.expenses.*;
 import com.vaadin.flow.component.applayout.AppLayout;
 import com.vaadin.flow.component.applayout.DrawerToggle;
 import com.vaadin.flow.component.html.Footer;
@@ -57,6 +54,7 @@ public class MainLayout extends AppLayout {
         nav.addItem(new SideNavItem("Categories", CategoriesView.class, LineAwesomeIcon.FOLDER.create()));
         nav.addItem(new SideNavItem("People", PeopleView.class, LineAwesomeIcon.USER.create()));
         nav.addItem(new SideNavItem("Events", EventsView.class, LineAwesomeIcon.BANDCAMP.create()));
+        nav.addItem(new SideNavItem("Dashboard", DashboardView.class, LineAwesomeIcon.CHART_LINE_SOLID.create()));
 
         return nav;
     }
diff --git a/src/main/java/com/application/munera/views/expenses/DashboardView.java b/src/main/java/com/application/munera/views/expenses/DashboardView.java
new file mode 100644
index 0000000..1af75fd
--- /dev/null
+++ b/src/main/java/com/application/munera/views/expenses/DashboardView.java
@@ -0,0 +1,90 @@
+package com.application.munera.views.expenses;
+
+import com.application.munera.data.Expense;
+import com.application.munera.services.ExpenseService;
+import com.application.munera.views.MainLayout;
+import com.nimbusds.jose.shaded.gson.Gson;
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.router.Route;
+
+import java.time.Year;
+import java.time.YearMonth;
+import java.time.format.TextStyle;
+import java.util.LinkedHashMap;
+import java.util.List;
+import java.util.Locale;
+import java.util.Map;
+
+//@HtmlImport("frontend://styles/shared-styles.html") // If you have custom styles
+@Route(value = "highcharts-view", layout = MainLayout.class)
+public class DashboardView extends Div {
+
+    private final ExpenseService expenseService;
+
+    public DashboardView(final ExpenseService expenseService) {
+        this.expenseService = expenseService;
+        addClassName("highcharts-view"); // Optional CSS class for styling
+
+        VerticalLayout layout = new VerticalLayout();
+        layout.setSizeFull();
+
+        // Create a div to host the chart
+        Div chartDiv = new Div();
+        chartDiv.setId("chart"); // Assign an ID to this div for later reference
+        chartDiv.getStyle().set("min-height", "400px"); // Set minimum height for the chart
+        layout.add(chartDiv);
+        add(layout);
+
+        String jsInit = generateChartInitializationScript();
+
+        // Execute the JavaScript to initialize the chart
+        getElement().executeJs(jsInit);
+    }
+
+    private String generateChartInitializationScript() {
+        List<Expense> expenses = expenseService.findAllByYear(Year.now().getValue());
+
+        // Prepare data for Highcharts
+        Map<String, Double> monthlyData = new LinkedHashMap<>();
+        YearMonth currentYearMonth = YearMonth.now().withMonth(1); // Start from January
+
+        for (int i = 1; i <= 12; i++) {
+            String monthName = currentYearMonth.getMonth().getDisplayName(TextStyle.SHORT, Locale.ENGLISH);
+            monthlyData.put(monthName, 0.0);
+            currentYearMonth = currentYearMonth.plusMonths(1); // Move to the next month
+        }
+
+        // Populate map with actual data
+        for (Expense expense : expenses) {
+            String monthName = expense.getDate().getMonth().getDisplayName(TextStyle.SHORT, Locale.ENGLISH);
+            // Convert BigDecimal to Double
+            Double amount = expense.getCost().doubleValue();
+            monthlyData.put(monthName, monthlyData.get(monthName) + amount);
+        }
+
+        // Prepare series data for Highcharts
+        StringBuilder data = new StringBuilder("[");
+        for (Map.Entry<String, Double> entry : monthlyData.entrySet()) {
+            data.append(entry.getValue()).append(",");
+        }
+        data.setCharAt(data.length() - 1, ']'); // Replace last comma with closing bracket
+
+        // Generate JavaScript initialization
+        return "Highcharts.chart('chart', {" +
+                "chart: {" +
+                "type: 'column'" +
+                "}," +
+                "title: {" +
+                "text: 'Monthly Expenses for " + Year.now().getValue() + "'" +
+                "}," +
+                "xAxis: {" +
+                "categories: " + new Gson().toJson(monthlyData.keySet()) + // Categories are the month names
+                "}," +
+                "series: [{" +
+                "name: 'Expenses'," +
+                "data: " + data + // Use the data fetched from DB
+                "}]" +
+                "});";
+    }
+}
\ No newline at end of file
