├── test
    └── index.js
├── .gitignore
├── screenshots
    └── 1.png
├── .travis.yml
├── yarn.lock
├── template.html
├── index.js
├── package.json
├── LICENSE
└── README.md


/test/index.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .history


--------------------------------------------------------------------------------
/screenshots/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shen-yu/hexo-tag-chart/HEAD/screenshots/1.png


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js: stable
3 | 
4 | branches:
5 |   only:
6 |     - master
7 | 


--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2 | # yarn lockfile v1
3 | 
4 | 
5 | lodash@^4.17.19:
6 |   version "4.17.20"
7 |   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
8 |   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
9 | 


--------------------------------------------------------------------------------
/template.html:
--------------------------------------------------------------------------------
 1 | <div style="width: <%- width %>;margin: 0 auto">
 2 |     <canvas id="<%- id %>" style="height: <%- height %>px"></canvas>
 3 | </div>
 4 | <script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.0/dist/Chart.min.js"></script>
 5 | <script type="text/javascript">
 6 |     var ctx = document.getElementById('<%- id %>').getContext('2d');
 7 |     var options = <%= option %>;
 8 |     new Chart(ctx, options);
 9 | </script>
10 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs'),
 2 |     path = require('path'),
 3 |     _ = require('lodash'),
 4 |     filePath = path.join(__dirname, 'template.html');
 5 | 
 6 | function chartsMaps(args, content) {
 7 |     const template = fs.readFileSync(filePath).toString();
 8 |     let options = {};
 9 |     if (content.length) {
10 |         options = content;
11 |     }
12 |     return _.template(template)({
13 |         id: 'chart' + ((Math.random() * 9999) | 0),
14 |         option: options,
15 |         width: args[0] || '100%',
16 |         height: args[1] || 300
17 |     });
18 | };
19 | 
20 | hexo.extend.tag.register('chart', chartsMaps, {
21 |     async: true,
22 |     ends: true
23 | });


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hexo-tag-chart",
 3 |   "version": "1.0.8",
 4 |   "description": "A simple plugin for inserting Chartjs by using tags in Hexo.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "make test",
 8 |     "deploy": "npm version patch && npm publish"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/Shen-Yu/hexo-tag-chart.git"
13 |   },
14 |   "keywords": [
15 |     "hexo",
16 |     "chart"
17 |   ],
18 |   "author": "Shen-Yu",
19 |   "license": "MIT",
20 |   "dependencies": {
21 |     "lodash": "^4.17.19"
22 |   },
23 |   "bugs": {
24 |     "url": "https://github.com/Shen-Yu/hexo-tag-chart/issues"
25 |   },
26 |   "homepage": "https://github.com/Shen-Yu/hexo-tag-chart"
27 | }
28 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Eric Shen
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # hexo-tag-chart
 2 | 
 3 | ![npm](https://img.shields.io/npm/v/hexo-tag-chart)
 4 | ![npm](https://img.shields.io/npm/dt/hexo-tag-chart)
 5 | 
 6 | Insert [Chartjs](https://www.chartjs.org/) in Hexo site by using tags.
 7 | 
 8 | English | [中文说明](https://ayer.886622.xyz/2020/chartjs/)
 9 | 
10 | ## Install 
11 | 
12 | ```bash
13 | $ npm install hexo-tag-chart --save
14 | ```
15 | 
16 | ## Usage
17 | 
18 | ```
19 | {% chart [width] [height] %}
20 | \\Chartjs options goes here
21 | {% endchart %}
22 | ```
23 | 
24 | |  Name   | Type  | Default  | Description  |
25 | |  ----  | ----  | ----  | ----  |
26 | | width  | decimal | 100% | The width of chart, responsive in window.  |
27 | | height  | number | 300 | The height of chart (px). |
28 | 
29 | ## Example
30 | 
31 | ### Line
32 | 
33 | ```
34 | {% chart 80% 300 %}
35 | {
36 |     type: 'line',
37 |     data: {
38 |         labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
39 |         datasets: [{
40 |             label: 'My First dataset',
41 |             backgroundColor: 'rgb(255, 99, 132)',
42 |             borderColor: 'rgb(255, 99, 132)',
43 |             data: [0, 10, 5, 2, 20, 30, 45]
44 |         }]
45 |     },
46 |     options: {
47 |         responsive: true,
48 |         title: {
49 |             display: true,
50 |             text: 'Chart.js Line Chart'
51 |         }
52 |     }
53 | };
54 | {% endchart %}
55 | ```
56 | 
57 | ![line chart](screenshots/1.png)
58 | 
59 | 
60 | ## For more details, visit [Demo](https://ayer.886622.xyz/2020/chartjs/) here.
61 | 


--------------------------------------------------------------------------------