WIP building descending tree

This commit is contained in:
Pierre HUBERT 2023-08-23 10:27:51 +02:00
parent 911d59cddb
commit f4c226ac98
2 changed files with 94 additions and 174 deletions

View File

@ -122,7 +122,7 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
{currTab === CurrTab.BasicTree ? ( {currTab === CurrTab.BasicTree ? (
<BasicFamilyTree tree={tree!} /> <BasicFamilyTree tree={tree!} />
) : ( ) : (
<ComplexFamilyTree /> <ComplexFamilyTree tree={tree!} />
)} )}
</Paper> </Paper>
</div> </div>

View File

@ -1,13 +1,17 @@
import React from "react"; import React from "react";
import f3, { f3Data } from "family-chart"; import f3, { f3Data } from "family-chart";
import "./family-chart.css"; import "./family-chart.css";
import { FamilyTreeNode } from "../../utils/family_tree";
import { fmtDate } from "../../api/MemberApi";
export function ComplexFamilyTree(): React.ReactElement { export function ComplexFamilyTree(p: {
tree: FamilyTreeNode;
}): React.ReactElement {
const refCb = (container: HTMLDivElement) => { const refCb = (container: HTMLDivElement) => {
if (!container) return; if (!container) return;
const store = f3.createStore({ const store = f3.createStore({
data: data(), data: treeToF3Data(p.tree),
node_separation: 250, node_separation: 250,
level_separation: 150, level_separation: 150,
}), }),
@ -44,181 +48,97 @@ export function ComplexFamilyTree(): React.ReactElement {
return <div className="f3" id="FamilyChart" ref={refCb}></div>; return <div className="f3" id="FamilyChart" ref={refCb}></div>;
} }
const data: () => f3Data[] = () => [ function treeToF3Data(node: FamilyTreeNode): f3Data[] {
{ const availableMembers = new Set<number>();
id: "0", getAvailableMembers(node, availableMembers);
rels: {
spouses: ["8c92765f-92d3-4120-90dd-85a28302504c"], const list: f3Data[] = [];
father: "0c09cfa0-5e7c-4073-8beb-94f6c69ada19", treeToF3DataRecurse(node, list, availableMembers);
mother: "0fa5c6bc-5b58-40f5-a07e-d787e26d8b56", console.info(list);
children: [ return list;
"ce2fcb9a-6058-4326-b56a-aced35168561", }
"f626d086-e2d6-4722-b4f3-ca4f15b109ab",
], function getAvailableMembers(t: FamilyTreeNode, s: Set<number>) {
}, s.add(t.member.id);
t.couples?.forEach((c) => {
s.add(c.member.id);
c.down.forEach((e) => getAvailableMembers(e, s));
});
t.down?.forEach((e) => getAvailableMembers(e, s));
}
function treeToF3DataRecurse(
node: FamilyTreeNode,
array: f3Data[],
availableMembers: Set<number>
) {
// Get all members ids
const children = node?.down?.map((c) => c.member.id.toString()) ?? [];
node.couples?.map((c) =>
c.down.forEach((m) => children.push(m.member.id.toString()))
);
array.push({
data: { data: {
first_name: "Agnus", first_name: node.member.first_name ?? "_",
last_name: "", last_name: node.member.last_name ?? "_",
birthday: "1970", gender: node.member.sex ?? "M",
avatar: avatar: node.member.thumbnailURL ?? undefined,
"https://static8.depositphotos.com/1009634/988/v/950/depositphotos_9883921-stock-illustration-no-user-profile-picture.jpg", birthday: node.member.dateOfBirth
gender: "M", ? fmtDate(node.member.dateOfBirth)
}, : undefined,
},
{
id: "8c92765f-92d3-4120-90dd-85a28302504c",
data: {
gender: "F",
first_name: "Andrea",
last_name: "",
birthday: "",
avatar: "",
}, },
id: node.member.id.toString(),
rels: { rels: {
spouses: ["0"], father:
children: [ node.member.father && availableMembers.has(node.member.father)
"ce2fcb9a-6058-4326-b56a-aced35168561", ? node.member.father.toString()
"f626d086-e2d6-4722-b4f3-ca4f15b109ab", : undefined,
], mother:
node.member.mother && availableMembers.has(node.member.mother)
? node.member.mother.toString()
: undefined,
spouses: node.couples?.map((c) => c.member.id.toString()),
children: children,
}, },
}, });
{
id: "0c09cfa0-5e7c-4073-8beb-94f6c69ada19", node?.down?.forEach((e) => treeToF3DataRecurse(e, array, availableMembers));
if (node.couples) {
for (const c of node.couples) {
array.push({
data: { data: {
gender: "M", first_name: c.member.first_name ?? "_",
first_name: "Zen", last_name: c.member.last_name ?? "_",
last_name: "", gender: c.member.sex ?? "M",
birthday: "", avatar: c.member.thumbnailURL ?? undefined,
avatar: "", birthday: c.member.dateOfBirth
? fmtDate(c.member.dateOfBirth)
: undefined,
}, },
id: c.member.id.toString(),
rels: { rels: {
children: ["0"], father:
spouses: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"], c.member.father && availableMembers.has(c.member.father)
? c.member.father.toString()
: undefined,
mother:
c.member.mother && availableMembers.has(c.member.mother)
? c.member.mother.toString()
: undefined,
spouses: [node.member.id.toString()],
children: c.down.map((c) => c.member.id.toString()),
}, },
}, });
{
id: "0fa5c6bc-5b58-40f5-a07e-d787e26d8b56", c.down.forEach((e) => treeToF3DataRecurse(e, array, availableMembers));
data: { }
gender: "F", }
first_name: "Zebra", }
last_name: "",
birthday: "",
avatar: "",
},
rels: {
spouses: ["0c09cfa0-5e7c-4073-8beb-94f6c69ada19"],
children: ["0"],
father: "12a9bddf-855a-4583-a695-c73fa8c0e9b2",
mother: "bd56a527-b613-474d-9f38-fcac0aae218b",
},
},
{
id: "ce2fcb9a-6058-4326-b56a-aced35168561",
data: {
gender: "M",
first_name: "Ben",
last_name: "",
birthday: "",
avatar: "",
},
rels: {
mother: "8c92765f-92d3-4120-90dd-85a28302504c",
father: "0",
spouses: ["b4e33c68-20a7-47ba-9dcc-1168a07d5b52"],
children: [
"eabd40c9-4518-4485-af5e-e4bc3ffd27fb",
"240a3f71-c921-42d7-8a13-dec5e1acc4fd",
],
},
},
{
id: "f626d086-e2d6-4722-b4f3-ca4f15b109ab",
data: {
gender: "F",
first_name: "Becky",
last_name: "",
birthday: "",
avatar: "",
},
rels: {
mother: "8c92765f-92d3-4120-90dd-85a28302504c",
father: "0",
},
},
{
id: "eabd40c9-4518-4485-af5e-e4bc3ffd27fb",
data: {
gender: "M",
first_name: "Carlos",
last_name: "",
birthday: "",
avatar: "",
},
rels: {
mother: "b4e33c68-20a7-47ba-9dcc-1168a07d5b52",
father: "ce2fcb9a-6058-4326-b56a-aced35168561",
},
},
{
id: "b4e33c68-20a7-47ba-9dcc-1168a07d5b52",
data: {
gender: "F",
first_name: "Branka",
last_name: "",
birthday: "",
avatar: "",
},
rels: {
spouses: ["ce2fcb9a-6058-4326-b56a-aced35168561"],
children: [
"eabd40c9-4518-4485-af5e-e4bc3ffd27fb",
"240a3f71-c921-42d7-8a13-dec5e1acc4fd",
],
},
},
{
id: "240a3f71-c921-42d7-8a13-dec5e1acc4fd",
data: {
gender: "F",
first_name: "Carla",
last_name: "",
birthday: "",
avatar: "",
},
rels: {
mother: "b4e33c68-20a7-47ba-9dcc-1168a07d5b52",
father: "ce2fcb9a-6058-4326-b56a-aced35168561",
},
},
{
id: "12a9bddf-855a-4583-a695-c73fa8c0e9b2",
data: {
gender: "M",
first_name: "Yvo",
last_name: "",
birthday: "",
avatar: "",
},
rels: {
children: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"],
spouses: ["bd56a527-b613-474d-9f38-fcac0aae218b"],
},
},
{
id: "bd56a527-b613-474d-9f38-fcac0aae218b",
data: {
gender: "F",
first_name: "Yva",
last_name: "",
birthday: "",
avatar: "",
},
rels: {
spouses: ["12a9bddf-855a-4583-a695-c73fa8c0e9b2"],
children: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"],
},
},
];
/* /*
import { jsPDF } from "jspdf"; import { jsPDF } from "jspdf";