add rainfall sum

resources/js/pages/Rainfall/RainfallGraph.tsx

@@ -39,32 +39,36 @@ const RainfallGraph = () => {
 
     return <PageLayout>
         {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 className="mx-5 mb-2 flex items-center justify-between">
+            <form className="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>Total : <strong>{graphData.reduce((result, item) => result += item.value, 0)}</strong> mm</div>
+        </div>
+
         <div ref={targetRef} className="mb-20 min-h-96">
             <RainFallEcharts width={dimensions.width}
                              height={500}

resources/js/pages/Weather.tsx

@@ -101,6 +101,7 @@ const WeatherCard: FC<{date: string, values: WeatherValue[]}> = ({date, values=
     const [showDetails, setShowDetails] = useState(false)
 
     useEffect(() => {
+        console.log(values)
         const weatherState = {
             min: 100,
             max: -100,
@@ -161,21 +162,27 @@ const WeatherCard: FC<{date: string, values: WeatherValue[]}> = ({date, values=
                 <span className="text-secondary dark:text-secondary-ligth">{weatherState?.min.toFixed()} °C</span>
             </div>
         </div>
-        <ul className={`${showDetails ? 'h-44 opacity-100' : 'h-0 opacity-0'} flex gap-2 overflow-hidden overflow-x-auto transition-all`}>
-            {values.map(value => <li key={value.dt} className="w-40">
-                <div className="text-center">{Number(value.dt_txt.split(' ')[1].split(':')[0])} h</div>
-                <div>
-                    <Img src={`images/icons/${value.weather[0].icon.replace('n', 'd')}.svg`}
-                         alt={weatherState?.main + ' ' + weatherState?.icon}
-                         width="80px"/>
-                </div>
-                <div className="text-center">
-                    <span className="font-bold">
-                        {value.main.temp}
-                    </span> °C
-                </div>
-                {value.weather[0].description}
-            </li>)}
-        </ul>
+        <WeatherDetails showDetails={showDetails} closeDetails={() => showDetails(false)} values={values} />
     </>
 }
+
+const WeatherDetails: FC<{showDetails: boolean, closeDetails: () => void, values: WeatherValue[]}> = ({showDetails, closeDetails, values}) => {
+
+    return <ul onClick={closeDetails}
+        className={`${showDetails ? 'h-44 opacity-100' : 'h-0 opacity-0'} flex gap-2 overflow-hidden overflow-x-auto transition-all`}>
+        {values.map(value => <li key={value.dt} className="w-40">
+            <div className="text-center">{Number(value.dt_txt.split(' ')[1].split(':')[0])} h</div>
+            <div>
+                <Img src={`images/icons/${value.weather[0].icon.replace('n', 'd')}.svg`}
+                     alt={value.weather[0].description}
+                     width="80px"/>
+            </div>
+            <div className="text-center">
+                <span className="font-bold">
+                    {value.main.temp}
+                </span> °C
+            </div>
+            {value.weather[0].description}
+        </li>)}
+    </ul>
+}