101 lines
2.6 KiB
JavaScript
101 lines
2.6 KiB
JavaScript
// Initialize the echarts instance based on the prepared dom
|
|
|
|
async function initMainChart() {
|
|
const element = document.getElementById('main-chart')
|
|
if (element === null) {
|
|
return;
|
|
}
|
|
|
|
var myChart = echarts.init(element);
|
|
window.addEventListener('resize', function() {
|
|
myChart.resize();
|
|
});
|
|
|
|
try {
|
|
const response = await fetch("/dashboard/main-chart");
|
|
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> € <br />' +
|
|
'Sum of Savings: <span class="font-bold">' + params[1].data[1] + '</span> €'
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
|
|
console.log("initialized main-chart");
|
|
} catch (error) {
|
|
console.error(error.message);
|
|
}
|
|
}
|
|
|
|
async function initTreasureChests() {
|
|
const element = document.getElementById('treasure-chests')
|
|
if (element === null) {
|
|
return;
|
|
}
|
|
|
|
var myChart = echarts.init(element);
|
|
window.addEventListener('resize', function() {
|
|
myChart.resize();
|
|
});
|
|
|
|
try {
|
|
const response = await fetch("/dashboard/treasure-chests");
|
|
if (!response.ok) {
|
|
throw new Error(`Response status: ${response.status}`);
|
|
}
|
|
|
|
const option = await response.json();
|
|
myChart.setOption(option);
|
|
|
|
console.log("initialized treasure-chests");
|
|
} catch (error) {
|
|
console.error(error.message);
|
|
}
|
|
}
|
|
|
|
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();
|