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

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")
//               });
//             }
//           }});
//   });
//