add lint js

resources/js/pages/Rainfall.tsx

@@ -1,12 +1,12 @@
 import React, {useEffect, useState} from "react"
-import PageLayout from "../components/PageLayout";
-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, rainfallGraphData} from "../types";
-import Field from "../components/Field";
-import useDimension from "../hooks/DimensionHook";
+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 Rainfall = () => {
 
@@ -17,7 +17,7 @@ const Rainfall = () => {
         end_date: (new Date()).toSQLDate(),
         period: 'day',
     })
-    const {errorCatch, errorLabel, axiosGet} = useAxiosTools()
+    const {loading, setLoading, errorCatch, errorLabel, axiosGet} = useAxiosTools()
     const {targetRef, dimensions} = useDimension()
 
     useEffect(() => {
@@ -26,22 +26,25 @@ const Rainfall = () => {
 
     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 gap-2 justify-between">
+        <div className="flex flex-wrap justify-between gap-2">
             <LastFiveMesure loadedAt={loadedAt} />
             <AddRainfall reload={reload} />
         </div>
 
         {errorLabel()}
-        <form className="flex mb-2 mx-5 gap-2 flex-wrap">
+        <form className="mx-5 mb-2 flex flex-wrap gap-2">
             <Field name="start_date"
                    type="date"
                    value={graphDetails.start_date}
@@ -51,7 +54,7 @@ const Rainfall = () => {
                    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`}
+                <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>
@@ -61,11 +64,15 @@ const Rainfall = () => {
                 </select>
             </div>
         </form>
-        <div ref={targetRef} className="mb-20">
-            <RainfallGraph width={dimensions.width}
-                           height={500}
-                           data={graphData} start_date={graphDetails.start_date}
-                           end_date={graphDetails.end_date} />
+        <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>
 }