[Dashboards] - refactor - pie chart (#14526)

This is the third PR from the split of
https://github.com/twentyhq/twenty/pull/14458 - refactoring only the
PieChart widget.

Plus small performance improvements on already refactored widgets

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

@@ -6,19 +6,19 @@ import { isDefined } from 'twenty-shared/utils';
 
 type BarChartEndLinesProps = {
   bars: readonly ComputedBarDatum<BarChartDataItem>[];
-  enrichedKeys: BarChartEnrichedKey[];
+  enrichedKeysMap: Map<string, BarChartEnrichedKey>;
   layout: 'vertical' | 'horizontal';
 };
 
 export const BarChartEndLines = ({
   bars,
-  enrichedKeys,
+  enrichedKeysMap,
   layout,
 }: BarChartEndLinesProps) => {
   return (
     <g>
       {bars.map((bar: ComputedBarDatum<BarChartDataItem>, index: number) => {
-        const enrichedKey = enrichedKeys.find((k) => k.key === bar.data.id);
+        const enrichedKey = enrichedKeysMap.get(String(bar.data.id));
         if (!isDefined(enrichedKey)) {
           return null;
         }

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

@@ -87,7 +87,7 @@ export const GraphWidgetBarChart = ({
 
   const chartTheme = useBarChartTheme();
 
-  const { barConfigs, enrichedKeys, defs } = useBarChartData({
+  const { barConfigs, enrichedKeys, enrichedKeysMap, defs } = useBarChartData({
     data,
     indexBy,
     keys,
@@ -138,7 +138,7 @@ export const GraphWidgetBarChart = ({
     return (
       <BarChartEndLines
         bars={props.bars}
-        enrichedKeys={enrichedKeys}
+        enrichedKeysMap={enrichedKeysMap}
         layout={layout}
       />
     );

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

@@ -72,6 +72,11 @@ export const useBarChartData = ({
     };
   });
 
+  const enrichedKeysMap = useMemo(
+    () => new Map(enrichedKeys.map((item) => [item.key, item])),
+    [enrichedKeys],
+  );
+
   const defs = barConfigs.map((bar) => {
     const isHovered =
       hoveredBar?.key === bar.key && hoveredBar?.indexValue === bar.indexValue;
@@ -88,6 +93,7 @@ export const useBarChartData = ({
     seriesConfigMap,
     barConfigs,
     enrichedKeys,
+    enrichedKeysMap,
     defs,
   };
 };