var chartDom = document.getElementById(id);
var myChart = echarts.init(chartDom);
chartData = [];
function tableRowSelectChart(
  endpoint,
  xAxisField,
  yAxisField,
  chartType,
  xAxisType,
  scaleChart = false,
  formatValueDecimalPlaces = null,
) {
  async function fetchDataForChart(query, valueId) {
    try {
      const apiEndpoint = `${apiURL}/${endpoint}?${query}`;
      const response = await fetch(apiEndpoint);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const fetchedData = await response.json();
      console.log(fetchedData);
      const newData = fetchedData.reduce((acc, item) => {
        const objectId = item[valueId];
        if (!acc[objectId]) {
          acc[objectId] = [];
        }
        acc[objectId].push([item[xAxisField], item[yAxisField]]);
        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]);
    }

    var option = {
      tooltip: {
        ...tooltip,
        valueFormatter(value, index) {
          return formatValueDecimalPlaces == null
            ? value
            : nFormatter(value, formatValueDecimalPlaces);
        },
      },
      xAxis: {
        type: xAxisType,
      },
      yAxis: {
        scale: scaleChart,
        type: "value",
      },
      series: Array.from(chartDataMap.entries()).map(([name, data]) => ({
        name,
        type: chartType,
        data,
        showSymbol: false,
      })),
    };
    myChart.setOption(option, true);
  }

  // listen for filter events for this target
  document.addEventListener("filterChange", function (event) {
    tableId = document.getElementById(id).id;
    console.log(event.detail);
    eventDetail = event.detail;
    if (eventDetail.filterActions.includes("refresh")) {
      chartData = [];
      updateChart();
    } else {
      if (eventDetail.filterTargets.includes(tableId)) {
        if (eventDetail.filterActions.includes("selected")) {
          valueId = eventDetail.filterId;
          let selectedRow = {
            [valueId]: eventDetail.filterValue,
          };
          query = queryConstructor(selectedRow);

          fetchDataForChart(query, valueId);
          console.log(valueId)
        } else {
          delete chartData[eventDetail.filterValue];
          updateChart();
        }
      }
    }
  });
}
tableRowSelectChart(
  endpoint = "bitcoin_business_growth_timeseries",
  xAxisField = "date",
  yAxisField = "cumulative_value",
  chartType = "line",
  xAxisType = "category",
);