pages/_includes/scripts/echarts.liquid
George 1a7fddecf8
Fix code blocks not changing to plots and others (#2497)
For some unknown reason, all the `document.onreadystatechange = () => {`
checks stopped working. Thankfully, replacing them with
`document.addEventListener("readystatechange", () => {` fixed the
issues.

---------

Signed-off-by: George Araujo <george.gcac@gmail.com>
2024-06-11 14:06:38 -03:00

46 lines
1.7 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 echartsTheme = 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.addEventListener('readystatechange', () => {
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 (echartsTheme === '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 %}