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

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

@@ -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}

13
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)
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>
</>
}