Connect the bar chart to the group by resolver (#14885)

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

Video QA:


https://github.com/user-attachments/assets/153fa3f1-08d9-4952-9456-635c602e1f57



https://github.com/user-attachments/assets/d3111afb-4c84-4f57-8a56-5cf666748c86

There are still some formatting and design issues (the labels which are
on top of each other and the values which should be formatted) that will
be fixed in a future PR

---------

Co-authored-by: ehconitin <nitinkoche03@gmail.com>

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

@@ -1,17 +1,10 @@
 import { getDefaultWidgetData } from '@/page-layout/utils/getDefaultWidgetData';
 import { ChartSkeletonLoader } from '@/page-layout/widgets/graph/components/ChartSkeletonLoader';
+import { GraphWidgetBarChartRenderer } from '@/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChartRenderer';
 import { GraphWidgetNumberChart } from '@/page-layout/widgets/graph/graphWidgetNumberChart/components/GraphWidgetNumberChart';
 import { lazy, Suspense } from 'react';
 import { GraphType, type PageLayoutWidget } from '~/generated-metadata/graphql';
 
-const GraphWidgetBarChart = lazy(() =>
-  import(
-    '@/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart'
-  ).then((module) => ({
-    default: module.GraphWidgetBarChart,
-  })),
-);
-
 const GraphWidgetLineChart = lazy(() =>
   import(
     '@/page-layout/widgets/graph/graphWidgetLineChart/components/GraphWidgetLineChart'
@@ -100,21 +93,7 @@ export const GraphWidgetRenderer = ({ widget }: GraphWidgetRendererProps) => {
       );
 
     case GraphType.BAR:
-      return (
-        <Suspense fallback={<ChartSkeletonLoader />}>
-          <GraphWidgetBarChart
-            data={data.items}
-            indexBy={data.indexBy}
-            keys={data.keys}
-            seriesLabels={data.seriesLabels}
-            layout={data.layout}
-            showLegend
-            showGrid
-            displayType="number"
-            id={`bar-chart-${widget.id}`}
-          />
-        </Suspense>
-      );
+      return <GraphWidgetBarChartRenderer widget={widget} />;
 
     case GraphType.LINE:
       return (

packages/twenty-front/src/modules/page-layout/widgets/graph/components/__stories__/GraphWidgetBarChart.stories.tsx

@@ -1,7 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/react';
 
-import { CatalogDecorator, ComponentDecorator } from 'twenty-ui/testing';
 import { GraphWidgetBarChart } from '@/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart';
+import { CatalogDecorator, ComponentDecorator } from 'twenty-ui/testing';
 
 const meta: Meta<typeof GraphWidgetBarChart> = {
   title: 'Modules/PageLayout/Widgets/GraphWidgetBarChart',