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}