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/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChartHasTooManyGroupsEffect.tsx

@@ -0,0 +1,21 @@
+import { hasWidgetTooManyGroupsComponentState } from '@/page-layout/widgets/graph/states/hasWidgetTooManyGroupsComponentState';
+import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
+import { useEffect } from 'react';
+
+type GraphWidgetBarChartHasTooManyGroupsEffectProps = {
+  hasTooManyGroups: boolean;
+};
+
+export const GraphWidgetBarChartHasTooManyGroupsEffect = ({
+  hasTooManyGroups,
+}: GraphWidgetBarChartHasTooManyGroupsEffectProps) => {
+  const setHasWidgetTooManyGroups = useSetRecoilComponentState(
+    hasWidgetTooManyGroupsComponentState,
+  );
+
+  useEffect(() => {
+    setHasWidgetTooManyGroups(hasTooManyGroups);
+  }, [hasTooManyGroups, setHasWidgetTooManyGroups]);
+
+  return null;
+};

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChartRenderer.tsx

@@ -1,4 +1,5 @@
 import { ChartSkeletonLoader } from '@/page-layout/widgets/graph/components/ChartSkeletonLoader';
+import { GraphWidgetBarChartHasTooManyGroupsEffect } from '@/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChartHasTooManyGroupsEffect';
 import { useGraphBarChartWidgetData } from '@/page-layout/widgets/graph/graphWidgetBarChart/hooks/useGraphBarChartWidgetData';
 import { lazy, Suspense, useMemo } from 'react';
 import {
@@ -29,6 +30,7 @@ export const GraphWidgetBarChartRenderer = ({
     showDataLabels,
     layout,
     loading,
+    hasTooManyGroups,
   } = useGraphBarChartWidgetData({
     objectMetadataItemId: widget.objectMetadataId,
     configuration: widget.configuration as BarChartConfiguration,
@@ -53,23 +55,28 @@ export const GraphWidgetBarChartRenderer = ({
   }
 
   return (
-    <Suspense fallback={<ChartSkeletonLoader />}>
-      <GraphWidgetBarChart
-        key={filterStateKey}
-        data={data}
-        series={series}
-        indexBy={indexBy}
-        keys={keys}
-        xAxisLabel={xAxisLabel}
-        yAxisLabel={yAxisLabel}
-        showValues={showDataLabels}
-        layout={layout}
-        groupMode={groupMode}
-        id={widget.id}
-        displayType="shortNumber"
-        rangeMin={configuration.rangeMin ?? undefined}
-        rangeMax={configuration.rangeMax ?? undefined}
+    <>
+      <GraphWidgetBarChartHasTooManyGroupsEffect
+        hasTooManyGroups={hasTooManyGroups}
       />
-    </Suspense>
+      <Suspense fallback={<ChartSkeletonLoader />}>
+        <GraphWidgetBarChart
+          key={filterStateKey}
+          data={data}
+          series={series}
+          indexBy={indexBy}
+          keys={keys}
+          xAxisLabel={xAxisLabel}
+          yAxisLabel={yAxisLabel}
+          showValues={showDataLabels}
+          layout={layout}
+          groupMode={groupMode}
+          id={widget.id}
+          displayType="shortNumber"
+          rangeMin={configuration.rangeMin ?? undefined}
+          rangeMax={configuration.rangeMax ?? undefined}
+        />
+      </Suspense>
+    </>
   );
 };

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/hooks/useGraphBarChartWidgetData.ts

@@ -22,6 +22,7 @@ type UseGraphBarChartWidgetDataResult = {
   layout?: 'vertical' | 'horizontal';
   loading: boolean;
   error?: Error;
+  hasTooManyGroups: boolean;
 };
 
 export const useGraphBarChartWidgetData = ({