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>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<style>
|
<script src="https://code.highcharts.com/highcharts.js"></script> <style>
|
||||||
body, #outlet {
|
body, #outlet {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@ import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
|
||||||
import org.springframework.data.jpa.repository.Query;
|
import org.springframework.data.jpa.repository.Query;
|
||||||
import org.springframework.data.repository.query.Param;
|
import org.springframework.data.repository.query.Param;
|
||||||
|
|
||||||
|
import java.util.List;
|
||||||
import java.util.Set;
|
import java.util.Set;
|
||||||
|
|
||||||
public interface ExpenseRepository extends JpaRepository<Expense, Long>, JpaSpecificationExecutor<Expense> {
|
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")
|
@Query("SELECT e FROM Expense e JOIN e.debtors d WHERE d.id = :personId")
|
||||||
Set<Expense> findDebtorsExpensesByPersonId(@Param("personId") Long 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();
|
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;
|
package com.application.munera.views;
|
||||||
|
|
||||||
import com.application.munera.views.expenses.CategoriesView;
|
import com.application.munera.views.expenses.*;
|
||||||
import com.application.munera.views.expenses.EventsView;
|
|
||||||
import com.application.munera.views.expenses.ExpensesView;
|
|
||||||
import com.application.munera.views.expenses.PeopleView;
|
|
||||||
import com.vaadin.flow.component.applayout.AppLayout;
|
import com.vaadin.flow.component.applayout.AppLayout;
|
||||||
import com.vaadin.flow.component.applayout.DrawerToggle;
|
import com.vaadin.flow.component.applayout.DrawerToggle;
|
||||||
import com.vaadin.flow.component.html.Footer;
|
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("Categories", CategoriesView.class, LineAwesomeIcon.FOLDER.create()));
|
||||||
nav.addItem(new SideNavItem("People", PeopleView.class, LineAwesomeIcon.USER.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("Events", EventsView.class, LineAwesomeIcon.BANDCAMP.create()));
|
||||||
|
nav.addItem(new SideNavItem("Dashboard", DashboardView.class, LineAwesomeIcon.CHART_LINE_SOLID.create()));
|
||||||
|
|
||||||
return nav;
|
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