From cf5520b0d85f49f45e15583f06cdbfff1478afab Mon Sep 17 00:00:00 2001
From: Jorgelig <jorgeligg@gmail.com>
Date: Mon, 16 Jan 2023 11:19:15 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20(analytics)=20Add=20better=20com?=
 =?UTF-8?q?pletion=20rate=20parsing=20(#258)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #244
---
 .../src/features/analytics/components/StatsCards.tsx   | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/builder/src/features/analytics/components/StatsCards.tsx b/apps/builder/src/features/analytics/components/StatsCards.tsx
index 766013974..9ddf7da8c 100644
--- a/apps/builder/src/features/analytics/components/StatsCards.tsx
+++ b/apps/builder/src/features/analytics/components/StatsCards.tsx
@@ -10,6 +10,14 @@ import {
 import { Stats } from 'models'
 import React from 'react'
 
+const computeCompletionRate  = (
+  totalCompleted: number,
+  totalStarts: number
+): string => {
+  if (totalStarts === 0) return 'Not available'
+  return `${Math.round((totalCompleted / totalStarts) * 100)}%`
+}
+
 export const StatsCards = ({
   stats,
   ...props
@@ -38,7 +46,7 @@ export const StatsCards = ({
         <StatLabel>Completion rate</StatLabel>
         {stats ? (
           <StatNumber>
-            {Math.round((stats.totalCompleted / stats.totalStarts) * 100)}%
+            {computeCompletionRate(stats.totalCompleted, stats.totalStarts)}
           </StatNumber>
         ) : (
           <Skeleton w="50%" h="10px" mt="2" />