MuhamadFaisAizat
/
MIF_E31220954
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:memperbaiki pesan kesalahan saat menginputan

This commit is contained in:
muhamad fais aizat 2025-05-08 10:35:08 +07:00
parent 89ce77b631
commit fddd8bb413
2 changed files with 99 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/src/pages/LandingPage/LandingPage.jsx
View File

@ -10,15 +10,15 @@ import BgTomat from '../../assets/bg-tomat.png'
const LandingPage = () => {
const [date, setDate] = useState(null);
const [dataYAxis, setDataYAxis] = useState([11000, 15000]);
const [priceType, setPriceType] = useState("all");
const [priceType, setPriceType] = useState("");
const [chartData, setChartData] = useState([]);
const [tabelDataAktual, setTabelDataAktual] = useState([]);
const [tabelDataPredict, setTabelDataPredict] = useState([]);
return (
<ScrollArea
className="h-screen w-full bg-cover bg-center bg-no-repeat relative bg-white bg-opacity-15 "
style={{ backgroundImage: `url(${BgTomat})` }}
<ScrollArea
className="h-screen w-full bg-cover bg-center bg-no-repeat relative bg-white bg-opacity-15 "
style={{ backgroundImage: `url(${BgTomat})` }}
>
<div className=' grid gap-7 '>
<Navbar />
@ -31,21 +31,33 @@ const LandingPage = () => {
<h2 className='text-[14px] font-bold text-white '>Tabel Harga Tomat Konsumen dari Tanggal Terpilih</h2>
</div>
<div className='px-[10%] '>
<div className=' border rounded-[20px] bg-[#ffffff81] px-[10px] py-[10px]'>
<div className=' border rounded-[20px] bg-[#ffffff81] px-[10px] py-[10px]'>
<ScrollArea>
<div className='flex gap-[20px] rounded-[18px] bg-white px-[30px] py-[10px]'>
{tabelDataAktual.length > 0 && <TableAktual tabelDataAktual={tabelDataAktual} />}
{tabelDataPredict.length > 0 && <TablePrediksi tabelDataPredict={tabelDataPredict} />}
{priceType === "all" && (
<>
{tabelDataAktual.length > 0 && <TableAktual tabelDataAktual={tabelDataAktual} />}
{tabelDataPredict.length > 0 && <TablePrediksi tabelDataPredict={tabelDataPredict} />}
</>
)}
{priceType === "actual" && tabelDataAktual.length > 0 && (
<TableAktual tabelDataAktual={tabelDataAktual} />
)}
{priceType === "predicted" && tabelDataPredict.length > 0 && (
<TablePrediksi tabelDataPredict={tabelDataPredict} />
)}
</div>
<ScrollBar orientation="horizontal" />
</ScrollArea>
</div>
</ScrollArea>
</div>
</div>
</div>
)}
</div>
<Toaster />

78
frontend/src/pages/LandingPage/ViewGrafik.jsx
View File

@ -46,9 +46,10 @@ const ViewGrafik = ({ date, setDate, dataYAxis, setDataYAxis, priceType, setPric
const [dateTerlama, setDateTerlama] = useState(null);
const oldestDate = dateTerlama ? parseISO(dateTerlama) : null;
const latestDate = dateTerbaru ? parseISO(dateTerbaru) : null;
const [tempPriceType, setTempPriceType] = useState("");
const handleDateChange = (selectedDate) => setDate(selectedDate);
const handlePriceTypeChange = (value) => setPriceType(value);
const handlePriceTypeChange = (value) => setTempPriceType(value);
const fetchDataDate = async () => {
try {
@ -67,8 +68,32 @@ const ViewGrafik = ({ date, setDate, dataYAxis, setDataYAxis, priceType, setPric
}, []);
const fetchData = async () => {
const formattedDate = format(date, "yyyy-MM-dd");
if (!date && !tempPriceType) {
setTabelDataAktual([]);
setTabelDataPredict([]);
setPriceType("");
setChartData([]);
setDataYAxis([11000, 15000]);
toast({
description: "tanggal dan harga harus di isi!",
variant: "destructive",
});
return;
}
if (!date) {
setTabelDataAktual([]);
setTabelDataPredict([]);
setPriceType("");
setChartData([]);
setDataYAxis([11000, 15000]);
toast({
description: "Pilih tanggal terlebih dahulu!",
variant: "destructive",
@ -76,16 +101,63 @@ const ViewGrafik = ({ date, setDate, dataYAxis, setDataYAxis, priceType, setPric
return;
}
const formattedDate = format(date, "yyyy-MM-dd");
if (formattedDate==dateTerbaru && tempPriceType=="all") {
setTabelDataAktual([]);
setTabelDataPredict([]);
setPriceType("");
setChartData([]);
setDataYAxis([11000, 15000]);
toast({
description: "tanggal ini hanya ada data prediksi",
variant: "destructive",
});
return;
}
if (formattedDate==dateTerbaru && tempPriceType=="actual") {
setTabelDataAktual([]);
setTabelDataPredict([]);
setPriceType("");
setChartData([]);
setDataYAxis([11000, 15000]);
toast({
description: "tanggal ini hanya ada data prediksi",
variant: "destructive",
});
return;
}
if (!tempPriceType) {
setTabelDataAktual([]);
setTabelDataPredict([]);
setPriceType("");
setChartData([]);
setDataYAxis([11000, 15000]);
toast({
description: "Pilih harga terlebih dahulu!",
variant: "destructive",
});
return;
}
try {
const response = await axios.get(`${API_URL}/predict/history?tanggal=${formattedDate}&data_type=${priceType}`);
const response = await axios.get(`${API_URL}/predict/history?tanggal=${formattedDate}&data_type=${tempPriceType}`);
const formattedData = response.data.dataGrafik.map(item => ({
date: item.tanggal,
actual: item.harga_aktual,
predicted: item.harga_prediksi
}));
setPriceType(tempPriceType);
setDataYAxis(response.data.YAxis);
setChartData(formattedData);
setTabelDataAktual(response.data.dataTableAktual);