pierre/GeneIT
1
0
Fork 0
Code Issues Pull Requests 7 Packages Projects Releases Wiki Activity

Typed data

Browse Source
This commit is contained in:
Pierre HUBERT 2023-08-22 17:17:36 +02:00
parent 6630037ac0
commit 911d59cddb
2 changed files with 189 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

333
geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx
View File

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import f3 from "family-chart"; import f3, { f3Data } from "family-chart";
import "./family-chart.css"; import "./family-chart.css";
export function ComplexFamilyTree(): React.ReactElement { export function ComplexFamilyTree(): React.ReactElement {
@ -29,7 +29,7 @@ export function ComplexFamilyTree(): React.ReactElement {
img_y: 5, img_y: 5,
}, },
card_display: [ card_display: [
(d) => `${d.data["first name"] || ""} ${d.data["last name"] || ""}`, (d) => `${d.data.first_name || ""} ${d.data.last_name || ""}`,
(d) => `${d.data["birthday"] || ""}`, (d) => `${d.data["birthday"] || ""}`,
], ],
mini_tree: true, mini_tree: true,
@ -44,182 +44,181 @@ 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 = () => const data: () => f3Data[] = () => [
structuredClone([ {
{ id: "0",
id: "0", rels: {
rels: { spouses: ["8c92765f-92d3-4120-90dd-85a28302504c"],
spouses: ["8c92765f-92d3-4120-90dd-85a28302504c"], father: "0c09cfa0-5e7c-4073-8beb-94f6c69ada19",
father: "0c09cfa0-5e7c-4073-8beb-94f6c69ada19", mother: "0fa5c6bc-5b58-40f5-a07e-d787e26d8b56",
mother: "0fa5c6bc-5b58-40f5-a07e-d787e26d8b56", children: [
children: [ "ce2fcb9a-6058-4326-b56a-aced35168561",
"ce2fcb9a-6058-4326-b56a-aced35168561", "f626d086-e2d6-4722-b4f3-ca4f15b109ab",
"f626d086-e2d6-4722-b4f3-ca4f15b109ab", ],
],
},
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",
},
}, },
{ data: {
id: "8c92765f-92d3-4120-90dd-85a28302504c", first_name: "Agnus",
data: { last_name: "",
gender: "F", birthday: "1970",
"first name": "Andrea", avatar:
"last name": "", "https://static8.depositphotos.com/1009634/988/v/950/depositphotos_9883921-stock-illustration-no-user-profile-picture.jpg",
birthday: "", gender: "M",
avatar: "",
},
rels: {
spouses: ["0"],
children: [
"ce2fcb9a-6058-4326-b56a-aced35168561",
"f626d086-e2d6-4722-b4f3-ca4f15b109ab",
],
},
}, },
{ },
id: "0c09cfa0-5e7c-4073-8beb-94f6c69ada19", {
data: { id: "8c92765f-92d3-4120-90dd-85a28302504c",
gender: "M", data: {
"first name": "Zen", gender: "F",
"last name": "", first_name: "Andrea",
birthday: "", last_name: "",
avatar: "", birthday: "",
}, avatar: "",
rels: {
children: ["0"],
spouses: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"],
},
}, },
{ rels: {
id: "0fa5c6bc-5b58-40f5-a07e-d787e26d8b56", spouses: ["0"],
data: { children: [
gender: "F", "ce2fcb9a-6058-4326-b56a-aced35168561",
"first name": "Zebra", "f626d086-e2d6-4722-b4f3-ca4f15b109ab",
"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: { id: "0c09cfa0-5e7c-4073-8beb-94f6c69ada19",
gender: "M", data: {
"first name": "Ben", gender: "M",
"last name": "", first_name: "Zen",
birthday: "", last_name: "",
avatar: "", 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",
],
},
}, },
{ rels: {
id: "f626d086-e2d6-4722-b4f3-ca4f15b109ab", children: ["0"],
data: { spouses: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"],
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: { id: "0fa5c6bc-5b58-40f5-a07e-d787e26d8b56",
gender: "M", data: {
"first name": "Carlos", gender: "F",
"last name": "", first_name: "Zebra",
birthday: "", last_name: "",
avatar: "", birthday: "",
}, avatar: "",
rels: {
mother: "b4e33c68-20a7-47ba-9dcc-1168a07d5b52",
father: "ce2fcb9a-6058-4326-b56a-aced35168561",
},
}, },
{ rels: {
id: "b4e33c68-20a7-47ba-9dcc-1168a07d5b52", spouses: ["0c09cfa0-5e7c-4073-8beb-94f6c69ada19"],
data: { children: ["0"],
gender: "F", father: "12a9bddf-855a-4583-a695-c73fa8c0e9b2",
"first name": "Branka", mother: "bd56a527-b613-474d-9f38-fcac0aae218b",
"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: { id: "ce2fcb9a-6058-4326-b56a-aced35168561",
gender: "F", data: {
"first name": "Carla", gender: "M",
"last name": "", first_name: "Ben",
birthday: "", last_name: "",
avatar: "", birthday: "",
}, avatar: "",
rels: {
mother: "b4e33c68-20a7-47ba-9dcc-1168a07d5b52",
father: "ce2fcb9a-6058-4326-b56a-aced35168561",
},
}, },
{ rels: {
id: "12a9bddf-855a-4583-a695-c73fa8c0e9b2", mother: "8c92765f-92d3-4120-90dd-85a28302504c",
data: { father: "0",
gender: "M", spouses: ["b4e33c68-20a7-47ba-9dcc-1168a07d5b52"],
"first name": "Yvo", children: [
"last name": "", "eabd40c9-4518-4485-af5e-e4bc3ffd27fb",
birthday: "", "240a3f71-c921-42d7-8a13-dec5e1acc4fd",
avatar: "", ],
},
rels: {
children: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"],
spouses: ["bd56a527-b613-474d-9f38-fcac0aae218b"],
},
}, },
{ },
id: "bd56a527-b613-474d-9f38-fcac0aae218b", {
data: { id: "f626d086-e2d6-4722-b4f3-ca4f15b109ab",
gender: "F", data: {
"first name": "Yva", gender: "F",
"last name": "", first_name: "Becky",
birthday: "", last_name: "",
avatar: "", birthday: "",
}, avatar: "",
rels: {
spouses: ["12a9bddf-855a-4583-a695-c73fa8c0e9b2"],
children: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"],
},
}, },
]); 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";

25
geneit_app/src/widgets/complex_family_tree/family_chart.d.ts vendored
View File

@ -2,8 +2,29 @@ declare module "family-chart" {
type f3data = any; type f3data = any;
type f3tree = any; type f3tree = any;
interface f3Rels {
spouses?: string[];
father?: string;
mother?: string;
children?: string[];
}
interface f3DataData {
gender: "M" | "F";
avatar?: string;
birthday?: string;
first_name: string;
last_name: string;
}
interface f3Data {
id: string;
rels: f3Rels;
data: f3DataData;
}
type f3State = { type f3State = {
data: any; data: f3Data[];
main_id?: any; main_id?: any;
tree?: f3tree; tree?: f3tree;
node_separation?: number; node_separation?: number;
@ -60,7 +81,7 @@ declare module "family-chart" {
img_x: number; img_x: number;
img_y: number; img_y: number;
}; };
card_display: ((data: any) => string)[]; card_display: ((data: f3Data) => string)[];
}) => (p: { node; d }) => HTMLElement; }) => (p: { node; d }) => HTMLElement;
}; };
const elements: F3elements; const elements: F3elements;