From cb9fa0ceb240dab0a28edd20192ef970a6ed306c Mon Sep 17 00:00:00 2001 From: James Grugett Date: Thu, 3 Mar 2022 12:59:12 -0800 Subject: [PATCH] Daily active users & comments --- web/components/analytics/charts.tsx | 11 +++--- web/lib/firebase/comments.ts | 28 ++++++++++++++ web/pages/analytics.tsx | 58 ++++++++++++++++++++++++----- 3 files changed, 83 insertions(+), 14 deletions(-) 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 ( - + + + <DailyCountChart dailyCounts={dailyActiveUsers} startDate={startDate} /> + <Title text="Bets count" /> - <DailyCountChart dailyCounts={dailyBetCounts} startDate={startDate} /> + <DailyCountChart + dailyCounts={dailyBetCounts} + startDate={startDate} + small + /> <Title text="Markets count" /> <DailyCountChart dailyCounts={dailyContractCounts} startDate={startDate} + small + /> + + <Title text="Comments count" /> + <DailyCountChart + dailyCounts={dailyCommentCounts} + startDate={startDate} + small /> </Col> )