add month year group for graph data

resources/js/pages/Rainfall.tsx

@@ -4,17 +4,18 @@ import LastFiveMesure from "../components/rainfall/LastFiveMesure";
 import AddRainfall from "../components/rainfall/AddRainfall";
 import RainfallGraph from "../components/rainfall/RainfallGraph";
 import useAxiosTools from "../hooks/AxiosTools";
-import {rainfall} from "../types";
+import {rainfall, rainfallGraphData} from "../types";
 import Field from "../components/Field";
 import useDimension from "../hooks/DimensionHook";
 
 const Rainfall = () => {
 
     const [loadedAt, reload] = useState(new Date)
-    const [graphData, setGraphData] = useState<rainfall[]>([])
+    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 {errorCatch, errorLabel, axiosGet} = useAxiosTools()
     const {targetRef, dimensions} = useDimension()
@@ -25,7 +26,7 @@ const Rainfall = () => {
 
     const fetchGraphData = async () => {
         try {
-            const params = `start=${graphDetails.start_date}&end=${graphDetails.end_date}`
+            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) {
@@ -49,6 +50,16 @@ const Rainfall = () => {
                    type="date"
                    value={graphDetails.end_date}
                    onChange={e => setGraphDetails({...graphDetails, end_date: (new Date(e.target.value)).toSQLDate()})} />
+            <div className="form-control">
+                <select className={` w-full mt-2 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">
             <RainfallGraph width={dimensions.width}