<!--
Library     : d3blocks
Author      : E.Taskesen, O.Verver
Mail        : erdogant@gmail.com, oliver@sensibly.nl
Github      : https://github.com/d3blocks/d3blocks
Licensed    : GPL3
Forked      : Mike Bostock; https://observablehq.com/@d3/sankey
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ TITLE }}</title>
</head>
<body>

    <form>
        <b>Link-color:</b>
    	<select id="linkColorOptions" onchange="link_color_changed(this.value)">
    	  <option value="source" {{ link_color_select_source }}>Source</option>
    	  <option value="target" {{ link_color_select_target }}>Target</option>
    	  <option value="source-target" {{ link_color_select_source_target }}>Source-Target</option>
    	  <option value="{{ color_static }}">Static color</option>
    	</select>

        <b>Align:</b>
    	<select id="AlignOptions" onchange="align_changed(this.value)">
    	  <option value="left" {{ align_select_left }}>Left</option>
    	  <option value="right" {{ align_select_right }}>Right</option>
    	  <option value="justify" {{ align_select_justify }}>Justify</option>
    	  <option value="center" {{ align_select_center }}>Center</option>
    	</select>
    </form>
    <br>


    <script>
	{% include "sankey.js" %}

	const data = {{ json_data }}

        const links = data.links.map(({source, target, value}) => ({
            source: data.nodes[source].name,
            target: data.nodes[target].name,
            value
        }))

        // Required for the input selection form
        let linkColor="{{ link_color }}" // source, target, source-target
        let align="{{ node_align }}"     // "left", "right", "justify", "center"

        // We need to redraw the chart after changing the selection
        function drawchart() {

            // Set all sankey parameters
            chart = SankeyChart({
                links
            }, {
                nodeGroup: d => d.id.split(/\W/)[0], // take first word for color
                align: align,
                linkColor: linkColor,
                linkStrokeOpacity: {{ link_stroke_opacity }},
                format: (value) => `${value.toFixed(1)}`,
                width: {{ WIDTH }},
                height: {{ HEIGHT }},
                marginTop: {{ marginTop }},
                marginRight: {{ marginRight }},
                marginBottom: {{ marginBottom }},
                marginLeft: {{ marginLeft }},
                nodeWidth: {{ node_width }},
                nodePadding: {{ node_padding }},
                nodeStroke: "{{ node_stroke_color }}",
            })
    
      		// To update the chart based on the selection, we remove the chart and create a new one.
      		for (let svg of document.body.getElementsByTagName("svg")) {
                svg.remove()
      		}
      		
      		// Now we can again create the chart with the updated parameters
            document.body.append(chart)
      		}
            
            // Lets draw it 
            drawchart();
      
        // link_color selection changes. Listen if changes are made (onchange=link_color_changed())
        function link_color_changed(linkColor_value) {
            //console.log(linkColor_value)
            linkColor = linkColor_value
            drawchart();
        }

        // align selection changes. Listen if changes are made (onchange=align_changed())
        function align_changed(align_value) {
            align = align_value
            drawchart();
        }

    </script>

</body>
</html>
