add dynamic dates for webhookGraphDataUsage (#7720)

**Before:**
Only last 5 days where displayed on Developers Settings Webhook Usage
Graph.

![image](https://github.com/user-attachments/assets/7b7f2e6b-9637-489e-a7a7-5a3cb70525aa)


**Now**
Added component where you can select the time range where you want to
view the webhook usage. To do better the styling and content depassing .

<img width="652" alt="Screenshot 2024-10-15 at 16 56 45"
src="https://github.com/user-attachments/assets/d06e7f4c-a689-49a0-8839-f015ce36bab9">


**In order to test**

1. Set ANALYTICS_ENABLED to true
2. Set TINYBIRD_TOKEN to your token from the workspace
twenty_analytics_playground
3. Write your client tinybird token in
SettingsDeveloppersWebhookDetail.tsx in line 93
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.
8.  Select the desired time range in the dropdown

**To do list**

- Tooltip is truncated when accessing values at the right end of the
graph
- DateTicks needs to follow a more clear standard
- Update this PR with more representative images

packages/twenty-front/src/modules/settings/developers/webhook/utils/fetchGraphDataOrThrow.ts

@@ -0,0 +1,80 @@
+import { NivoLineInput } from '@/settings/developers/webhook/components/SettingsDevelopersWebhookUsageGraph';
+import { WEBHOOK_GRAPH_API_OPTIONS_MAP } from '@/settings/developers/webhook/constants/WebhookGraphApiOptionsMap';
+
+type fetchGraphDataOrThrowProps = {
+  webhookId: string;
+  windowLength: '7D' | '1D' | '12H' | '4H';
+};
+
+export const fetchGraphDataOrThrow = async ({
+  webhookId,
+  windowLength,
+}: fetchGraphDataOrThrowProps) => {
+  const queryString = new URLSearchParams({
+    ...WEBHOOK_GRAPH_API_OPTIONS_MAP[windowLength],
+    webhookIdRequest: webhookId,
+  }).toString();
+  const token = 'REPLACE_ME';
+  const response = await fetch(
+    `https://api.eu-central-1.aws.tinybird.co/v0/pipes/getWebhooksAnalyticsV2.json?${queryString}`,
+    {
+      headers: {
+        Authorization: 'Bearer ' + token,
+      },
+    },
+  );
+  const result = await response.json();
+
+  if (!response.ok) {
+    throw new Error('Something went wrong while fetching webhook usage');
+  }
+  // Next steps: separate the map logic to a different component (response.data, {id:str, color:str}[])=>NivoLineInput[]
+
+  const graphInput = result.data
+    .flatMap(
+      (dataRow: {
+        start_interval: string;
+        failure_count: number;
+        success_count: number;
+      }) => [
+        {
+          x: dataRow.start_interval,
+          y: dataRow.failure_count,
+          id: 'Failed',
+          color: 'red', // need to refacto this
+        },
+        {
+          x: dataRow.start_interval,
+          y: dataRow.success_count,
+          id: 'Succeeded',
+          color: 'blue',
+        },
+      ],
+    )
+    .reduce(
+      (
+        acc: NivoLineInput[],
+        {
+          id,
+          x,
+          y,
+          color,
+        }: { id: string; x: string; y: number; color: string },
+      ) => {
+        const existingGroupIndex = acc.findIndex((group) => group.id === id);
+        const isExistingGroup = existingGroupIndex !== -1;
+
+        if (isExistingGroup) {
+          return acc.map((group, index) =>
+            index === existingGroupIndex
+              ? { ...group, data: [...group.data, { x, y }] }
+              : group,
+          );
+        } else {
+          return [...acc, { id, color, data: [{ x, y }] }];
+        }
+      },
+      [],
+    );
+  return graphInput;
+};