🖐️ Analytics drop off rates

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'