@patternslib/pat-family-tree/src/family-tree.js

A pattern for family-tree

import { BasePattern } from "@patternslib/patternslib/src/core/basepattern";
import logging from "@patternslib/patternslib/src/core/logging";
import Parser from "@patternslib/patternslib/src/core/parser";
import registry from "@patternslib/patternslib/src/core/registry";
import f3 from "family-chart";

const log = logging.getLogger("family-tree");

export const parser = new Parser("family-tree");
parser.addArgument("data", "");
parser.addArgument("card-template", "");

class Pattern extends BasePattern {
    static name = "family-tree";
    static trigger = ".pat-family-tree";
    static parser = parser;

    async init() {
        // Only import styles if the global flag is set.
        if (window.__patternslib_import_styles) {
            // family-tree default styles need the "f3" class.
            this.el.classList.add("f3");
            import("./family-tree.scss");
        }

        if (!this.options.data) {
            log.warn("No data provided.");
            return;
        }

        let data;
        try {
            const response = await fetch(this.options.data);
            if (!response.ok) {
                log.error("Cannot fetch data.");
                return;
            }
            data = await response.json();
        } catch (e) {
            log.error(e);
            return;
        }

        // Create the family tree.
        this.create(data);

        // After tree creation, re-scan for patterns.
        registry.scan(this.el);
    }

    create(data) {
        const chart = f3
            .createChart(this.el, data)
            .setTransitionTime(1000)
            .setCardXSpacing(250)
            .setCardYSpacing(150);

        // Custom HTML creator function
        function customCardInnerHtml(d) {
            // Access the person's data
            const person = d.data;
            const personData = person.data;

            // Create your custom HTML structure
            return `
              <div class="quaive-contact-card">
                <a class="pat-inject pat-avatar">
                  <img alt="${personData.label}" data-var="image" src="${personData.avatar}">
                </a>
                <p class="name">
                  <span data-var="name">${personData.fn} </span>
                  <span data-var="lastName">${personData.ln}</span>
                </p>
                <p class="byline" data-var="byline">
                    ${personData.desc || ""}
                    <span class="gender">${personData.gender || "Unknown"}</span>
                    ${person.rels ? `<span class="children-count">Children: ${person.rels.children ? person.rels.children.length : 0}</span>` : ""}
                </p>
              </div>
            `;
        }

        // Create a custom CardHtml function that includes the cardInnerHtmlCreator
        function CustomCardHtmlWithInner(cont, props) {
            // Add the custom cardInnerHtmlCreator to props
            props.cardInnerHtmlCreator = customCardInnerHtml;
            const card = f3.CardHtml(cont, props);
            card.cardInnerHtmlCreator = customCardInnerHtml;
            return card;
        }

        // Use the custom CardHtml with the inner HTML creator
        chart
            .setCard(CustomCardHtmlWithInner)
            .setCardDisplay([["label"]])
            .setCardDim({ h: 70 });

        chart.updateMainId("Q43274"); // Charles III

        chart.updateTree({ initial: true });
    }
}

registry.register(Pattern);
export default Pattern;
export { Pattern };