blsmedia/bot
2
0
Fork 0
Code Activity

fix(analytics): 🐛 Analytics board

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-02-11 18:06:59 +01:00
parent 93fed893c0
commit 7c164e25d7
13 changed files with 179 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
apps/builder/components/shared/Graph/Edges/DropOffEdge.tsx Normal file
View File

@@ -0,0 +1,100 @@
import { VStack, Tag, Text } from '@chakra-ui/react'
import { useGraph } from 'contexts/GraphContext'
import { useTypebot } from 'contexts/TypebotContext'
import React, { useMemo } from 'react'
import { AnswersCount } from 'services/analytics'
import {
getEndpointTopOffset,
computeSourceCoordinates,
computeDropOffPath,
} from 'services/graph'
import { byId, isDefined } from 'utils'
type Props = {
blockId: string
answersCounts: AnswersCount[]
}
export const DropOffEdge = ({ answersCounts, blockId }: Props) => {
const { sourceEndpoints, graphPosition, blocksCoordinates } = useGraph()
const { publishedTypebot } = useTypebot()
const totalAnswers = useMemo(
() => answersCounts.find((a) => a.blockId === blockId)?.totalAnswers,
[answersCounts, blockId]
)
const { totalDroppedUser, dropOffRate } = useMemo(() => {
if (!publishedTypebot || totalAnswers === undefined)
return { previousTotal: undefined, dropOffRate: undefined }
const previousBlockIds = publishedTypebot.edges
.map((edge) =>
edge.to.blockId === blockId ? edge.from.blockId : undefined
)
.filter(isDefined)
const previousTotal = answersCounts
.filter((a) => previousBlockIds.includes(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, publishedTypebot])
const block = publishedTypebot?.blocks.find(byId(blockId))
const sourceTop = useMemo(
() =>
getEndpointTopOffset(
graphPosition,
sourceEndpoints,
block?.steps[block.steps.length - 1].id,
true
),
// eslint-disable-next-line react-hooks/exhaustive-deps
[block?.steps, graphPosition, sourceEndpoints, blocksCoordinates]
)
const labelCoordinates = useMemo(() => {
if (!blocksCoordinates[blockId]) return
return computeSourceCoordinates(blocksCoordinates[blockId], sourceTop ?? 0)
}, [blocksCoordinates, blockId, sourceTop])
if (!labelCoordinates) return <></>
return (
<>
<path
d={computeDropOffPath(
{ x: labelCoordinates.x - 300, y: labelCoordinates.y },
sourceTop ?? 0
)}
stroke="#e53e3e"
strokeWidth="2px"
markerEnd="url(#red-arrow)"
fill="none"
/>
<foreignObject
width="80"
height="80"
x={labelCoordinates.x - 20}
y={labelCoordinates.y + 80}
>
<VStack
bgColor={'red.500'}
color="white"
rounded="md"
p="2"
justifyContent="center"
w="full"
h="full"
>
<Text>{dropOffRate}%</Text>
<Tag colorScheme="red">{totalDroppedUser} users</Tag>
</VStack>
</foreignObject>
</>
)
}

12
apps/builder/components/shared/Graph/Edges/Edge.tsx
View File

@@ -22,6 +22,7 @@ export const Edge = ({ edge }: { edge: EdgeProps }) => {
targetEndpoints,
graphPosition,
blocksCoordinates,
isReadOnly,
} = useGraph()
const isPreviewing = previewingEdge?.id === edge.id
@@ -35,14 +36,21 @@ export const Edge = ({ edge }: { edge: EdgeProps }) => {
getEndpointTopOffset(
graphPosition,
sourceEndpoints,
getSourceEndpointId(edge)
getSourceEndpointId(edge),
isReadOnly
),
// eslint-disable-next-line react-hooks/exhaustive-deps
[edge, graphPosition, sourceEndpoints, sourceBlockCoordinates?.y]
)
const targetTop = useMemo(
() => getEndpointTopOffset(graphPosition, targetEndpoints, edge?.to.stepId),
() =>
getEndpointTopOffset(
graphPosition,
targetEndpoints,
edge?.to.stepId,
isReadOnly
),
// eslint-disable-next-line react-hooks/exhaustive-deps
[graphPosition, targetEndpoints, edge?.to.stepId, targetBlockCoordinates?.y]
)

27
apps/builder/components/shared/Graph/Edges/Edges.tsx
View File

@@ -1,13 +1,16 @@
import { chakra } from '@chakra-ui/system'
import { Edge as EdgeProps } from 'models'
import React from 'react'
import { AnswersCount } from 'services/analytics'
import { DrawingEdge } from './DrawingEdge'
import { DropOffEdge } from './DropOffEdge'
import { Edge } from './Edge'
type Props = {
edges: EdgeProps[]
answersCounts?: AnswersCount[]
}
export const Edges = ({ edges }: Props) => {
export const Edges = ({ edges, answersCounts }: Props) => {
return (
<chakra.svg
width="full"
@@ -21,6 +24,13 @@ export const Edges = ({ edges }: Props) => {
{edges.map((edge) => (
<Edge key={edge.id} edge={edge} />
))}
{answersCounts?.slice(1)?.map((answerCount) => (
<DropOffEdge
key={answerCount.blockId}
answersCounts={answersCounts}
blockId={answerCount.blockId}
/>
))}
<marker
id={'arrow'}
refX="8"
@@ -51,6 +61,21 @@ export const Edges = ({ edges }: Props) => {
fill="#1a5fff"
/>
</marker>
<marker
id={'red-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="#e53e3e"
/>
</marker>
</chakra.svg>
)
}

22
apps/builder/components/shared/Graph/Graph.tsx
View File

@@ -6,20 +6,23 @@ import { useStepDnd } from 'contexts/GraphDndContext'
import { Edges } from './Edges'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import { headerHeight } from 'components/shared/TypebotHeader/TypebotHeader'
import { DraggableStepType } from 'models'
import { Block, DraggableStepType, PublicTypebot, Typebot } from 'models'
import { generate } from 'short-uuid'
import { AnswersCount } from 'services/analytics'
import { DropOffNode } from './Nodes/DropOffNode'
export const Graph = ({
typebot,
answersCounts,
...props
}: { answersCounts?: AnswersCount[] } & FlexProps) => {
}: {
typebot?: Typebot | PublicTypebot
answersCounts?: AnswersCount[]
} & FlexProps) => {
const { draggedStepType, setDraggedStepType, draggedStep, setDraggedStep } =
useStepDnd()
const graphContainerRef = useRef<HTMLDivElement | null>(null)
const editorContainerRef = useRef<HTMLDivElement | null>(null)
const { createBlock, typebot } = useTypebot()
const { createBlock } = useTypebot()
const {
graphPosition,
setGraphPosition,
@@ -96,16 +99,9 @@ export const Graph = ({
transform,
}}
>
<Edges edges={typebot?.edges ?? []} />
<Edges edges={typebot?.edges ?? []} answersCounts={answersCounts} />
{typebot?.blocks.map((block, idx) => (
<BlockNode block={block} blockIndex={idx} key={block.id} />
))}
{answersCounts?.map((answersCount) => (
<DropOffNode
key={answersCount.blockId}
answersCounts={answersCounts}
blockId={answersCount.blockId}
/>
<BlockNode block={block as Block} blockIndex={idx} key={block.id} />
))}
</Flex>
</Flex>

4
apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx
View File

@@ -87,6 +87,7 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
useEventListener('mousemove', handleMouseMove)
const handleMouseEnter = () => {
if (isReadOnly) return
if (mouseOverBlock?.id !== block.id && !isStartBlock)
setMouseOverBlock({ id: block.id, ref: blockRef })
if (connectingIds)
@@ -94,6 +95,7 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
}
const handleMouseLeave = () => {
if (isReadOnly) return
setMouseOverBlock(undefined)
if (connectingIds) setConnectingIds({ ...connectingIds, target: undefined })
}
@@ -134,7 +136,7 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
defaultValue={block.title}
onSubmit={handleTitleSubmit}
fontWeight="semibold"
isDisabled={isReadOnly}
pointerEvents={isReadOnly ? 'none' : 'auto'}
>
<EditablePreview
_hover={{ bgColor: 'gray.300' }}

70
apps/builder/components/shared/Graph/Nodes/DropOffNode.tsx
View File

@@ -1,70 +0,0 @@
import { Tag, Text, VStack } from '@chakra-ui/react'
import { useTypebot } from 'contexts/TypebotContext'
import React, { useMemo } from 'react'
import { AnswersCount } from 'services/analytics'
import { computeSourceCoordinates } from 'services/graph'
import { byId, isDefined } from 'utils'
type Props = {
answersCounts: AnswersCount[]
blockId: string
}
export const DropOffNode = ({ answersCounts, blockId }: Props) => {
const { typebot } = useTypebot()
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 previousBlockIds = typebot.edges
.map((edge) =>
edge.to.blockId === blockId ? edge.from.blockId : undefined
)
.filter((blockId) => isDefined(blockId))
const previousTotal = answersCounts
.filter((a) => previousBlockIds.includes(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(() => {
const sourceBlock = typebot?.blocks.find(byId(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>
)
}

8
apps/builder/components/shared/Graph/Nodes/StepNode/StepNodesList.tsx
View File

@@ -115,7 +115,11 @@ export const StepNodesList = ({
}
return (
<Stack spacing={1} transition="none">
<Stack
spacing={1}
transition="none"
pointerEvents={isReadOnly ? 'none' : 'auto'}
>
<Flex
ref={handlePushElementRef(0)}
h={
@@ -135,7 +139,7 @@ export const StepNodesList = ({
key={step.id}
step={step}
indices={{ blockIndex, stepIndex: idx }}
isConnectable={!isReadOnly && steps.length - 1 === idx}
isConnectable={steps.length - 1 === idx}
onMouseDown={handleStepMouseDown(idx)}
/>
<Flex

4
apps/builder/contexts/GraphContext.tsx
View File

@@ -1,4 +1,4 @@
import { Block, Edge, IdMap, Source, Step, Target } from 'models'
import { Block, Edge, IdMap, PublicBlock, Source, Step, Target } from 'models'
import {
createContext,
Dispatch,
@@ -86,7 +86,7 @@ export const GraphProvider = ({
isReadOnly = false,
}: {
children: ReactNode
blocks: Block[]
blocks: (Block | PublicBlock)[]
isReadOnly?: boolean
}) => {
const [graphPosition, setGraphPosition] = useState(graphPositionDefaultValue)

2
apps/builder/layouts/editor/Board.tsx
View File

@@ -18,7 +18,7 @@ export const Board = () => {
<GraphDndContext>
<StepsSideBar />
<GraphProvider blocks={typebot?.blocks ?? []}>
<Graph flex="1" />
{typebot && <Graph flex="1" typebot={typebot} />}
<BoardMenuButton pos="absolute" right="40px" top="20px" />
{rightPanel === RightPanel.PREVIEW && <PreviewDrawer />}
</GraphProvider>

20
apps/builder/layouts/results/AnalyticsContent.tsx
View File

@@ -1,6 +1,7 @@
import { Flex, useToast } from '@chakra-ui/react'
import { StatsCards } from 'components/analytics/StatsCards'
import { Graph } from 'components/shared/Graph'
import { GraphProvider } from 'contexts/GraphContext'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import { Stats } from 'models'
import React from 'react'
@@ -25,14 +26,17 @@ export const AnalyticsContent = ({ stats }: { stats?: Stats }) => {
h="full"
justifyContent="center"
>
{publishedTypebot && (
<Graph
flex="1"
answersCounts={[
{ blockId: 'start-block', totalAnswers: stats?.totalViews ?? 0 },
...(answersCounts ?? []),
]}
/>
{publishedTypebot && answersCounts && stats && (
<GraphProvider blocks={publishedTypebot?.blocks ?? []} isReadOnly>
<Graph
flex="1"
typebot={publishedTypebot}
answersCounts={[
{ ...answersCounts[0], totalAnswers: stats?.totalStarts },
...answersCounts?.slice(1),
]}
/>
</GraphProvider>
)}
<StatsCards stats={stats} pos="absolute" top={10} />
</Flex>

10
apps/builder/services/graph.ts
View File

@@ -12,9 +12,9 @@ import { headerHeight } from 'components/shared/TypebotHeader'
export const computeDropOffPath = (
sourcePosition: Coordinates,
sourceStepIndex: number
sourceTop: number
) => {
const sourceCoord = computeSourceCoordinates(sourcePosition, sourceStepIndex)
const sourceCoord = computeSourceCoordinates(sourcePosition, sourceTop)
const segments = computeTwoSegments(sourceCoord, {
x: sourceCoord.x + 20,
y: sourceCoord.y + 80,
@@ -276,7 +276,8 @@ export const computeEdgePathToMouse = ({
export const getEndpointTopOffset = (
graphPosition: Coordinates,
endpoints: IdMap<Endpoint>,
endpointId?: string
endpointId?: string,
isAnalytics?: boolean
): number | undefined => {
if (!endpointId) return
const endpointRef = endpoints[endpointId]?.ref
@@ -285,7 +286,8 @@ export const getEndpointTopOffset = (
8 +
(endpointRef.current?.getBoundingClientRect().top ?? 0) -
graphPosition.y -
headerHeight
headerHeight -
(isAnalytics ? 60 : 0)
)
}

4
apps/builder/services/utils/utils.ts
View File

@@ -1,6 +1,6 @@
import imageCompression from 'browser-image-compression'
import { Parser } from 'htmlparser2'
import { Step, Typebot } from 'models'
import { PublicStep, Step, Typebot } from 'models'
export const fetcher = async (input: RequestInfo, init?: RequestInit) => {
const res = await fetch(input, init)
@@ -98,7 +98,7 @@ export const removeUndefinedFields = <T>(obj: T): T =>
{} as T
)
export const stepHasOptions = (step: Step) => 'options' in step
export const stepHasOptions = (step: Step | PublicStep) => 'options' in step
export const parseVariableHighlight = (content: string, typebot: Typebot) => {
const varNames = typebot.variables.map((v) => v.name)