Start to test family-chart module

This commit is contained in:
Pierre HUBERT 2023-08-22 16:12:55 +02:00
parent cae70ee738
commit b502e99c22
5 changed files with 645 additions and 2 deletions

View File

@ -27,6 +27,7 @@
"@types/react-dom": "^18.2.4",
"date-and-time": "^3.0.1",
"email-validator": "^2.0.4",
"family-chart": "^0.0.0-beta-1",
"filesize": "^10.0.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
@ -6452,6 +6453,299 @@
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
},
"node_modules/d3": {
"version": "6.7.0",
"resolved": "https://registry.npmjs.org/d3/-/d3-6.7.0.tgz",
"integrity": "sha512-hNHRhe+yCDLUG6Q2LwvR/WdNFPOJQ5VWqsJcwIYVeI401+d2/rrCjxSXkiAdIlpx7/73eApFB4Olsmh3YN7a6g==",
"dependencies": {
"d3-array": "2",
"d3-axis": "2",
"d3-brush": "2",
"d3-chord": "2",
"d3-color": "2",
"d3-contour": "2",
"d3-delaunay": "5",
"d3-dispatch": "2",
"d3-drag": "2",
"d3-dsv": "2",
"d3-ease": "2",
"d3-fetch": "2",
"d3-force": "2",
"d3-format": "2",
"d3-geo": "2",
"d3-hierarchy": "2",
"d3-interpolate": "2",
"d3-path": "2",
"d3-polygon": "2",
"d3-quadtree": "2",
"d3-random": "2",
"d3-scale": "3",
"d3-scale-chromatic": "2",
"d3-selection": "2",
"d3-shape": "2",
"d3-time": "2",
"d3-time-format": "3",
"d3-timer": "2",
"d3-transition": "2",
"d3-zoom": "2"
}
},
"node_modules/d3-array": {
"version": "2.12.1",
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
"integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
"dependencies": {
"internmap": "^1.0.0"
}
},
"node_modules/d3-axis": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-2.1.0.tgz",
"integrity": "sha512-z/G2TQMyuf0X3qP+Mh+2PimoJD41VOCjViJzT0BHeL/+JQAofkiWZbWxlwFGb1N8EN+Cl/CW+MUKbVzr1689Cw=="
},
"node_modules/d3-brush": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-2.1.0.tgz",
"integrity": "sha512-cHLLAFatBATyIKqZOkk/mDHUbzne2B3ZwxkzMHvFTCZCmLaXDpZRihQSn8UNXTkGD/3lb/W2sQz0etAftmHMJQ==",
"dependencies": {
"d3-dispatch": "1 - 2",
"d3-drag": "2",
"d3-interpolate": "1 - 2",
"d3-selection": "2",
"d3-transition": "2"
}
},
"node_modules/d3-chord": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-2.0.0.tgz",
"integrity": "sha512-D5PZb7EDsRNdGU4SsjQyKhja8Zgu+SHZfUSO5Ls8Wsn+jsAKUUGkcshLxMg9HDFxG3KqavGWaWkJ8EpU8ojuig==",
"dependencies": {
"d3-path": "1 - 2"
}
},
"node_modules/d3-color": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
"integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ=="
},
"node_modules/d3-contour": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-2.0.0.tgz",
"integrity": "sha512-9unAtvIaNk06UwqBmvsdHX7CZ+NPDZnn8TtNH1myW93pWJkhsV25JcgnYAu0Ck5Veb1DHiCv++Ic5uvJ+h50JA==",
"dependencies": {
"d3-array": "2"
}
},
"node_modules/d3-delaunay": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-5.3.0.tgz",
"integrity": "sha512-amALSrOllWVLaHTnDLHwMIiz0d1bBu9gZXd1FiLfXf8sHcX9jrcj81TVZOqD4UX7MgBZZ07c8GxzEgBpJqc74w==",
"dependencies": {
"delaunator": "4"
}
},
"node_modules/d3-dispatch": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-2.0.0.tgz",
"integrity": "sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA=="
},
"node_modules/d3-drag": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-2.0.0.tgz",
"integrity": "sha512-g9y9WbMnF5uqB9qKqwIIa/921RYWzlUDv9Jl1/yONQwxbOfszAWTCm8u7HOTgJgRDXiRZN56cHT9pd24dmXs8w==",
"dependencies": {
"d3-dispatch": "1 - 2",
"d3-selection": "2"
}
},
"node_modules/d3-dsv": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-2.0.0.tgz",
"integrity": "sha512-E+Pn8UJYx9mViuIUkoc93gJGGYut6mSDKy2+XaPwccwkRGlR+LO97L2VCCRjQivTwLHkSnAJG7yo00BWY6QM+w==",
"dependencies": {
"commander": "2",
"iconv-lite": "0.4",
"rw": "1"
},
"bin": {
"csv2json": "bin/dsv2json",
"csv2tsv": "bin/dsv2dsv",
"dsv2dsv": "bin/dsv2dsv",
"dsv2json": "bin/dsv2json",
"json2csv": "bin/json2dsv",
"json2dsv": "bin/json2dsv",
"json2tsv": "bin/json2dsv",
"tsv2csv": "bin/dsv2dsv",
"tsv2json": "bin/dsv2json"
}
},
"node_modules/d3-dsv/node_modules/commander": {
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
},
"node_modules/d3-dsv/node_modules/iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
"dependencies": {
"safer-buffer": ">= 2.1.2 < 3"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/d3-ease": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-2.0.0.tgz",
"integrity": "sha512-68/n9JWarxXkOWMshcT5IcjbB+agblQUaIsbnXmrzejn2O82n3p2A9R2zEB9HIEFWKFwPAEDDN8gR0VdSAyyAQ=="
},
"node_modules/d3-fetch": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-2.0.0.tgz",
"integrity": "sha512-TkYv/hjXgCryBeNKiclrwqZH7Nb+GaOwo3Neg24ZVWA3MKB+Rd+BY84Nh6tmNEMcjUik1CSUWjXYndmeO6F7sw==",
"dependencies": {
"d3-dsv": "1 - 2"
}
},
"node_modules/d3-force": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/d3-force/-/d3-force-2.1.1.tgz",
"integrity": "sha512-nAuHEzBqMvpFVMf9OX75d00OxvOXdxY+xECIXjW6Gv8BRrXu6gAWbv/9XKrvfJ5i5DCokDW7RYE50LRoK092ew==",
"dependencies": {
"d3-dispatch": "1 - 2",
"d3-quadtree": "1 - 2",
"d3-timer": "1 - 2"
}
},
"node_modules/d3-format": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-2.0.0.tgz",
"integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA=="
},
"node_modules/d3-geo": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-2.0.2.tgz",
"integrity": "sha512-8pM1WGMLGFuhq9S+FpPURxic+gKzjluCD/CHTuUF3mXMeiCo0i6R0tO1s4+GArRFde96SLcW/kOFRjoAosPsFA==",
"dependencies": {
"d3-array": "^2.5.0"
}
},
"node_modules/d3-hierarchy": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-2.0.0.tgz",
"integrity": "sha512-SwIdqM3HxQX2214EG9GTjgmCc/mbSx4mQBn+DuEETubhOw6/U3fmnji4uCVrmzOydMHSO1nZle5gh6HB/wdOzw=="
},
"node_modules/d3-interpolate": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
"integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
"dependencies": {
"d3-color": "1 - 2"
}
},
"node_modules/d3-path": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-2.0.0.tgz",
"integrity": "sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA=="
},
"node_modules/d3-polygon": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-2.0.0.tgz",
"integrity": "sha512-MsexrCK38cTGermELs0cO1d79DcTsQRN7IWMJKczD/2kBjzNXxLUWP33qRF6VDpiLV/4EI4r6Gs0DAWQkE8pSQ=="
},
"node_modules/d3-quadtree": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-2.0.0.tgz",
"integrity": "sha512-b0Ed2t1UUalJpc3qXzKi+cPGxeXRr4KU9YSlocN74aTzp6R/Ud43t79yLLqxHRWZfsvWXmbDWPpoENK1K539xw=="
},
"node_modules/d3-random": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/d3-random/-/d3-random-2.2.2.tgz",
"integrity": "sha512-0D9P8TRj6qDAtHhRQn6EfdOtHMfsUWanl3yb/84C4DqpZ+VsgfI5iTVRNRbELCfNvRfpMr8OrqqUTQ6ANGCijw=="
},
"node_modules/d3-scale": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz",
"integrity": "sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==",
"dependencies": {
"d3-array": "^2.3.0",
"d3-format": "1 - 2",
"d3-interpolate": "1.2.0 - 2",
"d3-time": "^2.1.1",
"d3-time-format": "2 - 3"
}
},
"node_modules/d3-scale-chromatic": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-2.0.0.tgz",
"integrity": "sha512-LLqy7dJSL8yDy7NRmf6xSlsFZ6zYvJ4BcWFE4zBrOPnQERv9zj24ohnXKRbyi9YHnYV+HN1oEO3iFK971/gkzA==",
"dependencies": {
"d3-color": "1 - 2",
"d3-interpolate": "1 - 2"
}
},
"node_modules/d3-selection": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-2.0.0.tgz",
"integrity": "sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA=="
},
"node_modules/d3-shape": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-2.1.0.tgz",
"integrity": "sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==",
"dependencies": {
"d3-path": "1 - 2"
}
},
"node_modules/d3-time": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
"integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
"dependencies": {
"d3-array": "2"
}
},
"node_modules/d3-time-format": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
"integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
"dependencies": {
"d3-time": "1 - 2"
}
},
"node_modules/d3-timer": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-2.0.0.tgz",
"integrity": "sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA=="
},
"node_modules/d3-transition": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-2.0.0.tgz",
"integrity": "sha512-42ltAGgJesfQE3u9LuuBHNbGrI/AJjNL2OAUdclE70UE6Vy239GCBEYD38uBPoLeNsOhFStGpPI0BAOV+HMxog==",
"dependencies": {
"d3-color": "1 - 2",
"d3-dispatch": "1 - 2",
"d3-ease": "1 - 2",
"d3-interpolate": "1 - 2",
"d3-timer": "1 - 2"
},
"peerDependencies": {
"d3-selection": "2"
}
},
"node_modules/d3-zoom": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-2.0.0.tgz",
"integrity": "sha512-fFg7aoaEm9/jf+qfstak0IYpnesZLiMX6GZvXtUSdv8RH2o4E2qeelgdU09eKS6wGuiGMfcnMI0nTIqWzRHGpw==",
"dependencies": {
"d3-dispatch": "1 - 2",
"d3-drag": "2",
"d3-interpolate": "1 - 2",
"d3-selection": "2",
"d3-transition": "2"
}
},
"node_modules/damerau-levenshtein": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@ -6576,6 +6870,11 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/delaunator": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/delaunator/-/delaunator-4.0.1.tgz",
"integrity": "sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag=="
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@ -7785,6 +8084,14 @@
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
},
"node_modules/family-chart": {
"version": "0.0.0-beta-1",
"resolved": "https://registry.npmjs.org/family-chart/-/family-chart-0.0.0-beta-1.tgz",
"integrity": "sha512-3YqXXum40xQBPagXan4Hpg71cO09FB5BVm2S/AUOggvF1x6/4PDlwRkZTDJ6OkbZNlR7GnyD2zphUgTfE2FTVg==",
"dependencies": {
"d3": "6"
}
},
"node_modules/fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@ -8930,6 +9237,11 @@
"node": ">= 0.4"
}
},
"node_modules/internmap": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
"integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
},
"node_modules/ipaddr.js": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.1.0.tgz",
@ -13574,6 +13886,11 @@
"queue-microtask": "^1.2.2"
}
},
"node_modules/rw": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
"integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
},
"node_modules/safe-array-concat": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.0.tgz",

