ApexTree

There are few options on how to include/import ApexTree into your project:

Install from NPM

Install the ApexTree icon library from command prompt from the root directory of the project:

npm install apextree --save

How to import ApexTree package?

import ApexTree from 'apextree';

Import the helper function to manage the charts colors based on mode changes. It will take updated values from the root variables.

import { getColorCodes } from "../helpers/helper.js";

Below the example how to use the package and make it working ApexTree on any page.

HTML

<div x-data="apexTreeApp()" x-init="init" class="border rounded-md border-ark-200 dark:border-dark-800">
                    <div id="apex-tree-container" x-ref="apexTreeContainer" data-chart-colors="[bg-gray-200, bg-gray-500, bg-white, bg-primary-100, bg-purple-100, bg-yellow-100, bg-dark-100, bg-orange-100, bg-green-100, bg-pink-100, bg-indigo-100]" data-chart-dark-colors="[bg-dark-800, bg-dark-500, bg-white, bg-primary-500, bg-purple-500, bg-yellow-500, bg-dark-850, bg-orange-500, bg-green-500, bg-pink-500, bg-indigo-500]"></div>
                </div>

JavaScript

import ApexTree from 'apextree';
import { getColorCodes } from "../helpers/helper.js";
import user1 from '/assets/images/avatar/user-1.png'
import user2 from '/assets/images/avatar/user-2.png'
import user3 from '/assets/images/avatar/user-3.png'
import user4 from '/assets/images/avatar/user-4.png'
import user5 from '/assets/images/avatar/user-5.png'
import user6 from '/assets/images/avatar/user-6.png'
import user7 from '/assets/images/avatar/user-7.png'
import user8 from '/assets/images/avatar/user-8.png'
import user9 from '/assets/images/avatar/user-9.png'
import user10 from '/assets/images/avatar/user-10.png'
import user11 from '/assets/images/avatar/user-11.png'

// Initialize Alpine.js
document.addEventListener("alpine:init", () => {
    Alpine.data("apexTreeApp", () => ({
        init() {
            this.colorCodes = getColorCodes(this.$refs.apexTreeContainer.dataset);
            this.initializeTreeData();
            this.renderTree();

            // Reload tree on window resize
            window.addEventListener('resize', this.reloadTree.bind(this));
        },
        colorCodes: [],
        initializeTreeData() {
            this.treeData = {
                id: 'Lucas_Alex',
                data: {
                    name: 'Omer Sporer',
                    imageURL: user1,
                },
                options: {
                    nodeBGColor: this.colorCodes[3],
                    nodeBGColorHover: this.colorCodes[3],
                },
                children: [
                    {
                        id: 'Alex_Lee',
                        data: {
                            name: 'Reva Botsford',
                            imageURL: user2,
                        },
                        options: {
                            nodeBGColor: this.colorCodes[4],
                            nodeBGColorHover: this.colorCodes[4],
                        },
                        children: [
                            {
                                id: 'Mia_Patel',
                                data: {
                                    name: 'Tyshawn Marquardt',
                                    imageURL: user3,
                                },
                                options: {
                                    nodeBGColor: this.colorCodes[5],
                                    nodeBGColorHover: this.colorCodes[5],
                                },
                            },
                            {
                                id: 'Ryan_Clark',
                                data: {
                                    name: 'Kailey Corkery',
                                    imageURL: user4,
                                },
                                options: {
                                    nodeBGColor: this.colorCodes[5],
                                    nodeBGColorHover: this.colorCodes[5],
                                },
                            },
                            {
                                id: 'Zoe_Wang',
                                data: {
                                    name: 'Zoe Wang',
                                    imageURL: user5,
                                },
                                options: {
                                    nodeBGColor: this.colorCodes[5],
                                    nodeBGColorHover: this.colorCodes[5],
                                },
                            },
                        ],
                    },
                    {
                        id: 'Leo_Kim',
                        data: {
                            name: 'Hardy Maggio',
                            imageURL: user6,
                        },
                        options: {
                            nodeBGColor: this.colorCodes[6],
                            nodeBGColorHover: this.colorCodes[6],
                        },
                        children: [
                            {
                                id: 'Ava_Jones',
                                data: {
                                    name: 'Adelle Abbott',
                                    imageURL: user7,
                                },
                                options: {
                                    nodeBGColor: this.colorCodes[7],
                                    nodeBGColorHover: this.colorCodes[7],
                                },
                            },
                            {
                                id: 'Maya_Gupta',
                                data: {
                                    name: 'Vincenzo Hirthe',
                                    imageURL: user8,
                                },
                                options: {
                                    nodeBGColor: this.colorCodes[7],
                                    nodeBGColorHover: this.colorCodes[7],
                                },
                            },
                        ],
                    },

                    {
                        id: 'Lily_Chen',
                        data: {
                            name: 'Idella Heaney',
                            imageURL: user9,
                        },
                        options: {
                            nodeBGColor: this.colorCodes[8],
                            nodeBGColorHover: this.colorCodes[8],
                        },
                        children: [
                            {
                                id: 'Jake_Scott',
                                data: {
                                    name: 'Lambert Schoen',
                                    imageURL: user10,
                                },
                                options: {
                                    nodeBGColor: this.colorCodes[9],
                                    nodeBGColorHover: this.colorCodes[9],
                                },
                            },
                        ],
                    },
                    {
                        id: 'Max_Ruiz',
                        data: {
                            name: 'Cornelius Harris',
                            imageURL: user11,
                        },
                        options: {
                            nodeBGColor: this.colorCodes[10],
                            nodeBGColorHover: this.colorCodes[10],
                        },
                    },
                ],
            },
                this.treeOptions = {
                    contentKey: 'data',
                    width: '100%',
                    height: 700,
                    nodeWidth: 150,
                    nodeHeight: 70,
                    childrenSpacing: 70,
                    siblingSpacing: 30,
                    fontSize: '12px',
                    direction: 'left',
                    borderRadius: 0,
                    nodeBGColor: this.colorCodes[2],
                    nodeBGColorHover: this.colorCodes[2],
                    fontColor: this.colorCodes[1],
                    borderColor: this.colorCodes[0],
                    edgeColor: this.colorCodes[0],
                    edgeColorHover: this.colorCodes[0],
                    tooltipBorderColor: this.colorCodes[0],
                    nodeTemplate: (content) => {
                        return `<div class="flex items-center h-full gap-2 px-4 shadow-lg rounded-t-md">
                        <img class="rounded-full size-8" src='${content.imageURL}' alt=''>
                        <h6 class="text-xs text-gray-500 dark:text-dark-100">${content.name}</h6>
                       </div>`;
                    },
                    enableToolbar: true,
                }
        },

        renderTree() {
            if (this.$refs.apexTreeContainer) {
                this.$refs.apexTreeContainer.innerHTML = ''; // Clear the container
            }

            // Initialize new tree
            this.apexTree = new ApexTree(this.$refs.apexTreeContainer, this.treeOptions);
            this.apexTree.render(this.treeData);
        },
        reloadTree() {
            // Handle the logic for resizing
            this.renderTree(); // Re-render tree on resize
        },
    }));
});