WYGIWYH/app/templates/insights/fragments/sankey.html

{% extends "layouts/base.html" %}

{% block content %}
<canvas id="sankeyChart" height="379"></canvas>

<script>
  function setupSankeyChart(data, chartId = 'sankeyChart') {
    // Format currency value
    function formatCurrency(value, currency) {
        return new Intl.NumberFormat(undefined, {
            minimumFractionDigits: currency.decimal_places,
            maximumFractionDigits: currency.decimal_places
        }).format(value);
    }

    const nodeIndices = {};
    data.nodes.forEach((node, index) => {
        nodeIndices[node.name] = index;
    });

    // Format data for Chart.js
    const chartData = {
        datasets: [{
            data: data.flows.map(flow => ({
                from: flow.from_node,
                to: flow.to_node,
                flow: flow.flow
            })),
            colorMode: 'to',
            labels: data.nodes.map(node => node.name),
            size: 'max',
        }]
    };

    // Chart configuration
    const config = {
        type: 'sankey',
        data: chartData,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                tooltip: {
                    callbacks: {
                        label: (context) => {
                            const flow = data.flows[context.dataIndex];
                            const formattedValue = formatCurrency(flow.original_amount, flow.currency);
                            return [
                                `De: ${flow.from_node}`,
                                `Para: ${flow.to_node}`,
                                `Valor: ${flow.currency.prefix}${formattedValue}${flow.currency.suffix}`,
                                `Porcentagem: ${flow.percentage.toFixed(2)}%`
                            ];
                        }
                    }
                },
                legend: {
                    display: false
                },
                title: {
                    display: true,
                    text: 'Fluxo de Transações',
                    font: {
                        size: 16
                    }
                }
            },
            layout: {
                padding: {
                    top: 20,
                    right: 20,
                    bottom: 20,
                    left: 20
                }
            }
        }
    };

    // Destroy existing chart if it exists
    const existingChart = Chart.getChart(chartId);
    if (existingChart) {
        existingChart.destroy();
    }

    // Create new chart
    return new Chart(
        document.getElementById(chartId),
        config
    );
}

// Usage in Django template or JavaScript file
document.addEventListener('DOMContentLoaded', function() {
    // Assuming you have the Sankey data in a variable called sankeyData
    // For Django template:
    const sankeyData = {{ sankey_data|safe }};
    console.log(sankeyData);

    const chart = setupSankeyChart(sankeyData);

    // Optional: Handle resize
    window.addEventListener('resize', () => {
        chart.resize();
    });
});
</script>
{% endblock %}