🖐️ Analytics drop off rates

apps/builder/components/analytics/StatsCards.tsx

@@ -0,0 +1,44 @@
+import {
+  GridProps,
+  SimpleGrid,
+  Skeleton,
+  Stat,
+  StatLabel,
+  StatNumber,
+} from '@chakra-ui/react'
+import { Stats } from 'bot-engine'
+import React from 'react'
+
+export const StatsCards = ({
+  stats,
+  ...props
+}: { stats?: Stats } & GridProps) => {
+  return (
+    <SimpleGrid columns={{ base: 1, md: 3 }} spacing="6" {...props}>
+      <Stat bgColor="white" p="4" rounded="md" boxShadow="md">
+        <StatLabel>Views</StatLabel>
+        {stats ? (
+          <StatNumber>{stats.totalViews}</StatNumber>
+        ) : (
+          <Skeleton w="50%" h="10px" mt="2" />
+        )}
+      </Stat>
+      <Stat bgColor="white" p="4" rounded="md" boxShadow="md">
+        <StatLabel>Starts</StatLabel>
+        {stats ? (
+          <StatNumber>{stats.totalStarts}</StatNumber>
+        ) : (
+          <Skeleton w="50%" h="10px" mt="2" />
+        )}
+      </Stat>
+      <Stat bgColor="white" p="4" rounded="md" boxShadow="md">
+        <StatLabel>Completion rate</StatLabel>
+        {stats ? (
+          <StatNumber>{stats.completionRate}%</StatNumber>
+        ) : (
+          <Skeleton w="50%" h="10px" mt="2" />
+        )}
+      </Stat>
+    </SimpleGrid>
+  )
+}

apps/builder/components/analytics/graph/AnalyticsGraph.tsx

@@ -0,0 +1,61 @@
+import { Flex, FlexProps, useEventListener } from '@chakra-ui/react'
+import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
+import React, { useMemo, useRef } from 'react'
+import { AnswersCount } from 'services/analytics'
+import { BlockNode } from './blocks/BlockNode'
+import { StartBlockNode } from './blocks/StartBlockNode'
+import { Edges } from './Edges'
+
+const AnalyticsGraph = ({
+  answersCounts,
+  ...props
+}: { answersCounts?: AnswersCount[] } & FlexProps) => {
+  const { typebot, graphPosition, setGraphPosition } = useAnalyticsGraph()
+  const graphContainerRef = useRef<HTMLDivElement | null>(null)
+  const transform = useMemo(
+    () =>
+      `translate(${graphPosition.x}px, ${graphPosition.y}px) scale(${graphPosition.scale})`,
+    [graphPosition]
+  )
+
+  const handleMouseWheel = (e: WheelEvent) => {
+    e.preventDefault()
+    const isPinchingTrackpad = e.ctrlKey
+    if (isPinchingTrackpad) {
+      const scale = graphPosition.scale - e.deltaY * 0.01
+      if (scale <= 0.2 || scale >= 1) return
+      setGraphPosition({
+        ...graphPosition,
+        scale,
+      })
+    } else
+      setGraphPosition({
+        ...graphPosition,
+        x: graphPosition.x - e.deltaX,
+        y: graphPosition.y - e.deltaY,
+      })
+  }
+  useEventListener('wheel', handleMouseWheel, graphContainerRef.current)
+
+  if (!typebot) return <></>
+  return (
+    <Flex ref={graphContainerRef} {...props}>
+      <Flex
+        flex="1"
+        boxSize={'200px'}
+        maxW={'200px'}
+        style={{
+          transform,
+        }}
+      >
+        <Edges answersCounts={answersCounts} />
+        {typebot.startBlock && <StartBlockNode block={typebot.startBlock} />}
+        {(typebot.blocks ?? []).map((block) => (
+          <BlockNode block={block} key={block.id} />
+        ))}
+      </Flex>
+    </Flex>
+  )
+}
+
+export default AnalyticsGraph

apps/builder/components/analytics/graph/Edges/DropOffEdge.tsx

@@ -0,0 +1,18 @@
+import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
+import React, { useMemo } from 'react'
+import { computeDropOffPath } from 'services/graph'
+
+type Props = {
+  blockId: string
+}
+export const DropOffEdge = ({ blockId }: Props) => {
+  const { typebot } = useAnalyticsGraph()
+  const path = useMemo(() => {
+    if (!typebot) return
+    const block = (typebot?.blocks ?? []).find((b) => b.id === blockId)
+    if (!block) return ''
+    return computeDropOffPath(block.graphCoordinates, block.steps.length - 1)
+  }, [blockId, typebot])
+
+  return <path d={path} stroke={'#E53E3E'} strokeWidth="2px" fill="none" />
+}

apps/builder/components/analytics/graph/Edges/Edge.tsx

