Use percent chart, save unrounded stats

functions/src/update-stats.ts

@@ -199,8 +199,7 @@ export const updateStatsCore = async () => {
     const retainedCount = sumBy(Array.from(newTwoWeeksAgo), (userId) =>
       activeLastWeek.has(userId) ? 1 : 0
     )
-    const retainedFrac = retainedCount / newTwoWeeksAgo.size
+    return retainedCount / newTwoWeeksAgo.size
-    return Math.round(retainedFrac * 100 * 100) / 100
   })
 
   const weekOnWeekRetention = dailyUserIds.map((_userId, i) => {
@@ -222,8 +221,7 @@ export const updateStatsCore = async () => {
     const retainedCount = sumBy(Array.from(activeTwoWeeksAgo), (userId) =>
       activeLastWeek.has(userId) ? 1 : 0
     )
-    const retainedFrac = retainedCount / activeTwoWeeksAgo.size
+    return retainedCount / activeTwoWeeksAgo.size
-    return Math.round(retainedFrac * 100 * 100) / 100
   })
 
   const monthlyRetention = dailyUserIds.map((_userId, i) => {
@@ -245,8 +243,7 @@ export const updateStatsCore = async () => {
     const retainedCount = sumBy(Array.from(activeTwoMonthsAgo), (userId) =>
       activeLastMonth.has(userId) ? 1 : 0
     )
-    const retainedFrac = retainedCount / activeTwoMonthsAgo.size
+    return retainedCount / activeTwoMonthsAgo.size
-    return Math.round(retainedFrac * 100 * 100) / 100
   })
 
   const firstBetDict: { [userId: string]: number } = {}
@@ -272,8 +269,7 @@ export const updateStatsCore = async () => {
         }
       }
     }
-    const frac = activatedCount / (newUsers || 1)
+    return activatedCount / (newUsers || 1)
-    return Math.round(frac * 100 * 100) / 100
   })
   const dailySignups = dailyNewUsers.map((users) => users.length)
 

web/components/analytics/charts.tsx

@@ -1,5 +1,6 @@
 import { Point, ResponsiveLine } from '@nivo/line'
 import clsx from 'clsx'
+import { formatPercent } from 'common/util/format'
 import dayjs from 'dayjs'
 import { zip } from 'lodash'
 import { useWindowSize } from 'web/hooks/use-window-size'
@@ -71,9 +72,9 @@ export function DailyPercentChart(props: {
     dayjs(startDate).add(i, 'day').toDate()
   )
 
-  const points = zip(dates, dailyPercent).map(([date, betCount]) => ({
+  const points = zip(dates, dailyPercent).map(([date, percent]) => ({
     x: date,
-    y: betCount,
+    y: percent,
   }))
   const data = [{ id: 'Percent', data: points, color: '#11b981' }]
 
@@ -93,7 +94,7 @@ export function DailyPercentChart(props: {
           type: 'time',
         }}
         axisLeft={{
-          format: (value) => `${value}%`,
+          format: formatPercent,
         }}
         axisBottom={{
           tickValues: bottomAxisTicks,
@@ -109,15 +110,15 @@ export function DailyPercentChart(props: {
         margin={{ top: 20, right: 28, bottom: 22, left: 40 }}
         sliceTooltip={({ slice }) => {
           const point = slice.points[0]
-          return <Tooltip point={point} />
+          return <Tooltip point={point} isPercent />
         }}
       />
     </div>
   )
 }
 
-function Tooltip(props: { point: Point }) {
+function Tooltip(props: { point: Point; isPercent?: boolean }) {
-  const { point } = props
+  const { point, isPercent } = props
   return (
     <Col className="border border-gray-300 bg-white py-2 px-3">
       <div
@@ -126,7 +127,8 @@ function Tooltip(props: { point: Point }) {
           color: point.serieColor,
         }}
       >
-        <strong>{point.serieId}</strong> {point.data.yFormatted}
+        <strong>{point.serieId}</strong>{' '}
+        {isPercent ? formatPercent(+point.data.y) : point.data.yFormatted}
       </div>
       <div>{dayjs(point.data.x).format('MMM DD')}</div>
     </Col>

web/pages/stats.tsx

@@ -145,14 +145,18 @@ export function CustomAnalytics(props: Stats) {
           {
             title: 'D1',
             content: (
-              <DailyCountChart dailyCounts={d1} startDate={startDate} small />
+              <DailyPercentChart
+                dailyPercent={d1}
+                startDate={startDate}
+                small
+              />
             ),
           },
           {
             title: 'D1 weekly average',
             content: (
-              <DailyCountChart
+              <DailyPercentChart
-                dailyCounts={d1Weekly}
+                dailyPercent={d1Weekly}
                 startDate={startDate}
                 small
               />
@@ -175,8 +179,8 @@ export function CustomAnalytics(props: Stats) {
           {
             title: 'W1',
             content: (
-              <DailyCountChart
+              <DailyPercentChart
-                dailyCounts={w1NewUsers}
+                dailyPercent={w1NewUsers}
                 startDate={startDate}
                 small
               />