Fixed #462 - chart template: account sum per day

src/main/java/de/deadlocker8/budgetmaster/charts/DefaultCharts.java

 package de.deadlocker8.budgetmaster.charts;
 
+import java.io.BufferedReader;
+import java.io.IOException;
+import java.io.InputStream;
+import java.io.InputStreamReader;
 import java.util.ArrayList;
 import java.util.Comparator;
 import java.util.List;
 
 public class DefaultCharts
 {
-	private static final Chart CHART_TEST = new Chart("charts.default.test", "console.log('Test')", ChartType.DEFAULT);
+	private static final Chart CHART_TEST = new Chart("charts.default.test", getChartFromFile("charts/AccountSumPerDay.js"), ChartType.DEFAULT);
 
 	public static List<Chart> getDefaultCharts()
 	{
@@ -16,4 +20,33 @@ public class DefaultCharts
 		charts.sort(Comparator.comparing(Chart::getName));
 		return charts;
 	}
+
+	private static String getChartFromFile(String filePath)
+	{
+		InputStream stream = DefaultCharts.class.getClassLoader().getResourceAsStream(filePath);
+		try
+		{
+			return readFromInputStream(stream);
+		}
+		catch(IOException e)
+		{
+			e.printStackTrace();
+		}
+
+		return "";
+	}
+
+	private static String readFromInputStream(InputStream inputStream) throws IOException
+	{
+		StringBuilder resultStringBuilder = new StringBuilder();
+		try(BufferedReader br = new BufferedReader(new InputStreamReader(inputStream)))
+		{
+			String line;
+			while((line = br.readLine()) != null)
+			{
+				resultStringBuilder.append(line).append("\n");
+			}
+		}
+		return resultStringBuilder.toString();
+	}
 }

src/main/resources/charts/AccountSumPerDay.js

+/* 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 = [];
+
+// group transactions by date
+var groups = transactionData.reverse().reduce((groups, transaction) => {
+    var date = transaction.date;
+    if (!groups[date]) {
+        groups[date] = [];
+    }
+    groups[date].push(transaction);
+    return groups;
+}, {});
+
+var dates = Object.keys(groups);
+var previousSum = 0;
+var sums = [];
+
+// calculate sum for each date
+for (var key in groups) {
+    if (groups.hasOwnProperty(key)) {
+        var group = groups[key];
+
+        // extract all amount values
+        var amounts = group.map(transaction => transaction.amount)
+
+        // sum up all amounts
+        var currentSum = amounts.reduce((a, b) => a + b, 0);
+
+        // add su of current date to previous sum
+        currentSum = previousSum + currentSum;
+
+        // save current sum for next loop cycle
+        previousSum = currentSum;
+
+        // add sum to array
+        sums.push(currentSum / 100);
+    }
+}
+
+// Prepare your chart settings here (mandatory)
+var plotlyData = [
+    {
+        x: dates,
+        y: sums,
+        type: 'line'
+    }
+];
+
+// Add your Plotly layout settings here (optional)
+var plotlyLayout = {
+    title: {
+        text: 'Account sum per day',
+    },
+    yaxis: {
+        title: 'Sum in €',
+        rangemode: 'tozero',
+        tickformat: '.2f',
+        showline: true
+    },
+    xaxis: {
+        tickformat: '%d.%m.%y'
+    }
+};
+
+// 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);
\ No newline at end of file

src/main/resources/static/css/charts.css

@@ -12,3 +12,12 @@
     cursor: pointer;
     text-decoration: underline #2E79B9;
 }
+
+.container-chart {
+    width: 90%;
+    margin: auto;
+}
+
+#chart-canvas {
+    height: 40em;
+}
\ No newline at end of file

src/main/resources/static/css/dark/charts.css

@@ -12,3 +12,12 @@
     cursor: pointer;
     text-decoration: underline #2E79B9;
 }
+
+.container-chart {
+    width: 90%;
+    margin: auto;
+}
+
+#chart-canvas {
+    height: 40em;
+}
\ No newline at end of file

src/main/resources/templates/charts/charts.ftl

@@ -140,7 +140,7 @@
                     </form>
                 </div>
 
-                <div class="container">
+                <div class="container-chart">
                     <div id="chart-canvas"></div>
                 </div>
         </main>