hugo-academic-mirror/modules/blox-tailwind/layouts/shortcodes/chart.html
2023-11-09 14:58:28 +00:00

35 lines
1 KiB
HTML

{{/*
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>