Add date granularity and timezone and first day of the week to graphs (#15543)

- Allow users to choose the date granularity of the x axis and the group
by of the y axis on a bar chart
- Display those options conditionally
- Store timezones in graphs: each graph has its own timezone, defaults
to the user timezone. There will be a picker in the v2 to choose the
timezone. For now the timezone is not used by the backend, but it will
be used in filters and in group by queries.
- Store first day of the week



https://github.com/user-attachments/assets/66a5d156-dd93-4ebe-8c8f-d172f93e25be

packages/twenty-front/src/modules/page-layout/hooks/useCreatePageLayoutGraphWidget.ts

@@ -1,3 +1,4 @@
+import { useDateTimeFormat } from '@/localization/hooks/useDateTimeFormat';
 import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
 import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
 import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
@@ -27,6 +28,8 @@ export const useCreatePageLayoutGraphWidget = (
     pageLayoutIdFromProps,
   );
 
+  const { timeZone, calendarStartDay } = useDateTimeFormat();
+
   const tabListInstanceId = getTabListInstanceIdFromPageLayoutId(pageLayoutId);
 
   const activeTabIdState = useRecoilComponentCallbackState(
@@ -109,6 +112,8 @@ export const useCreatePageLayoutGraphWidget = (
             columnSpan: position.w,
           },
           fieldSelection,
+          timezone: timeZone,
+          firstDayOfTheWeek: calendarStartDay,
         });
 
         const newLayout = {
@@ -142,6 +147,8 @@ export const useCreatePageLayoutGraphWidget = (
       pageLayoutCurrentLayoutsState,
       pageLayoutDraftState,
       pageLayoutDraggedAreaState,
+      timeZone,
+      calendarStartDay,
     ],
   );