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/utils/transformGroupByDataToBarChartData.ts

@@ -33,6 +33,7 @@ type TransformGroupByDataToBarChartDataResult = {
   yAxisLabel?: string;
   showDataLabels: boolean;
   layout?: 'vertical' | 'horizontal';
+  hasTooManyGroups: boolean;
 };
 
 const EMPTY_BAR_CHART_RESULT: TransformGroupByDataToBarChartDataResult = {
@@ -44,6 +45,7 @@ const EMPTY_BAR_CHART_RESULT: TransformGroupByDataToBarChartDataResult = {
   yAxisLabel: undefined,
   showDataLabels: false,
   layout: 'vertical',
+  hasTooManyGroups: false,
 };
 
 export const transformGroupByDataToBarChartData = ({

packages/twenty-front/src/modules/page-layout/widgets/graph/utils/transformOneDimensionalGroupByToBarChartData.ts

@@ -28,6 +28,7 @@ type TransformOneDimensionalGroupByToBarChartDataResult = {
   indexBy: string;
   keys: string[];
   series: BarChartSeries[];
+  hasTooManyGroups: boolean;
 };
 
 export const transformOneDimensionalGroupByToBarChartData = ({
@@ -87,5 +88,6 @@ export const transformOneDimensionalGroupByToBarChartData = ({
     indexBy: indexByKey,
     keys: [aggregateField.name],
     series,
+    hasTooManyGroups: rawResults.length > GRAPH_MAXIMUM_NUMBER_OF_GROUPS,
   };
 };

packages/twenty-front/src/modules/page-layout/widgets/graph/utils/transformTwoDimensionalGroupByToBarChartData.ts

@@ -28,6 +28,7 @@ type TransformTwoDimensionalGroupByToBarChartDataResult = {
   indexBy: string;
   keys: string[];
   series: BarChartSeries[];
+  hasTooManyGroups: boolean;
 };
 
 export const transformTwoDimensionalGroupByToBarChartData = ({
@@ -49,6 +50,8 @@ export const transformTwoDimensionalGroupByToBarChartData = ({
   const xValues = new Set<string>();
   const yValues = new Set<string>();
 
+  let hasTooManyGroups = false;
+
   rawResults.forEach((result) => {
     const dimensionValues = result.groupByDimensionValues;
     if (!isDefined(dimensionValues) || dimensionValues.length < 2) return;
@@ -75,6 +78,7 @@ export const transformTwoDimensionalGroupByToBarChartData = ({
       totalUniqueDimensions + additionalDimensions >
       GRAPH_MAXIMUM_NUMBER_OF_GROUPS
     ) {
+      hasTooManyGroups = true;
       return;
     }
 
@@ -118,5 +122,6 @@ export const transformTwoDimensionalGroupByToBarChartData = ({
     indexBy: indexByKey,
     keys,
     series,
+    hasTooManyGroups,
   };
 };