Added Echarts support (#2129)

Since I added support for chart.js and while doing so found some other
wonderful charting libraries, I thought, why not give support to some
more? So adding support to [Apache
Echarts](https://echarts.apache.org/en/index.html).


![image](https://github.com/alshedivat/al-folio/assets/31376482/088f0932-524f-4fcd-a34b-b132f569a675)


![image](https://github.com/alshedivat/al-folio/assets/31376482/36bfe4f8-a9d1-4b6d-a912-fb40ba3b5337)

---------

Signed-off-by: George Araújo <george.gcac@gmail.com>

_includes/scripts/chartjs.liquid

@@ -1,4 +1,4 @@
-{% if page.chart %}
+{% if page.chart and page.chart.chartjs %}
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
   <script>
     $(document).ready(function () {
@@ -6,7 +6,7 @@
         $this = null,
         _ctx = null,
         _text = '';
-      $('.language-chart').each(function () {
+      $('.language-chartjs').each(function () {
         $this = $(this);
         $canvas = $('<canvas></canvas>');
         _text = $this.text();

_includes/scripts/echarts.liquid

@@ -0,0 +1,41 @@
+{% if page.chart and page.chart.echarts %}
+  <script
+    src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"
+    integrity="sha256-EVZCmhajjLhgTcxlGMGUBtQiYULZCPjt0uNTFEPFTRk="
+    crossorigin="anonymous"
+  ></script>
+  {% if site.enable_darkmode %}
+    <script
+      src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/theme/dark-fresh-cut.js"
+      integrity="sha256-UmFIP/4VvOqBDIl2QWl1HBuAJ1XWs/iFZxT5yJRZOKo="
+      crossorigin="anonymous"
+    ></script>
+  {% endif %}
+  <script>
+    let theme = localStorage.getItem('theme');
+
+    /* 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.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 %}

_layouts/default.liquid

@@ -48,7 +48,8 @@
     {% include scripts/bootstrap.liquid %}
     {% include scripts/masonry.liquid %}
     {% include scripts/mermaid.liquid %}
-    {% include scripts/chart.liquid %}
+    {% include scripts/chartjs.liquid %}
+    {% include scripts/echarts.liquid %}
     {% include scripts/misc.liquid %}
     {% include scripts/badges.liquid %}
     {% include scripts/mathjax.liquid %}

_posts/2024-01-26-chartjs.md

@@ -5,13 +5,14 @@ date: 2024-01-26 01:04:00
 description: this is what included chart.js code could look like
 tags: formatting charts
 categories: sample-posts
-chart: true
+chart:
+  chartjs: true
 ---
 
-This is an example post with some chart.js code.
+This is an example post with some [chart.js](https://www.chartjs.org/) code.
 
 ````markdown
-```chart
+```chartjs
 {
   "type": "line",
   "data": {
@@ -64,7 +65,7 @@ This is an example post with some chart.js code.
 
 This is how it looks like:
 
-```chart
+```chartjs
 {
   "type": "line",
   "data": {
@@ -117,7 +118,7 @@ This is how it looks like:
 Also another example chart.
 
 ````markdown
-```chart
+```chartjs
 {
   "type": "doughnut",
   "data": {
@@ -153,7 +154,7 @@ Also another example chart.
 
 Which generates:
 
-```chart
+```chartjs
 {
   "type": "doughnut",
   "data": {

_posts/2024-01-26-echarts.md

@@ -0,0 +1,68 @@
+---
+layout: post
+title: a post with echarts
+date: 2024-01-26 16:03:00
+description: this is what included echarts code could look like
+tags: formatting charts
+categories: sample-posts
+chart:
+  echarts: true
+---
+
+This is an example post with some [echarts](https://echarts.apache.org/) code.
+
+````markdown
+```echarts
+{
+  "title": {
+    "text": "ECharts Getting Started Example"
+  },
+  "responsive": true,
+  "tooltip": {},
+  "legend": {
+    "top": "30px",
+    "data": ["sales"]
+  },
+  "xAxis": {
+    "data": ["Shirts", "Cardigans", "Chiffons", "Pants", "Heels", "Socks"]
+  },
+  "yAxis": {},
+  "series": [
+    {
+      "name": "sales",
+      "type": "bar",
+      "data": [5, 20, 36, 10, 10, 20]
+    }
+  ]
+}
+```
+````
+
+Which generates:
+
+```echarts
+{
+  "title": {
+    "text": "ECharts Getting Started Example"
+  },
+  "responsive": true,
+  "tooltip": {},
+  "legend": {
+    "top": "30px",
+    "data": ["sales"]
+  },
+  "xAxis": {
+    "data": ["Shirts", "Cardigans", "Chiffons", "Pants", "Heels", "Socks"]
+  },
+  "yAxis": {},
+  "series": [
+    {
+      "name": "sales",
+      "type": "bar",
+      "data": [5, 20, 36, 10, 10, 20]
+    }
+  ]
+}
+```
+
+Note that this library offer support for both light and dark themes. You can switch between them using the theme switcher in the top right corner of the page.

_sass/_base.scss

@@ -1081,3 +1081,8 @@ nav[data-toggle="toc"] {
 #toc-sidebar {
   z-index: 1;
 }
+
+.echarts {
+  width: 100%;
+  height: 400px;
+}

assets/js/copy_code.js

@@ -3,7 +3,8 @@ var codeBlocks = document.querySelectorAll("pre");
 codeBlocks.forEach(function (codeBlock) {
   if (
     (codeBlock.querySelector("pre:not(.lineno)") || codeBlock.querySelector("code")) &&
-    codeBlock.querySelector("code:not(.language-chart)") &&
+    codeBlock.querySelector("code:not(.language-chartjs)") &&
+    codeBlock.querySelector("code:not(.language-echarts)") &&
     codeBlock.querySelector("code:not(.language-mermaid)")
   ) {
     // create copy button

assets/js/theme.js

@@ -16,6 +16,10 @@ let setTheme = (theme) => {
   if (typeof mermaid !== "undefined") {
     setMermaidTheme(theme);
   }
+  // if echarts is not defined, do nothing
+  if (typeof echarts !== "undefined") {
+    setEchartsTheme(theme);
+  }
 
   if (theme) {
     document.documentElement.setAttribute("data-theme", theme);
@@ -120,6 +124,22 @@ let setMermaidTheme = (theme) => {
   }
 };
 
+let setEchartsTheme = (theme) => {
+  document.querySelectorAll(".echarts").forEach((elem) => {
+    // Get the code block content from previous element, since it is the echarts code itself as defined in Markdown, but it is hidden
+    let jsonData = elem.previousSibling.childNodes[0].innerHTML;
+    echarts.dispose(elem);
+
+    if (theme === "dark") {
+      var chart = echarts.init(elem, "dark-fresh-cut");
+    } else {
+      var chart = echarts.init(elem);
+    }
+
+    chart.setOption(JSON.parse(jsonData));
+  });
+};
+
 let transTheme = () => {
   document.documentElement.classList.add("transition");
   window.setTimeout(() => {