99 lines
2.6 KiB
JavaScript
99 lines
2.6 KiB
JavaScript
let chartData = [];
|
|
let myChart;
|
|
|
|
async function fetchDataForChart(str) {
|
|
try {
|
|
const apiEndpoint = `https://api.bitlab21.com/bitcoin_business_growth_by_country?cumulative_period_type=365 day&countries=${str}`;
|
|
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,
|
|
tooltip: {
|
|
backgroundColor: tooltipBgColor,
|
|
order: "seriesDesc",
|
|
textStyle: textStyleMain,
|
|
trigger: "axis",
|
|
},
|
|
toolbox: toolboxParams,
|
|
xAxis: {
|
|
axisTick: axisTick,
|
|
axisLabel: axisLabel,
|
|
axisLine: axisLine,
|
|
type: "time",
|
|
name: "Date",
|
|
},
|
|
yAxis: {
|
|
axisTick: axisTick,
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: axisLabel,
|
|
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;
|
|
// Remove unchecked boxes
|
|
if (boxChecked === false) {
|
|
delete chartData[boxId];
|
|
updateChart();
|
|
// Add checked boxes
|
|
} else {
|
|
fetchDataForChart(boxId);
|
|
}
|
|
}
|
|
}
|
|
|
|
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(",");
|
|
chartData = [];
|
|
fetchDataForChart(str);
|
|
|
|
jsonTable = document.getElementById("jsonTableContainer");
|
|
jsonTable.removeEventListener("change", handleCheckboxChange);
|
|
jsonTable.addEventListener("change", handleCheckboxChange);
|
|
});
|