Skip to content
Snippets Groups Projects
Commit 122cdff9 authored by Robert Goldmann's avatar Robert Goldmann
Browse files

#437 - chart template: incomes/expenditures by categories (bar)

parent 9cf1efb5
Branches
Tags
No related merge requests found
Pipeline #2076 passed
...@@ -29,6 +29,10 @@ public class DefaultCharts ...@@ -29,6 +29,10 @@ public class DefaultCharts
getChartFromFile("charts/IncomesAndExpendituresPerMonthLine.js"), getChartFromFile("charts/IncomesAndExpendituresPerMonthLine.js"),
ChartType.DEFAULT, 2); ChartType.DEFAULT, 2);
private static final Chart CHART_INCOMES_AND_EXPENDITURES_BY_CATEGORY_BAR = new Chart("charts.default.incomesAndExpendituresByCategoryBar",
getChartFromFile("charts/IncomesAndExpendituresByCategoryBar.js"),
ChartType.DEFAULT, 11);
public static List<Chart> getDefaultCharts() public static List<Chart> getDefaultCharts()
{ {
...@@ -36,6 +40,7 @@ public class DefaultCharts ...@@ -36,6 +40,7 @@ public class DefaultCharts
charts.add(CHART_ACCOUNT_SUM_PER_DAY); charts.add(CHART_ACCOUNT_SUM_PER_DAY);
charts.add(CHART_INCOMES_AND_EXPENDITURES_PER_MONTH_BAR); charts.add(CHART_INCOMES_AND_EXPENDITURES_PER_MONTH_BAR);
charts.add(CHART_INCOMES_AND_EXPENDITURES_PER_MONTH_LINE); charts.add(CHART_INCOMES_AND_EXPENDITURES_PER_MONTH_LINE);
charts.add(CHART_INCOMES_AND_EXPENDITURES_BY_CATEGORY_BAR);
charts.sort(Comparator.comparing(Chart::getName)); charts.sort(Comparator.comparing(Chart::getName));
return charts; return charts;
......
/* This list will be dynamically filled with all the transactions between
* the start and and date you select on the "Show Chart" page
* and filtered according to your specified filter.
* An example entry for this list and tutorial about how to create custom charts ca be found in the BudgetMaster wiki:
* https://github.com/deadlocker8/BudgetMaster/wiki/How-to-create-custom-charts
*/
var transactionData = [];
// Note: All variables starting with "localized" are only available inside default charts.
var categoryNames = [];
var incomes = [];
var expenditures = [];
for(var i = 0; i < transactionData.length; i++)
{
var transaction = transactionData[i];
var categoryName = transaction.category.name;
// create new category is not already in dict
if(!categoryNames.includes(categoryName))
{
categoryNames.push(categoryName);
incomes.push(0);
expenditures.push(0);
}
// determine index of categoryName in list because the transactions are not ordered by category and some categories
// will be missing either for income or expenditures
var index = categoryNames.indexOf(categoryName);
// add to income or expenditure sum
var amount = transaction.amount;
if(amount > 0)
{
incomes[index] = incomes[index] + amount;
} else
{
expenditures[index] = expenditures[index] + Math.abs(amount);
}
}
// calculate total sums
var totalIncomes = 0;
var totalExpenditures = 0;
incomes.forEach(function(value)
{
totalIncomes += value;
});
expenditures.forEach(function(value)
{
totalExpenditures += value;
});
// Prepare your chart settings here (mandatory)
var plotlyData = [];
for(var j = 0; j < categoryNames.length; j++)
{
var percentageIncome = (100 / totalIncomes) * incomes[j];
var percentageExpenditure = (100 / totalExpenditures) * expenditures[j];
var textIncome = prepareHoverText(percentageIncome, incomes[j]);
var textExpenditure = prepareHoverText(percentageExpenditure, expenditures[j]);
plotlyData.push({
x: [percentageExpenditure, percentageIncome],
y: [localizedData['label1'], localizedData['label2']],
orientation: 'h',
type: 'bar',
hoverinfo: 'text',
text: [textExpenditure, textIncome],
name: categoryNames[j]
});
}
// Add your Plotly layout settings here (optional)
var plotlyLayout = {
title: {
text: localizedTitle
},
xaxis: {
showgrid: false,
showticklabels: false
},
yaxis: {
tickangle: 90,
tickfont: {
family: 'sans-serif',
size: 14,
color: 'black'
}
},
barmode: 'stack',
hovermode: 'closest'
};
// Add your Plotly configuration settings here (optional)
var plotlyConfig = {
showSendToCloud: false,
displaylogo: false,
showLink: false,
responsive: true
};
// Don't touch this line
Plotly.newPlot('chart-canvas', plotlyData, plotlyLayout, plotlyConfig);
function prepareHoverText(percentage, value)
{
value = value / 100;
return percentage.toFixed(1) + '% (' + value.toFixed(1) + ' ' + localizedCurrency + ')';
}
\ No newline at end of file
...@@ -335,6 +335,8 @@ charts.default.incomesAndExpendituresPerMonthBar=Eingaben/Ausgaben pro Monat (Ba ...@@ -335,6 +335,8 @@ charts.default.incomesAndExpendituresPerMonthBar=Eingaben/Ausgaben pro Monat (Ba
charts.default.incomesAndExpendituresPerMonthBar.localization='{"axisY": "Summe in ", "traceName1": "Einnahmen", "traceName2": "Ausgaben"'} charts.default.incomesAndExpendituresPerMonthBar.localization='{"axisY": "Summe in ", "traceName1": "Einnahmen", "traceName2": "Ausgaben"'}
charts.default.incomesAndExpendituresPerMonthLine=Eingaben/Ausgaben pro Monat (Liniendiagramm) charts.default.incomesAndExpendituresPerMonthLine=Eingaben/Ausgaben pro Monat (Liniendiagramm)
charts.default.incomesAndExpendituresPerMonthLine.localization='{"axisY": "Summe in ", "traceName1": "Einnahmen", "traceName2": "Ausgaben"'} charts.default.incomesAndExpendituresPerMonthLine.localization='{"axisY": "Summe in ", "traceName1": "Einnahmen", "traceName2": "Ausgaben"'}
charts.default.incomesAndExpendituresByCategoryBar=Eingaben/Ausgaben nach Kategorien
charts.default.incomesAndExpendituresByCategoryBar.localization='{"label1": "Ausgaben", "label2": "Einnahmen"'}
charts.default.categoryBudget=Verbrauch nach Kategorien charts.default.categoryBudget=Verbrauch nach Kategorien
chart.new.label.name=Name chart.new.label.name=Name
......
...@@ -335,6 +335,8 @@ charts.default.incomesAndExpendituresPerMonthBar=Incomes/Expenditures per month ...@@ -335,6 +335,8 @@ charts.default.incomesAndExpendituresPerMonthBar=Incomes/Expenditures per month
charts.default.incomesAndExpendituresPerMonthBar.localization='{"axisY": "Sum in ", "traceName1": "Incomes", "traceName2": "Expenditures"'} charts.default.incomesAndExpendituresPerMonthBar.localization='{"axisY": "Sum in ", "traceName1": "Incomes", "traceName2": "Expenditures"'}
charts.default.incomesAndExpendituresPerMonthLine=Incomes/Expenditures per month (Line chart) charts.default.incomesAndExpendituresPerMonthLine=Incomes/Expenditures per month (Line chart)
charts.default.incomesAndExpendituresPerMonthLine.localization='{"axisY": "Sum in ", "traceName1": "Incomes", "traceName2": "Expenditures"'} charts.default.incomesAndExpendituresPerMonthLine.localization='{"axisY": "Sum in ", "traceName1": "Incomes", "traceName2": "Expenditures"'}
charts.default.incomesAndExpendituresByCategoryBar=Incomes/Expenditures by categories
charts.default.incomesAndExpendituresByCategoryBar.localization='{"label1": "Expenditures", "label2": "Incomes"'}
charts.default.categoryBudget=Consumption by categories charts.default.categoryBudget=Consumption by categories
chart.new.label.name=Name chart.new.label.name=Name
......
...@@ -172,7 +172,7 @@ ...@@ -172,7 +172,7 @@
localizedData = JSON.parse('${locale.getString(chart.getName() + ".localization")}'); localizedData = JSON.parse('${locale.getString(chart.getName() + ".localization")}');
</#if> </#if>
${chart.getScript()?replace("var transactionData = []", "var transactionData = ${transactionData};")} ${chart.getScript()?replace("var transactionData = [];", "var transactionData = ${transactionData};")}
</script> </script>
</#if> </#if>
</body> </body>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment