refactor webhookAnalytics call and enrich analytics module (#8253)

**TLDR**

Refactor WebhoonAnalytics Graph to a more abstract version
AnalyticsGraph (in analytics module). Thus enabling the components to be
used on different instances (ex: new endpoint, new kind of graph).

**In order to test:**

1. Set ANALYTICS_ENABLED to true
2. Set TINYBIRD_JWT_TOKEN to the ADMIN token from the workspace
twenty_analytics_playground
3. Set TINYBIRD_JWT_TOKEN to the datasource or your admin token from the
workspace twenty_analytics_playground
4. Create a Webhook in twenty and set wich events it needs to track
5. Run twenty-worker in order to make the webhooks work.
6. Do your tasks in order to populate the data
7. Enter to settings> webhook>your webhook and the statistics section
should be displayed.

---------

Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-front/src/modules/analytics/components/WebhookAnalyticsTooltip.tsx

@@ -0,0 +1,89 @@
+import { formatDateISOStringToDateTimeSimplified } from '@/localization/utils/formatDateISOStringToDateTimeSimplified';
+import { UserContext } from '@/users/contexts/UserContext';
+import styled from '@emotion/styled';
+import { Point } from '@nivo/line';
+import { ReactElement, useContext } from 'react';
+
+const StyledTooltipContainer = styled.div`
+  align-items: center;
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  display: flex;
+  width: 128px;
+  flex-direction: column;
+  justify-content: center;
+  background: ${({ theme }) => theme.background.transparent.secondary};
+  box-shadow: ${({ theme }) => theme.boxShadow.light};
+  backdrop-filter: ${({ theme }) => theme.blur.medium};
+`;
+
+const StyledTooltipDateContainer = styled.div`
+  align-items: flex-start;
+  align-self: stretch;
+  display: flex;
+  justify-content: center;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  font-family: ${({ theme }) => theme.font.family};
+  gap: ${({ theme }) => theme.spacing(2)};
+  color: ${({ theme }) => theme.font.color.secondary};
+  padding: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledTooltipDataRow = styled.div`
+  align-items: flex-start;
+  align-self: stretch;
+  display: flex;
+  justify-content: space-between;
+  color: ${({ theme }) => theme.font.color.tertiary};
+  padding: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledLine = styled.div`
+  background-color: ${({ theme }) => theme.border.color.medium};
+  height: 1px;
+  width: 100%;
+`;
+const StyledColorPoint = styled.div<{ color: string }>`
+  background-color: ${({ color }) => color};
+  border-radius: 50%;
+  height: 8px;
+  width: 8px;
+  display: inline-block;
+`;
+const StyledDataDefinition = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+const StyledSpan = styled.span`
+  color: ${({ theme }) => theme.font.color.primary};
+`;
+type WebhookAnalyticsTooltipProps = {
+  point: Point;
+};
+export const WebhookAnalyticsTooltip = ({
+  point,
+}: WebhookAnalyticsTooltipProps): ReactElement => {
+  const { timeFormat, timeZone } = useContext(UserContext);
+  const windowInterval = new Date(point.data.x);
+  const windowIntervalDate = formatDateISOStringToDateTimeSimplified(
+    windowInterval,
+    timeZone,
+    timeFormat,
+  );
+  return (
+    <StyledTooltipContainer>
+      <StyledTooltipDateContainer>
+        {windowIntervalDate}
+      </StyledTooltipDateContainer>
+      <StyledLine />
+      <StyledTooltipDataRow>
+        <StyledDataDefinition>
+          <StyledColorPoint color={point.serieColor} />
+          {String(point.serieId)}
+        </StyledDataDefinition>
+        <StyledSpan>{String(point.data.y)}</StyledSpan>
+      </StyledTooltipDataRow>
+    </StyledTooltipContainer>
+  );
+};