2022-06-26 21:42:42 +00:00
|
|
|
import { useEffect, useState } from 'react'
|
2022-03-22 21:24:26 +00:00
|
|
|
import {
|
|
|
|
DailyCountChart,
|
|
|
|
DailyPercentChart,
|
2022-05-09 13:04:36 +00:00
|
|
|
} from 'web/components/analytics/charts'
|
|
|
|
import { Col } from 'web/components/layout/col'
|
|
|
|
import { Spacer } from 'web/components/layout/spacer'
|
|
|
|
import { Tabs } from 'web/components/layout/tabs'
|
|
|
|
import { Page } from 'web/components/page'
|
|
|
|
import { Title } from 'web/components/title'
|
2022-05-31 15:32:11 +00:00
|
|
|
import { SiteLink } from 'web/components/site-link'
|
|
|
|
import { Linkify } from 'web/components/linkify'
|
2022-06-26 21:42:42 +00:00
|
|
|
import { getStats } from 'web/lib/firebase/stats'
|
|
|
|
import { Stats } from 'common/stats'
|
2022-09-15 15:12:56 +00:00
|
|
|
import { PAST_BETS } from 'common/user'
|
2022-09-15 20:45:49 +00:00
|
|
|
import { capitalize } from 'lodash'
|
2022-06-26 21:42:42 +00:00
|
|
|
|
|
|
|
export default function Analytics() {
|
|
|
|
const [stats, setStats] = useState<Stats | undefined>(undefined)
|
|
|
|
useEffect(() => {
|
|
|
|
getStats().then(setStats)
|
|
|
|
}, [])
|
|
|
|
if (stats == null) {
|
|
|
|
return <></>
|
2022-03-09 02:43:30 +00:00
|
|
|
}
|
2022-01-17 18:34:28 +00:00
|
|
|
return (
|
|
|
|
<Page>
|
2022-05-31 15:32:11 +00:00
|
|
|
<Tabs
|
2022-07-07 21:24:13 +00:00
|
|
|
currentPageForAnalytics={'stats'}
|
2022-05-31 15:32:11 +00:00
|
|
|
tabs={[
|
|
|
|
{
|
|
|
|
title: 'Activity',
|
2022-06-26 21:42:42 +00:00
|
|
|
content: <CustomAnalytics {...stats} />,
|
2022-05-31 15:32:11 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Market Stats',
|
|
|
|
content: <WasabiCharts />,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Google Analytics',
|
|
|
|
content: <FirebaseAnalytics />,
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
/>
|
2022-01-17 18:34:28 +00:00
|
|
|
</Page>
|
|
|
|
)
|
|
|
|
}
|
2022-03-03 01:52:41 +00:00
|
|
|
|
2022-09-19 06:28:18 +00:00
|
|
|
export function CustomAnalytics(props: Stats) {
|
2022-03-03 20:59:12 +00:00
|
|
|
const {
|
2022-09-19 22:10:12 +00:00
|
|
|
startDate,
|
2022-03-03 20:59:12 +00:00
|
|
|
dailyActiveUsers,
|
2022-09-19 23:41:24 +00:00
|
|
|
dailyActiveUsersWeeklyAvg,
|
|
|
|
weeklyActiveUsers,
|
|
|
|
monthlyActiveUsers,
|
|
|
|
d1,
|
|
|
|
d1WeeklyAvg,
|
|
|
|
nd1,
|
|
|
|
nd1WeeklyAvg,
|
|
|
|
nw1,
|
2022-03-03 20:59:12 +00:00
|
|
|
dailyBetCounts,
|
|
|
|
dailyContractCounts,
|
|
|
|
dailyCommentCounts,
|
2022-05-19 21:13:30 +00:00
|
|
|
dailySignups,
|
2022-03-22 21:24:26 +00:00
|
|
|
weekOnWeekRetention,
|
2022-04-19 06:57:27 +00:00
|
|
|
monthlyRetention,
|
2022-09-20 05:10:05 +00:00
|
|
|
dailyActivationRate,
|
|
|
|
dailyActivationRateWeeklyAvg,
|
2022-06-11 04:44:19 +00:00
|
|
|
manaBet,
|
2022-03-03 20:59:12 +00:00
|
|
|
} = props
|
2022-04-16 01:56:07 +00:00
|
|
|
|
2022-09-20 05:10:05 +00:00
|
|
|
const dailyDividedByWeekly = dailyActiveUsers.map(
|
|
|
|
(dailyActive, i) => dailyActive / weeklyActiveUsers[i]
|
|
|
|
)
|
|
|
|
const dailyDividedByMonthly = dailyActiveUsers.map(
|
|
|
|
(dailyActive, i) => dailyActive / monthlyActiveUsers[i]
|
|
|
|
)
|
|
|
|
const weeklyDividedByMonthly = weeklyActiveUsers.map(
|
|
|
|
(weeklyActive, i) => weeklyActive / monthlyActiveUsers[i]
|
|
|
|
)
|
2022-04-16 01:56:07 +00:00
|
|
|
|
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
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
},
|
2022-09-19 23:41:24 +00:00
|
|
|
{
|
|
|
|
title: 'Daily (7d avg)',
|
|
|
|
content: (
|
|
|
|
<DailyCountChart
|
|
|
|
dailyCounts={dailyActiveUsersWeeklyAvg}
|
|
|
|
startDate={startDate}
|
|
|
|
small
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
},
|
2022-03-22 22:53:06 +00:00
|
|
|
{
|
|
|
|
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-09-19 23:41:24 +00:00
|
|
|
<Title text="Retention" />
|
2022-09-19 06:28:18 +00:00
|
|
|
<p className="text-gray-500">
|
2022-09-19 23:41:24 +00:00
|
|
|
What fraction of active users are still active after the given time
|
|
|
|
period?
|
2022-09-19 06:28:18 +00:00
|
|
|
</p>
|
|
|
|
<Tabs
|
|
|
|
defaultIndex={1}
|
|
|
|
tabs={[
|
|
|
|
{
|
|
|
|
title: 'D1',
|
|
|
|
content: (
|
2022-09-19 22:45:52 +00:00
|
|
|
<DailyPercentChart
|
|
|
|
dailyPercent={d1}
|
|
|
|
startDate={startDate}
|
|
|
|
small
|
2022-09-19 23:41:24 +00:00
|
|
|
excludeFirstDays={1}
|
2022-09-19 22:45:52 +00:00
|
|
|
/>
|
2022-09-19 06:28:18 +00:00
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
2022-09-19 23:41:24 +00:00
|
|
|
title: 'D1 (7d avg)',
|
2022-09-19 06:28:18 +00:00
|
|
|
content: (
|
2022-09-19 22:45:52 +00:00
|
|
|
<DailyPercentChart
|
2022-09-19 23:41:24 +00:00
|
|
|
dailyPercent={d1WeeklyAvg}
|
2022-09-19 06:28:18 +00:00
|
|
|
startDate={startDate}
|
|
|
|
small
|
2022-09-19 23:41:24 +00:00
|
|
|
excludeFirstDays={7}
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'W1',
|
|
|
|
content: (
|
|
|
|
<DailyPercentChart
|
|
|
|
dailyPercent={weekOnWeekRetention}
|
2022-09-20 05:10:05 +00:00
|
|
|
startDate={startDate}
|
2022-09-19 23:41:24 +00:00
|
|
|
small
|
|
|
|
excludeFirstDays={14}
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'M1',
|
|
|
|
content: (
|
|
|
|
<DailyPercentChart
|
|
|
|
dailyPercent={monthlyRetention}
|
2022-09-20 05:10:05 +00:00
|
|
|
startDate={startDate}
|
2022-09-19 23:41:24 +00:00
|
|
|
small
|
|
|
|
excludeFirstDays={60}
|
2022-09-19 06:28:18 +00:00
|
|
|
/>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
/>
|
|
|
|
|
2022-09-19 23:41:24 +00:00
|
|
|
<Spacer h={8} />
|
|
|
|
<Title text="New user retention" />
|
2022-09-19 06:28:18 +00:00
|
|
|
<p className="text-gray-500">
|
2022-09-19 23:41:24 +00:00
|
|
|
What fraction of new users are still active after the given time period?
|
2022-09-19 06:28:18 +00:00
|
|
|
</p>
|
|
|
|
<Spacer h={4} />
|
|
|
|
|
|
|
|
<Tabs
|
2022-09-19 23:41:24 +00:00
|
|
|
defaultIndex={2}
|
2022-09-19 06:28:18 +00:00
|
|
|
tabs={[
|
|
|
|
{
|
2022-09-19 23:41:24 +00:00
|
|
|
title: 'ND1',
|
|
|
|
content: (
|
|
|
|
<DailyPercentChart
|
|
|
|
dailyPercent={nd1}
|
|
|
|
startDate={startDate}
|
|
|
|
excludeFirstDays={1}
|
|
|
|
small
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'ND1 (7d avg)',
|
|
|
|
content: (
|
|
|
|
<DailyPercentChart
|
|
|
|
dailyPercent={nd1WeeklyAvg}
|
|
|
|
startDate={startDate}
|
|
|
|
excludeFirstDays={7}
|
|
|
|
small
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'NW1',
|
2022-09-19 06:28:18 +00:00
|
|
|
content: (
|
2022-09-19 22:45:52 +00:00
|
|
|
<DailyPercentChart
|
2022-09-19 23:41:24 +00:00
|
|
|
dailyPercent={nw1}
|
2022-09-19 06:28:18 +00:00
|
|
|
startDate={startDate}
|
2022-09-19 23:41:24 +00:00
|
|
|
excludeFirstDays={14}
|
2022-09-19 06:28:18 +00:00
|
|
|
small
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
/>
|
|
|
|
<Spacer h={8} />
|
|
|
|
|
2022-03-22 22:53:06 +00:00
|
|
|
<Title text="Daily activity" />
|
|
|
|
<Tabs
|
|
|
|
defaultIndex={0}
|
|
|
|
tabs={[
|
|
|
|
{
|
2022-09-15 20:45:49 +00:00
|
|
|
title: capitalize(PAST_BETS),
|
2022-03-22 22:53:06 +00:00
|
|
|
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-05-19 21:13:30 +00:00
|
|
|
{
|
|
|
|
title: 'Signups',
|
|
|
|
content: (
|
|
|
|
<DailyCountChart
|
|
|
|
dailyCounts={dailySignups}
|
|
|
|
startDate={startDate}
|
|
|
|
small
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
},
|
2022-03-22 22:53:06 +00:00
|
|
|
]}
|
2022-03-03 20:59:12 +00:00
|
|
|
/>
|
2022-04-16 01:56:07 +00:00
|
|
|
|
|
|
|
<Spacer h={8} />
|
|
|
|
|
2022-09-20 05:10:05 +00:00
|
|
|
<Title text="Activation rate" />
|
2022-04-19 06:47:58 +00:00
|
|
|
<p className="text-gray-500">
|
2022-09-20 05:10:05 +00:00
|
|
|
Out of all new users, how many placed at least one bet?
|
2022-04-19 06:47:58 +00:00
|
|
|
</p>
|
2022-09-20 05:10:05 +00:00
|
|
|
<Spacer h={4} />
|
2022-04-19 06:47:58 +00:00
|
|
|
|
2022-04-16 01:56:07 +00:00
|
|
|
<Tabs
|
2022-05-02 22:18:40 +00:00
|
|
|
defaultIndex={1}
|
2022-04-16 01:56:07 +00:00
|
|
|
tabs={[
|
|
|
|
{
|
2022-09-20 05:10:05 +00:00
|
|
|
title: 'Daily',
|
2022-04-16 01:56:07 +00:00
|
|
|
content: (
|
|
|
|
<DailyPercentChart
|
2022-09-20 05:10:05 +00:00
|
|
|
dailyPercent={dailyActivationRate}
|
|
|
|
startDate={startDate}
|
|
|
|
excludeFirstDays={1}
|
2022-04-16 01:56:07 +00:00
|
|
|
small
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
2022-09-20 05:10:05 +00:00
|
|
|
title: 'Daily (7d avg)',
|
2022-04-16 01:56:07 +00:00
|
|
|
content: (
|
|
|
|
<DailyPercentChart
|
2022-09-20 05:10:05 +00:00
|
|
|
dailyPercent={dailyActivationRateWeeklyAvg}
|
|
|
|
startDate={startDate}
|
|
|
|
excludeFirstDays={7}
|
2022-04-16 01:56:07 +00:00
|
|
|
small
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
/>
|
2022-03-22 22:53:06 +00:00
|
|
|
<Spacer h={8} />
|
2022-06-11 04:22:47 +00:00
|
|
|
|
2022-09-20 05:10:05 +00:00
|
|
|
<Title text="Ratio of Active Users" />
|
2022-06-11 04:22:47 +00:00
|
|
|
<Tabs
|
|
|
|
defaultIndex={1}
|
|
|
|
tabs={[
|
|
|
|
{
|
2022-09-20 05:10:05 +00:00
|
|
|
title: 'Daily / Weekly',
|
2022-06-11 04:22:47 +00:00
|
|
|
content: (
|
2022-09-20 05:10:05 +00:00
|
|
|
<DailyPercentChart
|
|
|
|
dailyPercent={dailyDividedByWeekly}
|
2022-06-11 04:22:47 +00:00
|
|
|
startDate={startDate}
|
|
|
|
small
|
2022-09-20 05:10:05 +00:00
|
|
|
excludeFirstDays={7}
|
2022-06-11 04:22:47 +00:00
|
|
|
/>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
2022-09-20 05:10:05 +00:00
|
|
|
title: 'Daily / Monthly',
|
2022-06-11 04:22:47 +00:00
|
|
|
content: (
|
2022-09-20 05:10:05 +00:00
|
|
|
<DailyPercentChart
|
|
|
|
dailyPercent={dailyDividedByMonthly}
|
2022-06-11 04:22:47 +00:00
|
|
|
startDate={startDate}
|
|
|
|
small
|
2022-09-20 05:10:05 +00:00
|
|
|
excludeFirstDays={30}
|
2022-06-11 04:22:47 +00:00
|
|
|
/>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
2022-09-20 05:10:05 +00:00
|
|
|
title: 'Weekly / Monthly',
|
2022-06-11 04:22:47 +00:00
|
|
|
content: (
|
2022-09-20 05:10:05 +00:00
|
|
|
<DailyPercentChart
|
|
|
|
dailyPercent={weeklyDividedByMonthly}
|
2022-06-11 04:22:47 +00:00
|
|
|
startDate={startDate}
|
|
|
|
small
|
2022-09-20 05:10:05 +00:00
|
|
|
excludeFirstDays={30}
|
2022-06-11 04:22:47 +00:00
|
|
|
/>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
/>
|
2022-09-20 05:10:05 +00:00
|
|
|
<Spacer h={8} />
|
2022-06-11 04:44:19 +00:00
|
|
|
|
|
|
|
<Title text="Total mana bet" />
|
|
|
|
<p className="text-gray-500">
|
|
|
|
Sum of bet amounts. (Divided by 100 to be more readable.)
|
|
|
|
</p>
|
|
|
|
<Tabs
|
|
|
|
defaultIndex={1}
|
|
|
|
tabs={[
|
|
|
|
{
|
|
|
|
title: 'Daily',
|
|
|
|
content: (
|
|
|
|
<DailyCountChart
|
|
|
|
dailyCounts={manaBet.daily}
|
|
|
|
startDate={startDate}
|
|
|
|
small
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Weekly',
|
|
|
|
content: (
|
|
|
|
<DailyCountChart
|
|
|
|
dailyCounts={manaBet.weekly}
|
|
|
|
startDate={startDate}
|
|
|
|
small
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Monthly',
|
|
|
|
content: (
|
|
|
|
<DailyCountChart
|
|
|
|
dailyCounts={manaBet.monthly}
|
|
|
|
startDate={startDate}
|
|
|
|
small
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
/>
|
2022-09-20 05:10:05 +00:00
|
|
|
<Spacer h={8} />
|
2022-03-22 22:53:06 +00:00
|
|
|
</Col>
|
|
|
|
)
|
|
|
|
}
|
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
|
|
|
<>
|
|
|
|
<p className="text-gray-500">
|
|
|
|
Less accurate; includes all viewers (not just signed-in users).
|
|
|
|
</p>
|
|
|
|
<Spacer h={4} />
|
|
|
|
<iframe
|
2022-08-26 21:23:06 +00:00
|
|
|
className="w-full border-0"
|
2022-03-22 22:53:06 +00:00
|
|
|
height={2200}
|
|
|
|
src="https://datastudio.google.com/embed/reporting/faeaf3a4-c8da-4275-b157-98dad017d305/page/Gg3"
|
|
|
|
frameBorder="0"
|
|
|
|
allowFullScreen
|
|
|
|
/>
|
|
|
|
</>
|
2022-03-03 01:52:41 +00:00
|
|
|
)
|
|
|
|
}
|
2022-05-31 15:32:11 +00:00
|
|
|
|
|
|
|
export function WasabiCharts() {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<p className="text-gray-500">
|
|
|
|
Courtesy of <Linkify text="@wasabipesto" />; originally found{' '}
|
|
|
|
<SiteLink
|
|
|
|
className="font-bold"
|
|
|
|
href="https://wasabipesto.com/jupyter/manifold/"
|
|
|
|
>
|
|
|
|
here.
|
|
|
|
</SiteLink>
|
|
|
|
</p>
|
|
|
|
<Spacer h={4} />
|
|
|
|
<iframe
|
2022-08-26 21:23:06 +00:00
|
|
|
className="w-full border-0"
|
2022-06-10 01:35:38 +00:00
|
|
|
height={21000}
|
2022-05-31 15:32:11 +00:00
|
|
|
src="https://wasabipesto.com/jupyter/manifold/"
|
|
|
|
frameBorder="0"
|
|
|
|
allowFullScreen
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|