Search code examples
javascriptpythonreactjsrecharts

Converting Python datetime.timedelta object in order to be read by Recharts

I'm trying to make basic plots in Recharts (using React) and Flask (using the Formula1 API). The data I get in Flask is originally a datetime.timedelta object and I'm having trouble sending it over to React. To send the data, it needs to be JSON serializable, so I tried converting it to:

  • a string (of the timedelta object)
  • an integer (timedelta converted to nanoseconds)

but I'm not sure how to unpack these in React.

Here are the 2 data formats I tried.

>>> 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)

App.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>

My questions are:

  1. Can I transfer the timedelta object to Recharts and plot it there (since integer conversion for each data point would take a long time)?
  2. If not, I got Recharts to successfully plot when its in integer format. But, I need help displaying it in [%min:%sec:%millisec] format in Recharts.
Solution

  • I suggest here you use either of these methods pandas datetime to unix timestamp seconds and convert datetime to unix timestamp and send it over to React.

    Then take a look at this approach by Dennis Sandmark

    https://github.com/recharts/recharts/issues/956#issuecomment-339279600