There are few options on how to include/import ApexTree into your project:
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.
PHP
<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.innerPHP = ''; // 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 }, })); });
Be the first to know about new updates and exclusive discounts. No spam, just great offers!
How about
With over 7 years of experienced team, we specialize in delivering custom projects for startups, blue-chip companies, and government agencies. We have successfully completed over 250+ projects, providing tailored solutions that meet the unique needs of each client.
Hire Us© Domiex Created & Crafted by SRBThemes.