From 408ea8a219a5b5f0122e428206bc222ee531b3e7 Mon Sep 17 00:00:00 2001
From: gunshiz <spsshop1047@gmail.com>
Date: Sun, 11 Oct 2026 20:35:00 +0700
Subject: [PATCH] feat : update analis page

---
 .../public/analytics-dashboard.test.tsx       |  4 ++--
 components/public/analytics-dashboard.tsx     |  7 +++++-
 lib/analytics/model.test.ts                   |  6 ++---
 lib/analytics/model.ts                        |  1 +
 lib/analytics/queries.ts                      | 24 ++++++++++++++-----
 5 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/components/public/analytics-dashboard.test.tsx b/components/public/analytics-dashboard.test.tsx
index 7ba0c65..a90a982 100644
--- a/components/public/analytics-dashboard.test.tsx
+++ b/components/public/analytics-dashboard.test.tsx
@@ -19,8 +19,8 @@ const item = (key: string, guideCount: number, stygianCount: number): AnalyticsI
 const entries = [item("Shared", 2, 5), item("Stygian only", 0, 3)];
 const data: PublicAnalytics = {
   guides: [
-    ...Array.from({ length: 4 }, (_, index) => ({ id: `g${index}`, source: "guide" as const, name: `Guide ${index}` })),
-    ...Array.from({ length: 2 }, (_, index) => ({ id: `s${index}`, source: "stygian" as const, name: `Stygian ${index}` })),
+    ...Array.from({ length: 4 }, (_, index) => ({ id: `g${index}`, source: "guide" as const, name: `Guide ${index}`, character: null })),
+    ...Array.from({ length: 2 }, (_, index) => ({ id: `s${index}`, source: "stygian" as const, name: `Stygian ${index}`, character: null })),
   ],
   teamGroups: [{ guideId: "g0", signature: "guide-team", count: 1 }, { guideId: "s0", signature: "stygian-team", count: 1 }],
   guideCount: 4, stygianScheduleCount: 2, guideTeamCount: 6, stygianTeamCount: 3,
diff --git a/components/public/analytics-dashboard.tsx b/components/public/analytics-dashboard.tsx
index d3b56c4..a933ad8 100644
--- a/components/public/analytics-dashboard.tsx
+++ b/components/public/analytics-dashboard.tsx
@@ -5,6 +5,7 @@ import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts"
 import { CheckIcon, MinusIcon } from "lucide-react";
 
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { CatalogItemImage } from "@/components/catalog-item-image";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
@@ -95,7 +96,7 @@ function UsageRanking({ title, description, items, characterItems = false }: {
                           {item.name.slice(0, 1)}
                         </AvatarFallback>
                       </Avatar>
-                      <span className="flex min-w-0 flex-col gap-0.5 break-words">
+                      <span className="flex min-w-0 flex-col gap-0.5 wrap-break-word">
                         <span>{item.name}</span>
                         <span className="text-xs text-muted-foreground">{rarityLabel(item.rarity)}</span>
                       </span>
@@ -168,6 +169,10 @@ export function AnalyticsDashboard({ data }: { data: PublicAnalytics }) {
                 className="h-auto min-h-11 max-w-full whitespace-normal text-left"
                 aria-label={`นับไกด์ ${guide.name}`} aria-pressed={included} disabled={source === "stygian" && !includeStygian}
                 onClick={() => toggleGuide(guide.id)}>
+                {guide.character?.imageUrl ? <CatalogItemImage
+                  item={guide.character} kind="character" alt=""
+                  className="size-7 shrink-0 rounded-md" sizes="28px" loading="lazy"
+                /> : null}
                 {included ? <CheckIcon data-icon="inline-start" aria-hidden="true" /> : <MinusIcon data-icon="inline-start" aria-hidden="true" />}
                 {guide.name}
               </Button>;
diff --git a/lib/analytics/model.test.ts b/lib/analytics/model.test.ts
index 2a5114f..14f6a96 100644
--- a/lib/analytics/model.test.ts
+++ b/lib/analytics/model.test.ts
@@ -28,8 +28,8 @@ describe("analytics source selection", () => {
     const entries = [item("shared", 2, 1), item("stygian", 0, 1)];
     const data: PublicAnalytics = {
       guides: [
-        ...Array.from({ length: 5 }, (_, index) => ({ id: `g${index}`, source: "guide" as const, name: `Guide ${index}` })),
-        ...Array.from({ length: 3 }, (_, index) => ({ id: `s${index}`, source: "stygian" as const, name: `Stygian ${index}` })),
+        ...Array.from({ length: 5 }, (_, index) => ({ id: `g${index}`, source: "guide" as const, name: `Guide ${index}`, character: null })),
+        ...Array.from({ length: 3 }, (_, index) => ({ id: `s${index}`, source: "stygian" as const, name: `Stygian ${index}`, character: null })),
       ],
       teamGroups: [{ guideId: "g0", signature: "guide-team", count: 6 }, { guideId: "s0", signature: "stygian-team", count: 9 }],
       guideCount: 5, stygianScheduleCount: 3, guideTeamCount: 6, stygianTeamCount: 9,
@@ -61,7 +61,7 @@ describe("analytics source selection", () => {
     };
     const recommendation = { ...entry, contributions: [{ guideId: "g1", teamSignature: null, count: 3 }, { guideId: "g2", teamSignature: null, count: 4 }] };
     const data: PublicAnalytics = {
-      guides: [{ id: "g1", source: "guide", name: "One" }, { id: "g2", source: "guide", name: "Two" }, { id: "s1", source: "stygian", name: "Stygian" }],
+      guides: [{ id: "g1", source: "guide", name: "One", character: null }, { id: "g2", source: "guide", name: "Two", character: null }, { id: "s1", source: "stygian", name: "Stygian", character: null }],
       teamGroups: [{ guideId: "g1", signature: "shared", count: 2 }, { guideId: "g2", signature: "shared", count: 1 }, { guideId: "g2", signature: "different-build", count: 1 }, { guideId: "s1", signature: "shared", count: 1 }],
       guideCount: 2, stygianScheduleCount: 1, guideTeamCount: 4, stygianTeamCount: 1,
       team: { character: [], weapon: [entry], artifact: [] }, recommendation: { weapon: [recommendation], artifact: [] },
diff --git a/lib/analytics/model.ts b/lib/analytics/model.ts
index 90e1cb6..36db558 100644
--- a/lib/analytics/model.ts
+++ b/lib/analytics/model.ts
@@ -15,6 +15,7 @@ export interface AnalyticsGuide {
   id: string;
   source: "guide" | "stygian";
   name: string;
+  character: { key: string; imageUrl: string | null; rarity: number | null } | null;
 }
 
 export interface AnalyticsTeamGroup {
diff --git a/lib/analytics/queries.ts b/lib/analytics/queries.ts
index fc0aa2e..71249f8 100644
--- a/lib/analytics/queries.ts
+++ b/lib/analytics/queries.ts
@@ -21,6 +21,7 @@ type AggregateRow = {
   name: string | null;
   imageKey: string | null;
   rarity: number | null;
+  characterKey: string | null;
   guideId: string;
   teamSignature: string | null;
 };
@@ -30,7 +31,9 @@ type AggregateRow = {
 export async function getPublicAnalytics(): Promise<PublicAnalytics> {
   const rows = await getDb().execute<AggregateRow>(sql`
     with public_guides as (
-      select g.id, g.name from ${guides} g where g.is_public = true and g.trashed_at is null
+      select g.id, g.name, g.character_key as "characterKey", c.image_key, c.rarity from ${guides} g
+      left join ${catalogCharacters} c on c.key = g.character_key
+      where g.is_public = true and g.trashed_at is null
     ), public_sections as (
       select s.guide_id, s.kind from ${guideSections} s
       join public_guides g on g.id = s.guide_id where s.enabled = true
@@ -99,11 +102,11 @@ export async function getPublicAnalytics(): Promise<PublicAnalytics> {
       union all select 'artifact', key, name, image_key, rarity from ${catalogArtifacts}
     )
     select c.source, c.category, c.kind, c.key, c.count, i.name, i.image_key as "imageKey",
-      c.guide_id as "guideId", c.signature as "teamSignature", i.rarity
+      c.guide_id as "guideId", c.signature as "teamSignature", i.rarity, null::text as "characterKey"
     from counts c left join catalog i on i.kind = c.kind and i.key = c.key
-    union all select 'guide', 'summary', 'guide', '', 1, name, null, 'guide:' || id, null, null from public_guides
-    union all select 'stygian', 'summary', 'schedule', '', 1, challenge_name, null, 'stygian:' || schedule_id, null, null from ${stygianSchedules}
-    union all select source, 'summary', 'team', '', count, null, null, guide_id, signature, null from team_groups
+    union all select 'guide', 'summary', 'guide', '', 1, name, image_key, 'guide:' || id, null, rarity, "characterKey" from public_guides
+    union all select 'stygian', 'summary', 'schedule', '', 1, challenge_name, null, 'stygian:' || schedule_id, null, null, null::text from ${stygianSchedules}
+    union all select source, 'summary', 'team', '', count, null, null, guide_id, signature, null, null::text from team_groups
   `);
 
   const data: PublicAnalytics = {
@@ -116,7 +119,16 @@ export async function getPublicAnalytics(): Promise<PublicAnalytics> {
   for (const row of rows) {
     if (row.category === "summary") {
       if (row.kind === "guide" || row.kind === "schedule") {
-        data.guides.push({ id: row.guideId, source: row.source, name: row.name ?? row.guideId });
+        data.guides.push({
+          id: row.guideId,
+          source: row.source,
+          name: row.name ?? row.guideId,
+          character: row.characterKey ? {
+            key: row.characterKey,
+            imageUrl: row.imageKey ? publicMediaUrl(row.imageKey) : null,
+            rarity: row.rarity,
+          } : null,
+        });
         if (row.kind === "guide") data.guideCount += row.count;
         else data.stygianScheduleCount += row.count;
       }