<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flows for simulation #{{simulation_id}}</title>
</head>
<body>
  <div id="chart-container" style="height: 100vh"></div>

  {{ chart_data|json_script:"chart_data" }}

  <script src="https://echarts.apache.org/en/js/vendors/echarts/dist/echarts.min.js"></script>

  <script>
    var dom = document.getElementById('chart-container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });

    const data = JSON.parse(document.getElementById("chart_data").textContent);

    const option = {
      series: {
        type: 'sankey',
        nodeGap: 30, // default is 8, increase this to reduce overlap
        data: data.names,
        links: data.links,
        lineStyle: {
          color: 'gradient',
          curveness: 0.5
        }
      }
    };

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>