major update

2026-02-27 16:08:09 +01:00
parent 61ab24490d
commit 181cfe6588
71 changed files with 7647 additions and 281 deletions
@@ -0,0 +1,66 @@
+import type { ScoreBreakdown } from '../../lib/types';
+
+interface DimensionBreakdownPanelProps {
+  breakdown: ScoreBreakdown;
+}
+
+function formatWeight(weight: number): string {
+  return `${Math.round(weight * 100)}%`;
+}
+
+function formatRawValue(value: number | string | null): string {
+  if (value === null) return '—';
+  if (typeof value === 'string') return value;
+  return Number.isInteger(value) ? value.toString() : value.toFixed(2);
+}
+
+export function DimensionBreakdownPanel({ breakdown }: DimensionBreakdownPanelProps) {
+  return (
+    <div className="space-y-3">
+      {/* Sub-score rows */}
+      {breakdown.sub_scores.length > 0 && (
+        <div className="space-y-1.5">
+          {breakdown.sub_scores.map((sub) => (
+            <div
+              key={sub.name}
+              data-testid="sub-score-row"
+              className="flex items-center justify-between gap-2 text-sm"
+            >
+              <span className="text-gray-400 min-w-0 truncate">{sub.name}</span>
+              <div className="flex items-center gap-2 shrink-0">
+                <span className="text-gray-200 tabular-nums">{sub.score.toFixed(1)}</span>
+                <span className="rounded bg-white/10 px-1.5 py-0.5 text-[10px] font-medium text-gray-400">
+                  {formatWeight(sub.weight)}
+                </span>
+                <span className="text-gray-500 text-xs tabular-nums w-16 text-right">
+                  {formatRawValue(sub.raw_value)}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Formula description */}
+      {breakdown.formula && (
+        <p className="text-xs text-gray-500 leading-relaxed">{breakdown.formula}</p>
+      )}
+
+      {/* Unavailable sub-scores */}
+      {breakdown.unavailable.length > 0 && (
+        <div className="space-y-1">
+          {breakdown.unavailable.map((item) => (
+            <div
+              key={item.name}
+              data-testid="unavailable-row"
+              className="flex items-center justify-between text-sm"
+            >
+              <span className="text-gray-600">{item.name}</span>
+              <span className="text-gray-600 text-xs italic">{item.reason}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}