rouggy/OpsLog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 30 Wiki Activity

feat: Added color per band in statistics as well as number of qso

Browse Source
This commit is contained in:
rouggy
2026-07-18 04:48:26 +02:00
parent ac4039393d
commit a1be0dfe68
1 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/StatsPanel.tsx
+5 -4
View File
@@ -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 // Sorting bands by COUNT would destroy the band-plan reading; the order is the
// information. // 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)); 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>; 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 // 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) => ( {data.map((d, i) => (
<div key={d.key} className="flex-1 min-w-0 flex flex-col items-center justify-end h-full group" <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)}`}> 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)} {nf(d.count)}
</span> </span>
<div <div
className="w-full rounded-t-[4px] transition-[height] duration-300" 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"> <span className="mt-1 h-3 text-[9px] text-muted-foreground w-full text-center whitespace-nowrap overflow-visible">
{i % every === 0 ? d.key : ''} {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"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-2.5">
<Card title={t('stats.byBand')} sub={t('stats.byBandSub')}> <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>
<Card title={t('stats.byMode')}> <Card title={t('stats.byMode')}>
<HBars data={stats.by_mode} max={8} empty={empty} /> <HBars data={stats.by_mode} max={8} empty={empty} />