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

230 lines
6.5 KiB
JavaScript
Raw Normal View History

2024-08-01 14:06:16 +01:00
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);
});
// let checkedBoxes = [];
// let chartData = {};
// const apiEndpoint = {{ .Get "endpoint" }};
// const apiCategoryVariable = {{ .Get "apiCategoryVariable" }};
// let myChart;
// let chartDataMap = new Map();
//
// // Define base chart parameters
// const chartBaseConfig = {
// 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: [],
// };
//
// function fetchDataForChart(params) {
// return fetch(
// apiEndpoint+"&"+apiCategoryVariable+"="+params,
// )
// .then((response) => response.json())
// .then((data) => {
// // Transform data using reduce
// // so we end with an object where each element is
// // a separate country containing an array of
// // data
// const chartData = data.reduce((acc, item) => {
// const objectId = item.{{ .Get "objectCategoryId" | safeJS }};
// if (!acc[objectId]) {
// acc[objectId] = [];
// }
// acc[objectId].push([item.{{ .Get "plotXVariable" | safeJS }}, item.{{ .Get "plotYVariable" | safeJS }}]);
// return acc;
// }, {});
// return chartData;
// });
// }
//
// // Draw chart with data from chartData
// function updateChart() {
// for (let objectId in chartData) {
// chartDataMap.set(objectId, chartData[objectId]);
// }
//
// // To remove keys in chartDataMap
// chartDataMap.forEach((value, key) => {
// if (!chartData.hasOwnProperty(key)) {
// chartDataMap.delete(key);
// }
// });
// option = {
// ...chartBaseConfig,
//
// series: Array.from(chartDataMap.entries()).map(
// ([name, data]) => ({
// name,
// type: "line",
// data,
// showSymbol: false,
// }),
// ),
// };
// myChart.setOption(option, true);
// }
//
// // Listen for reloadTable event
// document
// .getElementById("jsonTableContainer")
// .addEventListener("reloadTable", (event) => {
// myChart = echarts.init(document.getElementById("chart"));
// console.log("table reloaded")
//
// // Get initial checkedBoxes when table loaded
// // and cast to string for passing to API
// let checkedBoxes = Array.from(
// document.querySelectorAll(
// '#jsonTableContainer input[type="checkbox"]:checked',
// ),
// ).map((checkbox) => checkbox.id);
//
// let str = checkedBoxes.join(",");
// fetchDataForChart(str).then((initialData) => {
// chartData = initialData;
// updateChart();
// });
// console.log(str)
//
// // Listen for checkbox events in the table
// document
// .getElementById("jsonTableContainer")
// .addEventListener("change", (event) => {
// if (event.target.type === "checkbox") {
// boxChecked = event.target.checked
// boxId = event.target.id
// // Remove unchecked boxes
//
// if (boxChecked === false) {
// delete chartData[boxId];
// updateChart();
// console.log("Removed "+boxId+" from chartData")
// // Add checked boxes
// } else {
// fetchDataForChart(boxId).then((newData) => {
// chartData = { ...chartData, ...newData };
// updateChart();
// console.log("added "+boxId+" to chartData")
// });
// }
// }});
// });
//