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

let chartData = [];
let myChart;

let periodIndex = 3;

const periods = ["1 day", "7 day", "28 day", "365 day"];

async function fetchDataForChart(str, period) {
  try {
    const apiEndpoint = `${apiURL}/bitcoin_business_growth_by_country?cumulative_period_type=${period}&countries=${str}`;
    console.log("Fetching from " + apiEndpoint);
    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: tooltip,
    toolbox: toolboxParams,
    xAxis: {
      axisTick: axisTick,
      axisLabel: axisLabel,
      axisLine: axisLine,
      type: "category",
    },
    yAxis: {
      axisTick: axisTick,
      scale: true,
      splitLine: {
        show: false,
      },
      axisLabel: {
        fontSize: 12 * fontScale,
        color: textColor,
        formatter(value, index) {
          return nFormatter(value, 2);
        },
      },
      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;
    let selectedPeriod = getPeriodFromDropdown();
    // Remove unchecked boxes
    if (boxChecked === false) {
      delete chartData[boxId];
      updateChart();
      // Add checked boxes
    } else {
      fetchDataForChart(boxId, selectedPeriod);
    }
  }
}

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);

    jsonTable = document.getElementById("jsonTableContainer");
    jsonTable.removeEventListener("change", handleCheckboxChange);
    jsonTable.addEventListener("change", handleCheckboxChange);
  });
});