diff --git a/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx b/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx index 370b50d..c26dc2e 100644 --- a/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx +++ b/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx @@ -1,5 +1,5 @@ import React from "react"; -import f3 from "family-chart"; +import f3, { f3Data } from "family-chart"; import "./family-chart.css"; export function ComplexFamilyTree(): React.ReactElement { @@ -29,7 +29,7 @@ export function ComplexFamilyTree(): React.ReactElement { img_y: 5, }, card_display: [ - (d) => `${d.data["first name"] || ""} ${d.data["last name"] || ""}`, + (d) => `${d.data.first_name || ""} ${d.data.last_name || ""}`, (d) => `${d.data["birthday"] || ""}`, ], mini_tree: true, @@ -44,182 +44,181 @@ export function ComplexFamilyTree(): React.ReactElement { return
; } -const data = () => - structuredClone([ - { - 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", - ], - }, - 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", - }, +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", + ], }, - { - id: "8c92765f-92d3-4120-90dd-85a28302504c", - data: { - gender: "F", - "first name": "Andrea", - "last name": "", - birthday: "", - avatar: "", - }, - rels: { - spouses: ["0"], - children: [ - "ce2fcb9a-6058-4326-b56a-aced35168561", - "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", }, - { - id: "0c09cfa0-5e7c-4073-8beb-94f6c69ada19", - data: { - gender: "M", - "first name": "Zen", - "last name": "", - birthday: "", - avatar: "", - }, - rels: { - children: ["0"], - spouses: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"], - }, + }, + { + id: "8c92765f-92d3-4120-90dd-85a28302504c", + data: { + gender: "F", + first_name: "Andrea", + last_name: "", + birthday: "", + avatar: "", }, - { - 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", - }, + rels: { + spouses: ["0"], + children: [ + "ce2fcb9a-6058-4326-b56a-aced35168561", + "f626d086-e2d6-4722-b4f3-ca4f15b109ab", + ], }, - { - 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: "0c09cfa0-5e7c-4073-8beb-94f6c69ada19", + data: { + gender: "M", + first_name: "Zen", + last_name: "", + birthday: "", + avatar: "", }, - { - 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", - }, + rels: { + children: ["0"], + spouses: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"], }, - { - 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: "0fa5c6bc-5b58-40f5-a07e-d787e26d8b56", + data: { + gender: "F", + first_name: "Zebra", + last_name: "", + birthday: "", + avatar: "", }, - { - 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", - ], - }, + rels: { + spouses: ["0c09cfa0-5e7c-4073-8beb-94f6c69ada19"], + children: ["0"], + father: "12a9bddf-855a-4583-a695-c73fa8c0e9b2", + mother: "bd56a527-b613-474d-9f38-fcac0aae218b", }, - { - 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: "ce2fcb9a-6058-4326-b56a-aced35168561", + data: { + gender: "M", + first_name: "Ben", + last_name: "", + birthday: "", + avatar: "", }, - { - 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"], - }, + 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: "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"], - }, + }, + { + 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"; diff --git a/geneit_app/src/widgets/complex_family_tree/family_chart.d.ts b/geneit_app/src/widgets/complex_family_tree/family_chart.d.ts index f1f2752..971620d 100644 --- a/geneit_app/src/widgets/complex_family_tree/family_chart.d.ts +++ b/geneit_app/src/widgets/complex_family_tree/family_chart.d.ts @@ -2,8 +2,29 @@ declare module "family-chart" { type f3data = 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 = { - data: any; + data: f3Data[]; main_id?: any; tree?: f3tree; node_separation?: number; @@ -60,7 +81,7 @@ declare module "family-chart" { img_x: number; img_y: number; }; - card_display: ((data: any) => string)[]; + card_display: ((data: f3Data) => string)[]; }) => (p: { node; d }) => HTMLElement; }; const elements: F3elements;