sosokker/HomieCare
1
0
Fork 0
mirror of https://github.com/Sosokker/HomieCare.git synced 2025-12-20 02:14:05 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add Alert UI in stat page

Browse Source
This commit is contained in:
sosokker 2024-05-13 01:30:15 +07:00
parent 4c08508b81
commit 568567f2f7
1 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/pages/Dashboard/Statistic.tsx
View File

@ -8,6 +8,8 @@ import { FaTemperatureHigh, FaRegLightbulb } from 'react-icons/fa';
import { WiHumidity } from 'react-icons/wi'; import { WiHumidity } from 'react-icons/wi';
import { PiFactoryBold } from 'react-icons/pi'; import { PiFactoryBold } from 'react-icons/pi';
import { TbBuildingFactory } from 'react-icons/tb'; import { TbBuildingFactory } from 'react-icons/tb';
import Alert from '../../components/Alert/Alert';
import { import {
fetchWeatherDataList, fetchWeatherDataList,
fetchOutdoorWeatherData, fetchOutdoorWeatherData,
@ -47,32 +49,28 @@ const Statistic: React.FC = () => {
<CardDataStats <CardDataStats
title="Outdoor Temperature" title="Outdoor Temperature"
total={`${outdoorWeatherData?.avg_outdoor_temp.toPrecision(3) ?? '-'} °C`} total={`${outdoorWeatherData?.avg_outdoor_temp.toPrecision(3) ?? '-'} °C`}
rate="0.43%" rate=""
levelUp
> >
<FaTemperatureHigh /> <FaTemperatureHigh />
</CardDataStats> </CardDataStats>
<CardDataStats <CardDataStats
title="Outdoor Humidity" title="Outdoor Humidity"
total={`${outdoorWeatherData?.avg_outdoor_humidity ?? '-'} %`} total={`${outdoorWeatherData?.avg_outdoor_humidity ?? '-'} %`}
rate="4.35%" rate=""
levelUp
> >
<WiHumidity /> <WiHumidity />
</CardDataStats> </CardDataStats>
<CardDataStats <CardDataStats
title="Outdoor PM2.5" title="Outdoor PM2.5"
total={`${outdoorWeatherData?.avg_outdoor_pm25 ?? '-'} µg/m³`} total={`${outdoorWeatherData?.avg_outdoor_pm25 ?? '-'} µg/m³`}
rate="2.59%" rate=""
levelUp
> >
<PiFactoryBold /> <PiFactoryBold />
</CardDataStats> </CardDataStats>
<CardDataStats <CardDataStats
title="Outdoor PM10" title="Outdoor PM10"
total={`${outdoorWeatherData?.avg_outdoor_pm10 ?? '-'} µg/m³`} total={`${outdoorWeatherData?.avg_outdoor_pm10 ?? '-'} µg/m³`}
rate="0.95%" rate=""
levelDown
> >
<TbBuildingFactory /> <TbBuildingFactory />
</CardDataStats> </CardDataStats>
@ -81,21 +79,29 @@ const Statistic: React.FC = () => {
<CardDataStats <CardDataStats
title="Indoor Temperature" title="Indoor Temperature"
total={`${indoorWeatherData?.avg_indoor_temp ?? '-'} °C`} total={`${indoorWeatherData?.avg_indoor_temp ?? '-'} °C`}
rate="0.43%" rate=""
levelUp
> >
<FaTemperatureHigh /> <FaTemperatureHigh />
</CardDataStats> </CardDataStats>
<CardDataStats <CardDataStats
title="Indoor Light" title="Indoor Light"
total={`${indoorWeatherData?.avg_indoor_light ?? '-'} Lux`} total={`${indoorWeatherData?.avg_indoor_light ?? '-'} Lux`}
rate="4.35%" rate=""
levelUp
> >
<FaRegLightbulb /> <FaRegLightbulb />
</CardDataStats> </CardDataStats>
</div> </div>
{/* Recommendation Card */}
<div className="mt-6">
<Alert
indoor_temp={indoorWeatherData?.avg_indoor_temp}
outdoor_temp={outdoorWeatherData?.avg_outdoor_temp}
outdoor_pm25={outdoorWeatherData?.avg_outdoor_pm25}
outdoor_pm10={outdoorWeatherData?.avg_outdoor_pm10}
outdoor_humidity={outdoorWeatherData?.avg_outdoor_humidity}
/>
</div>
<div className="mt-4 grid grid-cols-12 gap-4 md:mt-6 md:gap-6 2xl:mt-7.5 2xl:gap-7.5"> <div className="mt-4 grid grid-cols-12 gap-4 md:mt-6 md:gap-6 2xl:mt-7.5 2xl:gap-7.5">
<LineChart /> <LineChart />
<BarChart /> <BarChart />