docs: spec — Encryption Landscape card ring + key redesign

2026-08-19 06:51:06 -05:00
parent 2287d2803d
commit 4cc57745b6
1 changed files with 36 additions and 0 deletions
@@ -0,0 +1,36 @@
+# 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, all six buckets (Open / WEP / WPA / WPA2 / WPA3 / Enterprise) in
+  the current `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  54`). Buckets with zero APs are hidden.
+- 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 }`.
+- `app.css`: `.recon-enc-legend` flex-wrap styles + dot/entry styles.
+- Ring hole stays plain (no center text).