47 lines
2.5 KiB
Markdown
47 lines
2.5 KiB
Markdown
# Encryption Landscape Card — Ring + Key Redesign
|
|
|
|
Date: 2026-08-19
|
|
|
|
## Problem
|
|
|
|
The "Encryption Landscape" recon card currently leads with a text headline
|
|
(`WPA2-PSK` / `54 of 96 APs`) that duplicates the ring graph below it and is of
|
|
little value. The ring itself draws an inline legend on the canvas in a single
|
|
row that overflows the 190px card width (6 labels) and gets clipped. The card
|
|
should be a proper ring graph with a readable key.
|
|
|
|
## Design
|
|
|
|
- Remove the `encValue` / `encSub` text line (`WPA2-PSK` / `54 of 96 APs`)
|
|
entirely. Title + ring + legend tell the whole story.
|
|
- Ring: existing doughnut grows to fill the card body (canvas ~120px tall),
|
|
plain hole. Segments come from the **actual** `reconEncBucket` family keys
|
|
(Open / WEP / WPA / WPA2-PSK / WPA2-Enterprise / WPA3-Personal / WPA3-PSK /
|
|
WPA3-Enterprise / Unknown) — the nominal six-bucket list was a wrong
|
|
assumption: `reconEncBucket` never returns `WPA2`/`WPA3`/`Enterprise`
|
|
verbatim, so the ring drew an empty ring on WPA2-dominated data.
|
|
Families are ordered by `RECON_ENC_ORDER`; colors cycle `RECON_ENC_COLORS`.
|
|
- Legend: move out of the canvas into real HTML below the ring. Flex-wrap so
|
|
entries never clip at 190px. Each entry: colored dot + label + count
|
|
(`● WPA2-PSK 44`). Zero-count families are never produced (built from
|
|
non-zero `encCounts` keys). The legend div carries both the class and the
|
|
id `recon-enc-legend` — drawCharts looks it up with `getElementById`, and a
|
|
class-only element made the population block silently no-op.
|
|
- Empty state unchanged: "No encryption data yet — run a scan."
|
|
- Data source, per-scan bucketing (`reconEncBucket`), re-sync, and the 5-card
|
|
layout are untouched. The other cards are untouched.
|
|
|
|
## Implementation notes
|
|
|
|
- `chart.js`: `MiniChart.doughnut` keeps the `legend` option for any other
|
|
callers (the recon landscape doughnut calls with `legend:false`; the enc
|
|
card switches to `legend:false` since HTML legend replaces it).
|
|
- `views.js`: drop `encValue`/`encSub`; build an HTML legend container
|
|
(`#recon-enc-legend`) populated in `drawCharts` from the same `encCounts`;
|
|
ring drawn with `{ legend: false, height: ~120 }` from a shared `encSegs`
|
|
array (real family keys, `RECON_ENC_ORDER`-sorted, cycled colors).
|
|
- `app.css`: `.recon-enc-legend` flex-wrap styles + dot/entry styles.
|
|
- Ring hole stays plain (no center text).
|
|
- On-device verification MUST assert the legend has non-empty entries
|
|
(class/id mismatch and the bucket-name mismatch both fail silently).
|