add monthly rainfalls

2024-03-09 15:33:23 +01:00
parent 7244cd7be4
commit 77412774c8
9 changed files with 100 additions and 130 deletions
--- a/resources/js/pages/Rainfall/RainfallGraph.tsx
+++ b/resources/js/pages/Rainfall/RainfallGraph.tsx
@@ -0,0 +1,80 @@
+import React, {useEffect, useState} from "react"
+import PageLayout from "../../components/PageLayout"
+import LastFiveMesure from "../../components/rainfall/LastFiveMesure"
+import AddRainfall from "../../components/rainfall/AddRainfall"
+import useAxiosTools from "../../hooks/AxiosTools"
+import {rainfallGraphData} from "../../types"
+import Field from "../../components/Field"
+import useDimension from "../../hooks/DimensionHook"
+import RainFallEcharts from "../../components/rainfall/RainFallEcharts"
+
+const RainfallGraph = () => {
+
+    const [loadedAt, reload] = useState(new Date)
+    const [graphData, setGraphData] = useState<rainfallGraphData[]>([])
+    const [graphDetails, setGraphDetails] = useState({
+        start_date: (new Date((new Date()).setMonth((new Date).getMonth() - 1))).toSQLDate(),
+        end_date: (new Date()).toSQLDate(),
+        period: 'day',
+    })
+    const {loading, setLoading, errorCatch, errorLabel, axiosGet} = useAxiosTools()
+    const {targetRef, dimensions} = useDimension()
+
+    useEffect(() => {
+        fetchGraphData()
+    }, [loadedAt, graphDetails])
+
+    const fetchGraphData = async () => {
+        try {
+            setLoading(true)
+            const params = `start=${graphDetails.start_date}&end=${graphDetails.end_date}&period=${graphDetails.period}`
+            const res = await axiosGet(`/api/rainfalls/graph?${params}`)
+            setGraphData(res.data)
+        } catch (error) {
+            errorCatch(error)
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return <PageLayout>
+        <div className="flex flex-wrap justify-between gap-2">
+            <LastFiveMesure loadedAt={loadedAt} />
+            <AddRainfall reload={reload} />
+        </div>
+
+        {errorLabel()}
+        <form className="mx-5 mb-2 flex flex-wrap gap-2">
+            <Field name="start_date"
+                   type="date"
+                   value={graphDetails.start_date}
+                   onChange={e => setGraphDetails({...graphDetails, start_date: (new Date(e.target.value)).toSQLDate()})} />
+            <Field name="start_date"
+                   type="date"
+                   value={graphDetails.end_date}
+                   onChange={e => setGraphDetails({...graphDetails, end_date: (new Date(e.target.value)).toSQLDate()})} />
+            <div className="form-control">
+                <select className={` mt-2 w-full rounded dark:bg-gray-700`}
+                        value={graphDetails.period}
+                        onChange={e => setGraphDetails({...graphDetails, period: e.target.value})}>
+                    <option value="day">Jour</option>
+                {/*    <option value="week">Semaine</option>*/}
+                    <option value="month">Mois</option>
+                    <option value="year">Année</option>
+                </select>
+            </div>
+        </form>
+        <div ref={targetRef} className="mb-20 min-h-96">
+            <RainFallEcharts width={dimensions.width}
+                             height={500}
+                             data={graphData}
+                             loading={loading} />
+            {/*<RainfallGraph width={dimensions.width}*/}
+            {/*               height={500}*/}
+            {/*               data={graphData} start_date={graphDetails.start_date}*/}
+            {/*               end_date={graphDetails.end_date} />*/}
+        </div>
+    </PageLayout>
+}
+
+export default RainfallGraph