feat(weapon-chart) : show refinement badges below weapon images

components/public/weapon-chart.tsx

@@ -2,6 +2,7 @@
 
 import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
 
+import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   ChartContainer,
@@ -29,6 +30,7 @@ export function WeaponChart({ rows }: { rows: PublicGuide["weaponGroups"][number
   const data = rows.map((row, index) => ({
     name: `${index + 1}. ${row.weapon.name} R${row.refinement}`,
     imageUrl: row.weapon.imageUrl,
+    refinement: row.refinement,
     overall: percentage(row.overallPercent),
     personal: percentage(row.personalPercent),
   }));
@@ -59,7 +61,7 @@ export function WeaponChart({ rows }: { rows: PublicGuide["weaponGroups"][number
               <XAxis
                 dataKey="name"
                 type="category"
-                height={60}
+                height={80}
                 tickLine={false}
                 axisLine={false}
                 interval={0}
@@ -80,6 +82,11 @@ export function WeaponChart({ rows }: { rows: PublicGuide["weaponGroups"][number
                         role="img"
                         aria-label={weapon.name}
                       />
+                      <foreignObject x={-24} y={size + 8} width={48} height={24}>
+                        <div className="flex justify-center">
+                          <Badge variant="secondary">R{weapon.refinement}</Badge>
+                        </div>
+                      </foreignObject>
                     </g>
                   );
                 }}