Add daily rollups of the snapshot history and activity calendars

.github/workflows/build.yml

@@ -41,8 +41,8 @@ jobs:
       - name: Migrate database
         run: |
           sleep 2
-          npx prisma generate --sql --schema=libs/prisma/prisma/schema.prisma
           npx nx run-many -t prisma-deploy --parallel=4
+          npx prisma generate --sql --schema=libs/prisma/prisma/schema.prisma
         env:
           DATABASE_URL: ${{ secrets.DATABASE_URL }}
           FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN_POSTGRES2 }}

apps/frontend/app/api/clan/[clanName]/activity/route.ts

@@ -0,0 +1,33 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { z } from 'zod';
+import { decodeString } from '../../../../../utils/encoding';
+import prisma from '../../../../../utils/prisma';
+import { getClanActivity, rangeParamsFromSearch } from '../../../../../utils/activity';
+
+const paramsSchema = z.object({
+  clanName: z.string().transform(decodeString),
+});
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { clanName: string } }
+) {
+  const parsedParams = paramsSchema.safeParse(params);
+
+  if (!parsedParams.success) {
+    return NextResponse.json({ error: 'Bad request' }, { status: 400 });
+  }
+
+  const clan = await prisma.clan.findUnique({
+    where: { name: parsedParams.data.clanName },
+    select: { id: true },
+  });
+
+  if (clan === null) {
+    return NextResponse.json({ error: 'Not found' }, { status: 404 });
+  }
+
+  return NextResponse.json(
+    await getClanActivity(clan.id, rangeParamsFromSearch(request.nextUrl.searchParams))
+  );
+}

apps/frontend/app/api/daily-players/route.ts

@@ -0,0 +1,8 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getDailyPlayers } from '../../../utils/dailyPlayers';
+
+export async function GET(request: NextRequest) {
+  return NextResponse.json(
+    await getDailyPlayers(request.nextUrl.searchParams.get('range') ?? '90d')
+  );
+}

apps/frontend/app/api/gametype/[gameTypeName]/activity/route.ts

@@ -0,0 +1,33 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { z } from 'zod';
+import { decodeString } from '../../../../../utils/encoding';
+import prisma from '../../../../../utils/prisma';
+import { getGameTypeActivity, rangeParamsFromSearch } from '../../../../../utils/activity';
+
+const paramsSchema = z.object({
+  gameTypeName: z.string().transform(decodeString),
+});
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { gameTypeName: string } }
+) {
+  const parsedParams = paramsSchema.safeParse(params);
+
+  if (!parsedParams.success) {
+    return NextResponse.json({ error: 'Bad request' }, { status: 400 });
+  }
+
+  const gameType = await prisma.gameType.findUnique({
+    where: { name: parsedParams.data.gameTypeName },
+    select: { id: true },
+  });
+
+  if (gameType === null) {
+    return NextResponse.json({ error: 'Not found' }, { status: 404 });
+  }
+
+  return NextResponse.json(
+    await getGameTypeActivity(gameType.id, rangeParamsFromSearch(request.nextUrl.searchParams))
+  );
+}

apps/frontend/app/api/gametype/[gameTypeName]/map/[mapName]/activity/route.ts

@@ -0,0 +1,39 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { z } from 'zod';
+import { decodeString } from '../../../../../../../utils/encoding';
+import prisma from '../../../../../../../utils/prisma';
+import { getMapActivity, rangeParamsFromSearch } from '../../../../../../../utils/activity';
+
+const paramsSchema = z.object({
+  gameTypeName: z.string().transform(decodeString),
+  mapName: z.string().transform(decodeString),
+});
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { gameTypeName: string; mapName: string } }
+) {
+  const parsedParams = paramsSchema.safeParse(params);
+
+  if (!parsedParams.success) {
+    return NextResponse.json({ error: 'Bad request' }, { status: 400 });
+  }
+
+  const map = await prisma.map.findUnique({
+    where: {
+      name_gameTypeName: {
+        name: parsedParams.data.mapName,
+        gameTypeName: parsedParams.data.gameTypeName,
+      },
+    },
+    select: { id: true },
+  });
+
+  if (map === null) {
+    return NextResponse.json({ error: 'Not found' }, { status: 404 });
+  }
+
+  return NextResponse.json(
+    await getMapActivity(map.id, rangeParamsFromSearch(request.nextUrl.searchParams))
+  );
+}

apps/frontend/app/api/player/[playerName]/activity/route.ts

