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/components/GraphWidgetRenderer.tsx

@@ -1,5 +1,6 @@
 import { PageLayoutWidgetNoDataDisplay } from '@/page-layout/widgets/components/PageLayoutWidgetNoDataDisplay';
 import { GraphWidget } from '@/page-layout/widgets/graph/components/GraphWidget';
+import { GraphWidgetComponentInstanceContext } from '@/page-layout/widgets/graph/states/contexts/GraphWidgetComponentInstanceContext';
 import { isDefined } from 'twenty-shared/utils';
 import { GraphType, type PageLayoutWidget } from '~/generated/graphql';
 
@@ -22,10 +23,14 @@ export const GraphWidgetRenderer = ({ widget }: GraphWidgetRendererProps) => {
   }
 
   return (
-    <GraphWidget
-      widget={widget}
-      objectMetadataId={widget.objectMetadataId}
-      graphType={graphType}
-    />
+    <GraphWidgetComponentInstanceContext.Provider
+      value={{ instanceId: widget.id }}
+    >
+      <GraphWidget
+        widget={widget}
+        objectMetadataId={widget.objectMetadataId}
+        graphType={graphType}
+      />
+    </GraphWidgetComponentInstanceContext.Provider>
   );
 };

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 = ({

packages/twenty-front/src/modules/page-layout/widgets/graph/states/contexts/GraphWidgetComponentInstanceContext.ts

@@ -0,0 +1,4 @@
+import { createComponentInstanceContext } from '@/ui/utilities/state/component-state/utils/createComponentInstanceContext';
+
+export const GraphWidgetComponentInstanceContext =
+  createComponentInstanceContext();

packages/twenty-front/src/modules/page-layout/widgets/graph/states/hasWidgetTooManyGroupsComponentState.ts

@@ -0,0 +1,8 @@
+import { GraphWidgetComponentInstanceContext } from '@/page-layout/widgets/graph/states/contexts/GraphWidgetComponentInstanceContext';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+
+export const hasWidgetTooManyGroupsComponentState = createComponentState({
+  key: 'hasWidgetTooManyGroupsComponentState',
+  defaultValue: false,
+  componentInstanceContext: GraphWidgetComponentInstanceContext,
+});

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,
   };
 };