From a1be0dfe68ea7c8049f4e57bbdf6de6b80625e26 Mon Sep 17 00:00:00 2001
From: rouggy <legreg002@hotmail.com>
Date: Sat, 18 Jul 2026 04:48:26 +0200
Subject: [PATCH] feat: Added color per band in statistics as well as number of
 qso

---
 frontend/src/components/StatsPanel.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/StatsPanel.tsx b/frontend/src/components/StatsPanel.tsx
index 9048e7a..89e88dc 100644
--- a/frontend/src/components/StatsPanel.tsx
+++ b/frontend/src/components/StatsPanel.tsx
@@ -115,7 +115,7 @@ function HBars({ data, max, empty, share, labelWidth = 'w-20' }: { data: Bucket[
 // Sorting bands by COUNT would destroy the band-plan reading; the order is the
 // information.
 
-function VBars({ data, empty, height = 150 }: { data: Bucket[]; empty: string; height?: number }) {
+function VBars({ data, empty, height = 150, showValues, colorful }: { data: Bucket[]; empty: string; height?: number; showValues?: boolean; colorful?: boolean }) {
   const peak = Math.max(1, ...data.map((d) => d.count));
   if (data.length === 0) return <p className="text-[11px] text-muted-foreground italic py-4 text-center">{empty}</p>;
   // Thin the x labels once the bars get narrow. A label under EVERY one of 48
@@ -129,12 +129,13 @@ function VBars({ data, empty, height = 150 }: { data: Bucket[]; empty: string; h
       {data.map((d, i) => (
         <div key={d.key} className="flex-1 min-w-0 flex flex-col items-center justify-end h-full group"
           title={`${d.key} — ${nf(d.count)}`}>
-          <span className="text-[9px] text-muted-foreground mb-0.5 opacity-0 group-hover:opacity-100 transition-opacity tabular-nums whitespace-nowrap">
+          <span className={cn('text-[9px] font-semibold mb-0.5 tabular-nums whitespace-nowrap',
+            showValues ? 'text-foreground' : 'text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity')}>
             {nf(d.count)}
           </span>
           <div
             className="w-full rounded-t-[4px] transition-[height] duration-300"
-            style={{ height: `${Math.max(2, (d.count / peak) * 100)}%`, background: 'var(--chart-1)' }}
+            style={{ height: `${Math.max(2, (d.count / peak) * 100)}%`, background: colorful ? `var(--chart-${(i % 8) + 1})` : 'var(--chart-1)' }}
           />
           <span className="mt-1 h-3 text-[9px] text-muted-foreground w-full text-center whitespace-nowrap overflow-visible">
             {i % every === 0 ? d.key : ''}
@@ -705,7 +706,7 @@ export function StatsPanel() {
       ) : (
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-2.5">
           <Card title={t('stats.byBand')} sub={t('stats.byBandSub')}>
-            <VBars data={stats.by_band} empty={empty} />
+            <VBars data={stats.by_band} empty={empty} showValues colorful />
           </Card>
           <Card title={t('stats.byMode')}>
             <HBars data={stats.by_mode} max={8} empty={empty} />