@@ -0,0 +1,33 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { z } from 'zod';
+import { decodeString } from '../../../../../utils/encoding';
+import prisma from '../../../../../utils/prisma';
+import { getPlayerActivity, rangeParamsFromSearch } from '../../../../../utils/activity';
+
+const paramsSchema = z.object({
+  playerName: z.string().transform(decodeString),
+});
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { playerName: string } }
+) {
+  const parsedParams = paramsSchema.safeParse(params);
+
+  if (!parsedParams.success) {
+    return NextResponse.json({ error: 'Bad request' }, { status: 400 });
+  }
+
+  const player = await prisma.player.findUnique({
+    where: { name: parsedParams.data.playerName },
+    select: { id: true },
+  });
+
+  if (player === null) {
+    return NextResponse.json({ error: 'Not found' }, { status: 404 });
+  }
+
+  return NextResponse.json(
+    await getPlayerActivity(player.id, rangeParamsFromSearch(request.nextUrl.searchParams))
+  );
+}

apps/frontend/app/api/server/[ip]/[port]/activity/route.ts

@@ -0,0 +1,36 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { z } from 'zod';
+import { decodeIp } from '../../../../../../utils/encoding';
+import prisma from '../../../../../../utils/prisma';
+import { getServerActivity, rangeParamsFromSearch } from '../../../../../../utils/activity';
+
+const paramsSchema = z.object({
+  ip: z.string().transform(decodeIp),
+  port: z.coerce.number().int().positive().max(65535),
+});
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { ip: string; port: string } }
+) {
+  const parsedParams = paramsSchema.safeParse(params);
+
+  if (!parsedParams.success) {
+    return NextResponse.json({ error: 'Bad request' }, { status: 400 });
+  }
+
+  const { ip, port } = parsedParams.data;
+
+  const gameServer = await prisma.gameServer.findUnique({
+    where: { ip_port: { ip, port } },
+    select: { id: true },
+  });
+
+  if (gameServer === null) {
+    return NextResponse.json({ error: 'Not found' }, { status: 404 });
+  }
+
+  return NextResponse.json(
+    await getServerActivity(gameServer.id, rangeParamsFromSearch(request.nextUrl.searchParams))
+  );
+}

apps/frontend/app/clan/[clanName]/layout.tsx

@@ -4,7 +4,10 @@ import { LayoutTabs } from './LayoutTabs';
 import { paramsSchema } from './schema';
 import { z } from 'zod';
 import { formatPlayTime } from '../../../utils/format';
+import { encodeString } from '../../../utils/encoding';
 import { ClanPlayerCount } from './ClanPlayerCount';
