feat: chart.js

example/.vuepress/config.js

@@ -143,6 +143,7 @@ module.exports = {
       }
     ],
     '@renovamen/vuepress-plugin-katex',
+    '@renovamen/vuepress-plugin-chart'
   ],
   markdown: {
     // lineNumbers: true,

example/posts/2020-10-29-hello-word.md

@@ -65,6 +65,51 @@ while True:
     me.eat(10)
 ```
 
+
+## Charts
+
+### Chart.js
+
+```chart
+{
+    "type": "bar",
+    "data": {
+        "labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+        "datasets": [{
+            "label": "# of Votes",
+            "data": [12, 19, 3, 5, 2, 3],
+            "backgroundColor": [
+                "rgba(255, 99, 132, 0.2)",
+                "rgba(54, 162, 235, 0.2)",
+                "rgba(255, 206, 86, 0.2)",
+                "rgba(75, 192, 192, 0.2)",
+                "rgba(153, 102, 255, 0.2)",
+                "rgba(255, 159, 64, 0.2)"
+            ],
+            "borderColor": [
+                "rgba(255, 99, 132, 1)",
+                "rgba(54, 162, 235, 1)",
+                "rgba(255, 206, 86, 1)",
+                "rgba(75, 192, 192, 1)",
+                "rgba(153, 102, 255, 1)",
+                "rgba(255, 159, 64, 1)"
+            ],
+            "borderWidth": 1
+        }]
+    },
+    "options": {
+        "scales": {
+            "yAxes": [{
+                "ticks": {
+                    "beginAtZero": true
+                }
+            }]
+        }
+    }
+}
+```
+
+
 ## Images
 
 ![Image Example](/img/home-bg/3.jpg)

example/posts/2020-10-30-hello-word-with-header-image.md

@@ -68,6 +68,51 @@ while True:
     me.eat(10)
 ```
 
+
+## Charts
+
+### Chart.js
+
+```chart
+{
+    "type": "bar",
+    "data": {
+        "labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+        "datasets": [{
+            "label": "# of Votes",
+            "data": [12, 19, 3, 5, 2, 3],
+            "backgroundColor": [
+                "rgba(255, 99, 132, 0.2)",
+                "rgba(54, 162, 235, 0.2)",
+                "rgba(255, 206, 86, 0.2)",
+                "rgba(75, 192, 192, 0.2)",
+                "rgba(153, 102, 255, 0.2)",
+                "rgba(255, 159, 64, 0.2)"
+            ],
+            "borderColor": [
+                "rgba(255, 99, 132, 1)",
+                "rgba(54, 162, 235, 1)",
+                "rgba(255, 206, 86, 1)",
+                "rgba(75, 192, 192, 1)",
+                "rgba(153, 102, 255, 1)",
+                "rgba(255, 159, 64, 1)"
+            ],
+            "borderWidth": 1
+        }]
+    },
+    "options": {
+        "scales": {
+            "yAxes": [{
+                "ticks": {
+                    "beginAtZero": true
+                }
+            }]
+        }
+    }
+}
+```
+
+
 ## Images
 
 ![Image Example](/img/home-bg/3.jpg)

packages/@renovamen/vuepress-plugin-baidu-tongji/LICENSE

@@ -22,7 +22,7 @@ THE SOFTWARE.
 
 -----------------------------------------------------------------------------
 
-@renovamen/vuepress-plugin-google-analytics is using the part of the following
+@renovamen/vuepress-plugin-baidu-tongji is using the part of the following
 codes with the following licenses:
 
 MIT License

packages/@renovamen/vuepress-plugin-chart/LICENSE

@@ -0,0 +1,31 @@
+MIT License
+
+Copyright (c) 2021 Xiaohan Zou (@Renovamen)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-----------------------------------------------------------------------------
+
+@renovamen/vuepress-plugin-chart is using the part of the following codes with
+the following licenses:
+
+MIT License
+Copyright (c) 2016 Waylon Flinn
+markdown-it-katex: https://github.com/waylonflinn/markdown-it-katex
+License: https://github.com/waylonflinn/markdown-it-katex/blob/master/LICENSE

packages/@renovamen/vuepress-plugin-chart/README.md

