diff --git a/web/components/analytics/charts.tsx b/web/components/analytics/charts.tsx index 3a315d38..1f627475 100644 --- a/web/components/analytics/charts.tsx +++ b/web/components/analytics/charts.tsx @@ -36,7 +36,7 @@ export function DailyCountChart(props: { format: (date) => dayjs(date).format('MMM DD'), }} colors={{ datum: 'color' }} - pointSize={width && width >= 800 ? 10 : 0} + pointSize={0} pointBorderWidth={1} pointBorderColor="#fff" enableSlices="x" diff --git a/web/pages/analytics.tsx b/web/pages/analytics.tsx index c2e0ac99..0afd5a3e 100644 --- a/web/pages/analytics.tsx +++ b/web/pages/analytics.tsx @@ -13,7 +13,7 @@ import { getDailyContracts } from '../lib/firebase/contracts' export const getStaticProps = fromPropz(getStaticPropz) export async function getStaticPropz() { - const numberOfDays = 80 + const numberOfDays = 90 const today = dayjs(dayjs().format('YYYY-MM-DD')) const startDate = today.subtract(numberOfDays, 'day') @@ -29,15 +29,26 @@ export async function getStaticPropz() { ) const dailyCommentCounts = dailyComments.map((comments) => comments.length) - const dailyActiveUsers = _.zip(dailyContracts, dailyBets, dailyComments).map( + const dailyUserIds = _.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 _.uniq([...creatorIds, ...betUserIds, ...commentUserIds]) } ) + const dailyActiveUsers = dailyUserIds.map((userIds) => userIds.length) + + const monthlyActiveUsers = dailyUserIds.map((_, i) => { + const start = Math.max(0, i - 30) + const end = i + const uniques = new Set() + for (let j = start; j <= end; j++) + dailyUserIds[j].forEach((userId) => uniques.add(userId)) + return uniques.size + }) + return { props: { startDate: startDate.valueOf(), @@ -45,6 +56,7 @@ export async function getStaticPropz() { dailyBetCounts, dailyContractCounts, dailyCommentCounts, + monthlyActiveUsers, }, revalidate: 12 * 60 * 60, // regenerate after half a day } @@ -56,6 +68,7 @@ export default function Analytics(props: { dailyBetCounts: number[] dailyContractCounts: number[] dailyCommentCounts: number[] + monthlyActiveUsers: number[] }) { props = usePropz(props, getStaticPropz) ?? { startDate: 0, @@ -75,6 +88,7 @@ export default function Analytics(props: { function CustomAnalytics(props: { startDate: number + monthlyActiveUsers: number[] dailyActiveUsers: number[] dailyBetCounts: number[] dailyContractCounts: number[] @@ -82,6 +96,7 @@ function CustomAnalytics(props: { }) { const { startDate, + monthlyActiveUsers, dailyActiveUsers, dailyBetCounts, dailyContractCounts, @@ -89,7 +104,10 @@ function CustomAnalytics(props: { } = props return ( - + <Title text="Monthly Active users" /> + <DailyCountChart dailyCounts={monthlyActiveUsers} startDate={startDate} /> + + <Title text="Daily Active users" /> <DailyCountChart dailyCounts={dailyActiveUsers} startDate={startDate} /> <Title text="Bets count" />