add mmr chart

src/app/(home)/players/[id]/_components/mmr-trend-chart.tsx

@@ -0,0 +1,84 @@
+'use client'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart'
+import type { SelectGames } from '@/server/db/types'
+import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
+
+const chartConfig = {
+  mmr: {
+    label: 'MMR',
+    color: 'var(--color-violet-500)',
+  },
+} satisfies ChartConfig
+
+export function MmrTrendChart({ games }: { games: SelectGames[] }) {
+  const chartData = games
+    .filter((game) => game.gameType === 'ranked')
+    .map((game) => ({
+      date: game.gameTime,
+      mmr: game.playerMmr,
+    }))
+    .sort((a, b) => a.date.getTime() - b.date.getTime())
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>MMR Trends</CardTitle>
+        <CardDescription>All time</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey='date'
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) =>
+                new Date(value).toLocaleDateString('en-US', {
+                  month: 'short',
+                  day: 'numeric',
+                })
+              }
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Line
+              dataKey='mmr'
+              type='natural'
+              stroke='var(--color-mmr)'
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className='flex-col items-start gap-2 text-sm'>
+        <div className='text-muted-foreground leading-none'>
+          Showing only ranked MMR
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}

src/app/(home)/players/[id]/user.tsx

@@ -16,6 +16,7 @@ import type React from 'react'
 import { useState } from 'react'
 
 import { GamesTable } from '@/app/(home)/players/[id]/_components/games-table'
+import { MmrTrendChart } from '@/app/(home)/players/[id]/_components/mmr-trend-chart'
 import { OpponentsTable } from '@/app/(home)/players/[id]/_components/opponents-table'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Badge } from '@/components/ui/badge'
@@ -358,6 +359,7 @@ export function UserInfo() {
             <TabsList className='bg-gray-100 dark:bg-zinc-800'>
               <TabsTrigger value='matches'>Match History</TabsTrigger>
               <TabsTrigger value='opponents'>Opponents</TabsTrigger>
+              <TabsTrigger value='mmr-trends'>MMR Trends</TabsTrigger>
               <TabsTrigger value='stats'>Statistics</TabsTrigger>
               <TabsTrigger value='achievements'>Achievements</TabsTrigger>
             </TabsList>
@@ -409,7 +411,13 @@ export function UserInfo() {
               </div>
             </div>
           </TabsContent>
-
+          <TabsContent value='mmr-trends' className='m-0'>
+            <div className='overflow-hidden rounded-lg border'>
+              <div className='overflow-x-auto'>
+                <MmrTrendChart games={games} />
+              </div>
+            </div>
+          </TabsContent>
           <TabsContent value='stats' className='m-0'>
             <div className='grid grid-cols-1 gap-6 md:grid-cols-2'>
               {(rankedLeaderboard || lastRankedGame) && (