🖐️ Analytics drop off rates

apps/builder/layouts/results/AnalyticsContent.tsx

@@ -1,5 +1,43 @@
+import { Flex, useToast } from '@chakra-ui/react'
+import { Stats } from 'bot-engine'
+import AnalyticsGraph from 'components/analytics/graph/AnalyticsGraph'
+import { StatsCards } from 'components/analytics/StatsCards'
+import { AnalyticsGraphProvider } from 'contexts/AnalyticsGraphProvider'
+import { useTypebot } from 'contexts/TypebotContext'
 import React from 'react'
+import { useAnswersCount } from 'services/analytics'
 
-export const AnalyticsContent = () => {
-  return <>Hi</>
+export const AnalyticsContent = ({ stats }: { stats?: Stats }) => {
+  const { typebot, publishedTypebot } = useTypebot()
+
+  const toast = useToast({
+    position: 'top-right',
+    status: 'error',
+  })
+  const { answersCounts } = useAnswersCount({
+    typebotId: typebot?.id,
+    onError: (err) => toast({ title: err.name, description: err.message }),
+  })
+  return (
+    <Flex
+      w="full"
+      pos="relative"
+      bgColor="gray.50"
+      h="full"
+      justifyContent="center"
+    >
+      {publishedTypebot && (
+        <AnalyticsGraphProvider initialTypebot={publishedTypebot}>
+          <AnalyticsGraph
+            flex="1"
+            answersCounts={[
+              { blockId: 'start-block', totalAnswers: stats?.totalViews ?? 0 },
+              ...(answersCounts ?? []),
+            ]}
+          />
+        </AnalyticsGraphProvider>
+      )}
+      <StatsCards stats={stats} pos="absolute" top={10} />
+    </Flex>
+  )
 }