let dataArr = [];
const myChart = echarts.init(document.getElementById("chart"));

async function fetchDataForChart() {
  try {
    const apiEndpoint = `${apiURL}/get_json/final__feerate_percentiles.json`;
    const response = await fetch(apiEndpoint);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const dataArr = await response.json();
    initEchart(dataArr);
  } catch (error) {
    console.error("Fetching data failed:", error);
  }
}

function initEchart(dataArr) {
  const option = {
    backgroundColor: backgroundColor,
    tooltip: {
      ...tooltip,
      valueFormatter: (value) => `${value.toFixed(0)} sats/vByte`,
    },
    toolbox: toolboxParams,
    xAxis: {
      data: dataArr.map((row) => row.date),
      axisTick: axisTick,
      axisLabel: axisLabel,
      axisLine: axisLine,
    },
    yAxis: {
      axisTick: axisTick,
      splitLine: {
        show: false,
      },
      axisLabel: axisLabel,
      axisLine: axisLine,
    },
    grid: grid,
    dataZoom: dataZoom((start = 98)),
    series: [
      {
        type: "line",
        id: "min-feerate",
        name: "min",
        showSymbol: false,
        barCategoryGap: "0%",
        data: [0],
      },
      {
        type: "bar",
        stack: "value",
        name: "10th",
        barCategoryGap: "0%",
        data: dataArr.map((row) => row.feerate_10th),
      },
      {
        type: "bar",
        stack: "value",
        name: "25th",
        barCategoryGap: "0%",
        data: dataArr.map((row) => row.feerate_25th),
      },
      {
        type: "bar",
        stack: "value",
        name: "50th",
        barCategoryGap: "0%",
        data: dataArr.map((row) => row.feerate_50th),
      },
      {
        type: "line",
        id: "mean-feerate",
        name: "mean",
        showSymbol: false,
        barCategoryGap: "0%",
        data: [0],
      },
      {
        type: "bar",
        stack: "value",
        name: "75th",
        barCategoryGap: "0%",
        data: dataArr.map((row) => row.feerate_75th),
      },
      {
        type: "bar",
        stack: "value",
        name: "90th",
        barCategoryGap: "0%",
        data: dataArr.map((row) => row.feerate_90th),
      },
      {
        type: "line",
        id: "max-feerate",
        name: "max",
        showSymbol: false,
        barCategoryGap: "0%",
        data: [0],
      },
    ],
  };

  myChart.setOption(option);
}
fetchDataForChart();