Add a banner in the side panel to alert if the bar chart has too many bars (#15267)

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

- Created `SidePanelInformationBanner` component
- Created a component state `hasWidgetTooManyGroupsComponentState`
- Displayed the banner in the side panel if the state is true



https://github.com/user-attachments/assets/343a4053-f0d5-4e9b-935d-ead191d70eb2

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

@@ -16,11 +16,20 @@ import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/
 import { CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds';
 import { isChartSettingDisabled } from '@/command-menu/pages/page-layout/utils/isChartSettingDisabled';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
+import { GRAPH_MAXIMUM_NUMBER_OF_GROUPS } from '@/page-layout/widgets/graph/constants/GraphMaximumNumberOfGroups.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 { type GraphType, type PageLayoutWidget } from '~/generated/graphql';
+import { GraphType, type PageLayoutWidget } from '~/generated/graphql';
+
+const StyledSidePanelInformationBanner = styled(SidePanelInformationBanner)`
+  margin-top: ${({ theme }) => theme.spacing(2)};
+`;
 
 export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
   const { updateCommandMenuPageInfo } = useUpdateCommandMenuPageInfo();
@@ -56,6 +65,8 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
   const isGroupByEnabled = getChartSettingsValues(
     CHART_CONFIGURATION_SETTING_IDS.GROUP_BY,
   );
+  const [hasWidgetTooManyGroups, setHasWidgetTooManyGroups] =
+    useRecoilComponentState(hasWidgetTooManyGroupsComponentState);
 
   const handleGraphTypeChange = (graphType: GraphType) => {
     updateCurrentWidgetConfig({
@@ -68,6 +79,13 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
     updateCommandMenuPageInfo({
       pageIcon: GRAPH_TYPE_INFORMATION[graphType].icon,
     });
+
+    if (
+      graphType !== GraphType.VERTICAL_BAR &&
+      graphType !== GraphType.HORIZONTAL_BAR
+    ) {
+      setHasWidgetTooManyGroups(false);
+    }
   };
 
   const chartSettings = GRAPH_TYPE_INFORMATION[currentGraphType].settings;
@@ -83,6 +101,11 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
         currentGraphType={currentGraphType}
         setCurrentGraphType={handleGraphTypeChange}
       />
+      {hasWidgetTooManyGroups && (
+        <StyledSidePanelInformationBanner
+          message={t`Max ${GRAPH_MAXIMUM_NUMBER_OF_GROUPS} bars per chart. Consider adding a filter`}
+        />
+      )}
       {chartSettings.map((group) => (
         <CommandGroup key={group.heading} heading={group.heading}>
           {group.items.map((item) => {

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

@@ -5,6 +5,7 @@ import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pa
 import { useUpdatePageLayoutWidget } from '@/page-layout/hooks/useUpdatePageLayoutWidget';
 import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
 import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
+import { GraphWidgetComponentInstanceContext } from '@/page-layout/widgets/graph/states/contexts/GraphWidgetComponentInstanceContext';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { useTheme } from '@emotion/react';
 import { t } from '@lingui/core/macro';
@@ -53,7 +54,9 @@ export const CommandMenuPageLayoutGraphTypeSelect = () => {
   const graphTypeLabel = t(GRAPH_TYPE_INFORMATION[currentGraphType].label);
 
   return (
-    <>
+    <GraphWidgetComponentInstanceContext.Provider
+      value={{ instanceId: widgetInEditMode.id }}
+    >
       <SidePanelHeader
         Icon={GRAPH_TYPE_INFORMATION[currentGraphType].icon}
         iconColor={theme.font.color.tertiary}
@@ -68,6 +71,6 @@ export const CommandMenuPageLayoutGraphTypeSelect = () => {
         }}
       />
       <ChartSettings widget={widgetInEditMode} />
-    </>
+    </GraphWidgetComponentInstanceContext.Provider>
   );
 };