ShadcnUI Charts Time Zone and Data Formatting issues

[grim token]

Im using ShadcnUI and Nextjs to built charts and in this code im getting dates and appointment counts, but i think for timezone reasons the date is always decrease by one day, i wanna use Brazil Sao Paulo (Brazilia) time zone, the data is passing with us format to frontend and storage in br format in database, how to fix my error with the date always decreasing one number?

i attatched the code and some prints of my data, the chart data showed, the database real data, and the api response. This code is in production so i need to solve this and i tried many things, if someone know please help me.

[rancid bough]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[rose kayak]

hey

why dont u save the date as unix millis format

and use a lib like moment to convert those back into readable format

saving dates like strings in a readable format is a very very bad idea

[grim token]

hmm i am storing as a string

[rose kayak]

dont do that

[grim token]

what type should i use in my postgres database so?

[rose kayak]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now

This

[grim token]

DATETIME should cover that in backend?

[rose kayak]

convert it on frontend

https://momentjs.com/

use this

[grim token]

so convert the string in backend to Date?

or store the data as DATETIME?

[rose kayak]

store the returned value from Date.now

which is a integer

or float

both work

[grim token]

in my appointment form i am convert to string using the calendar, i think that i can provide the example

this is inside a form <div className=""> <Calendar locale={ptBR} mode="single" selected={selectedDate} onSelect={setSelectedDate} disabled={{ dayOfWeek: days }} /> {selectedDate ? ( <Input name="date" className="hidden" value={format(selectedDate, "dd/MM/yyyy")} /> ) : ( <Input value="" className="hidden" /> )} </div> this give me the date, this is wrong? it gives me the data like dd/MM/yyyy

[rose kayak]

i get it

what value does calendar return?

[grim token]

the return is above the calendar

[rose kayak]

ok and u sure that value is persistent with all users?

so its always the same format

[grim token]

yes

[rose kayak]

do that

moment("yourDate", "ddd MMM DD YYYY").valueOf();

moment will convert your date to millis

save that in your db

[grim token]

change this value={format(selectedDate, "dd/MM/yyyy")} to the example you showed?

[rose kayak]

yes

[grim token]

okay i will try and return the result

[rose kayak]

ok

[grim token]

i use like this:

value={moment("yourDate", "ddd MMM DD YYYY").valueOf()} ```import moment from 'moment'

[rose kayak]

yeah u need to use yourdate instead of the string i gave u

selectedDate

moment(selectedDate, "ddd MMM DD YYYY").valueOf();

[grim token]

i think that the problem is shadcn charts, cause i will show you the console.log of the dates in chart

but this is the result

[rose kayak]

yes that looks good

now convert that back with moment in your chart

[grim token]

i will first take a look at the chart

okay, this data is not showing as expected

i will have to change this first? ``` useEffect(() => {
const getLast3MonthsDates = () => {
const today = new Date();
const result: Date[] = [];
for (let i = 2; i >= 0; i--) {
const date = new Date(today.getFullYear(), today.getMonth() - i, 1);
const daysInMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
for (let d = 1; d <= daysInMonth; d++) {
result.push(new Date(date.getFullYear(), date.getMonth(), d));
}
}
return result;
};

[rose kayak]

yes

[grim token]

could you provide what moment format i should use in this?

cause i think that will be the same that i will use in fetching

[rose kayak]

show me the relevant code where u use your stored millis from your db

[grim token]

i separeted the files with ```

separated*

[rose kayak]

yes thats your serverside implementation

i was asking where you use your stored values

in your chart

[grim token]

export async function getAppointmentsByDay() {
  const result = await api.get(`charts/appointments/days`).json<any>()
  
  return result
}

this is the chart component with the chart, and above its the api route

all the values of chart are stored in the chart component

@rose kayak

[rose kayak]

one second

i was helping someone

@grim token take a look at your fetchData function

u can use moment to convert the millis back into ur date

[grim token]

okay

but why i convert would change something, if the data is gonna be same as i am using (dd/MM/yyyy)?

[rose kayak]

cause saving timestamps in a string format is not good

did u resolve your issue?

[grim token]

i didint solve

my original plan were just adding one day to the fetched data

to match shadcn formating

you are helping making my code better but the real problem i think that is shadcn formating you know?

[rose kayak]

const fetchData = async () => {
      try {
        const appointmentsData = await getAppointmentsByDay();
        const dates = getLast3MonthsDates();
        const timeZone = 'America/Sao_Paulo'; // Use São Paulo time zone
        const mergedData: ChartData[] = dates.map((date) => {
          // Convert each date to the desired time zone
          const zonedDate = toZonedTime(date, timeZone);
          const dateKey = format(zonedDate, 'yyyy-MM-dd', { timeZone });
          const matchingData = appointmentsData.find((data: any) => data.date === dateKey);
          return {
            date: dateKey,
            appointments: matchingData ? matchingData.appointments : 0,
          };
        });
        setChartData(mergedData);
        console.log(chartData)
      } catch (error) {
        console.error("Error fetching appointments data:", error);
      }
    };

u need to change this to use moment to convert millis back into a date string