Integrate RadarChart component into DashboardPage, enhancing evaluation display with radar data visualization. Update API to include dimensions in template retrieval, and adjust RadarChart for compact mode support.

src/components/RadarChart.tsx

@@ -20,6 +20,8 @@ interface DataPoint {
 
 interface RadarChartProps {
   data: DataPoint[];
+  /** Compact mode for cards (smaller, no legend) */
+  compact?: boolean;
 }
 
 const LIGHT = {
@@ -39,19 +41,19 @@ const DARK = {
   tooltipText: "#fafafa",
 };
 
-export function RadarChart({ data }: RadarChartProps) {
+export function RadarChart({ data, compact }: RadarChartProps) {
   const { theme } = useTheme();
   const c = theme === "dark" ? DARK : LIGHT;
 
   if (data.length === 0) return null;
 
   return (
-    <div className="h-72 w-full">
+    <div className={compact ? "h-28 w-full" : "h-72 w-full"}>
       <ResponsiveContainer width="100%" height="100%">
         <RechartsRadar data={data}>
           <PolarGrid stroke={c.grid} />
-          <PolarAngleAxis dataKey="dimension" tick={{ fontSize: 9, fill: c.axis }} />
-          <PolarRadiusAxis angle={30} domain={[0, 5]} tick={{ fill: c.tick }} />
+          <PolarAngleAxis dataKey="dimension" tick={{ fontSize: compact ? 7 : 9, fill: c.axis }} />
+          <PolarRadiusAxis angle={30} domain={[0, 5]} tick={false} />
           <Radar
             name="Score"
             dataKey="score"
@@ -68,7 +70,7 @@ export function RadarChart({ data }: RadarChartProps) {
               fontSize: "12px",
             }}
           />
-          <Legend wrapperStyle={{ fontSize: "11px" }} />
+          {!compact && <Legend wrapperStyle={{ fontSize: "11px" }} />}
         </RechartsRadar>
       </ResponsiveContainer>
     </div>