var chartDom = document.getElementById(id);
var myChart = echarts.init(chartDom);
chartData = [];
function simpleChart(
  endpoint,
  formatValueDecimalPlaces = null,
) {
  async function fetchDataForChart(query) {
    try {
      const apiEndpoint = `${apiURL}/${endpoint}?${query}`;
      const response = await fetch(apiEndpoint);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      chartData = await response.json();
      updateChart();
      console.log(chartData);
    } catch (error) {
      console.error("Fetching data failed:", error);
    }
  }

  function updateChart() {
    var option = {
      tooltip: {
        ...tooltip,
        valueFormatter(value, index) {
          return formatValueDecimalPlaces == null
            ? value
            : nFormatter(value, formatValueDecimalPlaces);
        },
      },
      xAxis: {
        type: "category",
        data: chartData.map((item) => item.date),
      },
      yAxis: [
        {
          type: "value",
          name: "Rewards (USD)",
          nameLocation: "middle",
          nameGap: 30,
          nameTextStyle: textStyleMain,
          position: "left",
          alignTicks: true,
          axisTick: axisTick,
          axisLine: axisLine,
          splitLine: {
            show: false,
          },
          axisLabel: {
            ...axisLabel,
            formatter(value, index) {
              return nFormatter(value, 0);
            },
          },
        },
        {
          type: "value",
          name: "Subsidy (BTC)",
          nameLocation: "middle",
          nameGap: 20,
          nameTextStyle: {
            fontSize: 12 * fontScale,
            color: textColor,
          },
          axisTick: axisTick,
          position: "right",
          alignTicks: true,
          axisLine: axisLine,
          splitLine: {
            show: false,
          },
          axisLabel: {
            fontSize: 12 * fontScale,
            color: textColor,
          },
        },
      ],
      series: [
        {
          type: "line",
          name: "Subsidy (USD)",
          stack: "Total",
          areaStyle: {},
          symbol: "none",
          lineStyle: {
            width: 0,
          },
          data: chartData.map((row) => row.subsidy_usd),
        },
        {
          type: "line",
          name: "Fees (USD)",
          stack: "Total",
          areaStyle: {},
          symbol: "none",
          lineStyle: {
            width: 0,
          },
          data: chartData.map((row) => row.totalfee_usd),
        },
        {
          type: "line",
          name: "Total (USD)",
          symbol: "none",
          lineStyle: {
            width: 1,
            color: textColor,
          },
          data: chartData.map((row) => row.total_reward_usd),
        },
        {
          type: "line",
          yAxisIndex: 1,
          name: "Block Subsidy (BTC)",
          symbol: "none",
          lineStyle: {
            width: 3,
          },
          data: chartData.map((row) => row.block_subsidy),
        },
      ],
    };

    myChart.setOption(option, true);
  }

  query = queryConstructor();
  fetchDataForChart(query);
  document.addEventListener("filterChange", function (event) {
    query = queryConstructor();
    fetchDataForChart(query);
  });
}
simpleChart((endpoint = "miner_rewards"));