Estoy tratando de hacer gráficos básicos en Recharts (usando React) y Flask (usando la API Formula1). Los datos que obtengo en Flask son originalmente un objeto datetime.timedelta y tengo problemas para enviarlos a React. Para enviar los datos, debe ser JSON serializable, así que intenté convertirlo a:

• una cadena (del objeto timedelta )
• un número entero ( timedelta convertido a nanosegundos)

pero no estoy seguro de cómo descomprimirlos en React.

Aquí están los 2 formatos de datos que probé.

 >>> data_str = [{ "LapNumber": '0', "44": "0 days 00:01:27.440000", "6": "0 days 00:01:27.313000"}, {"name": '1', "44": "0 days 00:01:28.982000", "6": "0 days 00:01:27.504000" }] >>> data_int = [{ "LapNumber": '0', "44": 87440000000, "6": 87313000000}, {"LapNumber": '1', "44": 88982000000, "6": 87504000000 }]

app.py

 @app.route('/api/lap_number_time') def getChartData(): # data = list of dictionaries in one of the formats shown above return jsonify(data)

Aplicación.js

 useEffect(() => { fetch("http://127.0.0.1:5000/api/lap_number_time") .then((res) => res.json()) .then((data) => { console.log("first chart data is", data) setCurrentChartData(data) }) }, []) ... <LineChart width={400} height={400} data={currentChartData}> <Line type="monotone" dataKey="14" stroke="#8884d8" /> <Line type="monotone" dataKey="ham" stroke="#82ca9d" /> <Line type="monotone" dataKey="6" stroke="#1a5d57" /> <XAxis dataKey="LapNumber"/> <YAxis /> <Legend /> </LineChart>

Mis preguntas son:

1. ¿Puedo transferir el objeto timedelta a Recharts y trazarlo allí (ya que la conversión de enteros para cada punto de datos llevaría mucho tiempo)?
2. Si no, obtuve Recharts para trazar con éxito cuando está en formato de número entero. Pero necesito ayuda para mostrarlo en formato [%min:%sec:%millisec] en Recharts.