{{/*
    Docs: https://docs.hugoblox.com/content/writing-markdown-latex/#charts

    Parameters
    ----------
    data :
        Plotly JSON file name (without ".json" extension, since it is appended automatically to the name).
        Expects the JSON file to be placed in the page folder.(.Get "data")
*/}}

{{ $json := printf "./%s.json" (.Get "data") }}
{{ $id := delimit (shuffle (seq 1 9)) "" }}
<div id="chart-{{$id}}" class="chart"></div>
<script>
  async function fetchChartJSON() {
    console.debug('Wowchemy fetching chart JSON...')
    const response = await fetch('{{$json}}');
    return await response.json();
  }

  (function() {
    let a = setInterval( function() {
      if ( typeof window.Plotly === 'undefined' ) {
        console.debug('Plotly not loaded yet...')
        return;
      }
      clearInterval( a );

      fetchChartJSON().then(chart => {
        console.debug('Plotting chart...')
        window.Plotly.newPlot('chart-{{$id}}', chart.data, chart.layout, {responsive: true});
      });
    }, 500 );
  })();
</script>