feat: roughViz.js

example/.vuepress/config.js

@@ -144,7 +144,8 @@ module.exports = {
     ],
     '@renovamen/vuepress-plugin-katex',
     '@renovamen/vuepress-plugin-mermaid',
-    'vuepress-plugin-chart'
+    'vuepress-plugin-chart',
+    'vuepress-plugin-roughviz'
   ],
   markdown: {
     // lineNumbers: true,

example/docs/README.md

@@ -39,7 +39,7 @@ Gungnir 最初是一个基于 [Jekyll](https://jekyllrb.com/) 的主题，在 [H
 - 文章目录
 - 代码高亮渲染，支持代码块全屏（从 WordPress 主题 [Sakura](https://github.com/mashirozx/Sakura) 搬过来的功能）
 - 基于 [Katex](https://github.com/KaTeX/KaTeX) 的公式支持
-- 在文章中使用图表，目前支持 [Chart.js](https://www.chartjs.org) 和 [Mermaid](https://mermaid-js.github.io)
+- 在文章中使用图表：[Chart.js](https://www.chartjs.org)、[Mermaid](https://mermaid-js.github.io) 和 [roughViz.js](https://github.com/jwilber/roughViz)
 - 文章中的一些附加样式，目前支持：
   - 脚注（基于 [markdown-it-footnote](https://github.com/markdown-it/markdown-it-footnote)）
   - 高亮（基于 [markdown-it-mark](https://github.com/markdown-it/markdown-it-mark)）

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

@@ -119,6 +119,20 @@ sequenceDiagram
     end
 ```
 
+### roughViz.js
+
+```roughviz-donut
+{
+    "data": {
+        "labels": ["North", "South", "East", "West"],
+        "values": [10, 5, 8, 3]
+    },
+    "title": "Regions",
+    "colors": ["red", "orange", "blue", "skyblue"],
+    "roughness": 4
+}
+```
+
 
 ## Images
 

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

@@ -122,6 +122,20 @@ sequenceDiagram
     end
 ```
 
+### roughViz.js
+
+```roughviz-donut
+{
+    "data": {
+        "labels": ["North", "South", "East", "West"],
+        "values": [10, 5, 8, 3]
+    },
+    "title": "Regions",
+    "colors": ["red", "orange", "blue", "skyblue"],
+    "roughness": 4
+}
+```
+
 
 ## Images
 

packages/plugins/chart/README.md

@@ -32,7 +32,8 @@ module.exports = {
 
 Then you can use [Chart.js](https://www.chartjs.org) in Markdown:
 
-<pre><code>```chart
+~~~json
+```chart
 {
   "type": "bar",
   "data": {
@@ -70,7 +71,7 @@ Then you can use [Chart.js](https://www.chartjs.org) in Markdown:
   }
 }
 ```
-</code></pre>
+~~~
 
 &nbsp;
 

packages/plugins/chart/lib/Chart.vue

@@ -8,7 +8,7 @@
 import Chart from 'chart.js'
 
 export default {
-  name: 'chart',
+  name: 'Chart',
   props: {
     id: {
       type: String,

packages/plugins/mermaid/README.md

@@ -32,14 +32,15 @@ module.exports = {
 
 Then you can use [Mermaid](https://mermaid-js.github.io) in Markdown:
 
-<pre><code>```mermaid
+~~~markdown
+```mermaid
 sequenceDiagram
   Alice->John: Hello John, how are you?
   loop Every minute
     John-->Alice: Great!
   end
 ```
-</code></pre>
+~~~
 
 &nbsp;
 

packages/plugins/mermaid/lib/Mermaid.vue

@@ -6,7 +6,7 @@
 
 <script>
 export default {
-  name: 'mermaid',
+  name: 'Mermaid',
   props: {
     id: {
       type: String,

packages/plugins/roughviz/LICENSE

@@ -0,0 +1,21 @@
+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.

packages/plugins/roughviz/README.md

@@ -0,0 +1,65 @@
+# vuepress-plugin-roughviz
+
+A plugin for adding [roughViz.js](https://github.com/jwilber/roughViz) to [VuePress](https://vuepress.vuejs.org/).
+
+ 
+
+## Installation
+
+Install this plugin with:
+
+```bash
+yarn add vuepress-plugin-roughviz
+# or
+npm install vuepress-plugin-roughviz
+```
+
+And add it to your `.vuepress/config.js`:
+
+```js
+module.exports = {
+  plugins: [
+    [
+      'vuepress-plugin-roughviz'
+    ]
+  ]
+}
+```
+
+ 
+
+## Usage
+
+Then you can use [roughViz.js](https://github.com/jwilber/roughViz) in Markdown.
+
+roughViz.js supports the following chart types:
+
+- Bar (`bar`)
+- Horizontal Bar (`barh`)
+- Donut (`donut`)
+- Line (`line`)
+- Pie (`pie`)
+- Scatter (`scater`)
+- Stacked Bar (`stackedbar`)
+
+So the format of your code block's `token.info` should be `roughviz-{ chart-type }`. For example, to draw a Donut chart:
+
+~~~json
+```roughviz-donut
+{
+  "data": {
+    "labels": ["North", "South", "East", "West"],
+    "values": [10, 5, 8, 3]
+  },
+  "title": "Regions",
+  "colors": ["red", "orange", "blue", "skyblue"],
+  "roughness": 4
+}
+```
+~~~
+
+ 
+
+## License
+
+[MIT](LICENSE)

packages/plugins/roughviz/enhanceApp.js

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

packages/plugins/roughviz/index.js

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

packages/plugins/roughviz/lib/Roughviz.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="vuepress-roughviz-container">
+    <div :id="id" class="vuepress-roughviz"></div>
+  </div>
+</template>
+
+<script>
+import {
+  Bar,
+  BarH,
+  Donut,
+  Line,
+  Pie,
+  Scatter,
+  StackedBar
+} from "rough-viz/dist/roughviz.min.js";
+
+export default {
+  name: 'Roughviz',
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    chart: {
+      type: String,
+      required: true
+    },
+    code: {
+      type: String,
+      required: true
+    }
+  },
+  mounted () {
+    let data = JSON.parse(this.code);
+    data.element = `#${this.id}`;
+
+    switch(this.chart) {
+      case 'bar':
+        new Bar(data);
+        break;
+      case 'barh':
+        new BarH(data);
+        break;
+      case 'donut':
+        new Donut(data);
+        break;
+      case 'line':
+        new Line(data);
+        break;
+      case 'pie':
+        new Pie(data);
+        break;
+      case 'scatter':
+        new Scatter(data);
+        break;
+      case 'stackedbar':
+        new StackedBar(data);
+        break;
+    } 
+  }
+}
+</script>
+
+<style lang="stylus">
+.vuepress-roughviz-container
+  margin 30px 0
+  text-align center
+  .vuepress-roughviz
+    overflow scroll
+    display inline-block
+</style>

packages/plugins/roughviz/lib/markdown-it-roughviz.js

@@ -0,0 +1,28 @@
+const { hash } = require('@vuepress/shared-utils')
+
+const validType = ['bar', 'barh', 'donut', 'line', 'pie', 'scatter', 'stackedbar']
+
+const mermaid = (md) => {
+  const temp = md.renderer.rules.fence.bind(md.renderer.rules);
+  md.renderer.rules.fence = (tokens, idx, options, env, slf) => {
+    const token = tokens[idx];
+    const name = token.info.split('-')[0]
+    const type = token.info.split('-')[1]
+
+    if (name === 'roughviz' && validType.includes(type)) {
+      try {
+        const key = `roughviz_${type}_${hash(idx)}`;
+        const code = token.content.trim();
+
+        md.$dataBlock[key] = code;
+        return `<Roughviz id="${key}" chart="${type}" :code="$dataBlock.${key}"></Roughviz>`;
+      }
+      catch (err) {
+        return `<pre>${err}</pre>`
+      }
+    }
+    return temp(tokens, idx, options, env, slf);
+  }
+}
+
+module.exports = mermaid;

packages/plugins/roughviz/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "vuepress-plugin-roughviz",
+  "version": "0.1.0",
+  "description": "A plugin for adding roughViz.js to VuePress.",
+  "author": "Renovamen <renovamenzxh@gmail.com>",
+  "main": "index.js",
+  "keywords": [
+    "vue",
+    "vuepress",
+    "vuepress-plugin",
+    "rough-viz",
+    "roughviz",
+    "roughviz.js"
+  ],
+  "homepage": "https://github.com/Renovamen/vuepress-theme-gungnir/tree/main/packages/plugins/roughviz",
+  "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/plugins/roughviz"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "rough-viz": "^1.0.6"
+  }
+}