Update chart limit error message (#16133)

## Description

- Display days, weeks, months or years instead of bars in the error
message
- Update the banner position
- Add translations on section titles

## Before
<img width="824" height="1378" alt="CleanShot 2025-11-27 at 14 51 40@2x"
src="https://github.com/user-attachments/assets/b2d7d1e6-e6d9-419b-8d7a-21f43e951898"
/>


## After
<img width="832" height="1382" alt="CleanShot 2025-11-27 at 14 51 15@2x"
src="https://github.com/user-attachments/assets/fe66d202-71be-45dc-8dff-502946e33aac"
/>

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

@@ -0,0 +1,35 @@
+import { getChartLimitMessage } from '@/command-menu/pages/page-layout/utils/getChartLimitMessage';
+import { t } from '@lingui/core/macro';
+import { SidePanelInformationBanner } from 'twenty-ui/display';
+
+import { type GraphType } from '~/generated/graphql';
+
+type ChartLimitInfoBannerProps = {
+  graphType: GraphType;
+  isPrimaryAxisDate: boolean;
+  primaryAxisDateGranularity: Parameters<
+    typeof getChartLimitMessage
+  >[0]['primaryAxisDateGranularity'];
+};
+
+export const ChartLimitInfoBanner = ({
+  graphType,
+  isPrimaryAxisDate,
+  primaryAxisDateGranularity,
+}: ChartLimitInfoBannerProps) => {
+  return (
+    <SidePanelInformationBanner
+      message={getChartLimitMessage({
+        graphType,
+        isPrimaryAxisDate,
+        primaryAxisDateGranularity,
+      })}
+      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"
+    />
+  );
+};

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

@@ -3,7 +3,9 @@ import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
 import { COMMAND_MENU_LIST_SELECTABLE_LIST_ID } from '@/command-menu/constants/CommandMenuListSelectableListId';
 import { useUpdateCommandMenuPageInfo } from '@/command-menu/hooks/useUpdateCommandMenuPageInfo';
 import { ChartSettingItem } from '@/command-menu/pages/page-layout/components/chart-settings/ChartSettingItem';
+import { ChartLimitInfoBanner } from '@/command-menu/pages/page-layout/components/ChartLimitInfoBanner';
 import { ChartTypeSelectionSection } from '@/command-menu/pages/page-layout/components/ChartTypeSelectionSection';
+import { CHART_SETTINGS_HEADINGS } from '@/command-menu/pages/page-layout/constants/ChartSettingsHeadings';
 import { GRAPH_TYPE_INFORMATION } from '@/command-menu/pages/page-layout/constants/GraphTypeInformation';
 import { useChartSettingsValues } from '@/command-menu/pages/page-layout/hooks/useChartSettingsValues';
 import { useNavigatePageLayoutCommandMenu } from '@/command-menu/pages/page-layout/hooks/useNavigatePageLayoutCommandMenu';
@@ -17,16 +19,12 @@ import { CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layou
 import { shouldHideChartSetting } from '@/command-menu/pages/page-layout/utils/shouldHideChartSetting';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
-import { BAR_CHART_MAXIMUM_NUMBER_OF_BARS } from '@/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMaximumNumberOfBars.constant';
-import { LINE_CHART_MAXIMUM_NUMBER_OF_DATA_POINTS } from '@/page-layout/widgets/graph/graphWidgetLineChart/constants/LineChartMaximumNumberOfDataPoints.constant';
-import { PIE_CHART_MAXIMUM_NUMBER_OF_SLICES } from '@/page-layout/widgets/graph/graphWidgetPieChart/constants/PieChartMaximumNumberOfSlices.constant';
 import { hasWidgetTooManyGroupsComponentState } from '@/page-layout/widgets/graph/states/hasWidgetTooManyGroupsComponentState';
 import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
 import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
-import { SidePanelInformationBanner } from 'twenty-ui/display';
 
 import {
   FieldMetadataType,
@@ -41,10 +39,6 @@ const StyledCommandMenuContainer = styled.div`
   overflow: hidden;
 `;
 
-const StyledSidePanelInformationBanner = styled(SidePanelInformationBanner)`
-  margin-top: ${({ theme }) => theme.spacing(2)};
-`;
-
 export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
   const { updateCommandMenuPageInfo } = useUpdateCommandMenuPageInfo();
   const { navigatePageLayoutCommandMenu } = useNavigatePageLayoutCommandMenu();
@@ -146,6 +140,19 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
     primaryAxisField?.type === FieldMetadataType.DATE ||
     primaryAxisField?.type === FieldMetadataType.DATE_TIME;
 
+  const primaryAxisDateGranularity =
+    configuration.__typename === 'BarChartConfiguration' ||
+    configuration.__typename === 'LineChartConfiguration'
+      ? configuration.primaryAxisDateGranularity
+      : configuration.__typename === 'PieChartConfiguration'
+        ? configuration.dateGranularity
+        : null;
+
+  const bannerTargetHeading =
+    currentGraphType === GraphType.PIE
+      ? CHART_SETTINGS_HEADINGS.DATA
+      : CHART_SETTINGS_HEADINGS.X_AXIS;
+
   return (
     <StyledCommandMenuContainer>
       <CommandMenuList commandGroups={[]} selectableItemIds={visibleItemIds}>
@@ -153,24 +160,6 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
           currentGraphType={currentGraphType}
           setCurrentGraphType={handleGraphTypeChange}
         />
-        {hasWidgetTooManyGroups && (
-          <StyledSidePanelInformationBanner
-            message={
-              currentGraphType === GraphType.LINE
-                ? t`Undisplayed data: max ${LINE_CHART_MAXIMUM_NUMBER_OF_DATA_POINTS} data points per chart.`
-                : currentGraphType === GraphType.VERTICAL_BAR ||
-                    currentGraphType === GraphType.HORIZONTAL_BAR
-                  ? t`Undisplayed data: max ${BAR_CHART_MAXIMUM_NUMBER_OF_BARS} bars per chart.`
-                  : t`Undisplayed data: max ${PIE_CHART_MAXIMUM_NUMBER_OF_SLICES} slices 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) => {
           const visibleItems = group.items.filter(
             (item) =>
@@ -183,8 +172,17 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
               ),
           );
 
+          const shouldShowBanner = group.heading.id === bannerTargetHeading.id;
+
           return (
-            <CommandGroup key={group.heading} heading={group.heading}>
+            <CommandGroup key={group.heading.id} heading={t(group.heading)}>
+              {shouldShowBanner && hasWidgetTooManyGroups && (
+                <ChartLimitInfoBanner
+                  graphType={currentGraphType}
+                  isPrimaryAxisDate={isPrimaryAxisDate}
+                  primaryAxisDateGranularity={primaryAxisDateGranularity}
+                />
+              )}
               {visibleItems.map((item) => {
                 const handleItemToggleChange = () => {
                   setSelectedItemId(item.id);