diff --git a/web/components/analytics/charts.tsx b/web/components/analytics/charts.tsx
index c628c071..3a315d38 100644
--- a/web/components/analytics/charts.tsx
+++ b/web/components/analytics/charts.tsx
@@ -6,8 +6,9 @@ import { useWindowSize } from '../../hooks/use-window-size'
export function DailyCountChart(props: {
startDate: number
dailyCounts: number[]
+ small?: boolean
}) {
- const { dailyCounts, startDate } = props
+ const { dailyCounts, startDate, small } = props
const { width } = useWindowSize()
const dates = dailyCounts.map((_, i) =>
@@ -18,16 +19,16 @@ export function DailyCountChart(props: {
x: date,
y: betCount,
}))
- const data = [{ id: 'Yes', data: points, color: '#11b981' }]
+ const data = [{ id: 'Count', data: points, color: '#11b981' }]
return (
= 800 ? 400 : 250 }}
+ style={{ height: !small && (!width || width >= 800) ? 400 : 250 }}
>
dayjs(date).format('MMM DD'),
}}
colors={{ datum: 'color' }}
- pointSize={10}
+ pointSize={width && width >= 800 ? 10 : 0}
pointBorderWidth={1}
pointBorderColor="#fff"
enableSlices="x"
diff --git a/web/lib/firebase/comments.ts b/web/lib/firebase/comments.ts
index dfb9a01d..a6b9d9ea 100644
--- a/web/lib/firebase/comments.ts
+++ b/web/lib/firebase/comments.ts
@@ -7,6 +7,7 @@ import {
where,
orderBy,
} from 'firebase/firestore'
+import _ from 'lodash'
import { getValues, listenForValues } from './utils'
import { db } from './init'
@@ -89,3 +90,30 @@ export function listenForRecentComments(
) {
return listenForValues(recentCommentsQuery, setComments)
}
+
+const getCommentsQuery = (startTime: number, endTime: number) =>
+ query(
+ collectionGroup(db, 'comments'),
+ where('createdTime', '>=', startTime),
+ where('createdTime', '<', endTime),
+ orderBy('createdTime', 'asc')
+ )
+
+export async function getDailyComments(
+ startTime: number,
+ numberOfDays: number
+) {
+ const query = getCommentsQuery(
+ startTime,
+ startTime + DAY_IN_MS * numberOfDays
+ )
+ const comments = await getValues(query)
+
+ const commentsByDay = _.range(0, numberOfDays).map(() => [] as Comment[])
+ for (const comment of comments) {
+ const dayIndex = Math.floor((comment.createdTime - startTime) / DAY_IN_MS)
+ commentsByDay[dayIndex].push(comment)
+ }
+
+ return commentsByDay
+}
diff --git a/web/pages/analytics.tsx b/web/pages/analytics.tsx
index e4ce95fc..268c0d51 100644
--- a/web/pages/analytics.tsx
+++ b/web/pages/analytics.tsx
@@ -2,9 +2,11 @@ import dayjs from 'dayjs'
import _ from 'lodash'
import { DailyCountChart } from '../components/analytics/charts'
import { Col } from '../components/layout/col'
+import { Spacer } from '../components/layout/spacer'
import { Page } from '../components/page'
import { Title } from '../components/title'
import { getDailyBets } from '../lib/firebase/bets'
+import { getDailyComments } from '../lib/firebase/comments'
import { getDailyContracts } from '../lib/firebase/contracts'
export async function getStaticProps() {
@@ -12,22 +14,34 @@ export async function getStaticProps() {
const today = dayjs(dayjs().format('YYYY-MM-DD'))
const startDate = today.subtract(numberOfDays, 'day')
- const dailyBets = await getDailyBets(startDate.valueOf(), numberOfDays)
- const dailyBetCounts = dailyBets.map((bets) => bets.length)
+ const [dailyBets, dailyContracts, dailyComments] = await Promise.all([
+ getDailyBets(startDate.valueOf(), numberOfDays),
+ getDailyContracts(startDate.valueOf(), numberOfDays),
+ getDailyComments(startDate.valueOf(), numberOfDays),
+ ])
- const dailyContracts = await getDailyContracts(
- startDate.valueOf(),
- numberOfDays
- )
+ const dailyBetCounts = dailyBets.map((bets) => bets.length)
const dailyContractCounts = dailyContracts.map(
(contracts) => contracts.length
)
+ const dailyCommentCounts = dailyComments.map((comments) => comments.length)
+
+ const dailyActiveUsers = _.zip(dailyContracts, dailyBets, dailyComments).map(
+ ([contracts, bets, comments]) => {
+ const creatorIds = (contracts ?? []).map((c) => c.creatorId)
+ const betUserIds = (bets ?? []).map((bet) => bet.userId)
+ const commentUserIds = (comments ?? []).map((comment) => comment.userId)
+ return _.uniq([...creatorIds, ...betUserIds, commentUserIds]).length
+ }
+ )
return {
props: {
startDate: startDate.valueOf(),
+ dailyActiveUsers,
dailyBetCounts,
dailyContractCounts,
+ dailyCommentCounts,
},
revalidate: 12 * 60 * 60, // regenerate after half a day
}
@@ -35,12 +49,15 @@ export async function getStaticProps() {
export default function Analytics(props: {
startDate: number
+ dailyActiveUsers: number[]
dailyBetCounts: number[]
dailyContractCounts: number[]
+ dailyCommentCounts: number[]
}) {
return (
+
)
@@ -48,19 +65,42 @@ export default function Analytics(props: {
function CustomAnalytics(props: {
startDate: number
+ dailyActiveUsers: number[]
dailyBetCounts: number[]
dailyContractCounts: number[]
+ dailyCommentCounts: number[]
}) {
- const { startDate, dailyBetCounts, dailyContractCounts } = props
+ const {
+ startDate,
+ dailyActiveUsers,
+ dailyBetCounts,
+ dailyContractCounts,
+ dailyCommentCounts,
+ } = props
return (
-
+
+
+
+
-
+
+
+
+
)