add monthly rainfalls

resources/js/components/rainfall/YearRainfaill.tsx

@@ -0,0 +1,52 @@
+import React, {useState, useEffect} from "react"
+import Card from "../Card"
+import useAxiosTools from "../../hooks/AxiosTools"
+import {AxiosError} from "axios"
+import {monthlyRainfall} from "../../types"
+
+const YearRainfall = () => {
+
+    const {errorCatch, errorLabel, setError, axiosGet} = useAxiosTools()
+    const [data, setData] = useState<monthlyRainfall[]>([])
+    const months = Array(13)
+        .reduce((result, item, index) => {
+            const date = new Date()
+            console.log(item, index, date)
+            return item
+        }, [])
+    console.log(months)
+
+    useEffect(() => {
+        fetchData()
+    }, [])
+
+    const fetchData = async () => {
+        try {
+            const res = await axiosGet('/api/rainfalls/last-months')
+            setData(res.data)
+        } catch (e) {
+            if (e instanceof AxiosError) {
+                setError(e.message)
+            } else {
+                errorCatch(e)
+            }
+        }
+    }
+
+    return <div>
+        <Card className="w-full min-w-[300px] self-start overflow-hidden md:w-auto">
+            <h1 className="-mx-2 -mt-1 bg-blue-500 px-2 py-1 text-center text-lg font-bold text-white">Précipitations des derniers mois</h1>
+            {errorLabel()}
+            <table className="w-full text-center">
+                <tbody>
+                {data.map(line => <tr key={line.year + '-' + line.month} className="">
+                    <td>{line.label}</td>
+                    <td className="px-2 text-right">{line.values}</td>
+                </tr>)}
+                </tbody>
+            </table>
+        </Card>
+    </div>
+}
+
+export  default YearRainfall