NapoleonDynamite/munera-vaadin
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: added first tentative graph

Browse source
This commit is contained in:
filippo-ferrari 2024-07-02 22:18:19 +02:00
parent e50a3f1387
commit e36d4b49e7
3 changed files with 93 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/index.html
View file

@ -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%;

6
src/main/java/com/application/munera/views/MainLayout.java
View file

@ -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;
}

90
src/main/java/com/application/munera/views/expenses/DashboardView.java Normal file
View file

@ -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
"}]" +
"});";
}
}