feat : remove weird section in analis

components/public/analytics-dashboard.tsx

@@ -13,7 +13,8 @@ import { Field, FieldContent, FieldDescription, FieldLabel } from "@/components/
 import { Switch } from "@/components/ui/switch";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { selectAnalytics, type PublicAnalytics, type RankedAnalyticsItem } from "@/lib/analytics/model";
-import { rarityColor } from "@/lib/catalog/rarity";
+import { cn } from "@/lib/utils";
+import { characterRarityGradientClass, rarityColor, rarityGradientClass } from "@/lib/catalog/rarity";
 
 const formatCount = (count: number) => count.toLocaleString("th-TH");
 const chartConfig = { count: { label: "จำนวนครั้ง", color: "var(--muted-foreground)" } };
@@ -30,10 +31,11 @@ function ItemImageTick({ x, y, item }: { x: number; y: number; item: RankedAnaly
   </g>;
 }
 
-function UsageRanking({ title, description, items }: {
+function UsageRanking({ title, description, items, characterItems = false }: {
   title: string;
   description: string;
   items: RankedAnalyticsItem[];
+  characterItems?: boolean;
 }) {
   const top = items.slice(0, 10).map((item) => ({ ...item, fill: rarityColor(item.rarity) }));
   const rarities = [...new Set(top.map((item) => item.rarity))].sort((a, b) => (b ?? 0) - (a ?? 0));
@@ -79,22 +81,29 @@ function UsageRanking({ title, description, items }: {
                 <TableHead>ชื่อ</TableHead>
                 <TableHead className="text-right">ครั้ง</TableHead>
               </TableRow></TableHeader>
-              <TableBody>{items.map((item, index) => <TableRow key={item.key}>
+              <TableBody>{items.map((item, index) => {
-                <TableCell>{formatCount(index + 1)}</TableCell>
+                const backgroundClass = characterItems
-                <TableCell className="whitespace-normal">
+                  ? characterRarityGradientClass(item.key, item.rarity)
-                  <div className="flex items-center gap-2">
+                  : rarityGradientClass(item.rarity);
-                    <Avatar>
+                return <TableRow key={item.key}>
-                      {item.imageUrl ? <AvatarImage src={item.imageUrl} alt="" loading="lazy" /> : null}
+                  <TableCell>{formatCount(index + 1)}</TableCell>
-                      <AvatarFallback>{item.name.slice(0, 1)}</AvatarFallback>
+                  <TableCell className="whitespace-normal">
-                    </Avatar>
+                    <div className="flex items-center gap-2">
-                    <span className="flex min-w-0 flex-col gap-0.5 break-words">
+                      <Avatar className={cn("size-10 rounded-md after:rounded-md", backgroundClass)}>
-                      <span>{item.name}</span>
+                        {item.imageUrl ? <AvatarImage className="rounded-md object-contain p-0.5" src={item.imageUrl} alt="" loading="lazy" /> : null}
-                      <span className="text-xs text-muted-foreground">{rarityLabel(item.rarity)}</span>
+                        <AvatarFallback className={cn("rounded-md", backgroundClass && "bg-transparent text-white")}>
-                    </span>
+                          {item.name.slice(0, 1)}
-                  </div>
+                        </AvatarFallback>
-                </TableCell>
+                      </Avatar>
-                <TableCell className="text-right tabular-nums">{formatCount(item.count)}</TableCell>
+                      <span className="flex min-w-0 flex-col gap-0.5 break-words">
-              </TableRow>)}</TableBody>
+                        <span>{item.name}</span>
+                        <span className="text-xs text-muted-foreground">{rarityLabel(item.rarity)}</span>
+                      </span>
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-right tabular-nums">{formatCount(item.count)}</TableCell>
+                </TableRow>;
+              })}</TableBody>
             </Table>
           </details>
         </> : <Empty>
@@ -175,7 +184,6 @@ export function AnalyticsDashboard({ data }: { data: PublicAnalytics }) {
     </section>
     <p className="text-sm leading-relaxed text-muted-foreground">
       นับจากข้อมูลที่บันทึกในไกด์สาธารณะ ไม่ใช่สถิติการเล่นของผู้เล่น
-      แต่ละรายการแนะนำถูกนับแยกกัน รวมตัวเลือกซ้ำ
       {ignoreRepeatedTeams ? " ทีมที่มีตัวละครและบิลด์เหมือนกันจะนับเพียงครั้งเดียวจากไกด์ที่เลือก" : " แต่ละสมาชิกทีมถูกนับแยกกัน รวมทีมที่คัดลอกข้ามไกด์หรือเวอร์ชัน"}
       อาร์ติแฟกต์แบบผสมจะนับทั้งสองเซ็ต เซ็ตเดียวกันในรายการเดียวจะนับครั้งเดียว
       ไกด์ที่ซ่อน อยู่ในถังขยะ และส่วนที่ปิดการแสดงผลจะไม่ถูกนับ
@@ -186,20 +194,10 @@ export function AnalyticsDashboard({ data }: { data: PublicAnalytics }) {
         <p className="text-sm text-muted-foreground">นับจำนวนครั้งที่ตัวละครและอุปกรณ์ปรากฏในสมาชิกทีม</p>
       </div>
       <div className="grid items-start gap-4 md:grid-cols-2 xl:grid-cols-3">
-        <UsageRanking title="ตัวละคร" description="ตัวละครที่ปรากฏในทีมบ่อยที่สุด" items={selected.team.character} />
+        <UsageRanking title="ตัวละคร" description="ตัวละครที่ปรากฏในทีมบ่อยที่สุด" items={selected.team.character} characterItems />
         <UsageRanking title="อาวุธ" description="อาวุธที่สมาชิกทีมใช้บ่อยที่สุด" items={selected.team.weapon} />
         <UsageRanking title="อาร์ติแฟกต์" description="เซ็ตอาร์ติแฟกต์ที่สมาชิกทีมใช้บ่อยที่สุด" items={selected.team.artifact} />
       </div>
     </section>
-    <section aria-labelledby="recommendation-title" className="flex flex-col gap-4">
-      <div className="flex flex-col gap-1">
-        <h2 id="recommendation-title" className="font-heading text-2xl font-semibold">แนะนำบ่อยที่สุด</h2>
-        <p className="text-sm text-muted-foreground">นับรายการแนะนำอาวุธและอาร์ติแฟกต์ แยกจากอุปกรณ์ที่ใช้ในทีม{includeStygian ? " รวมอุปกรณ์ของตัวละครแนะนำใน Stygian" : ""}</p>
-      </div>
-      <div className="grid items-start gap-4 md:grid-cols-2">
-        <UsageRanking title="อาวุธแนะนำ" description="อาวุธที่ปรากฏในรายการแนะนำบ่อยที่สุด" items={selected.recommendation.weapon} />
-        <UsageRanking title="อาร์ติแฟกต์แนะนำ" description="เซ็ตอาร์ติแฟกต์ที่ปรากฏในรายการแนะนำบ่อยที่สุด" items={selected.recommendation.artifact} />
-      </div>
-    </section>
   </div>;
 }