Merge pull request #184 from l0drex/beta

v1.4

.github/dependabot.yml

@@ -8,6 +8,7 @@ updates:
   - package-ecosystem: "npm" # See documentation for possible values
     directory: "/" # Location of package manifests
     schedule:
-      interval: "weekly"
+      interval: "monthly"
     labels:
       - "update"
+    target-branch: "beta"

package.json

@@ -29,6 +29,11 @@
     "@types/node": "^20.2.5",
     "@types/react": "^18.2.7",
     "@types/react-dom": "^18.2.4",
+    "@visx/axis": "^3.1.0",
+    "@visx/geo": "^3.0.0",
+    "@visx/shape": "^3.0.0",
+    "@visx/stats": "^3.0.0",
+    "@visx/visx": "^3.1.2",
     "d3": "7.6.1",
     "gedcomx-js": "^2.8.0",
     "react": "^18.1.0",

src/App.css

@@ -1,5 +1,11 @@
 @import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
 
+:root {
+  background: var(--background-lower);
+  color: var(--foreground);
+  font-family: "Nunito", sans-serif;
+}
+
 #root {
   height: 100%;
   width: 100%;
@@ -10,9 +16,6 @@
   grid-template-columns: 1fr;
   overflow: auto;
 
-  background: var(--background-lower);
-  font-family: "Nunito", sans-serif;
-
   grid-template-areas:
     "header"
     "main"
@@ -29,16 +32,83 @@ main {
 }
 
 main > * {
-  background: var(--background);
   margin: 1rem auto 0;
   box-sizing: border-box;
-  border-radius: .5rem;
 }
 
 main > :first-child {
   margin-top: 0;
 }
 
+article {
+  border-radius: 1rem;
+  background: var(--background);
+}
+
+aside {
+  overflow-y: scroll;
+  overflow-x: hidden;
+  display: flex;
+  gap: 1rem;
+  flex-flow: row;
+  max-width: 100vw;
+  flex-wrap: wrap;
+  grid-area: sidebar;
+  max-height: 30vh;
+  padding: 0 1rem;
+}
+
+aside > * {
+  flex: 1 1 0;
+}
+
+aside .title {
+  flex-basis: 100%;
+}
+
+aside .title :first-child {
+  margin-top: 0;
+}
+
+aside .title :last-child {
+  margin-bottom: 0;
+}
+
+aside h1, aside article h1 {
+  font-size: 1.5rem;
+}
+
+aside .title > h1, aside .title > h2 {
+  text-align: center;
+}
+
+aside .title h2 {
+  font-weight: normal;
+}
+
+@media (orientation: landscape) {
+  aside {
+    flex-flow: column;
+    padding-right: 0;
+    max-height: unset;
+  }
+
+  aside > * {
+    flex-grow: 0;
+  }
+
+  aside .title {
+    flex-basis: 0;
+  }
+}
+
+aside > article {
+  padding: 1rem;
+  box-sizing: border-box;
+  box-shadow: inset 0 .25rem .25rem rgba(0, 0, 0, .33);
+  flex-basis: 200px;
+}
+
 footer {
   color: var(--foreground-secondary);
   text-align: left;
@@ -105,3 +175,19 @@ li:not(:last-child) {
     margin-right: 1rem;
   }
 }
+
+@media print {
+  #root.sidebar-visible {
+    gap: 0;
+  }
+
+  aside {
+    border: solid 1pt;
+  }
+
+  header, footer, #view-all {
+    height: 0;
+    width: 0;
+    visibility: hidden;
+  }
+}

src/App.tsx

@@ -4,13 +4,15 @@ import {strings} from "./main";
 import View from "./components/View";
 import {BrowserRouter, Route, Routes} from "react-router-dom";
 import {Home, Imprint} from "./components/Home";
