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

Fetch weekly pm data instead of fix data point

Browse Source
This commit is contained in:
sosokker 2024-05-13 15:07:22 +07:00
parent 758e423866
commit e2b4fdc552
1 changed files with 25 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
frontend/src/components/Charts/BarChart.tsx
View File

@ -1,6 +1,7 @@
import { ApexOptions } from 'apexcharts';
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import ReactApexChart from 'react-apexcharts';
import { fetchWeatherDataList } from '../../api/WeatherData';
const options: ApexOptions = {
colors: ['#3C50E0', '#80CAEE'],
@ -43,9 +44,6 @@ const options: ApexOptions = {
enabled: false,
},
xaxis: {
categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
},
legend: {
position: 'top',
horizontalAlign: 'left',
@ -74,21 +72,36 @@ const ChartTwo: React.FC = () => {
series: [
{
name: 'PM 2.5',
data: [44, 55, 41, 67, 22, 43, 65],
data: [],
},
{
name: 'PM 10',
data: [13, 23, 20, 8, 13, 27, 15],
data: [],
},
],
});
const handleReset = () => {
setState((prevState) => ({
...prevState,
}));
};
handleReset;
useEffect(() => {
const fetchData = async () => {
try {
const weatherData = await fetchWeatherDataList(7);
const pm25Data = weatherData?.map((data) => data.outdoor_pm25) || [];
const pm10Data = weatherData?.map((data) => data.outdoor_pm10) || [];
setState({
series: [
{ name: 'PM 2.5', data: pm25Data },
{ name: 'PM 10', data: pm10Data },
],
});
} catch (error) {
console.error('Error fetching weather data:', error);
}
};
fetchData();
}, []);
return (
<div className="col-span-12 rounded-sm border border-stroke bg-white p-7.5 shadow-default dark:border-strokedark dark:bg-boxdark xl:col-span-4">
@ -98,42 +111,6 @@ const ChartTwo: React.FC = () => {
Air Quality
</h4>
</div>
<div>
<div className="relative z-20 inline-block">
<select
name="#"
id="#"
className="relative z-20 inline-flex appearance-none bg-transparent py-1 pl-3 pr-8 text-sm font-medium outline-none"
>
<option value="" className="dark:bg-boxdark">
This Week
</option>
<option value="" className="dark:bg-boxdark">
Last Week
</option>
</select>
<span className="absolute top-1/2 right-3 z-10 -translate-y-1/2">
<svg
width="10"
height="6"
viewBox="0 0 10 6"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.47072 1.08816C0.47072 1.02932 0.500141 0.955772 0.54427 0.911642C0.647241 0.808672 0.809051 0.808672 0.912022 0.896932L4.85431 4.60386C4.92785 4.67741 5.06025 4.67741 5.14851 4.60386L9.09079 0.896932C9.19376 0.793962 9.35557 0.808672 9.45854 0.911642C9.56151 1.01461 9.5468 1.17642 9.44383 1.27939L5.50155 4.98632C5.22206 5.23639 4.78076 5.23639 4.51598 4.98632L0.558981 1.27939C0.50014 1.22055 0.47072 1.16171 0.47072 1.08816Z"
fill="#637381"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M1.22659 0.546578L5.00141 4.09604L8.76422 0.557869C9.08459 0.244537 9.54201 0.329403 9.79139 0.578788C10.112 0.899434 10.0277 1.36122 9.77668 1.61224L9.76644 1.62248L5.81552 5.33722C5.36257 5.74249 4.6445 5.7544 4.19352 5.32924C4.19327 5.32901 4.19377 5.32948 4.19352 5.32924L0.225953 1.61241C0.102762 1.48922 -4.20186e-08 1.31674 -3.20269e-08 1.08816C-2.40601e-08 0.905899 0.0780105 0.712197 0.211421 0.578787C0.494701 0.295506 0.935574 0.297138 1.21836 0.539529L1.22659 0.546578ZM4.51598 4.98632C4.78076 5.23639 5.22206 5.23639 5.50155 4.98632L9.44383 1.27939C9.5468 1.17642 9.56151 1.01461 9.45854 0.911642C9.35557 0.808672 9.19376 0.793962 9.09079 0.896932L5.14851 4.60386C5.06025 4.67741 4.92785 4.67741 4.85431 4.60386L0.912022 0.896932C0.809051 0.808672 0.647241 0.808672 0.54427 0.911642C0.500141 0.955772 0.47072 1.02932 0.47072 1.08816C0.47072 1.16171 0.50014 1.22055 0.558981 1.27939L4.51598 4.98632Z"
fill="#637381"
/>
</svg>
</span>
</div>
</div>
</div>
<div>