🖐️ 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>
+  )
 }

apps/builder/layouts/results/ResultsContent.tsx

@@ -1,17 +1,9 @@
-import {
-  Button,
-  Flex,
-  HStack,
-  Stack,
-  Tag,
-  useToast,
-  Text,
-} from '@chakra-ui/react'
+import { Button, Flex, HStack, Tag, useToast, Text } from '@chakra-ui/react'
 import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
 import { useTypebot } from 'contexts/TypebotContext'
 import { useRouter } from 'next/router'
 import React, { useMemo } from 'react'
-import { useResultsCount } from 'services/results'
+import { useStats } from 'services/analytics'
 import { AnalyticsContent } from './AnalyticsContent'
 import { SubmissionsContent } from './SubmissionContent'
 
@@ -27,14 +19,21 @@ export const ResultsContent = () => {
     status: 'error',
   })
 
-  const { totalResults } = useResultsCount({
+  const { stats } = useStats({
     typebotId: typebot?.id,
     onError: (err) => toast({ title: err.name, description: err.message }),
   })
   return (
-    <Flex h="full" w="full" justifyContent="center" align="flex-start">
-      <Stack maxW="1200px" w="full" pt="4" spacing={6}>
-        <HStack>
+    <Flex h="full" w="full">
+      <Flex
+        pos="absolute"
+        zIndex={2}
+        bgColor="white"
+        w="full"
+        justifyContent="center"
+        h="60px"
+      >
+        <HStack maxW="1200px" w="full">
           <Button
             as={NextChakraLink}
             colorScheme={!isAnalytics ? 'blue' : 'gray'}
@@ -43,9 +42,9 @@ export const ResultsContent = () => {
             href={`/typebots/${typebot?.id}/results`}
           >
             <Text>Submissions</Text>
-            {totalResults && (
+            {(stats?.totalStarts ?? 0) > 0 && (
               <Tag size="sm" colorScheme="blue" ml="1">
-                {totalResults}
+                {stats?.totalStarts}
               </Tag>
             )}
           </Button>
@@ -59,16 +58,18 @@ export const ResultsContent = () => {
             Analytics
           </Button>
         </HStack>
+      </Flex>
+      <Flex pt="60px" w="full" justify="center">
         {typebot &&
           (isAnalytics ? (
-            <AnalyticsContent />
+            <AnalyticsContent stats={stats} />
           ) : (
             <SubmissionsContent
               typebotId={typebot.id}
-              totalResults={totalResults ?? 0}
+              totalResults={stats?.totalStarts ?? 0}
             />
           ))}
-      </Stack>
+      </Flex>
     </Flex>
   )
 }

apps/builder/layouts/results/SubmissionContent.tsx

@@ -43,7 +43,7 @@ export const SubmissionsContent = ({ typebotId, totalResults }: Props) => {
   )
 
   return (
-    <Stack>
+    <Stack maxW="1200px" w="full">
       <Flex w="full" justifyContent="flex-end">
         <HStack>
           <HStack as={Button} colorScheme="blue">