View File

@ -22,6 +22,7 @@
"@types/react-dom": "^18.2.4",
"date-and-time": "^3.0.1",
"email-validator": "^2.0.4",
"family-chart": "^0.0.0-beta-1",
"filesize": "^10.0.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",

View File

@ -21,6 +21,7 @@ import { useFamily } from "../../widgets/BaseFamilyRoute";
import { MemberItem } from "../../widgets/MemberItem";
import { RouterLink } from "../../widgets/RouterLink";
import { BasicFamilyTree } from "../../widgets/BasicFamilyTree";
import ComlexFamilyTree from "../../widgets/complex_family_tree/ComplexFamilyTree";
enum CurrTab {
BasicTree,
@ -37,7 +38,7 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
const family = useFamily();
const [currTab, setCurrTab] = React.useState(CurrTab.BasicTree);
const [currTab, setCurrTab] = React.useState(CurrTab.AdvancedTree);
const [currMode, setCurrMode] = React.useState(TreeMode.Descending);
const member = family.members.get(Number(memberId));
@ -121,7 +122,7 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
{currTab === CurrTab.BasicTree ? (
<BasicFamilyTree tree={tree!} />
) : (
<>todo</>
<ComlexFamilyTree />
)}
</Paper>
</div>

View File

@ -0,0 +1,227 @@
import React from "react";
import f3 from "family-chart";
import "./family-chart.css";
export default class ComlexFamilyTree extends React.Component {
cont = React.createRef();
componentDidMount() {
if (!this.cont.current) return;
const store = f3.createStore({
data: data(),
node_separation: 250,
level_separation: 150,
}),
view = f3.d3AnimationView({
store,
cont: document.querySelector("#FamilyChart"),
}),
Card = f3.elements.Card({
store,
svg: view.svg,
card_dim: {
w: 220,
h: 70,
text_x: 75,
text_y: 15,
img_w: 60,
img_h: 60,
img_x: 5,
img_y: 5,
},
card_display: [
(d) => `${d.data["first name"] || ""} ${d.data["last name"] || ""}`,
(d) => `${d.data["birthday"] || ""}`,
],
mini_tree: true,
link_break: false,
});
view.setCard(Card);
store.setOnUpdate((props) => view.update(props || {}));
store.update.tree({ initial: true });
function data() {
return [
{
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",
},
},
{
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",
],
},
},
{
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: "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"],
},
},
];
}
}
render() {
return <div className="f3" id="FamilyChart" ref={this.cont}></div>;
}
}

