ApexTree

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

Install from Yarn

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

yarn add 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.

+page.svelte

<script> 
import ApexTree from '$lib/components/common/ApexTree.svelte';
<ApexTree
colors={[
	'bg-gray-200',
	'bg-white',
	'bg-primary-500',
	'bg-purple-500',
	'bg-yellow-500',
	'bg-gray-800',
	'bg-orange-500',
	'bg-green-500',
	'bg-pink-500'
]}
darkColors={[
	'bg-dark-800',
	'bg-white',
	'bg-primary-500',
	'bg-purple-500',
	'bg-yellow-500',
	'bg-dark-800',
	'bg-orange-500',
	'bg-green-500',
	'bg-pink-500'
]}
options={topBottomOption}
data={topBottomData}
/>

ApexTree.svelte (component)

<script lang="ts">
import { getColorCodes } from '$lib/utils/chart-color';
import { layoutStore } from '$lib/stores/layout';
//@ts-ignore
import ApexTree from 'apextree';
import { onDestroy, onMount } from 'svelte';

export let options: any;
export let data: any;
export let colors: string[] = [];
export let darkColors: string[] | undefined = undefined;
let apexTreeContainer: HTMLElement;
let tree: ApexTree;
let colorCodes: string[];

function getColorOption(index: number) {
    if (index >= colorCodes.length) {
        return {
            borderColor: '',
            nodeBGColor: '',
            nodeBGColorHover: ''
        };
    }

    return {
        borderColor: colorCodes[index],
        nodeBGColor: colorCodes[index],
        nodeBGColorHover: colorCodes[index]
    };
}

// Recursive function to traverse the tree and set options
function setColorOptions(data: any, index: number): void {
    // Set options on the current node
    data.options = getColorOption(index);
    data.borderColor = getColorOption(index).borderColor;
    // If the node has children, recursively set options for each child
    if (data.children && data.children.length > 0) {
        data.children.forEach((child: any, childIndex: number) => {
            // Pass an incremented index for the children
            setColorOptions(child, index + 1);
        });
    }
}

function renderTree() {
    if (options && data && apexTreeContainer && ApexTree) {
        setColorOptions(data, 2);
        tree = new ApexTree(apexTreeContainer, options);
        tree.render(data);
    }
}

onMount(() => {
    colorCodes = getColorCodes({
        chartColors: colors,
        chartDarkColors: darkColors,
        themeMode: $layoutStore.layoutTheme
    });
    renderTree();
});

onDestroy(() => {
    if (tree && typeof tree.destroy === 'function') {
        tree.destroy();
    }
});

$: $layoutStore.layoutTheme &&
    (colorCodes = getColorCodes({
        chartColors: colors,
        chartDarkColors: darkColors,
        themeMode: $layoutStore.layoutTheme
    }));