Preprocessing Large Datasets for TanStack React Charts

Show how to aggregate and filter a large dataset in preparation for rendering in a chart, including asynchronous data fetching.

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const rawData = await response.json();
  return rawData;
}

Defines an async function to fetch raw data from a specified API endpoint and parses it as JSON.

function aggregateData(data) {
  return data.reduce((acc, currentValue) => {
    const { category, value } = currentValue;
    if (!acc[category]) acc[category] = { category, total: 0 };
    acc[category].total += value;
    return acc;
  }, {});
}

Aggregates data by category, summing up values. This prepares the data for easier charting, by reducing the dataset to aggregated entries.

function filterData(data, threshold) {
  return Object.values(data).filter(item => item.total > threshold);
}

Filters aggregated data entries to only include those with a total above a specified threshold. This step helps in excluding negligible data points.

async function prepareChartData() {
  const rawData = await fetchData();
  const aggregatedData = aggregateData(rawData);
  const filteredData = filterData(aggregatedData, 100);
  return filteredData;
}

Combines fetching, aggregating, and filtering operations into one function to prepare the chart data. This final step provides a clean dataset ready for rendering.