ApexSankey

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

Install from NPM

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

npm install 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.

HTML

<div class="card-body" x-data="apexSankeyApp()" x-init="init()">
    <div x-ref="apexSankeyContainer" data-chart-colors="[bg-gray-800, bg-white, bg-gray-200]" data-chart-dark-colors="[bg-dark-100, bg-dark-900, bg-dark-800]"></div>
</div>

JavaScript

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

document.addEventListener("alpine:init", () => {
    Alpine.data("apexSankeyApp", () => ({
        init() {
            this.colorCodes = getColorCodes(this.$refs.apexSankeyContainer.dataset);
            this.initializeData();
            this.reloadSankey();
            // Reload sankey on window resize
            window.addEventListener('resize', this.reloadSankey.bind(this));
        },
        colorCodes: [],
        initializeData() {
            this.Data = {
                nodes: [
                    {
                        id: 'Oil',
                        title: 'Oil',
                    },
                    {
                        id: 'Natural Gas',
                        title: 'Natural Gas',
                    },
                    {
                        id: 'Coal',
                        title: 'Coal',
                    },
                    {
                        id: 'Fossil Fuels',
                        title: 'Fossil Fuels',
                    },
                    {
                        id: 'Electricity',
                        title: 'Electricity',
                    },
                    {
                        id: 'Energy',
                        title: 'Energy',
                    },
                ],
                edges: [
                    {
                        source: 'Oil',
                        target: 'Fossil Fuels',
                        value: 15,
                    },
                    {
                        source: 'Natural Gas',
                        target: 'Fossil Fuels',
                        value: 20,
                    },
                    {
                        source: 'Coal',
                        target: 'Fossil Fuels',
                        value: 25,
                    },
                    {
                        source: 'Coal',
                        target: 'Electricity',
                        value: 25,
                    },
                    {
                        source: 'Fossil Fuels',
                        target: 'Energy',
                        value: 60,
                    },
                    {
                        source: 'Electricity',
                        target: 'Energy',
                        value: 25,
                    },
                ],
            },
                this.graphOptions = {
                    nodeWidth: 20,
                    fontWeight: 500,
                    fontSize: '10px',
                    height: 300,
                    fontColor: this.colorCodes[0],
                    canvasStyle: '',
                    tooltipBGColor: this.colorCodes[1],
                    tooltipBorderColor: this.colorCodes[2],
                    nodeTemplate: (content) => {
                        `<div class="flex items-center gap-2">
                            <div class="size-3" style='background-color:${source.color}'></div>
                            <h6 class="dark:text-dark-100">${source.title}</h6>
                            <div>=></div>
                            <div class="size-3" style='background-color:${target.color}'></div>
                            <h6 class="dark:text-dark-100">${target.title}</h6>
                            <div>: ${value}</div> 
                        </div>`;
                    },
                }
        },
        renderSankey() {
            if (this.$refs.apexSankeyContainer) {
                this.$refs.apexSankeyContainer.innerHTML = ''; // Clear the container
            }
            // Initialize new sankey
            this.s = new ApexSankey(this.$refs.apexSankeyContainer, this.graphOptions);
            this.s.render(this.Data);
        },
        reloadSankey() {
            // Handle the logic for resizing
            this.renderSankey(); // Re-render sankey on resize
        },
    }));
});