Add statistics panel with demographics, lifespan, and top-N lists

- New stats.js module computes figures about the whole tree: sex split,
  living/deceased count, average/median/max lifespan, family sizes,
  birth-year span, generation depth, data-coverage percentages, and
  top-5 lists for surnames, given names, places, and occupations
- Panel renders as a collapsible <details> in the sidebar, below the
  graph-reload button
- Sex distribution shown as a horizontal bar chart (male/female/unknown)

Author: lucafluri

README.md

@@ -46,8 +46,8 @@ Deployed automatically to GitHub Pages from `master`
 - **3D** — the same graph in space, stratified by birth year or by generation,
   with an optional time axis.
 
-**Focus.** A whole GEDCOM is an unreadable cloud, so the 2D view centres on one
-person and draws their relatives out to a chosen distance — direct line, siblings,
+**Focus.** The 2D view shows the whole file by default. Focusing narrows it to one
+person and their relatives out to a chosen distance — direct line, siblings,
 and cousins to a configurable degree. The panel shows how many people are on
 screen and how many are hidden. `+N` chips mark where a branch was cut; clicking
 one opens the next generation.
@@ -108,6 +108,7 @@ loaded as native ES modules (`js/package.json` only marks the directory as
 | `js/render-3d.js` | the 3D scene, camera, labels and time axis |
 | `js/panels.js` | detail panel and all the editing forms |
 | `js/import.js` | the import wizard: text parsing, OCR, AI extraction, merge review |
+| `js/stats.js` | the statistics panel — figures about the tree as a whole |
 | `js/relations.js` | highlighting and the "how are these two related" tool |
 | `js/colors.js` | surname palette and node/link colouring |
 | `js/gedcom-io.js` | file loading, saving, autosave, the working-file handle |
@@ -126,7 +127,7 @@ npm install    # jsdom, the only dependency, and only for tests
 npm test
 ```
 
-Seven suites, no framework — plain `node` scripts with `assert`:
+Eight suites, no framework — plain `node` scripts with `assert`:
 
 | | |
 |---|---|
@@ -135,6 +136,7 @@ Seven suites, no framework — plain `node` scripts with `assert`:
 | `import.test.js` | linking imported people to existing records |
 | `deceased.test.js` | auto-marking long-dead people |
 | `hover.test.js` | quick-add buttons and node box labels |
+| `stats.test.js` | the statistics figures and how they are rendered |
 | `mobile.test.js` | the 3D view's behaviour on a narrow viewport |
 | `workfile.test.js` | reopening and saving back over the same file |
 

i18n.js

@@ -33,6 +33,42 @@ const I18N = {
       status: '${persons} Person${personsPlural}, ${families} Familien',
       statusLoaded: '${persons} Personen, ${families} Familien geladen',
     },
+    stats: {
+      title: 'Statistik',
+      empty: 'Keine Daten geladen',
+      people: 'Personen',
+      male: 'Männlich',
+      female: 'Weiblich',
+      unknownSex: 'Unbekannt',
+      sexM: 'Männlich',
+      sexF: 'Weiblich',
+      sexU: 'Unbekannt',
+      living: 'Lebend / verstorben',
+      livingHint: 'verstorben nach Eintrag oder Alter',
+      avgLifespan: 'Ø Lebensalter',
+      medianLifespan: 'Median Lebensalter',
+      basedOn: 'aus ${n} mit beiden Daten',
+      years: 'Jahre',
+      oldest: 'Ältestes Alter',
+      families: 'Familien',
+      avgChildren: 'Ø Kinder pro Familie',
+      avgChildrenHint: 'nur Familien mit Kindern',
+      childless: 'Familien ohne Kinder',
+      biggestFamily: 'Grösste Familie',
+      childrenWord: 'Kinder',
+      divorced: 'Geschieden',
+      span: 'Zeitraum (Geburten)',
+      spanHint: '${n} Jahre',
+      generations: 'Generationen',
+      completeness: 'Datenlage',
+      hasBirth: 'mit Geburtsjahr',
+      hasDeath: 'mit Sterbejahr',
+      hasPlace: 'mit Ort',
+      topSurnames: 'Häufigste Nachnamen',
+      topGiven: 'Häufigste Vornamen',
+      topPlaces: 'Häufigste Orte',
+      topOccupations: 'Häufigste Berufe',
+    },
     export: {
       gedcom: 'GEDCOM (.ged)',
       json: 'JSON (.json)',
@@ -526,6 +562,42 @@ const I18N = {
       status: '${persons} person${personsPlural}, ${families} families',
       statusLoaded: '${persons} persons, ${families} families loaded',
     },
+    stats: {
+      title: 'Statistics',
+      empty: 'No data loaded',
+      people: 'People',
+      male: 'Male',
+      female: 'Female',
+      unknownSex: 'Unknown',
+      sexM: 'Male',
+      sexF: 'Female',
+      sexU: 'Unknown',
+      living: 'Living / deceased',
+      livingHint: 'deceased by record or by age',
+      avgLifespan: 'Avg. lifespan',
+      medianLifespan: 'Median lifespan',
+      basedOn: 'from ${n} with both dates',
+      years: 'years',
+      oldest: 'Longest life',
+      families: 'Families',
+      avgChildren: 'Avg. children per family',
+      avgChildrenHint: 'families with children only',
+      childless: 'Families without children',
+      biggestFamily: 'Largest family',
+      childrenWord: 'children',
+      divorced: 'Divorced',
+      span: 'Span (births)',
+      spanHint: '${n} years',
+      generations: 'Generations',
+      completeness: 'Data coverage',
+      hasBirth: 'with birth year',
+      hasDeath: 'with death year',
+      hasPlace: 'with a place',
+      topSurnames: 'Most common surnames',
+      topGiven: 'Most common given names',
+      topPlaces: 'Most common places',
+      topOccupations: 'Most common occupations',
+    },
     export: {
       gedcom: 'GEDCOM (.ged)',
       json: 'JSON (.json)',

index.html

@@ -147,6 +147,11 @@ <h1>&#127795; <span data-i18n="app.name">Stammbaum</span></h1>
       <button class="sidebar-btn" onclick="autoSettle()">&#x21ba; <span data-i18n="sidebar.reloadGraph">Graph neu laden</span></button>
     </div>
 
+    <details id="stats-panel" ontoggle="toggleStatsPanel(event)">
+      <summary data-i18n="stats.title">Statistik</summary>
+      <div id="stats-body"></div>
+    </details>
+
     <details id="link-colors-panel">
       <summary data-i18n="linkColors.title">Verbindungsfarben</summary>
       <div class="link-color-row">

js/main.js

@@ -6,6 +6,7 @@ import * as PanelsMod from './panels.js';
 import * as RelationsMod from './relations.js';
 import * as Render2dMod from './render-2d.js';
 import * as Render3dMod from './render-3d.js';
+import * as StatsMod from './stats.js';
 import * as TreeLayoutMod from './tree-layout.js';
 import { resetLinkColors, toggleAllSurnames } from './colors.js';
 import { _fullRebuildGraph, _tryRestoreAutosave, updateFileButtons } from './gedcom-io.js';
@@ -360,7 +361,7 @@ function _onLanguageChanged() {
 // runs this after the *whole* graph's synchronous evaluation has settled,
 // regardless of which module happened to be the entry point.
 queueMicrotask(() => Object.assign(window, ColorsMod, GedcomIoMod, GraphDataMod, ImportMod, PanelsMod,
-  RelationsMod, Render2dMod, Render3dMod, TreeLayoutMod, {
+  RelationsMod, Render2dMod, Render3dMod, StatsMod, TreeLayoutMod, {
     state,
     toggleSidebar,
     _initPanelSwipe,

js/render-3d.js

@@ -1,6 +1,6 @@
 import { state } from './state.js';
 import { _compute3DLinkColor, _nameTextColor, compute3DNodeColor } from './colors.js';
-import { _defaultFocusRoot, computeActiveData, updateFocusUI } from './graph-data.js';
+import { computeActiveData, updateFocusUI } from './graph-data.js';
 import { _isMobile, closeDetailPanel, minimizeDetailPanel, row, showFamDetail, showIndiDetail } from './panels.js';
 import { _famNodeVal, _tryPickRelationPerson, applyHighlight, updateHLButtons } from './relations.js';
 import { buildAndRunSimulation, initSVG, linkColor, linkWidth, onHover, onOut, onSimEnd, renderGraph, zoomToFit } from './render-2d.js';
@@ -38,12 +38,13 @@ export function setView(view) {
   } else {
     if (state.graph3d) state.graph3d.pauseAnimation();
 
-    // A 2D view of a big tree with no focus is an unreadable dust cloud, so
-    // never enter one: fall back to the selected person, else the best hub.
-    // Trees that fit inside the budget need no focus at all.
-    if (!state.focusRootId && state.individuals.size > state.focusLimit) {
-      state.focusRootId = state.selectedIndiId || _defaultFocusRoot();
-    }
+    // No focus is picked on the way in. Switching to 2D used to quietly appoint
+    // one — the selected person, or the best-connected hub — on the grounds that
+    // an unfocused force layout is a dust cloud. But the chart layout is the
+    // default now, and that draws a whole file as a readable, if wide, tree; and
+    // a filter the reader never asked for is worse than a big picture, because
+    // nothing on screen says people are missing. Focus stays something you turn
+    // on deliberately.
 
     if (changed) {
       computeActiveData();