@@ -0,0 +1,56 @@
+import { Block } from 'bot-engine'
+import { StepWithTarget } from 'components/board/graph/Edges/Edge'
+import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
+import React, { useMemo } from 'react'
+import {
+  getAnchorsPosition,
+  computeFlowChartConnectorPath,
+} from 'services/graph'
+
+export const Edge = ({ step }: { step: StepWithTarget }) => {
+  const { typebot } = useAnalyticsGraph()
+  const { blocks, startBlock } = typebot ?? {}
+
+  const { sourceBlock, targetBlock, targetStepIndex } = useMemo(() => {
+    const targetBlock = blocks?.find(
+      (b) => b?.id === step.target.blockId
+    ) as Block
+    const targetStepIndex = step.target.stepId
+      ? targetBlock.steps.findIndex((s) => s.id === step.target.stepId)
+      : undefined
+    return {
+      sourceBlock: [startBlock, ...(blocks ?? [])].find(
+        (b) => b?.id === step.blockId
+      ),
+      targetBlock,
+      targetStepIndex,
+    }
+  }, [
+    blocks,
+    startBlock,
+    step.blockId,
+    step.target.blockId,
+    step.target.stepId,
+  ])
+
+  const path = useMemo(() => {
+    if (!sourceBlock || !targetBlock) return ``
+    const anchorsPosition = getAnchorsPosition(
+      sourceBlock,
+      targetBlock,
+      sourceBlock.steps.findIndex((s) => s.id === step.id),
+      targetStepIndex
+    )
+    return computeFlowChartConnectorPath(anchorsPosition)
+  }, [sourceBlock, step.id, targetBlock, targetStepIndex])
+
+  return (
+    <path
+      d={path}
+      stroke={'#718096'}
+      strokeWidth="2px"
+      markerEnd="url(#arrow)"
+      fill="none"
+    />
+  )
+}

apps/builder/components/analytics/graph/Edges/Edges.tsx

@@ -0,0 +1,69 @@
+import { chakra } from '@chakra-ui/system'
+import { StepWithTarget } from 'components/board/graph/Edges/Edge'
+import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
+import React, { useMemo } from 'react'
+import { AnswersCount } from 'services/analytics'
+import { DropOffBlock } from '../blocks/DropOffBlock'
+import { DropOffEdge } from './DropOffEdge'
+import { Edge } from './Edge'
+
+type Props = { answersCounts?: AnswersCount[] }
+
+export const Edges = ({ answersCounts }: Props) => {
+  const { typebot } = useAnalyticsGraph()
+  const { blocks, startBlock } = typebot ?? {}
+  const stepsWithTarget: StepWithTarget[] = useMemo(() => {
+    if (!startBlock) return []
+    return [
+      ...(startBlock.steps.filter((s) => s.target) as StepWithTarget[]),
+      ...((blocks ?? [])
+        .flatMap((b) => b.steps)
+        .filter((s) => s.target) as StepWithTarget[]),
+    ]
+  }, [blocks, startBlock])
+
+  return (
+    <>
+      <chakra.svg
+        width="full"
+        height="full"
+        overflow="visible"
+        pos="absolute"
+        left="0"
+        top="0"
+      >
+        {stepsWithTarget.map((step) => (
+          <Edge key={step.id} step={step} />
+        ))}
+        <marker
+          id={'arrow'}
+          refX="8"
+          refY="4"
+          orient="auto"
+          viewBox="0 0 20 20"
+          markerUnits="userSpaceOnUse"
+          markerWidth="20"
+          markerHeight="20"
+        >
+          <path
+            d="M7.07138888,5.50174526 L2.43017246,7.82235347 C1.60067988,8.23709976 0.592024983,7.90088146 0.177278692,7.07138888 C0.0606951226,6.83822174 0,6.58111307 0,6.32042429 L0,1.67920787 C0,0.751806973 0.751806973,0 1.67920787,0 C1.93989666,0 2.19700532,0.0606951226 2.43017246,0.177278692 L7,3 C7.82949258,3.41474629 8.23709976,3.92128809 7.82235347,4.75078067 C7.6598671,5.07575341 7.39636161,5.33925889 7.07138888,5.50174526 Z"
+            fill="#718096"
+          />
+        </marker>
+        {answersCounts?.map((answersCount) => (
+          <DropOffEdge
+            key={answersCount.blockId}
+            blockId={answersCount.blockId}
+          />
+        ))}
+      </chakra.svg>
+      {answersCounts?.map((answersCount) => (
+        <DropOffBlock
+          key={answersCount.blockId}
+          answersCounts={answersCounts}
+          blockId={answersCount.blockId}
+        />
+      ))}
+    </>
+  )
+}

apps/builder/components/analytics/graph/Edges/index.ts

@@ -0,0 +1 @@
+export { Edges } from './Edges'

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