feat(stats): add top occupations distribution to tree stats page

Author: atomantic

client/src/components/stats/TreeStatsPage.tsx

@@ -13,6 +13,7 @@ import {
   Star,
   Type,
   Clock,
+  Briefcase,
 } from 'lucide-react';
 import type { TreeStats, DatabaseInfo } from '@fsf/shared';
 import { api } from '../../services/api';
@@ -345,6 +346,35 @@ export function TreeStatsPage() {
         );
       })()}
 
+      {/* Top Occupations */}
+      {stats.occupations?.length > 0 && (() => {
+        const maxOccCount = Math.max(...stats.occupations.map(o => o.count), 1);
+        return (
+          <div className="bg-app-card border border-app-border rounded-lg p-4 mb-4">
+            <h2 className="text-sm font-semibold text-app-text mb-3 flex items-center gap-2">
+              <Briefcase size={14} />
+              Top Occupations
+            </h2>
+            <div className="space-y-1.5 max-h-64 overflow-y-auto">
+              {stats.occupations.map(({ occupation, count }) => (
+                <div key={occupation} className="flex items-center gap-2">
+                  <span className="text-xs text-app-text truncate w-32 text-right shrink-0" title={occupation}>
+                    {occupation}
+                  </span>
+                  <div className="flex-1 h-4 bg-app-border rounded overflow-hidden">
+                    <div
+                      className="h-full bg-amber-500/50 rounded transition-all"
+                      style={{ width: `${Math.max((count / maxOccCount) * 100, 1)}%` }}
+                    />
+                  </div>
+                  <span className="text-xs text-app-text-muted w-10 text-right shrink-0">{count}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        );
+      })()}
+
       {/* Top Birth Countries */}
       {stats.birthCountries?.length > 0 && (() => {
         const maxCountryCount = Math.max(...stats.birthCountries.map(c => c.count), 1);

server/src/services/database.service.ts

@@ -1096,6 +1096,7 @@ export const databaseService = {
     };
     birthPlaces: { place: string; count: number }[];
     birthCountries: { country: string; count: number }[];
+    occupations: { occupation: string; count: number }[];
   }> {
     if (!useSqlite) {
       throw new Error('SQLite is required for tree stats');
@@ -1302,6 +1303,18 @@ export const databaseService = {
       .sort((a, b) => b.count - a.count)
       .slice(0, 20);
 
+    // Top occupations from claims table
+    const occupationRows = sqliteService.queryAll<{ occupation: string; count: number }>(
+      `SELECT c.value_text as occupation, COUNT(DISTINCT c.person_id) as count
+       FROM claim c
+       JOIN database_membership dm ON c.person_id = dm.person_id AND dm.db_id = @dbId
+       WHERE c.predicate = 'occupation' AND c.value_text IS NOT NULL AND c.value_text != ''
+       GROUP BY c.value_text
+       ORDER BY count DESC
+       LIMIT 30`,
+      { dbId }
+    );
+
     const lifespanByCentury = sqliteService.queryAll<{ century: number; avgAge: number; count: number }>(
       `SELECT CAST((b.date_year / 100) AS INTEGER) as century,
               ROUND(AVG(d.date_year - b.date_year), 1) as avgAge,
@@ -1339,6 +1352,7 @@ export const databaseService = {
       },
       birthPlaces: birthPlaceRows.map(r => ({ place: r.place, count: r.count })),
       birthCountries: birthCountryRows.map(r => ({ country: r.country, count: r.count })),
+      occupations: occupationRows.map(r => ({ occupation: r.occupation, count: r.count })),
     };
   },
 };

shared/src/index.ts

@@ -520,6 +520,7 @@ export interface TreeStats {
   };
   birthPlaces: { place: string; count: number }[];
   birthCountries: { country: string; count: number }[];
+  occupations: { occupation: string; count: number }[];
 }
 
 // Person with ID included