Skip to content
Snippets Groups Projects
Select Git revision
  • 4a4af6eec99985c92d420d6b3f46557c2e97e050
  • sansdocker default
  • master
3 results

request.py

Blame
  • Graph.js 4.39 KiB
    import React from "react";
    import axios from "axios";
    import {
      Line,
      Area,
      XAxis,
      YAxis,
      CartesianGrid,
      Tooltip,
      ResponsiveContainer,
      ComposedChart,
    } from "recharts";
    
    import "../styles/Graph.css";
    
    const CustomTooltip = ({ active, payload, label }) => {
      return (
        <>
          {active && payload && payload.length && (
            <div className="custom-tooltip">
              <p className="label">{`${formatXAxis(label)}`}</p>
              <p className="label">{`Temps d'attente : ${payload[0].value} minutes`}</p>
            </div>
          )}
        </>
      );
    };
    
    function formatXAxis(value) {
      if (value == 0) return "";
      value = Math.round(value);
      return Math.floor(value / 60).toString() + "h" + (value % 60).toString().padStart(2, "0");
    }
    
    export default function Graph({ place }) {
      const [checked, setChecked] = React.useState(false);
      const [currentData, setCurrentData] = React.useState([[], 0, 0]);
    
      React.useEffect(() => {
        axios
          .get(
            `${process.env.REACT_APP_BASE_URL_BACK}/${encodeURIComponent(place)}/stats/current_graph`,
          )
          .then((response) => {
            setCurrentData(response.data);
          });
      }, []);
    
      const [avgData, setAvgData] = React.useState([[], 0, 0]);
    
      React.useEffect(() => {
        axios
          .get(`${process.env.REACT_APP_BASE_URL_BACK}/${encodeURIComponent(place)}/stats/avg_graph`)
          .then((response) => {
            setAvgData(response.data);
          });
      }, []);
    
      return (
        <>
          {!!currentData[0].length && (
            <div style={{ height: "60%", padding: "3rem" }}>
              <div className="graph">
                <ResponsiveContainer width="100%" height="100%">
                  <ComposedChart
                    margin={{
                      top: 5,
                      right: 30,
                      left: -10,
                      bottom: 5,
                    }}
                  >
                    {checked ? (
                      <Line
                        data={avgData}
                        type="monotone"
                        dataKey="time"
                        stroke="#FF0000"
                        strokeWidth={2}
                        dot={false}
                      />
                    ) : (
                      <div />
                    )}
                    <defs>
                      <linearGradient id="colorGradient" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="10%" stopColor="#ff0000" stopOpacity={0.55} />
                        <stop offset="50%" stopColor="#fff200" stopOpacity={0.5} />
                        <stop offset="90%" stopColor="#1e9600" stopOpacity={0.35} />
                      </linearGradient>
                    </defs>
                    <CartesianGrid stroke="#FFFFFF" strokeDasharray="1 3" />
                    <XAxis
                      axisLine={false}
                      tickLine={false}
                      tick={{ fill: "#FFFFFF", fontSize: "18" }}
                      ticks={[...Array(4).keys()].map(
                        (i) => currentData[1] + (i * (currentData[2] - currentData[1])) / 3,
                      )}
                      dataKey="name"
                      type="number"
                      interval="preserveStartEnd"
                      domain={[currentData[1], currentData[2]]}
                      tickFormatter={formatXAxis}
                    />
                    <YAxis
                      axisLine={false}
                      tickLine={false}
                      tick={{ fill: "#FFFFFF", fontSize: "18" }}
                      tickInt
                      tickCount={10}
                      dataKey="time"
                      type="number"
                      domain={[0, (dataMax) => 10 * Math.floor((dataMax + 10) / 10)]}
                      allowDecimals={false}
                      name="Temps d'attente"
                    />
                    <Tooltip content={<CustomTooltip />} />
                    <Area
                      data={currentData[0]}
                      type="monotone"
                      dataKey="time"
                      stroke="#FFFFFF"
                      strokeWidth={2}
                      fillOpacity={1}
                      fill="url(#colorGradient)"
                    />
                  </ComposedChart>
                </ResponsiveContainer>
              </div>
              <div className="graph-title">
                Temps d&apos;attente estimé depuis l&apos;ouverture (en minutes)
              </div>
              <button id="graph-avg-graph" onClick={() => setChecked(!checked)}>
                {checked ? "Retirer le temps d'attente moyen" : "Afficher le temps d'attente moyen"}
              </button>
            </div>
          )}
        </>
      );
    }