ShadcnUI Charts Time Zone and Data Formatting issues
Unanswered
Great Auk posted this in #help-forum
Great AukOP
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.
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.
79 Replies
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
Great AukOP
hmm i am storing as a string
dont do that
Great AukOP
what type should i use in my postgres database so?
Great AukOP
DATETIME should cover that in backend?
Great AukOP
so convert the string in backend to Date?
or store the data as DATETIME?
Great AukOP
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>Great AukOP
the return is above the calendar
ok and u sure that value is persistent with all users?
so its always the same format
Great AukOP
yes
do that
moment("yourDate", "ddd MMM DD YYYY").valueOf();moment will convert your date to millis
save that in your db
Great AukOP
change this
value={format(selectedDate, "dd/MM/yyyy")}yes
Great AukOP
okay i will try and return the result
ok
Great AukOP
i use like this:
value={moment("yourDate", "ddd MMM DD YYYY").valueOf()}import moment from 'moment'yeah u need to use yourdate instead of the string i gave u
selectedDate
moment(selectedDate, "ddd MMM DD YYYY").valueOf();Great AukOP
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
yes that looks good
now convert that back with moment in your chart
Great AukOP
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;
};yes
Great AukOP
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
@Great Auk cause i think that will be the same that i will use in fetching
show me the relevant code where u use your stored millis from your db
Great AukOP
i separeted the files with ```
separated*
yes thats your serverside implementation
i was asking where you use your stored values
in your chart
Great AukOP
import { api } from './api-client'
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
@gin
one second
i was helping someone
@Great Auk take a look at your fetchData function
u can use moment to convert the millis back into ur date
Great AukOP
okay
Great AukOP
but why i convert would change something, if the data is gonna be same as i am using (dd/MM/yyyy)?
@Great Auk but why i convert would change something, if the data is gonna be same as i am using (dd/MM/yyyy)?
cause saving timestamps in a string format is not good
did u resolve your issue?
Great AukOP
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?
@Great Auk you are helping making my code better but the real problem i think that is shadcn formating you know?
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
u can use moment timezones to pass in your america/Sao_Paulo tz