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 <[email protected]>
alshedivat · 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(() => {