@@ -0,0 +1,75 @@
+# @renovamen/vuepress-plugin-chart
+
+A plugin for adding [Chart.js](https://www.chartjs.org) to VuePress.
+
+ 
+
+## Usage
+
+Install:
+
+```bash
+yarn add @renovamen/vuepress-plugin-chart
+# or
+npm install @renovamen/vuepress-plugin-chart
+```
+
+Add this plugin to your `.vuepress/config.js`:
+
+```js
+module.exports = {
+  plugins: [
+    [
+      '@renovamen/vuepress-plugin-chart'
+    ]
+  ]
+}
+```
+
+Then you can use [Chart.js](https://www.chartjs.org) in Markdown:
+
+<pre><code class="json">```chart
+{
+  "type": "bar",
+  "data": {
+    "labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+    "datasets": [{
+      "label": "# of Votes",
+      "data": [12, 19, 3, 5, 2, 3],
+      "backgroundColor": [
+        "rgba(255, 99, 132, 0.2)",
+        "rgba(54, 162, 235, 0.2)",
+        "rgba(255, 206, 86, 0.2)",
+        "rgba(75, 192, 192, 0.2)",
+        "rgba(153, 102, 255, 0.2)",
+        "rgba(255, 159, 64, 0.2)"
+      ],
+      "borderColor": [
+        "rgba(255, 99, 132, 1)",
+        "rgba(54, 162, 235, 1)",
+        "rgba(255, 206, 86, 1)",
+        "rgba(75, 192, 192, 1)",
+        "rgba(153, 102, 255, 1)",
+        "rgba(255, 159, 64, 1)"
+      ],
+      "borderWidth": 1
+    }]
+  },
+  "options": {
+    "scales": {
+      "yAxes": [{
+        "ticks": {
+          "beginAtZero": true
+        }
+      }]
+    }
+  }
+}
+```
+</code></pre>
+
+&nbsp;
+
+## License
+
+[MIT](LICENSE)

packages/@renovamen/vuepress-plugin-chart/enhanceApp.js

@@ -0,0 +1,6 @@
+import Chart from './lib/Chart';
+
+export default function (ctx) {
+  const { Vue } = ctx;
+  Vue.component('Chart', Chart);
+}

packages/@renovamen/vuepress-plugin-chart/index.js

@@ -0,0 +1,14 @@
+const path = require('path')
+const chart = require('./lib/markdown-it-chart')
+
+module.exports = (options, ctx) => {
+  return {
+    name:'@renovamen/vuepress-plugin-chart',
+    enhanceAppFiles: path.resolve(__dirname, './enhanceApp.js'),
+    chainMarkdown(config) {
+      config
+        .plugin('chart')
+        .use(chart)
+    }
+  }
+}

packages/@renovamen/vuepress-plugin-chart/lib/Chart.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="vuepress-chartjs">
+    <canvas ref="chartjs"></canvas>
+  </div>
+</template>
+
+<script>
+import Chart from 'chart.js'
+
+export default {
+  name: 'chart',
+  props: {
+    code: {
+      type: String,
+      required: true
+    }
+  },
+  mounted () {
+    const data = JSON.parse(this.code);
+    const ctx = this.$refs.chartjs.getContext('2d');
+    new Chart(ctx, data);
+  }
+}
+</script>
+
+<style lang="stylus">
+.vuepress-chartjs
+  margin 30px 0
+</style>

packages/@renovamen/vuepress-plugin-chart/lib/markdown-it-chart.js

@@ -0,0 +1,24 @@
+const { hash } = require('@vuepress/shared-utils')
+
+const chart = (md) => {
+  const temp = md.renderer.rules.fence.bind(md.renderer.rules);
+  md.renderer.rules.fence = (tokens, idx, options, env, slf) => {
+    const token = tokens[idx];
+
+    if (token.info === 'chart') {
+      try {
+        const key = `chart_${hash(idx)}`;
+        const code = token.content.trim();
+
+        md.$dataBlock[key] = code;
+        return `<Chart :code="$dataBlock.${key}"></Chart>`;
+      }
+      catch (err) {
+        return `<pre>${err}</pre>`
+      }
+    }
+    return temp(tokens, idx, options, env, slf);
+  }
+}
+
+module.exports = chart;

packages/@renovamen/vuepress-plugin-chart/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@renovamen/vuepress-plugin-chart",
+  "version": "0.1.0",
+  "description": "A plugin for adding Chart.js to VuePress.",
+  "author": "Renovamen <renovamenzxh@gmail.com>",
+  "main": "index.js",
+  "keywords": [
+    "vue",
+    "vuepress",
+    "vuepress-plugin",
+    "chart",
+    "chartjs"
+  ],
+  "homepage": "https://github.com/Renovamen/vuepress-theme-gungnir/tree/main/packages/@renovamen/vuepress-plugin-chart",
+  "bugs": {
+    "url": "https://github.com/Renovamen/vuepress-theme-gungnir/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Renovamen/vuepress-theme-gungnir.git",
+    "directory": "packages/@renovamen/vuepress-plugin-chart"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "chart.js": "^2.9.4"
+  }
+}

packages/theme-gungnir/package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "oh-vue-icons": "^0.1.7",
+    "@renovamen/vuepress-plugin-chart": "^0.1.0",
     "@renovamen/vuepress-plugin-katex": "^0.1.0",
     "@renovamen/vuepress-plugin-baidu-tongji": "^0.1.0",
     "@renovamen/vuepress-plugin-md-plus": "^0.1.0",