🖐️ Analytics drop off rates

apps/builder/components/analytics/graph/blocks/BlockNode.tsx

@@ -0,0 +1,62 @@
+import {
+  Editable,
+  EditableInput,
+  EditablePreview,
+  Stack,
+  useEventListener,
+} from '@chakra-ui/react'
+import React, { useState } from 'react'
+import { Block } from 'bot-engine'
+import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
+import { StepsList } from './StepsList'
+
+type Props = {
+  block: Block
+}
+
+export const BlockNode = ({ block }: Props) => {
+  const { updateBlockPosition } = useAnalyticsGraph()
+  const [isMouseDown, setIsMouseDown] = useState(false)
+
+  const handleMouseDown = () => {
+    setIsMouseDown(true)
+  }
+  const handleMouseUp = () => {
+    setIsMouseDown(false)
+  }
+
+  const handleMouseMove = (event: MouseEvent) => {
+    if (!isMouseDown) return
+    const { movementX, movementY } = event
+
+    updateBlockPosition(block.id, {
+      x: block.graphCoordinates.x + movementX,
+      y: block.graphCoordinates.y + movementY,
+    })
+  }
+
+  useEventListener('mousemove', handleMouseMove)
+
+  return (
+    <Stack
+      p="4"
+      rounded="lg"
+      bgColor="blue.50"
+      borderWidth="2px"
+      minW="300px"
+      transition="border 300ms"
+      pos="absolute"
+      style={{
+        transform: `translate(${block.graphCoordinates.x}px, ${block.graphCoordinates.y}px)`,
+      }}
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
+    >
+      <Editable defaultValue={block.title}>
+        <EditablePreview px="1" userSelect={'none'} />
+        <EditableInput minW="0" px="1" />
+      </Editable>
+      <StepsList blockId={block.id} steps={block.steps} />
+    </Stack>
+  )
+}

apps/builder/components/analytics/graph/blocks/DropOffBlock.tsx

@@ -0,0 +1,71 @@
+import { Tag, Text, VStack } from '@chakra-ui/react'
+import { Block } from 'bot-engine'
+import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
+import React, { useMemo } from 'react'
+import { AnswersCount } from 'services/analytics'
+import { computeSourceCoordinates } from 'services/graph'
+
+type Props = {
+  answersCounts: AnswersCount[]
+  blockId: string
+}
+
+export const DropOffBlock = ({ answersCounts, blockId }: Props) => {
+  const { typebot } = useAnalyticsGraph()
+
+  const totalAnswers = useMemo(
+    () => answersCounts.find((a) => a.blockId === blockId)?.totalAnswers,
+    [answersCounts, blockId]
+  )
+
+  const { totalDroppedUser, dropOffRate } = useMemo(() => {
+    if (!typebot || totalAnswers === undefined)
+      return { previousTotal: undefined, dropOffRate: undefined }
+    const previousTotal = answersCounts
+      .filter(
+        (a) =>
+          [typebot.startBlock, ...typebot.blocks].find((b) =>
+            (b as Block).steps.find((s) => s.target?.blockId === blockId)
+          )?.id === a.blockId
+      )
+      .reduce((prev, acc) => acc.totalAnswers + prev, 0)
+    if (previousTotal === 0)
+      return { previousTotal: undefined, dropOffRate: undefined }
+    const totalDroppedUser = previousTotal - totalAnswers
+
+    return {
+      totalDroppedUser,
+      dropOffRate: Math.round((totalDroppedUser / previousTotal) * 100),
+    }
+  }, [answersCounts, blockId, totalAnswers, typebot])
+
+  const labelCoordinates = useMemo(() => {
+    if (!typebot) return { x: 0, y: 0 }
+    const sourceBlock = typebot?.blocks.find((b) => b.id === blockId)
+    if (!sourceBlock) return
+    return computeSourceCoordinates(
+      sourceBlock?.graphCoordinates,
+      sourceBlock?.steps.length - 1
+    )
+  }, [blockId, typebot])
+
+  if (!labelCoordinates) return <></>
+  return (
+    <VStack
+      bgColor={'red.500'}
+      color="white"
+      rounded="md"
+      p="2"
+      justifyContent="center"
+      style={{
+        transform: `translate(${labelCoordinates.x - 20}px, ${
+          labelCoordinates.y + 80
+        }px)`,
+      }}
+      pos="absolute"
+    >
+      <Text>{dropOffRate}%</Text>
+      <Tag colorScheme="red">{totalDroppedUser} users</Tag>
+    </VStack>
+  )
+}

apps/builder/components/analytics/graph/blocks/StartBlockNode.tsx

@@ -0,0 +1,62 @@
+import {
+  Editable,
+  EditableInput,
+  EditablePreview,
+  Stack,
+  useEventListener,
+} from '@chakra-ui/react'
+import React, { useState } from 'react'
+import { StartBlock } from 'bot-engine'
+import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
+import { StepsList } from './StepsList'
+
+type Props = {
+  block: StartBlock
+}
+
+export const StartBlockNode = ({ block }: Props) => {
+  const { updateBlockPosition } = useAnalyticsGraph()
+  const [isMouseDown, setIsMouseDown] = useState(false)
+
+  const handleMouseDown = () => {
+    setIsMouseDown(true)
+  }
+  const handleMouseUp = () => {
+    setIsMouseDown(false)
+  }
+
+  const handleMouseMove = (event: MouseEvent) => {
+    if (!isMouseDown) return
+    const { movementX, movementY } = event
+
+    updateBlockPosition(block.id, {
+      x: block.graphCoordinates.x + movementX,
+      y: block.graphCoordinates.y + movementY,
+    })
+  }
+
+  useEventListener('mousemove', handleMouseMove)
+
+  return (
+    <Stack
+      p="4"
+      rounded="lg"
+      bgColor="blue.50"
+      borderWidth="2px"
+      minW="300px"
+      transition="border 300ms"
+      pos="absolute"
+      style={{
+        transform: `translate(${block.graphCoordinates.x}px, ${block.graphCoordinates.y}px)`,
+      }}
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
+    >
+      <Editable value={block.title} isDisabled>
+        <EditablePreview px="1" userSelect={'none'} />
+        <EditableInput minW="0" px="1" />
+      </Editable>
+      <StepsList blockId={block.id} steps={block.steps} />
+    </Stack>
+  )
+}

apps/builder/components/analytics/graph/blocks/StepsList.tsx

@@ -0,0 +1,27 @@
+import { Flex, Stack } from '@chakra-ui/react'
+import { StartStep, Step } from 'bot-engine'
+import { StepNodeOverlay } from 'components/board/graph/BlockNode/StepNode'
+
+export const StepsList = ({
+  steps,
+}: {
+  blockId: string
+  steps: Step[] | [StartStep]
+}) => {
+  return (
+    <Stack spacing={1} transition="none">
+      <Flex h={'2px'} bgColor={'gray.400'} visibility={'hidden'} rounded="lg" />
+      {steps.map((step) => (
+        <Stack key={step.id} spacing={1}>
+          <StepNodeOverlay key={step.id} step={step} />
+          <Flex
+            h={'2px'}
+            bgColor={'gray.400'}
+            visibility={'hidden'}
+            rounded="lg"
+          />
+        </Stack>
+      ))}
+    </Stack>
+  )
+}