feat: stats — per-band mode split (CW / phone / data) stacked bar chart
Adds Stats.ByBandCategory (per band: CW/phone/data counts, band-plan order) via a modeCategory() bucketing in stats.go, and a StackedBandBars chart in the Stats panel showing the split per band with a legend.
This commit is contained in:
@@ -23,13 +23,14 @@ import { cn } from '@/lib/utils';
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
type Bucket = { key: string; count: number };
|
||||
type BandCat = { band: string; cw: number; phone: number; data: number; total: number };
|
||||
type Gap = { start: string; end: string; minutes: number };
|
||||
type ContestRun = { id: string; year: number; count: number; start: string; end: string };
|
||||
type Stats = {
|
||||
total: number; unique_calls: number; entities: number; continents: number;
|
||||
first_qso: string; last_qso: string;
|
||||
confirmed_lotw: number; confirmed_eqsl: number; confirmed_qsl: number; confirmed_any: number;
|
||||
by_mode: Bucket[]; by_band: Bucket[]; by_operator: Bucket[]; by_station: Bucket[];
|
||||
by_mode: Bucket[]; by_band: Bucket[]; by_band_category: BandCat[]; by_operator: Bucket[]; by_station: Bucket[];
|
||||
by_continent: Bucket[]; top_entities: Bucket[]; by_year: Bucket[]; by_month: Bucket[];
|
||||
// Period / contest metrics.
|
||||
window_start: string; window_end: string; window_hours: number;
|
||||
@@ -157,6 +158,47 @@ function VBars({ data, empty, height = 150, showValues, colorful }: { data: Buck
|
||||
);
|
||||
}
|
||||
|
||||
// Per-band mode split (CW / phone / data) as stacked vertical bars. The three
|
||||
// categories are the subject → categorical colour in a fixed order, matching the
|
||||
// mode colours used elsewhere (CW gold, phone green, data blue).
|
||||
const BAND_SPLIT = [
|
||||
{ key: 'cw', label: 'CW', color: 'var(--chart-3)' },
|
||||
{ key: 'phone', label: 'Phone', color: 'var(--chart-2)' },
|
||||
{ key: 'data', label: 'Data', color: 'var(--chart-1)' },
|
||||
] as const;
|
||||
function StackedBandBars({ data, empty, height = 150 }: { data: BandCat[]; empty: string; height?: number }) {
|
||||
if (!data || data.length === 0) return <p className="text-[11px] text-muted-foreground italic py-4 text-center">{empty}</p>;
|
||||
const peak = Math.max(1, ...data.map((d) => d.total));
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-end gap-[3px] min-w-0" style={{ height }}>
|
||||
{data.map((d) => (
|
||||
<div key={d.band} className="flex-1 min-w-0 flex flex-col items-center justify-end h-full group"
|
||||
title={`${d.band} — CW ${nf(d.cw)} · Phone ${nf(d.phone)} · Data ${nf(d.data)} (${nf(d.total)})`}>
|
||||
<span className="text-[9px] font-semibold mb-0.5 tabular-nums text-foreground">{nf(d.total)}</span>
|
||||
<div className="w-full flex flex-col justify-end rounded-t-[4px] overflow-hidden"
|
||||
style={{ height: `${Math.max(2, (d.total / peak) * 100)}%` }}>
|
||||
{BAND_SPLIT.map((s) => {
|
||||
const v = d[s.key];
|
||||
if (!v) return null;
|
||||
return <div key={s.key} style={{ flexGrow: v, flexBasis: 0, minHeight: 1, background: s.color }} />;
|
||||
})}
|
||||
</div>
|
||||
<span className="mt-1 h-3 text-[9px] text-muted-foreground w-full text-center whitespace-nowrap">{d.band}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-2 flex items-center justify-center gap-3 text-[10px] text-muted-foreground">
|
||||
{BAND_SPLIT.map((s) => (
|
||||
<span key={s.key} className="inline-flex items-center gap-1">
|
||||
<span className="size-2.5 rounded-[3px]" style={{ background: s.color }} /> {s.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Contest rate, stacked by operator ────────────────────────────────────────
|
||||
// The categories (the operators) ARE the subject, so this is categorical colour,
|
||||
// in the FIXED order the backend sends (busiest first). An operator therefore
|
||||
@@ -524,7 +566,7 @@ export function StatsPanel() {
|
||||
const arr = (v: any) => (Array.isArray(v) ? v : []);
|
||||
setStats({
|
||||
...raw,
|
||||
by_mode: arr(raw.by_mode), by_band: arr(raw.by_band), by_operator: arr(raw.by_operator),
|
||||
by_mode: arr(raw.by_mode), by_band: arr(raw.by_band), by_band_category: arr(raw.by_band_category), by_operator: arr(raw.by_operator),
|
||||
by_station: arr(raw.by_station), by_continent: arr(raw.by_continent),
|
||||
top_entities: arr(raw.top_entities), by_year: arr(raw.by_year), by_month: arr(raw.by_month),
|
||||
rate: arr(raw.rate), gaps: arr(raw.gaps),
|
||||
@@ -740,6 +782,9 @@ export function StatsPanel() {
|
||||
<Card title={t('stats.byMode')} accent="var(--chart-2)">
|
||||
<HBars data={stats.by_mode} max={8} empty={empty} colorful />
|
||||
</Card>
|
||||
<Card title={t('stats.bandSplit')} sub={t('stats.bandSplitSub')} className="lg:col-span-2" accent="var(--chart-3)">
|
||||
<StackedBandBars data={stats.by_band_category} empty={empty} />
|
||||
</Card>
|
||||
|
||||
<Card title={t('stats.overTime')} sub={t('stats.overTimeSub')} className="lg:col-span-2" accent="var(--chart-1)">
|
||||
<AreaTrend data={stats.by_month} empty={empty} />
|
||||
|
||||
@@ -60,7 +60,7 @@ const en: Dict = {
|
||||
'stats.noData': 'No data', 'stats.charts': 'Charts', 'stats.table': 'Table', 'stats.refresh': 'Refresh',
|
||||
'stats.qsos': 'QSOs', 'stats.uniqueCalls': 'Unique callsigns', 'stats.entities': 'Entities',
|
||||
'stats.continents': 'Continents', 'stats.confirmed': 'Confirmed',
|
||||
'stats.byBand': 'By band', 'stats.byBandSub': 'In band-plan order, not by size',
|
||||
'stats.byBand': 'By band', 'stats.byBandSub': 'In band-plan order, not by size', 'stats.bandSplit': 'Mode split by band', 'stats.bandSplitSub': 'CW / phone / data per band',
|
||||
'stats.byMode': 'By mode', 'stats.byOperator': 'By operator',
|
||||
'stats.byOperatorSub': '“—” = logged by the station owner (no OPERATOR set)',
|
||||
'stats.byStation': 'By station callsign', 'stats.byContinent': 'By continent',
|
||||
@@ -374,7 +374,7 @@ const fr: Dict = {
|
||||
'stats.noData': 'Aucune donnée', 'stats.charts': 'Graphiques', 'stats.table': 'Tableau', 'stats.refresh': 'Rafraîchir',
|
||||
'stats.qsos': 'QSO', 'stats.uniqueCalls': 'Indicatifs uniques', 'stats.entities': 'Entités',
|
||||
'stats.continents': 'Continents', 'stats.confirmed': 'Confirmés',
|
||||
'stats.byBand': 'Par bande', 'stats.byBandSub': "Dans l'ordre du plan de bande, pas par taille",
|
||||
'stats.byBand': 'Par bande', 'stats.byBandSub': "Dans l'ordre du plan de bande, pas par taille", 'stats.bandSplit': 'Répartition des modes par bande', 'stats.bandSplitSub': 'CW / phone / data par bande',
|
||||
'stats.byMode': 'Par mode', 'stats.byOperator': 'Par opérateur',
|
||||
'stats.byOperatorSub': '« — » = loggé par le titulaire (pas d’OPERATOR renseigné)',
|
||||
'stats.byStation': 'Par indicatif de station', 'stats.byContinent': 'Par continent',
|
||||
|
||||
@@ -3411,6 +3411,26 @@ export namespace qslcard {
|
||||
|
||||
export namespace qso {
|
||||
|
||||
export class BandCategory {
|
||||
band: string;
|
||||
cw: number;
|
||||
phone: number;
|
||||
data: number;
|
||||
total: number;
|
||||
|
||||
static createFrom(source: any = {}) {
|
||||
return new BandCategory(source);
|
||||
}
|
||||
|
||||
constructor(source: any = {}) {
|
||||
if ('string' === typeof source) source = JSON.parse(source);
|
||||
this.band = source["band"];
|
||||
this.cw = source["cw"];
|
||||
this.phone = source["phone"];
|
||||
this.data = source["data"];
|
||||
this.total = source["total"];
|
||||
}
|
||||
}
|
||||
export class BandMode {
|
||||
band: string;
|
||||
mode: string;
|
||||
@@ -3900,6 +3920,7 @@ export namespace qso {
|
||||
confirmed_any: number;
|
||||
by_mode: Bucket[];
|
||||
by_band: Bucket[];
|
||||
by_band_category: BandCategory[];
|
||||
by_operator: Bucket[];
|
||||
by_station: Bucket[];
|
||||
by_continent: Bucket[];
|
||||
@@ -3939,6 +3960,7 @@ export namespace qso {
|
||||
this.confirmed_any = source["confirmed_any"];
|
||||
this.by_mode = this.convertValues(source["by_mode"], Bucket);
|
||||
this.by_band = this.convertValues(source["by_band"], Bucket);
|
||||
this.by_band_category = this.convertValues(source["by_band_category"], BandCategory);
|
||||
this.by_operator = this.convertValues(source["by_operator"], Bucket);
|
||||
this.by_station = this.convertValues(source["by_station"], Bucket);
|
||||
this.by_continent = this.convertValues(source["by_continent"], Bucket);
|
||||
|
||||
Reference in New Issue
Block a user