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

async function fetchDataForChart() {
  try {
    const apiEndpoint = "https://api.bitlab21.com/miner_rewards";
    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: {
      backgroundColor: tooltipBgColor,
      order: "seriesDesc",
      textStyle: textStyleMain,
      trigger: "axis",
    },
    toolbox: toolboxParams,
    xAxis: {
      data: dataArr.map((row) => row.date),
      axisTick: axisTick,
      axisLabel: axisLabel,
      axisLine: axisLine,
    },
    grid: grid,
    dataZoom: dataZoom(97),
    yAxis: [
      {
        type: "value",
        nameGap: 50,
        name: "Total Daily Rewards (USD)",
        nameLocation: "middle",
        nameTextStyle: {
          fontSize: 12 * fontScale,
          padding: [0, 0, 15, 0],
          color: "#eff1d6",
        },
        position: "left",
        alignTicks: true,
        axisTick: axisTick,
        axisLine: axisLine,
        splitLine: {
          show: false,
        },
        axisLabel: axisLabel,
      },
      {
        type: "value",
        name: "Block Subsidy (BTC)",
        nameGap: -30,
        nameLocation: "middle",
        nameTextStyle: yaxisTextStyle2,
        axisTick: axisTick,
        position: "right",
        alignTicks: true,
        axisLine: axisLine,
        splitLine: {
          show: false,
        },
        axisLabel: {
          fontSize: 12 * fontScale,
          color: "#eff1d6",
        },
      },
    ],
    series: [
      {
        type: "line",
        name: "Daily Subsidy (USD)",
        smooth: true,
        stack: "Total",
        areaStyle: {},
        symbol: "none",
        lineStyle: {
          width: 0,
        },
        data: dataArr.map((row) => row.subsidy_usd),
      },
      {
        type: "line",
        name: "Daily Fees (USD)",
        smooth: true,
        stack: "Total",
        areaStyle: {},
        symbol: "none",
        lineStyle: {
          width: 0,
        },
        data: dataArr.map((row) => row.totalfee_usd),
      },
      {
        type: "line",
        name: "Daily Total Reward (USD)",
        smooth: true,
        symbol: "none",
        lineStyle: {
          width: 1,
          color: "#eff1d6",
        },
        data: dataArr.map((row) => row.total_reward_usd),
      },
      {
        type: "line",
        yAxisIndex: 1,
        name: "Block Subsidy (BTC)",
        symbol: "none",
        lineStyle: {
          width: 3,
        },
        data: dataArr.map((row) => row.block_subsidy),
      },
    ],
  };

  myChart.setOption(option);
}

fetchDataForChart();