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

Implement weather data UI logic

Browse Source
This commit is contained in:
sosokker 2024-05-11 17:39:09 +07:00
parent 5a37893596
commit 2caa415ac8
1 changed files with 90 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,51 +1,106 @@
import React from 'react'; import React, { useEffect, useState } from 'react';
import CardDataStats from '../../components/CardDataStats'; import CardDataStats from '../../components/CardDataStats';
import LineChart from '../../components/Charts/LineChart'; import LineChart from '../../components/Charts/LineChart';
import PieChart from '../../components/Charts/PieChart'; import PieChart from '../../components/Charts/PieChart';
import BarChart from '../../components/Charts/BarChart'; import BarChart from '../../components/Charts/BarChart';
import DefaultLayout from '../../layout/DefaultLayout'; import DefaultLayout from '../../layout/DefaultLayout';
import { FaTemperatureHigh } from 'react-icons/fa'; 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 {
fetchWeatherDataList,
fetchOutdoorWeatherData,
fetchIndoorWeatherData,
} from '../../api/WeatherData';
const Statistic: React.FC = () => { const Statistic: React.FC = () => {
const [weatherDataList, setWeatherDataList] = useState<WeatherData[] | null>(
null,
);
const [outdoorWeatherData, setOutdoorWeatherData] =
useState<WeatherData | null>(null);
const [indoorWeatherData, setIndoorWeatherData] =
useState<IndoorWeatherData | null>(null);
const days = 10;
useEffect(() => {
const fetchData = async () => {
const weatherList = await fetchWeatherDataList(days);
setWeatherDataList(weatherList);
const outdoorWeather = await fetchOutdoorWeatherData(days);
setOutdoorWeatherData(outdoorWeather);
const indoorWeather = await fetchIndoorWeatherData(days);
setIndoorWeatherData(indoorWeather);
};
fetchData();
}, [days]);
return ( return (
<DefaultLayout> <DefaultLayout>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 xl:grid-cols-4 2xl:gap-7.5"> <div className="container mx-auto">
<CardDataStats <h2 className="text-xl font-semibold mb-4">Weekly Average Data</h2>
title="Average Temperature" <div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 xl:grid-cols-4 2xl:gap-7.5">
total="$3.456K" <CardDataStats
rate="0.43%" title="Outdoor Temperature"
levelUp total={`${outdoorWeatherData?.avg_outdoor_temp.toPrecision(3) ?? '-'} °C`}
> rate="0.43%"
<FaTemperatureHigh /> levelUp
</CardDataStats> >
<CardDataStats <FaTemperatureHigh />
title="Average Humidity" </CardDataStats>
total="$45,2K" <CardDataStats
rate="4.35%" title="Outdoor Humidity"
levelUp total={`${outdoorWeatherData?.avg_outdoor_humidity ?? '-'} %`}
> rate="4.35%"
<WiHumidity /> levelUp
</CardDataStats> >
<CardDataStats title="Average PM2.5" total="2.450" rate="2.59%" levelUp> <WiHumidity />
<PiFactoryBold /> </CardDataStats>
</CardDataStats> <CardDataStats
<CardDataStats title="Outdoor PM2.5"
title="Average PM10" total={`${outdoorWeatherData?.avg_outdoor_pm25 ?? '-'} µg/m³`}
total="3.456" rate="2.59%"
rate="0.95%" levelUp
levelDown >
> <PiFactoryBold />
<TbBuildingFactory /> </CardDataStats>
</CardDataStats> <CardDataStats
</div> title="Outdoor PM10"
total={`${outdoorWeatherData?.avg_outdoor_pm10 ?? '-'} µg/m³`}
rate="0.95%"
levelDown
>
<TbBuildingFactory />
</CardDataStats>
</div>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 xl:grid-cols-4 2xl:gap-7.5 mt-2">
<CardDataStats
title="Indoor Temperature"
total={`${indoorWeatherData?.avg_indoor_temp ?? '-'} °C`}
rate="0.43%"
levelUp
>
<FaTemperatureHigh />
</CardDataStats>
<CardDataStats
title="Indoor Light"
total={`${indoorWeatherData?.avg_indoor_light ?? '-'} Lux`}
rate="4.35%"
levelUp
>
<FaRegLightbulb />
</CardDataStats>
</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 />
<PieChart /> <PieChart />
</div>
</div> </div>
</DefaultLayout> </DefaultLayout>
); );