feat(dashboard): #191 add development of treasurechests

static/js/dashboard.js

@@ -7,6 +7,9 @@ async function initMainChart() {
 	}
 
 	var myChart = echarts.init(element);
+	window.addEventListener('resize', function() {
+		myChart.resize();
+	});
 
 	try {
 		const response = await fetch("/dashboard/main-chart");
@@ -22,10 +25,7 @@ async function initMainChart() {
 				'Sum of Savings: <span class="font-bold">' + params[1].data[1] + '</span> €'
 		};
 
-		const chart = myChart.setOption(option);
-		window.addEventListener('resize', function() {
-			myChart.resize();
-		});
+		myChart.setOption(option);
 
 		console.log("initialized main-chart");
 	} catch (error) {
@@ -40,6 +40,9 @@ async function initTreasureChests() {
 	}
 
 	var myChart = echarts.init(element);
+	window.addEventListener('resize', function() {
+		myChart.resize();
+	});
 
 	try {
 		const response = await fetch("/dashboard/treasure-chests");
@@ -48,11 +51,7 @@ async function initTreasureChests() {
 		}
 
 		const option = await response.json();
-
-		const chart = myChart.setOption(option);
-		window.addEventListener('resize', function() {
-			myChart.resize();
-		});
+		myChart.setOption(option);
 
 		console.log("initialized treasure-chests");
 	} catch (error) {
@@ -60,5 +59,42 @@ async function initTreasureChests() {
 	}
 }
 
+async function initTreasureChest() {
+	const element = document.getElementById('treasure-chest')
+	if (element === null) {
+		return;
+	}
+
+	var myChart = echarts.init(element);
+	window.addEventListener('resize', function() {
+		myChart.resize();
+	});
+
+
+	const treasureChestSelect = document.getElementById('treasure-chest-id')
+	treasureChestSelect.addEventListener("change", async (e) => {
+		try {
+			const response = await fetch("/dashboard/treasure-chest?id="+e.target.value);
+			if (!response.ok) {
+				throw new Error(`Response status: ${response.status}`);
+			}
+		
+			const option = await response.json();
+			option.tooltip.formatter = function (params) {
+				return new Date(params[0].data[0]).toLocaleString([], { day: 'numeric', month: 'short', year: 'numeric' })  +
+					'<br />' +
+					'Sum of Accounts: <span class="font-bold">' + params[0].data[1] + '</span> €'
+			};
+
+			myChart.setOption(option);
+		} catch (error) {
+			console.error(error.message);
+		}
+	});
+
+	console.log("initialized treasure-chest");
+}
+
 initMainChart();
 initTreasureChests();
+initTreasureChest();