+import Statistics from "./components/Statistics";
 
 function App() {
   return <BrowserRouter basename={"family-tree"}>
     <Routes>
       <Route path="/" element={<Home/>}/>
       <Route path="/view" element={<View/>}/>
       <Route path="/imprint" element={<Imprint/>}/>
+      <Route path="/stats" element={<Statistics/>}/>
     </Routes>
     <footer>
         <span>

src/backend/Fact.test.ts

@@ -5,8 +5,8 @@ import {PersonFactTypes} from "./gedcomx-enums";
 test("toString works", () => {
   config.browserLang = "en";
   let fact = new GedcomX.Fact().setType(PersonFactTypes.Birth);
-  expect(fact.toString()).toBe("born")
+  expect(fact.toString()).toBe("Birth")
 
   fact.setDate(new GedcomX.Date().setFormal("+2022-01-25T06:55"))
-  expect(fact.toString()).toBe("born on 01/25/2022 at 06:55 AM")
+  expect(fact.toString()).toBe("Birth on 01/25/2022 at 06:55 AM")
 })

src/backend/ModelGraph.ts

@@ -2,12 +2,21 @@ import GedcomX, {setReferenceAge} from "./gedcomx-extensions";
 import viewGraph, {ViewMode} from "./ViewGraph";
 import config from "../config";
 import {PersonFactTypes} from "./gedcomx-enums";
+import {filterLang} from "../main";
 
 let lastViewGraphBuildParams: {id: string, view: ViewMode | string}
 
 class ModelGraph extends GedcomX.Root {
   constructor(data) {
     super(data)
+
+    // localize
+    this.persons = (this.persons ?? []).filter(filterLang);
+    this.relationships = (this.relationships ?? []).filter(filterLang);
+    this.events = (this.events ?? []).filter(filterLang);
+    this.documents = (this.documents ?? []).filter(filterLang);
+    this.places = (this.places ?? []).filter(filterLang);
+
     if (!data || data.persons.length < 0 || data.relationships.length < 0) {
       throw new Error("The calculated graph is empty! Please check if your files are empty. If not, please file a bug report!");
     }
@@ -24,7 +33,14 @@ class ModelGraph extends GedcomX.Root {
   }
 
   getSourceDescriptionById(id: string): GedcomX.SourceDescription {
-    return this.getSourceDescriptions().find(d => d.getId() === id);
+    return this.getSourceDescriptions().find(d => d.id === id);
+  }
+
+  getAgentById(id: string | GedcomX.ResourceReference): GedcomX.Agent {
+    if (id instanceof GedcomX.ResourceReference) {
+      id = id.getResource().substring(1);
+    }
+    return this.agents.find(a => (id as string) in a.getIdentifiers().getValues());
   }
 
   getPersonByName = (name: string): GedcomX.Person => {
@@ -195,12 +211,12 @@ class ModelGraph extends GedcomX.Root {
   private setAgeGen0 = (startPerson: GedcomX.Person) => {
     let personWithKnownAge = this.persons
       .filter(p => {
-        let generationStartFacts = startPerson.getFactsByType(PersonFactTypes.Generation);
+        let generationStartFacts = startPerson.getFactsByType(PersonFactTypes.GenerationNumber);
         if (generationStartFacts.length < 1) {
           return false;
         }
         let generationStart = generationStartFacts[0].getValue();
-        let generationPFacts = p.getFactsByType(PersonFactTypes.Generation)
+        let generationPFacts = p.getFactsByType(PersonFactTypes.GenerationNumber)
         if (generationPFacts.length < 1) {
           return false;
         }
@@ -215,7 +231,7 @@ class ModelGraph extends GedcomX.Root {
     }
     setReferenceAge(personWithKnownAge.getAgeToday(),
       // get generation from generation fact
-      Number(personWithKnownAge.getFactsByType(PersonFactTypes.Generation)[0].getValue()));
+      Number(personWithKnownAge.getFactsByType(PersonFactTypes.GenerationNumber)[0].getValue()));
   }
 
   private getAncestors(person: GedcomX.Person): GedcomX.Person[] {

src/backend/Person.test.ts

@@ -1,12 +1,12 @@
 import GedcomX, {setReferenceAge} from "./gedcomx-extensions";
-import config from "../config";
 import {PersonFactTypes} from "./gedcomx-enums";
+import {strings} from "../main";
 
 test("Age calculated correct", () => {
   setReferenceAge(0, 0);
   let person = new GedcomX.Person()
     .addFact(new GedcomX.Fact()
-      .setType(PersonFactTypes.Generation)
+      .setType(PersonFactTypes.GenerationNumber)
       .setValue(0));
   expect(person.getAgeToday()).toBe(0);
 
@@ -41,9 +41,11 @@ test("get full name returns the correct name", () => {
     .addNameForm(new GedcomX.NameForm().setFullText("Maximilian Mustermann")))
   expect(person.getFullName()).toBe("Maximilian Mustermann");
 
-  config.browserLang = "en";
+
+  strings.setLanguage("en");
+
   person.addName(new GedcomX.Name()
-    .setLang("en")
+    .setLang(strings.getLanguage())
     .addNameForm(new GedcomX.NameForm().setFullText("John Doe")));
   expect(person.getFullName()).toBe("John Doe");