diff --git a/web/pages/analytics.tsx b/web/pages/analytics.tsx
index 6c0e428d..6b2fd038 100644
--- a/web/pages/analytics.tsx
+++ b/web/pages/analytics.tsx
@@ -1,5 +1,7 @@
+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,
@@ -152,68 +154,176 @@ export function CustomAnalytics(props: {
} = props
return (
-
-
+
+
+ An active user is a user who has traded in, commented on, or created a
+ market.
+
+
-
-
-
-
-
+ ),
+ },
+ {
+ title: 'Weekly',
+ content: (
+
+ ),
+ },
+ {
+ title: 'Monthly',
+ content: (
+
+ ),
+ },
+ ]}
/>
+
+
+ Out of all active users 2 weeks ago, how many came back last week?
+
+
-
-
-
-
-
-
-
-
+
+ ),
+ },
+ {
+ title: 'Markets created',
+ content: (
+
+ ),
+ },
+ {
+ title: 'Comments',
+ content: (
+
+ ),
+ },
+ ]}
/>
+
)
}
+type Tab = {
+ title: string
+ content: JSX.Element
+}
+
+function Tabs(props: { tabs: Tab[]; defaultIndex: number }) {
+ const { tabs, defaultIndex } = props
+ const [activeTab, setActiveTab] = useState(tabs[defaultIndex])
+
+ return (
+
+
+
+ {/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
+
+
+
+
+
{activeTab.content}
+
+ )
+}
+
export function FirebaseAnalytics() {
// Edit dashboard at https://datastudio.google.com/u/0/reporting/faeaf3a4-c8da-4275-b157-98dad017d305/page/Gg3/edit
+
return (
-
+ <>
+
+
+ Less accurate; includes all viewers (not just signed-in users).
+
+
+
+ >
)
}