Anchored tooltip (#15568)

Issue - 
- tooltip gets too long when groupby has too much data points
- we need max height on tooltips
- we need to be able to scroll inside the tooltip
- not possible if the tooltip is following the cursor (which library
enforces)
- its not easy to customize Nivo's own tooltip to make it work how we
want it

what we want - 
- let the tooltip anchor to the bar in such a way -- that the top of the
bar aligns with the vertical middle of the tooltip
- add max height to the tooltip

what I did - 
- use floating portal from floating-ui/react
- get the hover datum (ie hovered bars) dimensions on mouse enter to
render the tooltip
- anchor the tooltip at the calculated position
- floating-ui handles the basic things like flipping/offset/shift
- clear the states as required

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

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

@@ -94,7 +94,7 @@ export const GraphWidgetPieChart = ({
     return (
       <GraphWidgetTooltip
         items={[tooltipData.tooltipItem]}
-        showClickHint={tooltipData.showClickHint}
+        linkTo={tooltipData.linkTo}
       />
     );
   };

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/hooks/usePieChartTooltip.ts

@@ -23,10 +23,14 @@ export const usePieChartTooltip = ({
   const createTooltipData = (
     datum: ComputedDatum<{ id: string; value: number; label?: string }>,
   ) => {
-    const item = enrichedData.find((d) => d.id === datum.id);
+    const item = enrichedData.find(
+      (enrichedDataItem) => enrichedDataItem.id === datum.id,
+    );
     if (!isDefined(item)) return null;
 
-    const dataItem = data.find((d) => d.id === datum.id);
+    const dataItem = data.find(
+      (dataItemCandidate) => dataItemCandidate.id === datum.id,
+    );
 
     const formattedValue =
       displayType === 'percentage'
@@ -35,12 +39,13 @@ export const usePieChartTooltip = ({
 
     return {
       tooltipItem: {
+        key: item.id,
         label: item.label || item.id,
         formattedValue,
         value: item.value,
         dotColor: item.colorScheme.solid,
       },
-      showClickHint: isDefined(dataItem?.to),
+      linkTo: dataItem?.to,
     };
   };