Added Echarts support (alshedivat#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 <[email protected]>
cjang2 · Jan 27, 2024 · 4f6fe1a · 4f6fe1a
1 parent 3ec0ff4
commit 4f6fe1a
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 10 deletions.
diff --git a/_includes/scripts/chart.liquid → _includes/scripts/chartjs.liquid b/_includes/scripts/chart.liquid → _includes/scripts/chartjs.liquid
@@ -1,12 +1,12 @@
-{% if page.chart %}
+{% if page.chart and page.chart.chartjs %}
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
   <script>
     $(document).ready(function () {
       var $canvas = null,
         $this = null,
         _ctx = null,
         _text = '';
-      $('.language-chart').each(function () {
+      $('.language-chartjs').each(function () {
         $this = $(this);
         $canvas = $('<canvas></canvas>');
         _text = $this.text();

diff --git a/_includes/scripts/echarts.liquid b/_includes/scripts/echarts.liquid
@@ -0,0 +1,41 @@
+{% if page.chart and page.chart.echarts %}
+  <script
+    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"
+    integrity="sha256-EVZCmhajjLhgTcxlGMGUBtQiYULZCPjt0uNTFEPFTRk="
+    crossorigin="anonymous"
+  ></script>
+  {% if site.enable_darkmode %}
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/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 %}
diff --git a/_layouts/default.liquid b/_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 %}

diff --git a/_posts/2024-01-26-chartjs.md b/_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": {

diff --git a/_posts/2024-01-26-echarts.md b/_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.
diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -1081,3 +1081,8 @@ nav[data-toggle="toc"] {
 #toc-sidebar {
   z-index: 1;
 }
+
+.echarts {
+  width: 100%;
+  height: 400px;
+}
diff --git a/assets/js/copy_code.js b/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

diff --git a/assets/js/theme.js b/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(() => {