svelte

frontend/src/components/StatsTab.svelte

@@ -0,0 +1,75 @@
+<script>
+  export let topSpotters;
+  export let spots;
+  
+  const BANDS = ['160M', '80M', '60M', '40M', '30M', '20M', '17M', '15M', '12M', '10M', '6M'];
+  const BAND_COLORS = {
+    '160M': '#ef4444',
+    '80M': '#f97316',
+    '60M': '#f59e0b',
+    '40M': '#eab308',
+    '30M': '#84cc16',
+    '20M': '#22c55e',
+    '17M': '#10b981',
+    '15M': '#14b8a6',
+    '12M': '#06b6d4',
+    '10M': '#0ea5e9',
+    '6M': '#3b82f6'
+  };
+  
+  $: bandStats = getBandStats(spots);
+  $: maxSpots = Math.max(...Object.values(bandStats), 1);
+  
+  function getBandStats(allSpots) {
+    const stats = {};
+    BANDS.forEach(band => {
+      stats[band] = allSpots.filter(s => s.Band === band).length;
+    });
+    return stats;
+  }
+</script>
+
+<div class="h-full overflow-y-auto">
+  <div class="p-3 border-b border-slate-700/50">
+    <h2 class="text-lg font-bold">Top 3 Spotters</h2>
+  </div>
+  
+  <div class="p-3">
+    {#each topSpotters.slice(0, 3) as spotter, index}
+      <div class="flex items-center justify-between mb-2 p-2 bg-slate-900/30 rounded hover:bg-slate-700/30 transition-colors">
+        <div class="flex items-center gap-2">
+          <div class="w-6 h-6 bg-gradient-to-br from-blue-500 to-purple-500 rounded-full flex items-center justify-center text-xs font-bold">
+            {index + 1}
+          </div>
+          <span class="text-sm font-semibold">{spotter.Spotter}</span>
+        </div>
+        <span class="text-slate-400 font-mono text-xs">{spotter.NumberofSpots}</span>
+      </div>
+    {/each}
+  </div>
+  
+  <div class="p-3 border-t border-slate-700/50">
+    <h2 class="text-lg font-bold mb-3">Band Propagation</h2>
+  </div>
+  
+  <div class="px-3 pb-3 space-y-2">
+    {#each BANDS as band}
+      {@const count = bandStats[band]}
+      {@const percentage = maxSpots > 0 ? (count / maxSpots) * 100 : 0}
+      {@const color = BAND_COLORS[band]}
+      
+      <div class="cursor-pointer hover:opacity-80 transition-opacity">
+        <div class="flex items-center justify-between mb-1">
+          <span class="text-xs font-semibold" style="color: {color}">{band}</span>
+          <span class="text-xs text-slate-400">{count} spots</span>
+        </div>
+        <div class="w-full bg-slate-700/30 rounded-full h-2 overflow-hidden">
+          <div 
+            class="h-full rounded-full transition-all duration-500" 
+            style="width: {percentage}%; background-color: {color}">
+          </div>
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>