2022-03-22 22:53:06 +00:00
|
|
|
import clsx from 'clsx'
|
2022-03-03 01:52:41 +00:00
|
|
|
import dayjs from 'dayjs'
|
|
|
|
import _ from 'lodash'
|
2022-03-22 22:53:06 +00:00
|
|
|
import { useState } from 'react'
|
2022-03-09 02:43:30 +00:00
|
|
|
import { IS_PRIVATE_MANIFOLD } from '../../common/envs/constants'
|
2022-03-22 21:24:26 +00:00
|
|
|
import {
|
|
|
|
DailyCountChart,
|
|
|
|
DailyPercentChart,
|
|
|
|
} from '../components/analytics/charts'
|
2022-03-03 01:52:41 +00:00
|
|
|
import { Col } from '../components/layout/col'
|
2022-03-03 20:59:12 +00:00
|
|
|
import { Spacer } from '../components/layout/spacer'
|
2022-01-17 18:34:28 +00:00
|
|
|
import { Page } from '../components/page'
|
2022-03-03 01:52:41 +00:00
|
|
|
import { Title } from '../components/title'
|
2022-03-09 02:43:30 +00:00
|
|
|
import { fromPropz, usePropz } from '../hooks/use-propz'
|
2022-03-03 01:52:41 +00:00
|
|
|
import { getDailyBets } from '../lib/firebase/bets'
|
2022-03-03 20:59:12 +00:00
|
|
|
import { getDailyComments } from '../lib/firebase/comments'
|
2022-03-03 01:52:41 +00:00
|
|
|
import { getDailyContracts } from '../lib/firebase/contracts'
|
2022-01-17 18:34:28 +00:00
|
|
|
|
2022-03-09 02:43:30 +00:00
|
|
|
export const getStaticProps = fromPropz(getStaticPropz)
|
|
|
|
export async function getStaticPropz() {
|
2022-03-20 21:23:25 +00:00
|
|
|
const numberOfDays = 90
|
2022-03-03 01:52:41 +00:00
|
|
|
const today = dayjs(dayjs().format('YYYY-MM-DD'))
|
|
|
|
const startDate = today.subtract(numberOfDays, 'day')
|
|
|
|
|
2022-03-03 20:59:12 +00:00
|
|
|
const [dailyBets, dailyContracts, dailyComments] = await Promise.all([
|
|
|
|
getDailyBets(startDate.valueOf(), numberOfDays),
|
|
|
|
getDailyContracts(startDate.valueOf(), numberOfDays),
|
|
|
|
getDailyComments(startDate.valueOf(), numberOfDays),
|
|
|
|
])
|
2022-03-03 01:52:41 +00:00
|
|
|
|
2022-03-03 20:59:12 +00:00
|
|
|
const dailyBetCounts = dailyBets.map((bets) => bets.length)
|
2022-03-03 01:52:41 +00:00
|
|
|
const dailyContractCounts = dailyContracts.map(
|
|
|
|
(contracts) => contracts.length
|
|
|
|
)
|
2022-03-03 20:59:12 +00:00
|
|
|
const dailyCommentCounts = dailyComments.map((comments) => comments.length)
|
|
|
|
|
2022-03-20 21:23:25 +00:00
|
|
|
const dailyUserIds = _.zip(dailyContracts, dailyBets, dailyComments).map(
|
2022-03-03 20:59:12 +00:00
|
|
|
([contracts, bets, comments]) => {
|
|
|
|
const creatorIds = (contracts ?? []).map((c) => c.creatorId)
|
|
|
|
const betUserIds = (bets ?? []).map((bet) => bet.userId)
|
|
|
|
const commentUserIds = (comments ?? []).map((comment) => comment.userId)
|
2022-03-20 21:23:25 +00:00
|
|
|
return _.uniq([...creatorIds, ...betUserIds, ...commentUserIds])
|
2022-03-03 20:59:12 +00:00
|
|
|
}
|
|
|
|
)
|
2022-03-03 01:52:41 +00:00
|
|
|
|
2022-03-20 21:23:25 +00:00
|
|
|
const dailyActiveUsers = dailyUserIds.map((userIds) => userIds.length)
|
|
|
|
|
2022-03-21 22:42:06 +00:00
|
|
|
const weeklyActiveUsers = dailyUserIds.map((_, i) => {
|
|
|
|
const start = Math.max(0, i - 6)
|
|
|
|
const end = i
|
|
|
|
const uniques = new Set<string>()
|
|
|
|
for (let j = start; j <= end; j++)
|
|
|
|
dailyUserIds[j].forEach((userId) => uniques.add(userId))
|
|
|
|
return uniques.size
|
|
|
|
})
|
|
|
|
|
2022-03-20 21:23:25 +00:00
|
|
|
const monthlyActiveUsers = dailyUserIds.map((_, i) => {
|
|
|
|
const start = Math.max(0, i - 30)
|
|
|
|
const end = i
|
|
|
|
const uniques = new Set<string>()
|
|
|
|
for (let j = start; j <= end; j++)
|
|
|
|
dailyUserIds[j].forEach((userId) => uniques.add(userId))
|
|
|
|
return uniques.size
|
|
|
|
})
|
|
|
|
|
2022-03-22 21:24:26 +00:00
|
|
|
const weekOnWeekRetention = dailyUserIds.map((_userId, i) => {
|
|
|
|
const twoWeeksAgo = {
|
|
|
|
start: Math.max(0, i - 13),
|
|
|
|
end: Math.max(0, i - 7),
|
|
|
|
}
|
|
|
|
const lastWeek = {
|
|
|
|
start: Math.max(0, i - 6),
|
|
|
|
end: i,
|
|
|
|
}
|
|
|
|
|
|
|
|
const activeTwoWeeksAgo = new Set<string>()
|
|
|
|
for (let j = twoWeeksAgo.start; j <= twoWeeksAgo.end; j++) {
|
|
|
|
dailyUserIds[j].forEach((userId) => activeTwoWeeksAgo.add(userId))
|
|
|
|
}
|
|
|
|
const activeLastWeek = new Set<string>()
|
|
|
|
for (let j = lastWeek.start; j <= lastWeek.end; j++) {
|
|
|
|
dailyUserIds[j].forEach((userId) => activeLastWeek.add(userId))
|
|
|
|
}
|
|
|
|
const retainedCount = _.sumBy(Array.from(activeTwoWeeksAgo), (userId) =>
|
|
|
|
activeLastWeek.has(userId) ? 1 : 0
|
|
|
|
)
|
|
|
|
const retainedFrac = retainedCount / activeTwoWeeksAgo.size
|
|
|
|
return Math.round(retainedFrac * 100 * 100) / 100
|
|
|
|
})
|
|
|
|
|
2022-03-03 01:52:41 +00:00
|
|
|
return {
|
|
|
|
props: {
|
|
|
|
startDate: startDate.valueOf(),
|
2022-03-03 20:59:12 +00:00
|
|
|
dailyActiveUsers,
|
2022-03-21 22:42:06 +00:00
|
|
|
weeklyActiveUsers,
|
|
|
|
monthlyActiveUsers,
|
2022-03-03 01:52:41 +00:00
|
|
|
dailyBetCounts,
|
|
|
|
dailyContractCounts,
|
2022-03-03 20:59:12 +00:00
|
|
|
dailyCommentCounts,
|
2022-03-22 21:24:26 +00:00
|
|
|
weekOnWeekRetention,
|
2022-03-03 01:52:41 +00:00
|
|
|
},
|
|
|
|
revalidate: 12 * 60 * 60, // regenerate after half a day
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default function Analytics(props: {
|
|
|
|
startDate: number
|
2022-03-03 20:59:12 +00:00
|
|
|
dailyActiveUsers: number[]
|
2022-03-21 22:42:06 +00:00
|
|
|
weeklyActiveUsers: number[]
|
|
|
|
monthlyActiveUsers: number[]
|
2022-03-03 01:52:41 +00:00
|
|
|
dailyBetCounts: number[]
|
|
|
|
dailyContractCounts: number[]
|
2022-03-03 20:59:12 +00:00
|
|
|
dailyCommentCounts: number[]
|
2022-03-22 21:24:26 +00:00
|
|
|
weekOnWeekRetention: number[]
|
2022-03-03 01:52:41 +00:00
|
|
|
}) {
|
2022-03-09 02:43:30 +00:00
|
|
|
props = usePropz(props, getStaticPropz) ?? {
|
|
|
|
startDate: 0,
|
|
|
|
dailyActiveUsers: [],
|
2022-03-21 22:42:06 +00:00
|
|
|
weeklyActiveUsers: [],
|
|
|
|
monthlyActiveUsers: [],
|
2022-03-09 02:43:30 +00:00
|
|
|
dailyBetCounts: [],
|
|
|
|
dailyContractCounts: [],
|
|
|
|
dailyCommentCounts: [],
|
2022-03-22 21:24:26 +00:00
|
|
|
weekOnWeekRetention: [],
|
2022-03-09 02:43:30 +00:00
|
|
|
}
|
2022-01-17 18:34:28 +00:00
|
|
|
return (
|
|
|
|
<Page>
|
2022-03-03 01:52:41 +00:00
|
|
|
<CustomAnalytics {...props} />
|
2022-03-03 20:59:12 +00:00
|
|
|
<Spacer h={8} />
|
2022-03-09 02:43:30 +00:00
|
|
|
{!IS_PRIVATE_MANIFOLD && <FirebaseAnalytics />}
|
2022-01-17 18:34:28 +00:00
|
|
|
</Page>
|
|
|
|
)
|
|
|
|
}
|
2022-03-03 01:52:41 +00:00
|
|
|
|
2022-03-20 22:21:28 +00:00
|
|
|
export function CustomAnalytics(props: {
|
2022-03-03 01:52:41 +00:00
|
|
|
startDate: number
|
2022-03-03 20:59:12 +00:00
|
|
|
dailyActiveUsers: number[]
|
2022-03-21 22:42:06 +00:00
|
|
|
weeklyActiveUsers: number[]
|
|
|
|
monthlyActiveUsers: number[]
|
2022-03-03 01:52:41 +00:00
|
|
|
dailyBetCounts: number[]
|
|
|
|
dailyContractCounts: number[]
|
2022-03-03 20:59:12 +00:00
|
|
|
dailyCommentCounts: number[]
|
2022-03-22 21:24:26 +00:00
|
|
|
weekOnWeekRetention: number[]
|
2022-03-03 01:52:41 +00:00
|
|
|
}) {
|
2022-03-03 20:59:12 +00:00
|
|
|
const {
|
|
|
|
startDate,
|
|
|
|
dailyActiveUsers,
|
|
|
|
dailyBetCounts,
|
|
|
|
dailyContractCounts,
|
|
|
|
dailyCommentCounts,
|
2022-03-21 22:42:06 +00:00
|
|
|
weeklyActiveUsers,
|
|
|
|
monthlyActiveUsers,
|
2022-03-22 21:24:26 +00:00
|
|
|
weekOnWeekRetention,
|
2022-03-03 20:59:12 +00:00
|
|
|
} = props
|
2022-03-03 01:52:41 +00:00
|
|
|
return (
|
2022-03-23 02:05:28 +00:00
|
|
|
<Col className="px-2 sm:px-0">
|
2022-03-22 22:53:06 +00:00
|
|
|
<Title text="Active users" />
|
|
|
|
<p className="text-gray-500">
|
|
|
|
An active user is a user who has traded in, commented on, or created a
|
|
|
|
market.
|
|
|
|
</p>
|
|
|
|
<Spacer h={4} />
|
2022-03-21 22:42:06 +00:00
|
|
|
|
2022-03-22 22:53:06 +00:00
|
|
|
<Tabs
|
|
|
|
defaultIndex={1}
|
|
|
|
tabs={[
|
|
|
|
{
|
|
|
|
title: 'Daily',
|
|
|
|
content: (
|
|
|
|
<DailyCountChart
|
|
|
|
dailyCounts={dailyActiveUsers}
|
|
|
|
startDate={startDate}
|
|
|
|
small
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Weekly',
|
|
|
|
content: (
|
|
|
|
<DailyCountChart
|
|
|
|
dailyCounts={weeklyActiveUsers}
|
|
|
|
startDate={startDate}
|
|
|
|
small
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Monthly',
|
|
|
|
content: (
|
|
|
|
<DailyCountChart
|
|
|
|
dailyCounts={monthlyActiveUsers}
|
|
|
|
startDate={startDate}
|
|
|
|
small
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
]}
|
2022-03-21 22:42:06 +00:00
|
|
|
/>
|
2022-03-22 22:53:06 +00:00
|
|
|
<Spacer h={8} />
|
2022-03-03 20:59:12 +00:00
|
|
|
|
2022-03-22 21:24:26 +00:00
|
|
|
<Title text="Week-on-week retention" />
|
2022-03-22 22:53:06 +00:00
|
|
|
<p className="text-gray-500">
|
|
|
|
Out of all active users 2 weeks ago, how many came back last week?
|
|
|
|
</p>
|
2022-03-22 21:24:26 +00:00
|
|
|
<DailyPercentChart
|
|
|
|
dailyPercent={weekOnWeekRetention}
|
|
|
|
startDate={startDate}
|
|
|
|
small
|
|
|
|
/>
|
2022-03-22 22:53:06 +00:00
|
|
|
<Spacer h={8} />
|
2022-03-22 21:24:26 +00:00
|
|
|
|
2022-03-22 22:53:06 +00:00
|
|
|
<Title text="Daily activity" />
|
|
|
|
<Tabs
|
|
|
|
defaultIndex={0}
|
|
|
|
tabs={[
|
|
|
|
{
|
|
|
|
title: 'Trades',
|
|
|
|
content: (
|
|
|
|
<DailyCountChart
|
|
|
|
dailyCounts={dailyBetCounts}
|
|
|
|
startDate={startDate}
|
|
|
|
small
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Markets created',
|
|
|
|
content: (
|
|
|
|
<DailyCountChart
|
|
|
|
dailyCounts={dailyContractCounts}
|
|
|
|
startDate={startDate}
|
|
|
|
small
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Comments',
|
|
|
|
content: (
|
|
|
|
<DailyCountChart
|
|
|
|
dailyCounts={dailyCommentCounts}
|
|
|
|
startDate={startDate}
|
|
|
|
small
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
]}
|
2022-03-03 20:59:12 +00:00
|
|
|
/>
|
2022-03-22 22:53:06 +00:00
|
|
|
<Spacer h={8} />
|
|
|
|
</Col>
|
|
|
|
)
|
|
|
|
}
|
2022-03-03 01:52:41 +00:00
|
|
|
|
2022-03-22 22:53:06 +00:00
|
|
|
type Tab = {
|
|
|
|
title: string
|
|
|
|
content: JSX.Element
|
|
|
|
}
|
2022-03-03 20:59:12 +00:00
|
|
|
|
2022-03-22 22:53:06 +00:00
|
|
|
function Tabs(props: { tabs: Tab[]; defaultIndex: number }) {
|
|
|
|
const { tabs, defaultIndex } = props
|
|
|
|
const [activeTab, setActiveTab] = useState(tabs[defaultIndex])
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div>
|
2022-03-22 23:26:06 +00:00
|
|
|
<nav className="flex space-x-4" aria-label="Tabs">
|
|
|
|
{tabs.map((tab) => (
|
|
|
|
<a
|
|
|
|
key={tab.title}
|
|
|
|
href="#"
|
|
|
|
className={clsx(
|
|
|
|
tab.title === activeTab.title
|
|
|
|
? 'bg-gray-100 text-gray-700'
|
|
|
|
: 'text-gray-500 hover:text-gray-700',
|
|
|
|
'rounded-md px-3 py-2 text-sm font-medium'
|
|
|
|
)}
|
|
|
|
aria-current={tab.title === activeTab.title ? 'page' : undefined}
|
|
|
|
onClick={(e) => {
|
|
|
|
console.log('clicked')
|
|
|
|
e.preventDefault()
|
|
|
|
setActiveTab(tab)
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{tab.title}
|
|
|
|
</a>
|
|
|
|
))}
|
|
|
|
</nav>
|
2022-03-22 22:53:06 +00:00
|
|
|
|
|
|
|
<div className="mt-4">{activeTab.content}</div>
|
|
|
|
</div>
|
2022-03-03 01:52:41 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2022-03-20 22:21:28 +00:00
|
|
|
export function FirebaseAnalytics() {
|
2022-03-03 01:52:41 +00:00
|
|
|
// Edit dashboard at https://datastudio.google.com/u/0/reporting/faeaf3a4-c8da-4275-b157-98dad017d305/page/Gg3/edit
|
2022-03-22 22:53:06 +00:00
|
|
|
|
2022-03-03 01:52:41 +00:00
|
|
|
return (
|
2022-03-22 22:53:06 +00:00
|
|
|
<>
|
|
|
|
<Title text="Google Analytics" />
|
|
|
|
<p className="text-gray-500">
|
|
|
|
Less accurate; includes all viewers (not just signed-in users).
|
|
|
|
</p>
|
|
|
|
<Spacer h={4} />
|
|
|
|
<iframe
|
|
|
|
className="w-full"
|
|
|
|
height={2200}
|
|
|
|
src="https://datastudio.google.com/embed/reporting/faeaf3a4-c8da-4275-b157-98dad017d305/page/Gg3"
|
|
|
|
frameBorder="0"
|
|
|
|
style={{ border: 0 }}
|
|
|
|
allowFullScreen
|
|
|
|
/>
|
|
|
|
</>
|
2022-03-03 01:52:41 +00:00
|
|
|
)
|
|
|
|
}
|