diff --git a/web/pages/analytics.tsx b/web/pages/analytics.tsx index 7344c11b..9683fd44 100644 --- a/web/pages/analytics.tsx +++ b/web/pages/analytics.tsx @@ -1,7 +1,5 @@ -import clsx from 'clsx' import dayjs from 'dayjs' import _ from 'lodash' -import { useState } from 'react' import { IS_PRIVATE_MANIFOLD } from '../../common/envs/constants' import { DailyCountChart, @@ -19,7 +17,7 @@ import { getDailyContracts } from '../lib/firebase/contracts' export const getStaticProps = fromPropz(getStaticPropz) export async function getStaticPropz() { - const numberOfDays = 90 + const numberOfDays = 80 const today = dayjs(dayjs().format('YYYY-MM-DD')) const startDate = today.subtract(numberOfDays, 'day') @@ -153,6 +151,27 @@ export function CustomAnalytics(props: { monthlyActiveUsers, weekOnWeekRetention, } = props + + const dailyDividedByWeekly = dailyActiveUsers + .map((dailyActive, i) => + Math.round((100 * dailyActive) / weeklyActiveUsers[i]) + ) + .slice(7) + + const dailyDividedByMonthly = dailyActiveUsers + .map((dailyActive, i) => + Math.round((100 * dailyActive) / monthlyActiveUsers[i]) + ) + .slice(7) + + const weeklyDividedByMonthly = weeklyActiveUsers + .map((weeklyActive, i) => + Math.round((100 * weeklyActive) / monthlyActiveUsers[i]) + ) + .slice(7) + + const oneWeekLaterDate = startDate + 7 * 24 * 60 * 60 * 1000 + return ( @@ -199,17 +218,6 @@ export function CustomAnalytics(props: { /> <Spacer h={8} /> - <Title text="Week-on-week retention" /> - <p className="text-gray-500"> - Out of all active users 2 weeks ago, how many came back last week? - </p> - <DailyPercentChart - dailyPercent={weekOnWeekRetention} - startDate={startDate} - small - /> - <Spacer h={8} /> - <Title text="Daily activity" /> <Tabs defaultIndex={0} @@ -246,6 +254,56 @@ export function CustomAnalytics(props: { }, ]} /> + + <Spacer h={8} /> + + <Title text="Week-on-week retention" /> + <p className="text-gray-500"> + Out of all active users 2 weeks ago, how many came back last week? + </p> + <DailyPercentChart + dailyPercent={weekOnWeekRetention.slice(7)} + startDate={oneWeekLaterDate} + small + /> + <Spacer h={8} /> + + <Title text="Ratio of Active Users" /> + <Tabs + defaultIndex={0} + tabs={[ + { + title: 'Daily / Weekly', + content: ( + <DailyPercentChart + dailyPercent={dailyDividedByWeekly} + startDate={oneWeekLaterDate} + small + /> + ), + }, + { + title: 'Daily / Monthly', + content: ( + <DailyPercentChart + dailyPercent={dailyDividedByMonthly} + startDate={oneWeekLaterDate} + small + /> + ), + }, + { + title: 'Weekly / Monthly', + content: ( + <DailyPercentChart + dailyPercent={weeklyDividedByMonthly} + startDate={oneWeekLaterDate} + small + /> + ), + }, + ]} + /> <Spacer h={8} /> </Col> )