I have a concern regarding the data retrieval process using tanstackquery. Currently, I am facing an issue where the day starts at day 2 instead of day when I attempt to display the data.
https://i.sstatic.net/LRTQztFd.png
This is how I retrieve my data from the server.
api/result-overview.tsx
export async function GET(request: Request) {
const { searchParams } = new URL(request.url)
const timeframe = searchParams.get('timeframe')
const year = searchParams.get("year")
const month = searchParams.get("month")
const queryParams = getHistoryDataSchema.safeParse({
timeframe,
year,
month
})
if (!queryParams.success) {
return Response.json(queryParams.error.message, {
status: 400
})
}
try {
const data = await getHistoryData(
queryParams.data.timeframe, {
month: queryParams.data.month,
year: queryParams.data.year
})
return Response.json(data)
} catch (error) {
return Response.json(error)
}
}
async function getMonthHistoryData(year: number, month: number): Promise<HistoryData[]> {
const statuses = ['pending', 'approved', 'done', 'cancel'] as const;
type Status = typeof statuses[number];
const results = await Promise.all(
statuses.map(status =>
db.scheduleDate.groupBy({
by: ['day'],
where: {
year,
month,
soft_delete_scheduleDate: false,
appointment: {
soft_delete: false,
status
}
},
orderBy: [{ day: 'asc' }],
_count: { _all: true },
})
)
);
const daysInMonth = new Date(year, month + 1, 0).getDate();
const history: HistoryData[] = Array.from({ length: daysInMonth }, (_, i) => {
const day = i + 1;
const counts: StatusCounts = {
pending: 0,
approved: 0,
done: 0,
cancel: 0,
};
statuses.forEach((status, index) => {
const dayData = results[index].find(item => item.day === day);
counts[status] = dayData ? dayData._count._all : 0;
});
return { year, month, day, counts };
});
return history;
}
And then, I implement it in my front-end using tanstack query. To create a smooth transition before displaying the actual code, I created a skeleton. However, I believe there is an issue along this line.
const date = new Date(year, month, (day ? day + 1 : 1));
History.tsx
const historyDataQuery = useQuery({
queryKey: ['overview', 'history', timeFrame, period],
queryFn: () => fetch(`/api/result-overview?timeframe=${timeFrame}&year=${period.year}&month=${period.month}`)
.then((res) => res.json())
.then((data) => data.map((item: any) => ({
...item,
pending: item.counts.pending,
approved: item.counts.approved,
done: item.counts.done,
cancel: item.counts.cancel,
})))
});
return (
<SkeletonWrapper isLoading={historyDataQuery.isFetching}>
{dataAvailable && (
<ResponsiveContainer width={"100%"} height={300}>
<BarChart data={historyDataQuery.data}>
<XAxis
stroke="#888888"
fontSize={12}
tickLine={false}
axisLine={false}
padding={{ left: 5, right: 5 }}
dataKey={(data) => {
const { year, month, day } = data;
const date = new Date(year, month, (day ? day + 1 : 1));
if (timeFrame === "year") {
return date.toLocaleDateString("default", {
month: "short",
});
}
return date.toLocaleDateString("default", {
day: "2-digit",
});
}}
/>
<YAxis
stroke="#888888"
fontSize={12}
domain={[0, 10]}
tickLine={false}
axisLine={false}
/>
<Bar dataKey="pending" fill="#eab308" />
<Bar dataKey="approved" fill="#10b981" />
<Bar dataKey="done" fill="#3b82f6" />
<Bar dataKey="cancel" fill="#ef4444" />
<Tooltip
cursor={{ opacity: 0.1 }}
content={(props) => (
<CustomToolTip {...props} />
)}
/>
</BarChart>
</ResponsiveContainer>
)}
</SkeletonWrapper>
)
However, changing it to
const date = new Date(year, month, day || 0);
causes the data to shift from 12 to 11