[DASHBOARDS] Use a time scale when the primary axis is a date on the Bar Chart (#15932)

Closes https://github.com/twentyhq/core-team-issues/issues/1891

Create empty buckets according to the date granularity

Video QA:


https://github.com/user-attachments/assets/86c0f817-35b3-4bab-b093-d11491684b82

Note: We would also need to create empty buckets for cyclic
granularities (DAY_OF_THE_WEEK, MONTH_OF_THE_YEAR, QUARTER_OF_THE_YEAR).
TODO:
- Always order the cyclic granularities Monday -> Sunday (take
firstDayOfTheWeek into account), January -> December, Q1 -> Q4. For now
they are returned by the backend in alphabetical order, which doesn't
make much sense
- Remove the translation into the user's locale of these granularities
from the backend because otherwise we can't reconstruct the missing days
or month in the frontend since they will be translated

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartSettings.tsx

@@ -27,7 +27,11 @@ import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
 import { SidePanelInformationBanner } from 'twenty-ui/display';
 
-import { GraphType, type PageLayoutWidget } from '~/generated/graphql';
+import {
+  FieldMetadataType,
+  GraphType,
+  type PageLayoutWidget,
+} from '~/generated/graphql';
 
 const StyledSidePanelInformationBanner = styled(SidePanelInformationBanner)`
   margin-top: ${({ theme }) => theme.spacing(2)};
@@ -118,6 +122,20 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
       .map((item) => item.id),
   );
 
+  const primaryAxisFieldMetadataId =
+    configuration.__typename === 'BarChartConfiguration' ||
+    configuration.__typename === 'LineChartConfiguration'
+      ? configuration.primaryAxisGroupByFieldMetadataId
+      : null;
+
+  const primaryAxisField = objectMetadataItem?.fields?.find(
+    (field) => field.id === primaryAxisFieldMetadataId,
+  );
+
+  const isPrimaryAxisDate =
+    primaryAxisField?.type === FieldMetadataType.DATE ||
+    primaryAxisField?.type === FieldMetadataType.DATE_TIME;
+
   return (
     <CommandMenuList commandGroups={[]} selectableItemIds={visibleItemIds}>
       <ChartTypeSelectionSection
@@ -128,9 +146,15 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
         <StyledSidePanelInformationBanner
           message={
             currentGraphType === GraphType.LINE
-              ? t`Max ${LINE_CHART_MAXIMUM_NUMBER_OF_DATA_POINTS} data points per chart. Consider adding a filter`
-              : t`Max ${BAR_CHART_MAXIMUM_NUMBER_OF_BARS} bars per chart. Consider adding a filter`
+              ? t`Undisplayed data: max ${LINE_CHART_MAXIMUM_NUMBER_OF_DATA_POINTS} data points per chart.`
+              : t`Undisplayed data: max ${BAR_CHART_MAXIMUM_NUMBER_OF_BARS} bars per chart.`
           }
+          tooltipMessage={
+            isPrimaryAxisDate
+              ? t`Consider adding a filter or changing the date granularity to display more data.`
+              : t`Consider adding a filter to display more data.`
+          }
+          variant="warning"
         />
       )}
       {chartSettings.map((group) => {