ApexSankey

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

Install from Yarn

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

yarn add apexsankey --save

How to import ApexSankey package?

import ApexSankey from 'apexsankey';

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 ApexSankey on any page.

+page.svelte

<ApexsAnkey colors={['bg-gray-800', 'bg-white', 'bg-gray-200']}
darkColors={['bg-dark-100', 'bg-dark-900', 'bg-dark-800']}
options={basicApexankeyOption}
data={basicApexankeyData}
/>

ApexSankey.svelte

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

export let options: any;
export let data: any;
export let colors: string[] = [];
export let darkColors: string[] | undefined = undefined;
let apexSankeyContainer: HTMLElement;
let tree: ApexSankey;
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);

    // 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 renderSankey() {
    if (options && data && apexSankeyContainer && ApexSankey) {
        setColorOptions(data, 2);

        tree = new ApexSankey(apexSankeyContainer, options);
        tree.render(data);
    }
}

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

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