+import { ActivityCalendarSection } from '../../../components/ActivityCalendarSection';
+import { getClanActivity } from '../../../utils/activity';
 
 export default async function Index({
   params,
@@ -17,6 +20,7 @@ export default async function Index({
 
   const clan = await prisma.clan.findUnique({
     select: {
+      id: true,
       name: true,
       playTime: true,
       activePlayerCount: true,
@@ -29,7 +33,11 @@ export default async function Index({
     },
   });
 
-  const [gameTypeCount, mapCount] = await Promise.all([
+  if (clan === null) {
+    return notFound();
+  }
+
+  const [gameTypeCount, mapCount, activity] = await Promise.all([
     prisma.clanInfoGameType.count({
       where: {
         clan: {
@@ -44,27 +52,32 @@ export default async function Index({
         },
       }
     }),
+    getClanActivity(clan.id, { range: '1y' }),
   ]);
 
-  if (clan === null) {
-    return notFound();
-  }
-
   return (
     <main className="flex flex-col gap-8 py-12">
-      <header className="flex flex-row px-20 gap-4 items-center">
-        <section className="flex flex-col gap-2 grow">
-          <h1 className="text-2xl font-bold">{clan.name}</h1>
-          <ClanPlayerCount 
-            activeCount={clan.activePlayerCount} 
-            totalCount={clan._count.clanPlayerInfos} 
+      <header className="px-8 xl:px-20">
+        <div className="relative">
+          <ActivityCalendarSection
+            apiPath={`/api/clan/${encodeString(clanName)}/activity`}
+            initial={activity}
           />
-        </section>
-        <aside className="flex flex-col gap-2 text-right">
-          <p>
-            <b>Total Playtime</b>: {formatPlayTime(clan.playTime)}
-          </p>
-        </aside>
+          <div className="absolute inset-y-0 left-0 z-10 flex w-1/2 flex-col justify-center gap-2 bg-gradient-to-r from-white from-30% via-white/85 via-65% to-transparent">
+            <h1 className="text-2xl font-bold">{clan.name}</h1>
+            <div className="flex flex-row divide-x">
+              <span className="pr-4">
+                <ClanPlayerCount
+                  activeCount={clan.activePlayerCount}
+                  totalCount={clan._count.clanPlayerInfos}
+                />
+              </span>
+              <span className="px-4">
+                Playtime: {formatPlayTime(clan.playTime)}
+              </span>
+            </div>
+          </div>
+        </div>
       </header>
 
       <LayoutTabs

apps/frontend/app/gametype/[gameTypeName]/(lists)/layout.tsx

@@ -2,6 +2,9 @@ import { notFound } from 'next/navigation';
 import prisma from '../../../../utils/prisma';
 import { LayoutTabs } from '../LayoutTabs';
 import { paramsSchema } from '../schema';
+import { encodeString } from '../../../../utils/encoding';
+import { ActivityCalendarSection } from '../../../../components/ActivityCalendarSection';
+import { getGameTypeActivity } from '../../../../utils/activity';
 
 export default async function Index({
   children,
@@ -22,8 +25,22 @@ export default async function Index({
     notFound();
   }
 
+  const activity = await getGameTypeActivity(gameType.id, { range: '1y' });
+
   return (
     <div className="flex flex-col gap-4 py-8">
+      <header className="px-8 xl:px-20">
+        <div className="relative">
+          <ActivityCalendarSection
+            apiPath={`/api/gametype/${encodeString(gameTypeName)}/activity`}
+            initial={activity}
+          />
+          <div className="absolute inset-y-0 left-0 z-10 flex w-1/2 flex-row items-center gap-4 bg-gradient-to-r from-white from-30% via-white/85 via-65% to-transparent">
+            <h1 className="text-2xl font-bold">{gameTypeName}</h1>
+          </div>
+        </div>
+      </header>
+
       <LayoutTabs
         gameTypeName={gameTypeName}
         playerCount={gameType.playerCount}

apps/frontend/app/gametype/[gameTypeName]/map/[mapName]/layout.tsx

@@ -1,7 +1,11 @@
 import { notFound } from 'next/navigation';
+import Link from 'next/link';
 import prisma from '../../../../../utils/prisma';
 import { LayoutTabs } from '../../LayoutTabs';
 import { paramsSchema } from './schema';
+import { encodeString } from '../../../../../utils/encoding';
+import { ActivityCalendarSection } from '../../../../../components/ActivityCalendarSection';
+import { getMapActivity } from '../../../../../utils/activity';
 
 export default async function Index({
   children,
@@ -25,8 +29,30 @@ export default async function Index({
     notFound();
   }
 
+  const activity = await getMapActivity(map.id, { range: '1y' });
+
   return (
     <div className="flex flex-col gap-4 py-8">
+      <header className="px-8 xl:px-20">
+        <div className="relative">
+          <ActivityCalendarSection
+            apiPath={`/api/gametype/${encodeString(gameTypeName)}/map/${encodeString(mapName)}/activity`}
+            initial={activity}
+          />
+          <div className="absolute inset-y-0 left-0 z-10 flex w-1/2 flex-col justify-center gap-2 bg-gradient-to-r from-white from-30% via-white/85 via-65% to-transparent">
+            <h1 className="text-2xl font-bold">{mapName}</h1>
+            <span>
+              <Link
+                className="hover:underline"
+                href={{ pathname: `/gametype/${encodeString(gameTypeName)}` }}
+              >
+                {gameTypeName}
+              </Link>
+            </span>
+          </div>
+        </div>
+      </header>
+
       <LayoutTabs
         gameTypeName={gameTypeName}
         mapName={mapName}

apps/frontend/app/page.tsx

@@ -5,6 +5,8 @@ import { getGlobalCounts } from '@teerank/teerank';
 import { formatInteger } from '../utils/format';
 import { encodeString } from '../utils/encoding';
 import redis from '../utils/redis';
+import { DailyPlayersSection } from '../components/DailyPlayersSection';
+import { getDailyPlayers } from '../utils/dailyPlayers';
 
 export const metadata = {
   title: 'Teerank',
@@ -90,6 +92,7 @@ export default async function Index() {
     clans,
     gameTypes,
     globalCounts,
+    dailyPlayers,
   ] = await Promise.all([
     prisma.player.findMany({
       select: {
@@ -129,6 +132,8 @@ export default async function Index() {
     }),
 
     getGlobalCounts(redis),
+
+    getDailyPlayers('90d'),
   ]);
 
   return (
@@ -165,6 +170,8 @@ export default async function Index() {
       </header>
 
       <main className="py-12 px-4 md:px-12 xl:px-20 text-[#666] flex flex-col gap-8">
+        <DailyPlayersSection initial={dailyPlayers} />
+
         <section className="flex flex-col gap-4">
           <header className="flex flex-row justify-between items-baseline">
             <h1 className="text-2xl font-bold clear-both">0.7 servers and map counts</h1>