WIP building descending tree
This commit is contained in:
parent
911d59cddb
commit
f4c226ac98
@ -122,7 +122,7 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
|
||||
{currTab === CurrTab.BasicTree ? (
|
||||
<BasicFamilyTree tree={tree!} />
|
||||
) : (
|
||||
<ComplexFamilyTree />
|
||||
<ComplexFamilyTree tree={tree!} />
|
||||
)}
|
||||
</Paper>
|
||||
</div>
|
||||
|
||||
@ -1,13 +1,17 @@
|
||||
import React from "react";
|
||||
import f3, { f3Data } from "family-chart";
|
||||
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) => {
|
||||
if (!container) return;
|
||||
|
||||
const store = f3.createStore({
|
||||
data: data(),
|
||||
data: treeToF3Data(p.tree),
|
||||
node_separation: 250,
|
||||
level_separation: 150,
|
||||
}),
|
||||
@ -44,181 +48,97 @@ export function ComplexFamilyTree(): React.ReactElement {
|
||||
return <div className="f3" id="FamilyChart" ref={refCb}></div>;
|
||||
}
|
||||
|
||||
const data: () => f3Data[] = () => [
|
||||
{
|
||||
id: "0",
|
||||
rels: {
|
||||
spouses: ["8c92765f-92d3-4120-90dd-85a28302504c"],
|
||||
father: "0c09cfa0-5e7c-4073-8beb-94f6c69ada19",
|
||||
mother: "0fa5c6bc-5b58-40f5-a07e-d787e26d8b56",
|
||||
children: [
|
||||
"ce2fcb9a-6058-4326-b56a-aced35168561",
|
||||
"f626d086-e2d6-4722-b4f3-ca4f15b109ab",
|
||||
],
|
||||
},
|
||||
function treeToF3Data(node: FamilyTreeNode): f3Data[] {
|
||||
const availableMembers = new Set<number>();
|
||||
getAvailableMembers(node, availableMembers);
|
||||
|
||||
const list: f3Data[] = [];
|
||||
treeToF3DataRecurse(node, list, availableMembers);
|
||||
console.info(list);
|
||||
return list;
|
||||
}
|
||||
|
||||
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: {
|
||||
first_name: "Agnus",
|
||||
last_name: "",
|
||||
birthday: "1970",
|
||||
avatar:
|
||||
"https://static8.depositphotos.com/1009634/988/v/950/depositphotos_9883921-stock-illustration-no-user-profile-picture.jpg",
|
||||
gender: "M",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "8c92765f-92d3-4120-90dd-85a28302504c",
|
||||
data: {
|
||||
gender: "F",
|
||||
first_name: "Andrea",
|
||||
last_name: "",
|
||||
birthday: "",
|
||||
avatar: "",
|
||||
first_name: node.member.first_name ?? "_",
|
||||
last_name: node.member.last_name ?? "_",
|
||||
gender: node.member.sex ?? "M",
|
||||
avatar: node.member.thumbnailURL ?? undefined,
|
||||
birthday: node.member.dateOfBirth
|
||||
? fmtDate(node.member.dateOfBirth)
|
||||
: undefined,
|
||||
},
|
||||
id: node.member.id.toString(),
|
||||
rels: {
|
||||
spouses: ["0"],
|
||||
children: [
|
||||
"ce2fcb9a-6058-4326-b56a-aced35168561",
|
||||
"f626d086-e2d6-4722-b4f3-ca4f15b109ab",
|
||||
],
|
||||
father:
|
||||
node.member.father && availableMembers.has(node.member.father)
|
||||
? node.member.father.toString()
|
||||
: 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: {
|
||||
gender: "M",
|
||||
first_name: "Zen",
|
||||
last_name: "",
|
||||
birthday: "",
|
||||
avatar: "",
|
||||
first_name: c.member.first_name ?? "_",
|
||||
last_name: c.member.last_name ?? "_",
|
||||
gender: c.member.sex ?? "M",
|
||||
avatar: c.member.thumbnailURL ?? undefined,
|
||||
birthday: c.member.dateOfBirth
|
||||
? fmtDate(c.member.dateOfBirth)
|
||||
: undefined,
|
||||
},
|
||||
id: c.member.id.toString(),
|
||||
rels: {
|
||||
children: ["0"],
|
||||
spouses: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"],
|
||||
father:
|
||||
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",
|
||||
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"],
|
||||
},
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
c.down.forEach((e) => treeToF3DataRecurse(e, array, availableMembers));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
import { jsPDF } from "jspdf";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user