Next.js Discord

Discord Forum

Tracking habit with stacked bar chart

Unanswered
Axus posted this in #help-forum
Open in Discord
Hi, I'm trying to make a chart (stacked bar), with recharts for habit tracking (see example PJ) but it's too hard to manipulate and format the data in the database to do it. I use nextJs with typescript
I started with this (I use date-fns for dates):

const start = startOfWeek(new Date(), { weekStartsOn: 1 }); // Start of week (Monday)
const end = endOfWeek(new Date(), { weekStartsOn: 1 }); // End of week (Sunday)

// Retrieve logs between these dates
const logs = await prisma.log.findMany({
  where: {
    userId,
    loggetAt: {
    gte: start,
    lte: end,
  },
  },
    select: {
    loggetAt: true,
    completed: true,
  },

  //and i don't know what to do next
});

but then I don't know what to do, I asked chat gpt and it gave me some complex method (.reduce, it also formatted the data, something I still can't do very well and understand), plus it didn't work, I want there to be tooltip too but instead of 1 o string “Completed” or “Rest day” or “Not completed”.


prisma shema in PJ
Thank you for helping me and if you need any further clarification, please let me know.

1 Reply

Original message was deleted
done