From 2f3fb42e19c2f24fd46d6e098ca110281dbc0450 Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Sat, 21 May 2022 13:05:04 +0200
Subject: [PATCH] Fixed #680 - show selected date range in charts
---
.../budgetmaster/charts/ChartController.java | 13 +++++++++-
.../budgetmaster/charts/DefaultCharts.java | 24 +++++++++----------
.../main/resources/charts/AccountSumPerDay.js | 2 +-
...hlyIncomesAndExpendituresPerCategoryBar.js | 2 +-
...MonthlyIncomesAndExpendituresPerYearBar.js | 2 +-
.../AverageTransactionAmountPerCategoryBar.js | 2 +-
.../src/main/resources/charts/Default.js | 8 ++++++-
.../IncomesAndExpendituresByCategoryBar.js | 2 +-
.../IncomesAndExpendituresByCategoryPie.js | 2 +-
.../IncomesAndExpendituresPerMonthBar.js | 2 +-
...omesAndExpendituresPerMonthByCategories.js | 2 +-
.../IncomesAndExpendituresPerMonthLine.js | 2 +-
.../IncomesAndExpendituresPerYearBar.js | 2 +-
...comesAndExpendituresPerYearByCategories.js | 2 +-
.../src/main/resources/charts/RestPerMonth.js | 2 +-
.../src/main/resources/static/js/charts.js | 12 ++++++++++
.../resources/templates/charts/charts.ftl | 4 ++++
17 files changed, 59 insertions(+), 26 deletions(-)
diff --git a/BudgetMasterServer/src/main/java/de/deadlocker8/budgetmaster/charts/ChartController.java b/BudgetMasterServer/src/main/java/de/deadlocker8/budgetmaster/charts/ChartController.java
index da43e1e44..88e4d83a2 100644
--- a/BudgetMasterServer/src/main/java/de/deadlocker8/budgetmaster/charts/ChartController.java
+++ b/BudgetMasterServer/src/main/java/de/deadlocker8/budgetmaster/charts/ChartController.java
@@ -7,6 +7,7 @@ import com.google.gson.JsonSerializer;
import de.deadlocker8.budgetmaster.controller.BaseController;
import de.deadlocker8.budgetmaster.filter.FilterConfiguration;
import de.deadlocker8.budgetmaster.filter.FilterHelpersService;
+import de.deadlocker8.budgetmaster.services.DateService;
import de.deadlocker8.budgetmaster.services.HelpersService;
import de.deadlocker8.budgetmaster.transactions.Transaction;
import de.deadlocker8.budgetmaster.transactions.TransactionService;
@@ -25,6 +26,7 @@ import org.springframework.web.bind.annotation.*;
import org.springframework.web.context.request.WebRequest;
import javax.servlet.http.HttpServletRequest;
+import java.text.MessageFormat;
import java.time.LocalDate;
import java.time.format.DateTimeFormatter;
import java.util.ArrayList;
@@ -49,6 +51,7 @@ public class ChartController extends BaseController
public static final String GROUP_TYPES = "groupTypes";
public static final String CUSTOM_CHARTS = "customCharts";
public static final String DEFAULT_CHARTS = "defaultCharts";
+ public static final String DATE_RANGE = "dateRange";
}
private static class ReturnValues
@@ -71,14 +74,16 @@ public class ChartController extends BaseController
private final HelpersService helpers;
private final FilterHelpersService filterHelpersService;
private final TransactionService transactionService;
+ private final DateService dateService;
@Autowired
- public ChartController(ChartService chartService, HelpersService helpers, FilterHelpersService filterHelpersService, TransactionService transactionService)
+ public ChartController(ChartService chartService, HelpersService helpers, FilterHelpersService filterHelpersService, TransactionService transactionService, DateService dateService)
{
this.chartService = chartService;
this.helpers = helpers;
this.filterHelpersService = filterHelpersService;
this.transactionService = transactionService;
+ this.dateService = dateService;
}
@GetMapping
@@ -121,9 +126,15 @@ public class ChartController extends BaseController
model.addAttribute(ModelAttributes.TRANSACTION_DATA, transactionJson);
model.addAttribute(ModelAttributes.DISPLAY_TYPES, ChartDisplayType.values());
model.addAttribute(ModelAttributes.GROUP_TYPES, ChartGroupType.values());
+ model.addAttribute(ModelAttributes.DATE_RANGE, getDateRange(chartSettings));
return ReturnValues.SHOW_ALL;
}
+ private String getDateRange(ChartSettings chartSettings)
+ {
+ return MessageFormat.format("{0} - {1}", dateService.getDateStringNormal(chartSettings.getStartDate()), dateService.getDateStringNormal(chartSettings.getEndDate()));
+ }
+
/**
* If a chart is requested for a specific account (the currently selected account) the sign of transfers must be corrected accordingly.
* Example: Two accounts: Account_A and Account_B. One Transfer from Account_A to Account_B with an amount of 100€.
diff --git a/BudgetMasterServer/src/main/java/de/deadlocker8/budgetmaster/charts/DefaultCharts.java b/BudgetMasterServer/src/main/java/de/deadlocker8/budgetmaster/charts/DefaultCharts.java
index 1c9f805d3..6e25a5d41 100644
--- a/BudgetMasterServer/src/main/java/de/deadlocker8/budgetmaster/charts/DefaultCharts.java
+++ b/BudgetMasterServer/src/main/java/de/deadlocker8/budgetmaster/charts/DefaultCharts.java
@@ -20,51 +20,51 @@ public class DefaultCharts
private static final Chart CHART_ACCOUNT_SUM_PER_DAY = new Chart("charts.default.accountSumPerDay",
getChartFromFile("charts/AccountSumPerDay.js"),
- ChartType.DEFAULT, 11, ChartDisplayType.LINE, ChartGroupType.NONE, "accountSumPerDay.png");
+ ChartType.DEFAULT, 15, ChartDisplayType.LINE, ChartGroupType.NONE, "accountSumPerDay.png");
private static final Chart CHART_INCOMES_AND_EXPENDITURES_PER_MONTH_BAR = new Chart("charts.default.incomesAndExpendituresPerMonthBar",
getChartFromFile("charts/IncomesAndExpendituresPerMonthBar.js"),
- ChartType.DEFAULT, 11, ChartDisplayType.BAR, ChartGroupType.MONTH, "incomesAndExpendituresPerMonthBar.png");
+ ChartType.DEFAULT, 12, ChartDisplayType.BAR, ChartGroupType.MONTH, "incomesAndExpendituresPerMonthBar.png");
private static final Chart CHART_INCOMES_AND_EXPENDITURES_PER_MONTH_LINE = new Chart("charts.default.incomesAndExpendituresPerMonthLine",
getChartFromFile("charts/IncomesAndExpendituresPerMonthLine.js"),
- ChartType.DEFAULT, 11, ChartDisplayType.LINE, ChartGroupType.MONTH, "incomesAndExpendituresPerMonthLine.png");
+ ChartType.DEFAULT, 12, ChartDisplayType.LINE, ChartGroupType.MONTH, "incomesAndExpendituresPerMonthLine.png");
private static final Chart CHART_INCOMES_AND_EXPENDITURES_BY_CATEGORY_BAR = new Chart("charts.default.incomesAndExpendituresByCategoryBar",
getChartFromFile("charts/IncomesAndExpendituresByCategoryBar.js"),
- ChartType.DEFAULT, 8, ChartDisplayType.BAR, ChartGroupType.NONE, "incomesAndExpendituresByCategoryBar.png");
+ ChartType.DEFAULT, 9, ChartDisplayType.BAR, ChartGroupType.NONE, "incomesAndExpendituresByCategoryBar.png");
private static final Chart CHART_INCOMES_AND_EXPENDITURES_BY_CATEGORY_PIE = new Chart("charts.default.incomesAndExpendituresByCategoryPie",
getChartFromFile("charts/IncomesAndExpendituresByCategoryPie.js"),
- ChartType.DEFAULT, 8, ChartDisplayType.PIE, ChartGroupType.NONE, "incomesAndExpendituresByCategoryPie.png");
+ ChartType.DEFAULT, 9, ChartDisplayType.PIE, ChartGroupType.NONE, "incomesAndExpendituresByCategoryPie.png");
private static final Chart CHART_INCOMES_AND_EXPENDITURES_PER_MONTH_BY_CATEGORIES = new Chart("charts.default.incomesAndExpendituresPerMonthByCategories",
getChartFromFile("charts/IncomesAndExpendituresPerMonthByCategories.js"),
- ChartType.DEFAULT, 23, ChartDisplayType.BAR, ChartGroupType.MONTH, "incomesAndExpendituresPerMonthByCategories.png");
+ ChartType.DEFAULT, 24, ChartDisplayType.BAR, ChartGroupType.MONTH, "incomesAndExpendituresPerMonthByCategories.png");
private static final Chart CHART_REST_PER_MONTH = new Chart("charts.default.restPerMonth",
getChartFromFile("charts/RestPerMonth.js"),
- ChartType.DEFAULT, 7, ChartDisplayType.BAR, ChartGroupType.MONTH, "restPerMonth.png");
+ ChartType.DEFAULT, 8, ChartDisplayType.BAR, ChartGroupType.MONTH, "restPerMonth.png");
private static final Chart CHART_INCOMES_AND_EXPENDITURES_PER_YEAR_BAR = new Chart("charts.default.incomesAndExpendituresPerYearBar",
getChartFromFile("charts/IncomesAndExpendituresPerYearBar.js"),
- ChartType.DEFAULT, 6, ChartDisplayType.BAR, ChartGroupType.YEAR, "incomesAndExpendituresPerYearBar.png");
+ ChartType.DEFAULT, 7, ChartDisplayType.BAR, ChartGroupType.YEAR, "incomesAndExpendituresPerYearBar.png");
private static final Chart CHART_INCOMES_AND_EXPENDITURES_PER_YEAR_BY_CATEGORIES = new Chart("charts.default.incomesAndExpendituresPerYearByCategories",
getChartFromFile("charts/IncomesAndExpendituresPerYearByCategories.js"),
- ChartType.DEFAULT, 3, ChartDisplayType.BAR, ChartGroupType.YEAR, "incomesAndExpendituresPerYearByCategories.png");
+ ChartType.DEFAULT, 4, ChartDisplayType.BAR, ChartGroupType.YEAR, "incomesAndExpendituresPerYearByCategories.png");
private static final Chart CHART_AVERAGE_TRANSACTION_AMOUNT_PER_CATEGORY = new Chart("charts.default.averageTransactionAmountPerCategory",
getChartFromFile("charts/AverageTransactionAmountPerCategoryBar.js"),
- ChartType.DEFAULT, 9, ChartDisplayType.BAR, ChartGroupType.NONE, "averageTransactionAmountPerCategory.png");
+ ChartType.DEFAULT, 10, ChartDisplayType.BAR, ChartGroupType.NONE, "averageTransactionAmountPerCategory.png");
private static final Chart CHART_AVERAGE_MONTHLY_INCOMES_AND_EXPENDITURES_PER_YEAR_BAR = new Chart("charts.default.averageMonthlyIncomesAndExpendituresPerYearBar",
getChartFromFile("charts/AverageMonthlyIncomesAndExpendituresPerYearBar.js"),
- ChartType.DEFAULT, 9, ChartDisplayType.BAR, ChartGroupType.YEAR, "averageMonthlyIncomesAndExpendituresPerYearBar.png");
+ ChartType.DEFAULT, 10, ChartDisplayType.BAR, ChartGroupType.YEAR, "averageMonthlyIncomesAndExpendituresPerYearBar.png");
private static final Chart CHART_AVERAGE_MONTHLY_INCOMES_AND_EXPENDITURES_PER_CATEGORY_BAR = new Chart("charts.default.averageMonthlyIncomesAndExpendituresPerCategoryBar",
getChartFromFile("charts/AverageMonthlyIncomesAndExpendituresPerCategoryBar.js"),
- ChartType.DEFAULT, 1, ChartDisplayType.BAR, ChartGroupType.NONE, "averageMonthlyIncomesAndExpendituresPerCategoryBar.png");
+ ChartType.DEFAULT, 2, ChartDisplayType.BAR, ChartGroupType.NONE, "averageMonthlyIncomesAndExpendituresPerCategoryBar.png");
private DefaultCharts()
{
diff --git a/BudgetMasterServer/src/main/resources/charts/AccountSumPerDay.js b/BudgetMasterServer/src/main/resources/charts/AccountSumPerDay.js
index 9ed8a39ca..8e8429a80 100644
--- a/BudgetMasterServer/src/main/resources/charts/AccountSumPerDay.js
+++ b/BudgetMasterServer/src/main/resources/charts/AccountSumPerDay.js
@@ -60,7 +60,7 @@ var plotlyData = [
// Add your Plotly layout settings here (optional)
var plotlyLayout = {
title: {
- text: localizedTitle,
+ text: formatChartTitle(localizedTitle, localizedDateRange),
},
yaxis: {
title: localizedData['axisY'] + localizedCurrency,
diff --git a/BudgetMasterServer/src/main/resources/charts/AverageMonthlyIncomesAndExpendituresPerCategoryBar.js b/BudgetMasterServer/src/main/resources/charts/AverageMonthlyIncomesAndExpendituresPerCategoryBar.js
index 8ab1d393d..b09348d31 100644
--- a/BudgetMasterServer/src/main/resources/charts/AverageMonthlyIncomesAndExpendituresPerCategoryBar.js
+++ b/BudgetMasterServer/src/main/resources/charts/AverageMonthlyIncomesAndExpendituresPerCategoryBar.js
@@ -72,7 +72,7 @@ for(var j = 0; j < categoryNames.length; j++)
// Add your Plotly layout settings here (optional)
var plotlyLayout = {
title: {
- text: localizedTitle
+ text: formatChartTitle(localizedTitle, localizedDateRange),
},
xaxis: {
},
diff --git a/BudgetMasterServer/src/main/resources/charts/AverageMonthlyIncomesAndExpendituresPerYearBar.js b/BudgetMasterServer/src/main/resources/charts/AverageMonthlyIncomesAndExpendituresPerYearBar.js
index 8aa305b61..47470435b 100644
--- a/BudgetMasterServer/src/main/resources/charts/AverageMonthlyIncomesAndExpendituresPerYearBar.js
+++ b/BudgetMasterServer/src/main/resources/charts/AverageMonthlyIncomesAndExpendituresPerYearBar.js
@@ -96,7 +96,7 @@ var plotlyData = [
// Add your Plotly layout settings here (optional)
var plotlyLayout = {
title: {
- text: localizedTitle
+ text: formatChartTitle(localizedTitle, localizedDateRange),
},
yaxis: {
title: localizedData['axisY'] + ' ' + localizedCurrency,
diff --git a/BudgetMasterServer/src/main/resources/charts/AverageTransactionAmountPerCategoryBar.js b/BudgetMasterServer/src/main/resources/charts/AverageTransactionAmountPerCategoryBar.js
index cd69d8e2f..b604e7b75 100644
--- a/BudgetMasterServer/src/main/resources/charts/AverageTransactionAmountPerCategoryBar.js
+++ b/BudgetMasterServer/src/main/resources/charts/AverageTransactionAmountPerCategoryBar.js
@@ -64,7 +64,7 @@ for(var j = 0; j < categoryNames.length; j++)
// Add your Plotly layout settings here (optional)
var plotlyLayout = {
title: {
- text: localizedTitle
+ text: formatChartTitle(localizedTitle, localizedDateRange),
},
xaxis: {
},
diff --git a/BudgetMasterServer/src/main/resources/charts/Default.js b/BudgetMasterServer/src/main/resources/charts/Default.js
index a8daf3ddc..7bd9d7f54 100644
--- a/BudgetMasterServer/src/main/resources/charts/Default.js
+++ b/BudgetMasterServer/src/main/resources/charts/Default.js
@@ -14,7 +14,13 @@ var plotlyData = [{
}];
// Add your Plotly layout settings here (optional)
-var plotlyLayout = {};
+var plotlyLayout = {
+ title: {
+ // localizedTitle and localizedDateRange are the only available variables starting
+ // with "localized" inside custom charts!
+ text: formatChartTitle(localizedTitle, localizedDateRange),
+ },
+};
// Add your Plotly configuration settings here (optional)
var plotlyConfig = {
diff --git a/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresByCategoryBar.js b/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresByCategoryBar.js
index 790ad279c..f1ef86e57 100644
--- a/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresByCategoryBar.js
+++ b/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresByCategoryBar.js
@@ -100,7 +100,7 @@ for(var j = 0; j < categoryNames.length; j++)
// Add your Plotly layout settings here (optional)
var plotlyLayout = {
title: {
- text: localizedTitle
+ text: formatChartTitle(localizedTitle, localizedDateRange),
},
xaxis: {
showgrid: false,
diff --git a/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresByCategoryPie.js b/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresByCategoryPie.js
index ce8501582..66d12bb48 100644
--- a/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresByCategoryPie.js
+++ b/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresByCategoryPie.js
@@ -106,7 +106,7 @@ plotlyData = plotlyData.concat(addSeries(expenditureHandler, 1));
// Add your Plotly layout settings here (optional)
var plotlyLayout = {
title: {
- text: localizedTitle
+ text: formatChartTitle(localizedTitle, localizedDateRange),
},
hovermode: 'closest', // show hover popup only for hovered item
grid: {rows: 1, columns: 2},
diff --git a/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresPerMonthBar.js b/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresPerMonthBar.js
index 812b63a56..b0f0a346b 100644
--- a/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresPerMonthBar.js
+++ b/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresPerMonthBar.js
@@ -73,7 +73,7 @@ var plotlyData = [
// Add your Plotly layout settings here (optional)
var plotlyLayout = {
title: {
- text: localizedTitle
+ text: formatChartTitle(localizedTitle, localizedDateRange),
},
yaxis: {
title: localizedData['axisY'] + localizedCurrency,
diff --git a/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresPerMonthByCategories.js b/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresPerMonthByCategories.js
index 5885a8291..4bd71aea8 100644
--- a/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresPerMonthByCategories.js
+++ b/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresPerMonthByCategories.js
@@ -104,7 +104,7 @@ for(var i = 0; i < dates.length; i++)
var plotlyData = [];
var plotlyLayout = {
title: {
- text: localizedTitle
+ text: formatChartTitle(localizedTitle, localizedDateRange),
},
barmode: "stack",
hovermode: 'closest', // show hover popup only for hovered item
diff --git a/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresPerMonthLine.js b/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresPerMonthLine.js
index 773229e3a..162e918f0 100644
--- a/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresPerMonthLine.js
+++ b/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresPerMonthLine.js
@@ -73,7 +73,7 @@ var plotlyData = [
// Add your Plotly layout settings here (optional)
var plotlyLayout = {
title: {
- text: localizedTitle
+ text: formatChartTitle(localizedTitle, localizedDateRange),
},
yaxis: {
title: localizedData['axisY'] + localizedCurrency,
diff --git a/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresPerYearBar.js b/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresPerYearBar.js
index 42aa9a831..d03e7f05f 100644
--- a/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresPerYearBar.js
+++ b/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresPerYearBar.js
@@ -73,7 +73,7 @@ var plotlyData = [
// Add your Plotly layout settings here (optional)
var plotlyLayout = {
title: {
- text: localizedTitle
+ text: formatChartTitle(localizedTitle, localizedDateRange),
},
yaxis: {
title: localizedData['axisY'] + localizedCurrency,
diff --git a/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresPerYearByCategories.js b/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresPerYearByCategories.js
index 7b40c2b3f..dcb1e0b4c 100644
--- a/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresPerYearByCategories.js
+++ b/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresPerYearByCategories.js
@@ -104,7 +104,7 @@ for(var i = 0; i < dates.length; i++)
var plotlyData = [];
var plotlyLayout = {
title: {
- text: localizedTitle
+ text: formatChartTitle(localizedTitle, localizedDateRange),
},
barmode: "stack",
hovermode: 'closest', // show hover popup only for hovered item
diff --git a/BudgetMasterServer/src/main/resources/charts/RestPerMonth.js b/BudgetMasterServer/src/main/resources/charts/RestPerMonth.js
index 769d63cf9..2e188903f 100644
--- a/BudgetMasterServer/src/main/resources/charts/RestPerMonth.js
+++ b/BudgetMasterServer/src/main/resources/charts/RestPerMonth.js
@@ -48,7 +48,7 @@ var plotlyData = [
// Add your Plotly layout settings here (optional)
var plotlyLayout = {
title: {
- text: localizedTitle
+ text: formatChartTitle(localizedTitle, localizedDateRange),
},
yaxis: {
title: localizedData['label1'] + localizedCurrency,
diff --git a/BudgetMasterServer/src/main/resources/static/js/charts.js b/BudgetMasterServer/src/main/resources/static/js/charts.js
index 2edbde213..ab5586477 100644
--- a/BudgetMasterServer/src/main/resources/static/js/charts.js
+++ b/BudgetMasterServer/src/main/resources/static/js/charts.js
@@ -352,3 +352,15 @@ function toggleCustomChartButton(show)
{
document.getElementById('buttonCustomCharts').classList.toggle('hidden', !show);
}
+
+function formatChartTitle(title, subtitle)
+{
+ title = '<span style="font-weight: bold;">' + title + '</span>';
+ if(!subtitle)
+ {
+ return title;
+ }
+
+ subtitle = '<span style="font-size: 0.9rem;">' + subtitle + '</span>';
+ return title + '<br>' + subtitle;
+}
diff --git a/BudgetMasterServer/src/main/resources/templates/charts/charts.ftl b/BudgetMasterServer/src/main/resources/templates/charts/charts.ftl
index 7027e3864..5c470970e 100644
--- a/BudgetMasterServer/src/main/resources/templates/charts/charts.ftl
+++ b/BudgetMasterServer/src/main/resources/templates/charts/charts.ftl
@@ -114,8 +114,12 @@
<#if chart.getType().name() == "DEFAULT">
localizedLocale = '${locale.getString("locale")}';
localizedTitle = '${locale.getString(chart.getName())}';
+ localizedDateRange = '${dateRange}';
localizedCurrency = '${settings.getCurrency()}';
localizedData = JSON.parse('${locale.getString(chart.getName() + ".localization")}');
+ <#else>
+ localizedTitle = '${chart.getName()}';
+ localizedDateRange = '${dateRange}';
</#if>
<#assign chartScript = chart.getScript()/>
--
GitLab