Compare commits
2 commits
3595da2004
...
e36d4b49e7
| Author | SHA1 | Date | |
|---|---|---|---|
|
e36d4b49e7 | ||
|
|
e50a3f1387 |
5 changed files with 101 additions and 5 deletions
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
|
|||
import org.springframework.data.jpa.repository.Query;
|
||||
import org.springframework.data.repository.query.Param;
|
||||
|
||||
import java.util.List;
|
||||
import java.util.Set;
|
||||
|
||||
public interface ExpenseRepository extends JpaRepository<Expense, Long>, JpaSpecificationExecutor<Expense> {
|
||||
|
|
@ -16,4 +17,7 @@ public interface ExpenseRepository extends JpaRepository<Expense, Long>, JpaSpec
|
|||
|
||||
@Query("SELECT e FROM Expense e JOIN e.debtors d WHERE d.id = :personId")
|
||||
Set<Expense> findDebtorsExpensesByPersonId(@Param("personId") Long personId);
|
||||
|
||||
@Query("SELECT e FROM Expense e WHERE YEAR(e.date) = :year")
|
||||
List<Expense> findAllByYear(@Param("year") int year);
|
||||
}
|
||||
|
|
@ -54,4 +54,8 @@ public class ExpenseService {
|
|||
return (int) repository.count();
|
||||
}
|
||||
|
||||
public List<Expense> findAllByYear(final int year ) {
|
||||
return this.repository.findAllByYear(year);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
"}]" +
|
||||
"});";
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue