pages/_includes/scripts/echarts.liquid
George 08d562a104
Offline mode (closes #1181) (#2312)
Created a plugin to tackle #1181. Currently have an issue with tikzjax
since it imports some wasm file from its javascript. The rest should
work as expected.

---------

Signed-off-by: George Araujo <george.gcac@gmail.com>
2024-04-08 14:51:28 -03:00

46 lines
1.6 KiB
Plaintext

{% if page.chart and page.chart.echarts %}
<script
src="{{ site.third_party_libraries.echarts.url.js.library }}"
integrity="{{ site.third_party_libraries.echarts.integrity.js.library }}"
crossorigin="anonymous"
></script>
{% if site.enable_darkmode %}
<script
src="{{ site.third_party_libraries.echarts.url.js.dark_theme }}"
integrity="{{ site.third_party_libraries.echarts.integrity.js.dark_theme }}"
crossorigin="anonymous"
></script>
{% endif %}
<script>
let theme = determineComputedTheme();
/* Create echarts chart as another node and hide the code block, appending the echarts node after it
this is done to enable retrieving the code again when changing theme between light/dark */
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
document.querySelectorAll('pre>code.language-echarts').forEach((elem) => {
const jsonData = elem.textContent;
const backup = elem.parentElement;
backup.classList.add('unloaded');
/* create echarts node */
let chartElement = document.createElement('div');
chartElement.classList.add('echarts');
backup.after(chartElement);
/* create echarts */
if (theme === 'dark') {
var chart = echarts.init(chartElement, 'dark-fresh-cut');
} else {
var chart = echarts.init(chartElement);
}
chart.setOption(JSON.parse(jsonData));
window.addEventListener('resize', function () {
chart.resize();
});
});
}
};
</script>
{% endif %}