Typed data
This commit is contained in:
parent
6630037ac0
commit
911d59cddb
@ -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";
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user