fix nan issue

master
TZGyn 11 months ago
parent 4f8b6b7101
commit 09a307f8d6

2
.gitignore vendored

@ -34,3 +34,5 @@ yarn-error.log*
# typescript # typescript
*.tsbuildinfo *.tsbuildinfo
next-env.d.ts next-env.d.ts
output.txt

@ -5,277 +5,267 @@ import { MinuteChart } from "./(charts)/minute";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { import {
Card, Card,
CardContent, CardContent,
CardFooter, CardFooter,
CardHeader, CardHeader,
CardTitle, CardTitle,
} from "@/components/ui/card"; } from "@/components/ui/card";
export default async function Home() { export default async function Home() {
const file = await fs.promises.readFile("./output.txt"); const file = await fs.promises.readFile("./output.txt");
const lines = file.toString().split("\n"); const lines = file.toString().split("\n");
const data = lines.map((line) => { const data = lines.map((line) => {
const [timestamp, _, value] = line.split(","); const [timestamp, _, value] = line.split(",");
return { return {
timestamp: Math.round(parseFloat(timestamp) * 1000), timestamp: Math.round(parseFloat(timestamp) * 1000),
foldtime: parseFloat(value), foldtime: parseFloat(value),
}; };
}); });
const thisMonthData = convertDataToThisMonthPerDay(data); const thisMonthData = convertDataToThisMonthPerDay(data);
const thisHourData = convertDataToThisHourPerMinute(data); const thisHourData = convertDataToThisHourPerMinute(data);
const todayData = convertDataToTodayPerHour(data); const todayData = convertDataToTodayPerHour(data);
return ( return (
<main className="flex-grow w-full flex flex-col justify-center gap-4 items-center p-4"> <main className="flex-grow w-full flex flex-col justify-center gap-4 items-center p-4">
<div className="p-4 w-full bg-accent max-w-[1200px] rounded-xl flex justify-start gap-4"> <div className="p-4 w-full bg-accent max-w-[1200px] rounded-xl flex justify-start gap-4">
<div className="flex flex-col gap-2 items-start p-4"> <div className="flex flex-col gap-2 items-start p-4">
<span className="text-muted-foreground">This Month</span> <span className="text-muted-foreground">This Month</span>
<h2 className="text-2xl font-bold"> <h2 className="text-2xl font-bold">
{thisMonthData.reduce((acc, curr) => { {thisMonthData.reduce((acc, curr) => {
return acc + 1; return acc + 1;
}, 0)} }, 0)}
{" Towel(s)"} {" Towel(s)"}
</h2> </h2>
<span className="text-muted-foreground"> <span className="text-muted-foreground">
Avg Fold Time (s):{" "} Avg Fold Time (s):{" "}
{thisMonthData.reduce((acc, curr) => { {thisMonthData.reduce((acc, curr) => {
return acc + curr.foldtime; return acc + curr.foldtime;
}, 0) / thisMonthData.length || 0} }, 0) / thisMonthData.length || 0}
</span> </span>
</div> </div>
<div className="flex flex-col gap-2 items-start p-4"> <div className="flex flex-col gap-2 items-start p-4">
<span className="text-muted-foreground">Today</span> <span className="text-muted-foreground">Today</span>
<h2 className="text-2xl font-bold"> <h2 className="text-2xl font-bold">
{todayData.reduce((acc, curr) => { {todayData.reduce((acc, curr) => {
return acc + 1; return acc + 1;
}, 0)} }, 0)}
{" Towel(s)"} {" Towel(s)"}
</h2> </h2>
<span className="text-muted-foreground"> <span className="text-muted-foreground">
Avg Fold Time (s):{" "} Avg Fold Time (s):{" "}
{todayData.reduce((acc, curr) => { {todayData.reduce((acc, curr) => {
return acc + curr.foldtime; return acc + curr.foldtime;
}, 0) / todayData.length || 0} }, 0) / todayData.length || 0}
</span> </span>
</div> </div>
<div className="flex flex-col gap-2 items-start p-4"> <div className="flex flex-col gap-2 items-start p-4">
<span className="text-muted-foreground">This Month</span> <span className="text-muted-foreground">This Month</span>
<h2 className="text-2xl font-bold"> <h2 className="text-2xl font-bold">
{thisMonthData.reduce((acc, curr) => { {thisMonthData.reduce((acc, curr) => {
return acc + 1; return acc + 1;
}, 0)} }, 0)}
{" Towel(s)"} {" Towel(s)"}
</h2> </h2>
<span className="text-muted-foreground"> <span className="text-muted-foreground">
Avg Fold Time (s):{" "} Avg Fold Time (s):{" "}
{thisHourData.reduce((acc, curr) => { {thisHourData.reduce((acc, curr) => {
return acc + curr.foldtime; return acc + curr.foldtime;
}, 0) / thisHourData.length || 0} }, 0) / thisHourData.length || 0}
</span> </span>
</div> </div>
</div> </div>
<Card className="w-full max-w-[1200px]"> <Card className="w-full max-w-[1200px]">
<Tabs defaultValue="month" className="w-full"> <Tabs defaultValue="month" className="w-full">
<CardHeader> <CardHeader>
<TabsList className="w-full"> <TabsList className="w-full">
<TabsTrigger className="w-full" value="month"> <TabsTrigger className="w-full" value="month">
Month Month
</TabsTrigger> </TabsTrigger>
<TabsTrigger className="w-full" value="day"> <TabsTrigger className="w-full" value="day">
Day Day
</TabsTrigger> </TabsTrigger>
<TabsTrigger className="w-full" value="hour"> <TabsTrigger className="w-full" value="hour">
Hour Hour
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<TabsContent value="month"> <TabsContent value="month">
<DayChart <DayChart
chartData={convertDataToThisMonthPerDayChartData( chartData={convertDataToThisMonthPerDayChartData(thisMonthData)}
thisMonthData />
)} </TabsContent>
/> <TabsContent value="day">
</TabsContent> <HourChart
<TabsContent value="day"> chartData={convertDataToTodayPerHourChartData(todayData)}
<HourChart />
chartData={convertDataToTodayPerHourChartData( </TabsContent>
todayData <TabsContent value="hour">
)} <MinuteChart
/> chartData={convertDataToThisHourPerMinuteChartData(
</TabsContent> thisHourData
<TabsContent value="hour"> )}
<MinuteChart />
chartData={convertDataToThisHourPerMinuteChartData( </TabsContent>
thisHourData </CardContent>
)} <CardFooter></CardFooter>
/> </Tabs>
</TabsContent> </Card>
</CardContent> </main>
<CardFooter></CardFooter> );
</Tabs>
</Card>
</main>
);
} }
const convertDataToThisMonthPerDay = ( const convertDataToThisMonthPerDay = (
data: { timestamp: number; foldtime: number }[] data: { timestamp: number; foldtime: number }[]
) => { ) => {
const thisMonthTimestamp = new Date(); const thisMonthTimestamp = new Date();
thisMonthTimestamp.setHours(0, 0, 0, 0); thisMonthTimestamp.setHours(0, 0, 0, 0);
thisMonthTimestamp.setDate(1); thisMonthTimestamp.setDate(1);
const nextMonthTimestamp = new Date(); const nextMonthTimestamp = new Date();
nextMonthTimestamp.setHours(0, 0, 0, 0); nextMonthTimestamp.setHours(0, 0, 0, 0);
nextMonthTimestamp.setDate(1); nextMonthTimestamp.setDate(1);
nextMonthTimestamp.setMonth(nextMonthTimestamp.getMonth() + 1); nextMonthTimestamp.setMonth(nextMonthTimestamp.getMonth() + 1);
console.log(thisMonthTimestamp.getTime(), nextMonthTimestamp.getTime()); const thisMonthData = data.filter(
(data) =>
data.timestamp >= thisMonthTimestamp.getTime() &&
data.timestamp < nextMonthTimestamp.getTime()
);
const thisMonthData = data.filter( return thisMonthData;
(data) =>
data.timestamp >= thisMonthTimestamp.getTime() &&
data.timestamp < nextMonthTimestamp.getTime()
);
return thisMonthData;
}; };
const convertDataToThisMonthPerDayChartData = ( const convertDataToThisMonthPerDayChartData = (
data: { timestamp: number; foldtime: number }[] data: { timestamp: number; foldtime: number }[]
) => { ) => {
const todayDataPerHour = data.reduce((acc, data) => { const todayDataPerHour = data.reduce((acc, data) => {
const day = new Date(data.timestamp).getDate(); const day = new Date(data.timestamp).getDate();
if (!acc[day]) { if (!acc[day]) {
acc[day] = { acc[day] = {
count: 0, count: 0,
foldTime: 0, foldTime: 0,
}; };
} }
acc[day].count += 1; acc[day].count += 1;
acc[day].foldTime += data.foldtime; acc[day].foldTime += data.foldtime;
return acc; return acc;
}, {} as Record<number, { count: number; foldTime: number }>); }, {} as Record<number, { count: number; foldTime: number }>);
const thisMonthDays = new Date(); const thisMonthDays = new Date();
thisMonthDays.setMonth(thisMonthDays.getMonth() + 1); thisMonthDays.setMonth(thisMonthDays.getMonth() + 1);
thisMonthDays.setDate(1); thisMonthDays.setDate(1);
thisMonthDays.setDate(thisMonthDays.getDate() - 1); thisMonthDays.setDate(thisMonthDays.getDate() - 1);
const chartData = new Array(thisMonthDays.getDate()).fill(0).map((_, i) => { const chartData = new Array(thisMonthDays.getDate()).fill(0).map((_, i) => {
const day = i + 1; const day = i + 1;
if (!todayDataPerHour[day]) if (!todayDataPerHour[day])
return { day: "Day " + day, value: 0, foldtime: 0 }; return { day: "Day " + day, value: 0, foldtime: 0 };
return { return {
day: "Day " + day, day: "Day " + day,
value: todayDataPerHour[day].count, value: todayDataPerHour[day].count,
foldtime: foldtime:
todayDataPerHour[day].foldTime / todayDataPerHour[day].count, todayDataPerHour[day].foldTime / todayDataPerHour[day].count || 0,
}; };
}); });
return chartData; return chartData;
}; };
const convertDataToThisHourPerMinute = ( const convertDataToThisHourPerMinute = (
data: { timestamp: number; foldtime: number }[] data: { timestamp: number; foldtime: number }[]
) => { ) => {
const thisHourTimestamp = new Date(); const thisHourTimestamp = new Date();
thisHourTimestamp.setMinutes(0, 0, 0); thisHourTimestamp.setMinutes(0, 0, 0);
const nextHourTimestamp = new Date(); const nextHourTimestamp = new Date();
nextHourTimestamp.setHours(nextHourTimestamp.getHours() + 1); nextHourTimestamp.setHours(nextHourTimestamp.getHours() + 1);
nextHourTimestamp.setMinutes(0, 0, 0); nextHourTimestamp.setMinutes(0, 0, 0);
console.log(thisHourTimestamp.getTime(), nextHourTimestamp.getTime());
const todayData = data.filter( const todayData = data.filter(
(data) => (data) =>
data.timestamp >= thisHourTimestamp.getTime() && data.timestamp >= thisHourTimestamp.getTime() &&
data.timestamp < nextHourTimestamp.getTime() data.timestamp < nextHourTimestamp.getTime()
); );
return todayData; return todayData;
}; };
const convertDataToThisHourPerMinuteChartData = ( const convertDataToThisHourPerMinuteChartData = (
data: { timestamp: number; foldtime: number }[] data: { timestamp: number; foldtime: number }[]
) => { ) => {
const todayDataPerHour = data.reduce((acc, data) => { const todayDataPerHour = data.reduce((acc, data) => {
const hour = new Date(data.timestamp).getMinutes(); const hour = new Date(data.timestamp).getMinutes();
if (!acc[hour]) { if (!acc[hour]) {
acc[hour] = { acc[hour] = {
count: 0, count: 0,
foldTime: 0, foldTime: 0,
}; };
} }
acc[hour].count += 1; acc[hour].count += 1;
acc[hour].foldTime += data.foldtime; acc[hour].foldTime += data.foldtime;
return acc; return acc;
}, {} as Record<number, { count: number; foldTime: number }>); }, {} as Record<number, { count: number; foldTime: number }>);
const chartData = new Array(60).fill(0).map((_, i) => { const chartData = new Array(60).fill(0).map((_, i) => {
if (!todayDataPerHour[i]) if (!todayDataPerHour[i])
return { minute: "Minute " + i, value: 0, foldtime: 0 }; return { minute: "Minute " + i, value: 0, foldtime: 0 };
return { return {
minute: "Minute " + i, minute: "Minute " + i,
value: todayDataPerHour[i].count, value: todayDataPerHour[i].count,
foldtime: todayDataPerHour[i].foldTime / todayDataPerHour[i].count, foldtime: todayDataPerHour[i].foldTime / todayDataPerHour[i].count || 0,
}; };
}); });
return chartData; return chartData;
}; };
const convertDataToTodayPerHour = ( const convertDataToTodayPerHour = (
data: { timestamp: number; foldtime: number }[] data: { timestamp: number; foldtime: number }[]
) => { ) => {
const todayTimestamp = new Date(); const todayTimestamp = new Date();
todayTimestamp.setHours(0, 0, 0, 0); todayTimestamp.setHours(0, 0, 0, 0);
const tomorrowTimestamp = new Date(); const tomorrowTimestamp = new Date();
tomorrowTimestamp.setHours(0, 0, 0, 0); tomorrowTimestamp.setHours(0, 0, 0, 0);
tomorrowTimestamp.setDate(tomorrowTimestamp.getDate() + 1); tomorrowTimestamp.setDate(tomorrowTimestamp.getDate() + 1);
console.log(todayTimestamp.getTime(), tomorrowTimestamp.getTime());
const todayData = data.filter( const todayData = data.filter(
(data) => (data) =>
data.timestamp >= todayTimestamp.getTime() && data.timestamp >= todayTimestamp.getTime() &&
data.timestamp < tomorrowTimestamp.getTime() data.timestamp < tomorrowTimestamp.getTime()
); );
return todayData; return todayData;
}; };
const convertDataToTodayPerHourChartData = ( const convertDataToTodayPerHourChartData = (
data: { timestamp: number; foldtime: number }[] data: { timestamp: number; foldtime: number }[]
) => { ) => {
const todayDataPerHour = data.reduce((acc, data) => { const todayDataPerHour = data.reduce((acc, data) => {
const hour = new Date(data.timestamp).getHours(); const hour = new Date(data.timestamp).getHours();
if (!acc[hour]) { if (!acc[hour]) {
acc[hour] = { acc[hour] = {
count: 0, count: 0,
foldTime: 0, foldTime: 0,
}; };
} }
acc[hour].count += 1; acc[hour].count += 1;
acc[hour].foldTime += data.foldtime; acc[hour].foldTime += data.foldtime;
return acc; return acc;
}, {} as Record<number, { count: number; foldTime: number }>); }, {} as Record<number, { count: number; foldTime: number }>);
const chartData = new Array(24).fill(0).map((_, i) => { const chartData = new Array(24).fill(0).map((_, i) => {
if (!todayDataPerHour[i]) if (!todayDataPerHour[i])
return { hour: i + 1 + ":00", value: 0, foldtime: 0 }; return { hour: i + 1 + ":00", value: 0, foldtime: 0 };
return { return {
hour: i + 1 + ":00", hour: i + 1 + ":00",
value: todayDataPerHour[i].count, value: todayDataPerHour[i].count,
foldtime: todayDataPerHour[i].foldTime / todayDataPerHour[i].count, foldtime: todayDataPerHour[i].foldTime / todayDataPerHour[i].count || 0,
}; };
}); });
return chartData; return chartData;
}; };

@ -1 +0,0 @@
1736158869.154258,Towel Detected,6.52
Loading…
Cancel
Save