Estoy mostrando algunos datos con un AreaChart de recharts, pero estoy tratando de hacerlo más dinámico al incluir un marco de tiempo para los datos. Debe tener un grupo de botones de diferentes períodos de tiempo (por ejemplo, 1 día, 1 semana, 1 mes...) y cuando se hace clic en un botón, el gráfico debe actualizarse.

He estado tratando de hacerlo con React Hooks, pero hace que el gráfico falle entre el estado anterior y el actualizado, así que terminé eliminándolo.

Esta es la función que obtiene datos, teniendo una variable en la API.

 const [loading, setLoading] = useState(false) const [data, setData] = useState({}) const [time_format, setTimeFormat] = useState("14") async function fetchChart(time_format) { try { const response = await axios.get( `https://api.coingecko.com/api/v3/coins/moon/market_chart?vs_currency=usd&days=${time_format}&interval=hourly` ); const mapped = response.data.prices.map(([timestamp, price]) => ({ date: moment(new Date(timestamp)).format("YYYY MM DD HH:MM"), value: price })); setData(mapped); setLoading(true); } catch(error) { console.log(error) } }

 return( <div className="button-group d-flex justify-content-center pb-3"> <button>1H</button> <button>1D</button> <button>1W</button> <button>1M</button> <button>3M</button> <button>6M</button> <button>1Y</button> <button>ALL</button> </div> // chart )

Estoy tratando de hacer que funcione como el gráfico de aquí: https://www.coingecko.com/en/coins/bitcoin

Un gráfico de líneas con botones para el período de tiempo que recupera la API en función del valor