add rainfall sum

resources/js/pages/Rainfall/RainfallGraph.tsx

@@ -39,7 +39,8 @@ const RainfallGraph = () => {
 
     return <PageLayout>
         {errorLabel()}
-        <form className="mx-5 mb-2 flex flex-wrap gap-2">
+        <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}
@@ -65,6 +66,9 @@ const RainfallGraph = () => {
                     </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,12 +162,19 @@ 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`}>
+        <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={weatherState?.main + ' ' + weatherState?.icon}
+                     alt={value.weather[0].description}
                      width="80px"/>
             </div>
             <div className="text-center">
@@ -177,5 +185,4 @@ const WeatherCard: FC<{date: string, values: WeatherValue[]}> = ({date, values=
             {value.weather[0].description}
         </li>)}
     </ul>
-    </>
 }