Romain/lara-bermite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add rainfall sum

Browse Source
This commit is contained in:
Romulus21
2024-05-03 10:17:05 +02:00
parent 49f0abd08c
commit 3bead64695
2 changed files with 53 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
resources/js/pages/Rainfall/RainfallGraph.tsx
View File

@@ -39,32 +39,36 @@ const RainfallGraph = () => {
return <PageLayout> return <PageLayout>
{errorLabel()} {errorLabel()}
<form className="mx-5 mb-2 flex flex-wrap gap-2"> <div className="mx-5 mb-2 flex items-center justify-between">
<Field name="start_date" <form className="flex flex-wrap gap-2">
type="date" <Field name="start_date"
value={graphDetails.start_date} type="date"
onChange={e => setGraphDetails({ value={graphDetails.start_date}
...graphDetails, onChange={e => setGraphDetails({
start_date: (new Date(e.target.value)).toSQLDate() ...graphDetails,
})}/> start_date: (new Date(e.target.value)).toSQLDate()
<Field name="start_date" })}/>
type="date" <Field name="start_date"
value={graphDetails.end_date} type="date"
onChange={e => setGraphDetails({ value={graphDetails.end_date}
...graphDetails, onChange={e => setGraphDetails({
end_date: (new Date(e.target.value)).toSQLDate() ...graphDetails,
})}/> end_date: (new Date(e.target.value)).toSQLDate()
<div className="form-control"> })}/>
<select className={` mt-2 w-full rounded dark:bg-gray-700`} <div className="form-control">
value={graphDetails.period} <select className={` mt-2 w-full rounded dark:bg-gray-700`}
onChange={e => setGraphDetails({...graphDetails, period: e.target.value})}> value={graphDetails.period}
<option value="day">Jour</option> onChange={e => setGraphDetails({...graphDetails, period: e.target.value})}>
{/* <option value="week">Semaine</option>*/} <option value="day">Jour</option>
<option value="month">Mois</option> {/* <option value="week">Semaine</option>*/}
<option value="year">Année</option> <option value="month">Mois</option>
</select> <option value="year">Année</option>
</div> </select>
</form> </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"> <div ref={targetRef} className="mb-20 min-h-96">
<RainFallEcharts width={dimensions.width} <RainFallEcharts width={dimensions.width}
height={500} height={500}

39
resources/js/pages/Weather.tsx
View File

@@ -101,6 +101,7 @@ const WeatherCard: FC<{date: string, values: WeatherValue[]}> = ({date, values=
const [showDetails, setShowDetails] = useState(false) const [showDetails, setShowDetails] = useState(false)
useEffect(() => { useEffect(() => {
console.log(values)
const weatherState = { const weatherState = {
min: 100, min: 100,
max: -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> <span className="text-secondary dark:text-secondary-ligth">{weatherState?.min.toFixed()} °C</span>
</div> </div>
</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} />
{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>
</> </>
} }
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>
}