View File

@ -0,0 +1,97 @@
.f3 {
height: 700px;
max-height: calc(100vh - 80px);
width: 900px;
max-width: 100%;
margin: auto;
position: relative;
}
.f3 .cursor-pointer {
cursor: pointer;
}
.f3 svg.main_svg {
width: 100%;
height: 100%;
background-color: #3b5560;
color: #3b5560;
}
.f3 svg.main_svg text {
fill: currentColor;
}
.f3 rect.card-female,
.f3 .card-female .card-body-rect,
.f3 .card-female .text-overflow-mask {
fill: lightpink;
}
.f3 rect.card-male,
.f3 .card-male .card-body-rect,
.f3 .card-male .text-overflow-mask {
fill: lightblue;
}
.f3 .card-genderless .card-body-rect,
.f3 .card-genderless .text-overflow-mask {
fill: lightgray;
}
.f3 .card_add .card-body-rect {
fill: #3b5560;
stroke-width: 4px;
stroke: #fff;
cursor: pointer;
}
.f3 g.card_add text {
fill: #fff;
}
.f3 .card-main {
stroke: #000;
}
.f3 .card_family_tree rect {
transition: 0.3s;
}
.f3 .card_family_tree:hover rect {
transform: scale(1.1);
}
.f3 .card_add_relative {
cursor: pointer;
color: #fff;
transition: 0.3s;
}
.f3 .card_add_relative circle {
fill: rgba(0, 0, 0, 0);
}
.f3 .card_add_relative:hover {
color: black;
}
.f3 .card_edit.pencil_icon {
color: #fff;
transition: 0.3s;
}
.f3 .card_edit.pencil_icon:hover {
color: black;
}
.f3 .card_break_link,
.f3 .link_upper,
.f3 .link_lower,
.f3 .link_particles {
transform-origin: 50% 50%;
transition: 1s;
}
.f3 .card_break_link {
color: #fff;
}
.f3 .card_break_link.closed .link_upper {
transform: translate(-140.5px, 655.6px);
}
.f3 .card_break_link.closed .link_upper g {
transform: rotate(-58deg);
}
.f3 .card_break_link.closed .link_particles {
transform: scale(0);
}
.f3 .input-field input {
height: 2.5rem !important;
}
.f3 .input-field > label:not(.label-icon).active {
-webkit-transform: translateY(-8px) scale(0.8);
transform: translateY(-8px) scale(0.8);
}