Graph.js

import React from "react";
import axios from "axios";
import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from "recharts";
import gradient from "./gradient";
import "../styles/Graph.css";

export default function DailyGraph({
  place,
  day,
  min_time_hour,
  min_time_mn,
  max_time_hour,
  max_time_mn,
  interval,
}) {
  const url =
    process.env.REACT_APP_BASE_URL_BACK +
    "/" +
    place +
    "/stats/" +
    day +
    "/" +
    min_time_hour +
    "/" +
    min_time_mn +
    "/" +
    max_time_hour +
    "/" +
    max_time_mn +
    "/" +
    interval;

  const [data, setData] = React.useState([]);
  React.useEffect(() => {
    axios.get(url).then((response) => {
      setData(response.data);
      console.log(response.data);
    });
  }, [url]);
  if (!data) return null;

  const CustomTooltip = ({ active, payload }) => {
    if (active && payload && payload.length) {
      return (
        <div className="custom-tooltip">
          <p className="label">{`Temps d'attente : ${payload[0].value} minutes`}</p>
        </div>
      );
    }
    return null;
  };

  return (
    <div className="parent">
      <div className="graph">
        <ResponsiveContainer width="100%" height="100%">
          <AreaChart
            width={500}
            height={300}
            data={data}
            margin={{
              top: 5,
              right: 30,
              left: 20,
              bottom: 5,
            }}
          >
            {gradient()}
            <CartesianGrid stroke="#FFFFFF" strokeDasharray="1 5" />
            <XAxis
              axisLine={false}
              tickLine={false}
              tick={{ fill: "#FFFFFF", fontSize: "18" }}
              padding={{ left: 20 }}
              dataKey="name"
            />
            <YAxis
              axisLine={false}
              tickLine={false}
              tick={{ fill: "#FFFFFF", fontSize: "18" }}
              dataKey="time"
            />
            <Tooltip content={<CustomTooltip />} />
            <Area
              type="monotone"
              dataKey="time"
              stroke="#5661B3"
              fillOpacity={1}
              fill="url(#colorGradient)"
              dot={{ stroke: "#0967D2", strokeWidth: 2, fill: "#fff" }}
            />
          </AreaChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
}