baseddata.io/static/js/bitcoin-business-growth-cha...

110 lines
3.0 KiB
JavaScript
Raw Normal View History

2024-08-01 14:06:16 +01:00
let chartData = [];
let myChart;
2024-08-14 19:48:58 +01:00
let periodIndex = 3;
const periods = ["1 day", "7 day", "28 day", "365 day"];
async function fetchDataForChart(str, period) {
2024-08-01 14:06:16 +01:00
try {
2024-08-14 19:48:58 +01:00
const apiEndpoint = `${apiURL}/bitcoin_business_growth_by_country?cumulative_period_type=${period}&countries=${str}`;
2024-08-14 17:59:38 +01:00
console.log("Fetching from " + apiEndpoint);
2024-08-01 14:06:16 +01:00
const response = await fetch(apiEndpoint);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const fetchedData = await response.json();
const newData = fetchedData.reduce((acc, item) => {
const objectId = item.country_name;
if (!acc[objectId]) {
acc[objectId] = [];
}
acc[objectId].push([item.date, item.cumulative_current_value]);
return acc;
}, {});
chartData = { ...chartData, ...newData };
updateChart();
} catch (error) {
console.error("Fetching data failed:", error);
}
}
function updateChart() {
let chartDataMap = new Map();
for (let objectId in chartData) {
chartDataMap.set(objectId, chartData[objectId]);
}
option = {
backgroundColor: backgroundColor,
grid: grid,
2024-08-09 00:07:23 +01:00
tooltip: tooltip,
2024-08-01 14:06:16 +01:00
toolbox: toolboxParams,
xAxis: {
axisTick: axisTick,
axisLabel: axisLabel,
axisLine: axisLine,
2024-08-15 15:00:44 +01:00
type: "category",
2024-08-01 14:06:16 +01:00
},
yAxis: {
axisTick: axisTick,
2024-08-15 15:00:44 +01:00
scale: true,
2024-08-01 14:06:16 +01:00
splitLine: {
show: false,
},
2024-08-08 14:28:01 +01:00
axisLabel: {
fontSize: 12 * fontScale,
color: textColor,
formatter(value, index) {
2024-08-09 00:07:23 +01:00
return nFormatter(value, 2);
2024-08-08 14:28:01 +01:00
},
},
2024-08-01 14:06:16 +01:00
axisLine: axisLine,
},
series: Array.from(chartDataMap.entries()).map(([name, data]) => ({
name,
type: "line",
data,
showSymbol: false,
})),
};
myChart.setOption(option, true);
}
function handleCheckboxChange(event) {
if (event.target.type === "checkbox") {
const boxChecked = event.target.checked;
const boxId = event.target.id;
2024-08-14 19:48:58 +01:00
let selectedPeriod = getPeriodFromDropdown();
2024-08-01 14:06:16 +01:00
// Remove unchecked boxes
if (boxChecked === false) {
delete chartData[boxId];
updateChart();
// Add checked boxes
} else {
2024-08-14 19:48:58 +01:00
fetchDataForChart(boxId, selectedPeriod);
2024-08-01 14:06:16 +01:00
}
}
}
2024-08-14 19:48:58 +01:00
document.addEventListener("DOMContentLoaded", function () {
periodDropdown(periods, periodIndex);
document.addEventListener("reloadTable", () => {
myChart = echarts.init(document.getElementById("chart"));
jsonTableCheckedBoxes = document.querySelectorAll(
'#jsonTableContainer input[type="checkbox"]:checked',
);
const checkedBoxes = Array.from(jsonTableCheckedBoxes).map(
(checkbox) => checkbox.id,
);
const str = checkedBoxes.join(",");
let selectedPeriod = getPeriodFromDropdown();
chartData = [];
fetchDataForChart(str, selectedPeriod);
2024-08-01 14:06:16 +01:00
2024-08-14 19:48:58 +01:00
jsonTable = document.getElementById("jsonTableContainer");
jsonTable.removeEventListener("change", handleCheckboxChange);
jsonTable.addEventListener("change", handleCheckboxChange);
});
2024-08-01 14:06:16 +01:00
});