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.
HTML
<template class="border border-gray-200 rounded-md dark:border-dark-800"> <div ref="apexTreeContainer" class="w-full" :style="{ height: '600px' }"></div> </template>
JavaScript
<script> // @ts-ignore import ApexTree from 'apextree'; // Assuming this is available as an npm package or you can import it // @ts-ignore import { useStore } from 'vuex' import user4 from '@/assets/images/avatar/user-4.png'; import user11 from '@/assets/images/avatar/user-11.png'; import user13 from '@/assets/images/avatar/user-13.png'; import user14 from '@/assets/images/avatar/user-14.png'; import user15 from '@/assets/images/avatar/user-15.png'; import user16 from '@/assets/images/avatar/user-16.png'; import user17 from '@/assets/images/avatar/user-17.png'; const store = useStore() interface TreeNode { id: string; data: { imageURL: string; name: string; }; options: { nodeBGColor: string; nodeBGColorHover: string; hideRootLine?: boolean; }; children?: TreeNode[]; } const apexTreeContainer = ref<HTMLElement | null>(null); const theme = computed(() => store.getters.layoutTheme); const colorCodes = computed(() => { return theme.value === 'light' ? [ '#f3f4f6', '#6b7280', '#ffffff', '#DAEDFF', '#F3E8FF', '#FEF9C3', '#F1F5F9', '#FFEDD5', '#DCFCE7', '#FCE7F3', '#E0E7FF' ] : [ '#000000', '#0e0e0e', '#ffffff', '#358FFC', '#A855F7', '#EAB308', '#161C30', '#F97316', '#22C55E', '#EC4899', '#6366F1' ] }) const treeData = ref<TreeNode>({ id: 'ms', data: { imageURL: user4, name: 'Jordan Davis', }, options: { nodeBGColor: colorCodes.value[2], nodeBGColorHover: colorCodes.value[2], }, children: [ { id: 'mh', data: { imageURL: user11, name: 'Chris Wilson' }, options: { nodeBGColor: colorCodes.value[3], nodeBGColorHover: colorCodes.value[3], }, children: [ { id: 'kb', data: { imageURL: user13, name: 'Alex Lee' }, options: { nodeBGColor: colorCodes.value[4], nodeBGColorHover: colorCodes.value[4], }, }, { id: 'cr', data: { imageURL: user14, name: 'Taylor Wilson' }, options: { nodeBGColor: colorCodes.value[5], nodeBGColorHover: colorCodes.value[5], }, }, ], }, { id: 'cs', data: { imageURL: user15, name: 'Jane Brown' }, options: { nodeBGColor: colorCodes.value[6], nodeBGColorHover: colorCodes.value[6], }, children: [ { id: 'Noah_Chandler', data: { imageURL: user16, name: 'John Garcia' }, options: { nodeBGColor: colorCodes.value[7], nodeBGColorHover: colorCodes.value[7], }, }, { id: 'Felix_Wagner', data: { imageURL: user17, name: 'Cameron Wilson' }, options: { nodeBGColor: colorCodes.value[8], nodeBGColorHover: colorCodes.value[8], }, }, ], }, ], }); const treeOptions = ref({ contentKey: 'data', width: '100%', height: 600, nodeWidth: 150, nodeHeight: 120, fontColor: colorCodes.value[1], borderColor: colorCodes.value[0], edgeColor: colorCodes.value[0], edgeColorHover: colorCodes.value[2], tooltipBorderColor: colorCodes.value[0], childrenSpacing: 50, siblingSpacing: 20, direction: 'top', nodeTemplate: (content: any) => ` <div class="flex flex-col items-center justify-center gap-5 p-3"> <img class="rounded-full size-12" src="${content.imageURL}" alt="" /> <h6>${content.name}</h6> </div> `, enableToolbar: true, // Add additional custom options as needed }); const apexTreeInstance = ref<ApexTree | null>(null); // Function to hide the root line when clicked const toggleRootLineVisibility = (nodeId: string) => { const toggleVisibility = (node: TreeNode) => { if (node.id === nodeId) { node.options.hideRootLine = !node.options.hideRootLine; } if (node.children) { node.children.forEach(toggleVisibility); } }; toggleVisibility(treeData.value); renderTree(); // Re-render after toggle }; // Render the tree const renderTree = () => { if (apexTreeContainer.value) { apexTreeContainer.value.innerHTML = ''; // Clear the container } // Initialize new tree apexTreeInstance.value = new ApexTree(apexTreeContainer.value!, treeOptions.value); apexTreeInstance.value.render(treeData.value); }; // Handle resize const resizeHandler = () => { renderTree(); // Re-render tree on resize }; onMounted(() => { renderTree(); window.addEventListener('resize', resizeHandler); }); watch(colorCodes, () => { renderTree(); // Re-render when color codes change }); </script>
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.