77 lines
2.9 KiB
TypeScript
77 lines
2.9 KiB
TypeScript
import React, {FC, useState, useEffect} from "react"
|
|
import Card from "../Card"
|
|
import useAxiosTools from "../../hooks/AxiosTools"
|
|
import {AxiosError} from "axios"
|
|
import {monthlyRainfall} from "../../types"
|
|
|
|
const YearRainfall: FC<YearRainfallProps> = ({loadedAt}) => {
|
|
|
|
const {errorCatch, errorLabel, setError, axiosGet} = useAxiosTools()
|
|
const [data, setData] = useState<monthlyRainfall[][]>([])
|
|
|
|
useEffect(() => {
|
|
fetchData()
|
|
}, [loadedAt])
|
|
|
|
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 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 overflow-y-scroll text-center">
|
|
<thead>
|
|
<tr>
|
|
<th>Mois</th>
|
|
<th>{(new Date).getFullYear()}</th>
|
|
<th>{(new Date).getFullYear() - 1}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{Object.entries(data)
|
|
.map(([month, months]) => <tr key={month}>
|
|
<td>{months[0].label}</td>
|
|
<td>{months.find(m => m.year === (new Date).getFullYear() && m.month === Number(month))?.values}</td>
|
|
<td>{months.find(m => m.year === ((new Date).getFullYear() - 1) && m.month === Number(month))?.values}</td>
|
|
</tr>
|
|
)}
|
|
{/*<tr className="font-semibold">*/}
|
|
{/* <td>Total</td>*/}
|
|
{/* {Object.entries(data).at(0).at(1).map(i => i.year)*/}
|
|
{/* .sort((a,b) => b > a)*/}
|
|
{/* .map(year => <td key={year}>*/}
|
|
{/* {Object.entries(data).reduce((acc, item) => {*/}
|
|
{/* console.log(item.at(1), year)*/}
|
|
{/* item.at(1).forEach(month => {*/}
|
|
{/* console.log(month)*/}
|
|
{/* if(month.year === year) {*/}
|
|
{/* acc += month.values*/}
|
|
{/* }*/}
|
|
{/* })*/}
|
|
{/* return acc*/}
|
|
{/* }, 0)}*/}
|
|
{/* </td>)}*/}
|
|
{/*</tr>*/}
|
|
</tbody>
|
|
</table>
|
|
</Card>
|
|
</div>
|
|
}
|
|
|
|
export default YearRainfall
|
|
|
|
interface YearRainfallProps {
|
|
loadedAt: Date,
|
|
}
|