├── .browserslistrc
├── .gitattributes
├── .github
├── scripts
│ └── release.js
└── workflows
│ ├── release.yml
│ └── static.yml
├── .gitignore
├── .npmignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── dist
├── docsify-charty.css
├── docsify-charty.js
├── docsify-charty.min.css
└── docsify-charty.min.js
├── docs
├── CNAME
├── LICENCE
├── charty
│ ├── area-radar.md
│ ├── area-single.md
│ ├── area-stacked.md
│ ├── bar-horizontal-single.md
│ ├── bar-horizontal-stacked.md
│ ├── bar-vertical-single.md
│ ├── bar-vertical-stacked.md
│ ├── bar.md
│ ├── circle-donut.md
│ ├── circle-pie.md
│ ├── circle-rings.md
│ ├── circle-section.md
│ ├── plot-line-single.md
│ ├── plot-line-stacked.md
│ ├── plot-scatter-bubble.md
│ ├── plot-scatter-point.md
│ └── rating.md
├── demo
│ ├── area.jpg
│ ├── bar-stack.jpg
│ ├── bar.jpg
│ ├── bubble.jpg
│ ├── column-stack.jpg
│ ├── column.jpg
│ ├── donut.jpg
│ ├── line-stack.jpg
│ ├── line.jpg
│ ├── pie.jpg
│ ├── radar.jpg
│ ├── rating.jpg
│ ├── rings.jpg
│ ├── scatter.jpg
│ └── section.jpg
├── favicon.ico
├── home.md
├── index.html
└── site
│ ├── 404.md
│ ├── cover.md
│ ├── font
│ ├── config.json
│ ├── mfp.eot
│ ├── mfp.svg
│ ├── mfp.ttf
│ ├── mfp.woff
│ └── mfp.woff2
│ ├── nav.md
│ ├── sidebar.md
│ └── style.min.css
├── package-lock.json
└── package.json
/.browserslistrc:
--------------------------------------------------------------------------------
1 | # browsers we support
2 | last 4 versions
3 | > 0.5%
4 | ie >= 11
5 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/.github/scripts/release.js:
--------------------------------------------------------------------------------
1 | const jsonfile = require('jsonfile');
2 | const fs = require('fs');
3 | const path = require('path');
4 |
5 | const packageFile = './package.json';
6 | const packageData = jsonfile.readFileSync(packageFile);
7 | const currentVersion = packageData.version;
8 | const authorName = packageData.author;
9 | const versionParts = currentVersion.split('.');
10 | let [major, minor, patch] = versionParts.map(Number);
11 | const incrementType = process.argv[2];
12 | switch (incrementType) {
13 | case '-minor':
14 | minor += 1;
15 | patch = 0;
16 | break;
17 | case '-patch':
18 | patch += 1;
19 | break;
20 | case '-major':
21 | major += 1;
22 | minor = 0;
23 | patch = 0;
24 | break;
25 | default:
26 | console.log('Invalid increment type. Please use -minor, -patch, or -major.');
27 | process.exit(1);
28 | }
29 | const newVersion = `${major}.${minor}.${patch}`;
30 | packageData.version = newVersion;
31 | jsonfile.writeFileSync(packageFile, packageData, { spaces: 2 });
32 |
33 | const filesToUpdate = [
34 | "./dist/docsify-charty.js",
35 | "./dist/docsify-charty.min.js",
36 | "./dist/docsify-charty.css",
37 | "./dist/docsify-charty.min.css",
38 | ];
39 |
40 | filesToUpdate.forEach(filePath => {
41 | const fileName = getFileName(filePath);
42 | const header = `/*! ${fileName} ${newVersion} | (c) ${authorName} */\n`;
43 | const fileContent = fs.readFileSync(filePath, 'utf8');
44 | const headerRegex = /^\/\*![\s\S]*?\*\//; // Regular expression to match the header comment
45 | const contentWithoutHeader = fileContent.replace(headerRegex, '');
46 | const updatedContent = header + contentWithoutHeader.trimStart();
47 | fs.writeFileSync(filePath, updatedContent, 'utf8');
48 | console.log(`Header added to ${filePath}.`);
49 | });
50 |
51 | console.log('Header added successfully to all files.');
52 |
53 | const changelogPath = './CHANGELOG.md';
54 | const changelogContent = generateChangelog(newVersion, incrementType);
55 | fs.writeFileSync(changelogPath, changelogContent, 'utf8');
56 | console.log('Changelog generated successfully.');
57 |
58 | function generateChangelog(version, incrementType) {
59 | const currentDate = new Date().toDateString();
60 | const changeDescription = getChangeDescription(incrementType);
61 |
62 | // Read the existing changelog content if it exists
63 | let existingChangelog = '';
64 | if (fs.existsSync(changelogPath)) {
65 | existingChangelog = fs.readFileSync(changelogPath, 'utf8');
66 | }
67 | const newChangelogEntry = `\n## ${version} - ${currentDate}\n\n${changeDescription}\n`;
68 | return newChangelogEntry + existingChangelog;
69 | }
70 |
71 | function getChangeDescription(incrementType) {
72 | switch (incrementType) {
73 | case '-minor':
74 | return '### Added\n\n- Add your change description here.';
75 | case '-patch':
76 | return '### Fixed\n\n- Fix your change description here.';
77 | case '-major':
78 | return '### Breaking Changes\n\n- Describe any breaking changes here.';
79 | default:
80 | return '';
81 | }
82 | }
83 |
84 | function getFileName(filePath) {
85 | const fileNameWithExtension = path.basename(filePath);
86 | const fileName = fileNameWithExtension.split('.')[0];
87 | return fileName;
88 | }
89 |
--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
1 | name: Release
2 | on:
3 | release:
4 | types: [published]
5 |
6 | jobs:
7 | tag:
8 | name: Add/update 'latest' tag
9 | runs-on: ubuntu-latest
10 | steps:
11 | - name: Checkout repository
12 | uses: actions/checkout@v2
13 | - name: Run latest-tag
14 | uses: EndBug/latest-tag@v1
15 | env:
16 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
17 |
18 | publish-npm:
19 | name: Publish on NPM
20 | runs-on: ubuntu-latest
21 | needs: tag
22 | steps:
23 | - uses: actions/checkout@v2
24 | - name: Set up Node.js for NPM
25 | uses: actions/setup-node@v1
26 | with:
27 | registry-url: 'https://registry.npmjs.org'
28 | - run: npm install
29 | - run: npm publish
30 | env:
31 | NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
32 |
33 | publish-gpr:
34 | name: Publish on GPR
35 | runs-on: ubuntu-latest
36 | needs: tag
37 | steps:
38 | - uses: actions/checkout@v2
39 | - name: Set up Node.js for GPR
40 | uses: actions/setup-node@v1
41 | with:
42 | registry-url: 'https://npm.pkg.github.com/'
43 | scope: '@markbattistella'
44 | - run: npm install
45 | - run: npm publish
46 | env:
47 | NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--------------------------------------------------------------------------------
/.github/workflows/static.yml:
--------------------------------------------------------------------------------
1 | # Simple workflow for deploying static content to GitHub Pages
2 | name: Deploy static content to Pages
3 |
4 | on:
5 | # Runs on pushes targeting the default branch
6 | push:
7 | branches: ["main"]
8 |
9 | # Allows you to run this workflow manually from the Actions tab
10 | workflow_dispatch:
11 |
12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
13 | permissions:
14 | contents: read
15 | pages: write
16 | id-token: write
17 |
18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
20 | concurrency:
21 | group: "pages"
22 | cancel-in-progress: false
23 |
24 | jobs:
25 | # Single deploy job since we're just deploying
26 | deploy:
27 | environment:
28 | name: github-pages
29 | url: ${{ steps.deployment.outputs.page_url }}
30 | runs-on: ubuntu-latest
31 | steps:
32 | - name: Checkout
33 | uses: actions/checkout@v4
34 | - name: Setup Pages
35 | uses: actions/configure-pages@v5
36 | - name: Upload artifact
37 | uses: actions/upload-pages-artifact@v3
38 | with:
39 | # Upload entire repository
40 | path: './docs'
41 | - name: Deploy to GitHub Pages
42 | id: deployment
43 | uses: actions/deploy-pages@v4
44 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode
2 | .markdownlint.json
3 | .DS_Store
4 | *babel.js
5 | .gitattributes
6 | node_modules
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .vscode
2 | .markdownlint.json
3 | .github
4 | .gitattributes
5 | .DS_Store
6 | *babel.js
7 | docs
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 |
2 | ## 3.0.0 - Wed Jun 12 2024
3 |
4 | ### Breaking Changes
5 |
6 | - Clenaup to code
7 | - Bumped version
8 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Mark Battistella
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 |
2 |
3 | # docsify.js charty
4 |
5 |
6 |
7 | This plugin enhances your Docsify documentation by adding SVG charts to your website. It allows you to add in multiple types of charts, including pie, doughnut, sectional, radar, area, scatter, line, and bar types. By utilising this plugin, you can easily show your data in a beautiful interface.
8 |
9 | ## Installation
10 |
11 | ### Update `index.html` file
12 |
13 | Assuming you have a working [docsify](https://docsify.js.org/) framework set up, it is easy to use the plugin.
14 |
15 | 1. Add the following script and stylesheet to your `index.html` via either CDN or downloading it and using it locally:
16 |
17 | ```html
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | ```
30 |
31 | 1. In docsify setup, configure the plugin:
32 |
33 | ```js
34 |
49 | ```
50 |
51 | ## Configuration
52 |
53 | There are several options available for the docsify-charty plugin:
54 |
55 | > Example: [index.html](https://github.com/markbattistella/docsify-charty/blob/b792e7701e740587f48598c7b61bc7f7ea39c366/docs/index.html#L36-L40)
56 |
57 | | Name | Type | Example | Description |
58 | |---------|-----------|-----------|-------------------------------------------|
59 | | `theme` | `String` | "#EE5599" | Global theme for chart colours in HEX |
60 | | `mode` | `String` | "light" | Accepts "dark" or "light" |
61 | | `debug` | `Boolean` | false | Console logs if charts aren't loading |
62 |
63 | ### Per chart settings
64 |
65 | | Name | Accepts | Description |
66 | |-------------------|---------------|------------------------------------------|
67 | | `title` | `String` | The title of the chart, displayed at the top. Leave blank if you want to hide it |
68 | | `caption` | `String` | The sub-text of the chart, displayed under the title. Leave blank to hide it |
69 | | `type` | `String` | The type of charty you want to display |
70 | | `options.theme` | `String` | Set an individual theme to this chart. It will override the global theme |
71 | | `options.legend` | `Boolean` | Show the legend. Default `true` |
72 | | `options.labels` | `Boolean` | Show the chart labels. Default `true` |
73 | | `options.numbers` | `Boolean` | Show the chart numbers. Default `true` |
74 | | `data.label` | `String` | Graphed data point label |
75 | | `data.value` | `Int / Array` | Graphed value that puts it on the render |
76 | | `data.colour` | `String` | Override the global and theme with a specific colour |
77 |
78 | ### Markdown code
79 |
80 | ```js
81 | ```charty
82 | {
83 | "title": '',
84 | "caption": '',
85 | "type": '',
86 | "options": {
87 | "theme": '',
88 | "legend": '',
89 | "labels": '',
90 | "numbers": ''
91 | },
92 | "data": [
93 | {
94 | "label": '',
95 | "value": '',
96 | "colour": ''
97 | }
98 | ]
99 | }
100 | \`\`\`
101 | ```
102 |
103 | ## Types of charts
104 |
105 | ### Circular
106 |
107 | #### Pie chart
108 |
109 | 
110 |
111 | #### Donut / Doughnut chart
112 |
113 | 
114 |
115 | #### Section / Sectional chart
116 |
117 | 
118 |
119 | #### Rings chart
120 |
121 | 
122 |
123 | ### Area
124 |
125 | #### Radar chart
126 |
127 | 
128 |
129 | #### Area chart
130 |
131 | 
132 |
133 | ### Plot
134 |
135 | #### Scatter chart
136 |
137 | 
138 |
139 | #### Bubble chart
140 |
141 | 
142 |
143 | #### Line chart
144 |
145 | 
146 | 
147 |
148 | ### Bar / Column
149 |
150 | ### Bar / Bar-stack chart
151 |
152 | 
153 | 
154 |
155 | ### Column / Column-stack chart
156 |
157 | 
158 | 
159 |
160 | ### Rating
161 |
162 | 
163 |
164 | ## Contributing
165 |
166 | 1. Clone the repo: `git clone https://github.com/markbattistella/docsify-charty.git`
167 |
168 | 1. Create your feature branch: `git checkout -b my-feature`
169 |
170 | 1. Commit your changes: `git commit -am 'Add some feature'`
171 |
172 | 1. `Push` to the branch: `git push origin my-new-feature`
173 |
174 | 1. Submit the `pull` request
175 |
--------------------------------------------------------------------------------
/dist/docsify-charty.css:
--------------------------------------------------------------------------------
1 | /*! docsify-charty 3.0.0 | (c) Mark Battistella */
2 |
3 | /*
4 | * core
5 | */
6 | .docsify-charty {
7 |
8 | /* colours */
9 | --charty-colour-focus: #FDCB6E;
10 | --charty-colour-dark: #333;
11 | --charty-colour-light: #CCC;
12 | --charty-colour-medium: #888;
13 |
14 | /* colours - themes */
15 |
16 | /* sizes */
17 | --charty-size-title: 0;
18 | --charty-size-baseline: 16;
19 | --charty-size-hole: 50;
20 | --charty-size-radius: 0.3;
21 |
22 | /* normal */
23 | position: relative;
24 | display: block;
25 | margin: 0 auto;
26 | padding: 0;
27 | border: 0;
28 | width: 100%;
29 | font-size: calc( var(--charty-size-baseline) * 1px );
30 | line-height: calc( var(--charty-size-baseline) * 1px * 1.5 );
31 | color: var(--charty-colour-text);
32 | }
33 |
34 | /* mode: dark */
35 | .docsify-charty.dark {
36 | --charty-colour-focus: #023491;
37 | --charty-colour-dark: #CCC;
38 | --charty-colour-light: #333;
39 | --charty-colour-medium: #777;
40 | }
41 |
42 | .docsify-charty,
43 | .docsify-charty:before,
44 | .docsify-charty:after,
45 | .docsify-charty *,
46 | .docsify-charty *:before,
47 | .docsify-charty *:after {
48 | box-sizing: border-box;
49 | vertical-align: middle;
50 | }
51 |
52 | .docsify-charty .container {
53 | display: flex;
54 | flex-direction: row;
55 | margin-bottom: 4em !important;
56 | }
57 |
58 | .docsify-charty .container > * {
59 | align-self: center;
60 | }
61 |
62 | .docsify-charty .dataset {
63 | max-width: 25em;
64 | width: 100%;
65 | }
66 |
67 |
68 |
69 | /*
70 | * svg
71 | */
72 |
73 | .docsify-charty .dataset svg {
74 | overflow: visible;
75 | max-width: 25em;
76 | max-height: 25em;
77 | }
78 |
79 | /* all svg items */
80 | .docsify-charty .dataset svg * {
81 | transform-origin: center center;
82 | }
83 |
84 | .docsify-charty .dataset polyline,
85 | .docsify-charty .dataset line,
86 | .docsify-charty .dataset.radar .data-header circle {
87 | fill: none;
88 | stroke: var(--charty-colour-light);
89 | }
90 |
91 | .docsify-charty text {
92 | transition: all 600ms;
93 | alignment-baseline: middle;
94 | text-anchor: middle;
95 | font-size: 15%;
96 | fill: var(--charty-colour-light);
97 | }
98 |
99 | .docsify-charty .data-header text {
100 | fill: var(--charty-colour-medium);
101 | }
102 |
103 | .docsify-charty .data-item text {
104 | opacity: 0;
105 | }
106 |
107 | .docsify-charty .dataset.radar text {
108 | font-size: 35%;
109 | }
110 |
111 |
112 |
113 | /*
114 | * focus / highlighting
115 | */
116 | .docsify-charty .focus:after {
117 | content: '';
118 | position: absolute;
119 | z-index: -1;
120 | background: var(--charty-colour-focus);
121 | border-radius: calc( var(--charty-size-radius) * 1em );
122 | opacity: 0.5;
123 | top: 0;
124 | bottom: 0;
125 | left: 0;
126 | right: 0;
127 | }
128 |
129 |
130 |
131 | /*
132 | * header
133 | */
134 | .docsify-charty header {
135 | margin-bottom: 1.3em;
136 | }
137 |
138 | .docsify-charty h3 {
139 | --charty-size-title: 1.35;
140 | font-size: calc( var(--charty-size-title) * 1em);
141 | font-weight: bold;
142 | text-align: left;
143 | }
144 |
145 | .docsify-charty figcaption {
146 | font-size: 0.9em;
147 | color: var(--charty-colour-medium);
148 | }
149 |
150 |
151 |
152 | /*
153 | * legend
154 | */
155 | .docsify-charty.legend fieldset {
156 | order: 2;
157 | margin-left: auto;
158 | border-width: 5px 0 0 0;
159 | border-color: var(--charty-colour-light);
160 | border-style: solid;
161 | font-size: 0.9em;
162 | max-width: 30%;
163 | width: 100%;
164 | }
165 |
166 | .docsify-charty.legend fieldset legend {
167 | font-size: 1em;
168 | font-family: sans-serif;
169 | font-weight: bold;
170 | padding: 0 1em;
171 | margin: 0 0 0.5em -1em;
172 | }
173 |
174 | .docsify-charty.legend fieldset label {
175 | display: block;
176 | text-indent: -2em;
177 | margin: 0.25em 0 0 2em;
178 | line-height: 1.5em;
179 | border-radius: 3px;
180 | padding: 2px 5px;
181 | }
182 |
183 | .docsify-charty.legend fieldset label span {
184 | height: 1em;
185 | width: 1em;
186 | margin-right: 1em;
187 | border-radius: 0.2em;
188 | display: inline-block;
189 | }
190 |
191 | .docsify-charty.legend fieldset label:hover {
192 | background: var(--charty-colour-light);
193 | }
194 |
195 |
196 |
197 | /*
198 | * hover events
199 | */
200 | .docsify-charty.legend .dataset .data-item {
201 | opacity: 0.85;
202 | transition: opacity 300ms;
203 | }
204 |
205 | .docsify-charty.legend.hover .dataset .data-item {
206 | opacity: 0.1;
207 | }
208 |
209 | /* hover: heading */
210 | .docsify-charty header:hover ~ .container .data-text text,
211 | .docsify-charty header:hover ~ .container .data-item:after,
212 |
213 | /* hover: label */
214 | .docsify-charty .dataset .data-item.active .data-text text,
215 | .docsify-charty.legend.hover .dataset .data-item.active,
216 |
217 | /* hover: data-item */
218 | .docsify-charty .data-item:hover text,
219 |
220 | /* hover: data-text */
221 | .docsify-charty .data-text text:hover,
222 | .docsify-charty .data-text text.focus,
223 | .docsify-charty .dataset.bar .data-item:hover:after {
224 | opacity: 1;
225 | }
226 |
227 |
228 |
229 | /*
230 | * axes
231 | */
232 | .docsify-charty.axes .dataset {
233 | padding: 0;
234 | margin: 0;
235 | border-width: 0 0 3px 3px;
236 | border-style: solid;
237 | border-color: var(--charty-colour-dark, #333);
238 | position: relative;
239 | }
240 |
241 | .docsify-charty.axes .dataset[axes-horizontal] {
242 | margin-bottom: 2em;
243 | }
244 | .docsify-charty.axes .dataset[axes-vertical] {
245 | margin-left: 3.5em;
246 | }
247 |
248 | .docsify-charty.axes .dataset:before,
249 | .docsify-charty.axes .dataset:after {
250 | content: '';
251 | position: absolute;
252 | z-index: -1;
253 | left: 0;
254 | width: 100%;
255 | font-size: 0.7em;
256 | font-weight: bold;
257 | text-align: center;
258 | letter-spacing: 1px;
259 | color: var(--charty-colour-dark, #333);
260 | }
261 |
262 | .docsify-charty.axes .dataset:before {
263 | content: attr(axes-horizontal);
264 | bottom: -5.5em;
265 | }
266 |
267 | .docsify-charty.axes .dataset:after {
268 | content: attr(axes-vertical);
269 | transform-origin: top right;
270 | left: calc( -100% - 5.5em );
271 | transform: rotate(-90deg);
272 | }
273 |
274 |
275 |
276 | /*
277 | * charty - radar
278 | */
279 | .docsify-charty .dataset.radar svg {
280 | transform: scale(0.5) translate(50%, 50%);
281 | }
282 |
283 | .docsify-charty .dataset.radar svg * {
284 | transform-origin: 0 0;
285 | }
286 |
287 | .docsify-charty .dataset.radar .data-header circle:nth-child( even ) {
288 | opacity: 0.3;
289 | }
290 |
291 | .docsify-charty .dataset.radar .data-container,
292 | .docsify-charty .dataset.radar .data-header line,
293 | .docsify-charty .dataset.radar .data-header .data-text {
294 | transform-origin: top left;
295 | }
296 |
297 | .docsify-charty .dataset.radar svg .data-header line {
298 | transform: rotate( calc( var(--angle) * 1deg ) );
299 | }
300 |
301 | .docsify-charty .dataset.radar .data-header text {
302 | font-weight: bold;
303 | transform: rotate( calc( var(--angle) * 1deg ) );
304 | }
305 |
306 |
307 |
308 | /*
309 | * charty - pie / donut / section / ring
310 | */
311 | .docsify-charty .dataset.pie .data-item,
312 | .docsify-charty .dataset.donut .data-item,
313 | .docsify-charty .dataset.section .data-item,
314 | .docsify-charty .dataset.ring .data-item {
315 | transform: rotate( -90deg );
316 | }
317 |
318 | .docsify-charty .dataset.donut #donut-hole circle {
319 | fill: black;
320 | r: calc( var(--charty-size-hole, 50) * 1% / 2 );
321 | }
322 |
323 | .docsify-charty .dataset.ring .data-item circle.ring-bg {
324 | fill: none;
325 | stroke: var(--charty-colour-light);
326 | }
327 |
328 |
329 |
330 | /*
331 | * charty - bar / column
332 | */
333 | .docsify-charty .dataset.column .data-container,
334 | .docsify-charty .dataset.column-stack .data-container {
335 | transform: rotate( 90deg );
336 | }
337 |
338 |
339 |
340 | /*
341 | * charty - rating
342 | */
343 | .docsify-charty .dataset.rating {
344 | max-width: none;
345 | }
346 |
347 | .docsify-charty .dataset.rating small {
348 | display: block;
349 | text-align: right;
350 | }
351 |
352 | .docsify-charty .dataset.rating .data-item {
353 | display: flex;
354 | font-weight: bold;
355 | color: #FFF;
356 | text-align: center;
357 | line-height: 2.75;
358 | margin-top: 1px;
359 | overflow: hidden;
360 | }
361 |
362 | .docsify-charty .dataset.rating .data-item:nth-of-type(1) {
363 | border-radius: 2px 2px 0 0;
364 | }
365 |
366 | .docsify-charty .dataset.rating .data-item:nth-last-of-type(1) {
367 | border-radius: 0 0 2px 2px;
368 | }
369 |
370 | .docsify-charty .dataset.rating .data-item > div {
371 | margin-right: 1px;
372 | width: 100%;
373 | }
374 |
375 | .docsify-charty .dataset.rating .data-item .rating-label {
376 | max-width: 10em;
377 | background: var(--charty-colour-dark);
378 | }
379 |
380 | .docsify-charty .dataset.rating .data-item .rating-value {
381 | max-width: 4em;
382 | background: var(--charty-colour-medium);
383 | }
384 |
385 | .docsify-charty .dataset.rating .rating-bar-container {
386 | background: var(--charty-colour-light);
387 | }
388 |
389 | .docsify-charty .dataset.rating .rating-bar-colour {
390 | width: 0%;
391 | height: 100%;
392 | background: var(--charty-colour-light);
393 | }
394 |
395 |
396 |
397 |
398 |
399 | /*
400 | * breakpoints
401 | */
402 | @media( max-width: 800px ) {
403 |
404 | .docsify-charty .container {
405 | flex-direction: column;
406 | }
407 | .docsify-charty .container > * {
408 | align-self: flex-start;
409 | }
410 | .docsify-charty.legend fieldset {
411 | margin: 2em 0;
412 | max-width: 25em;
413 | }
414 | }
415 |
416 | @media( max-width: 480px ) {
417 | .docsify-charty.axes .dataset[axes-vertical] {
418 | margin-left: 1em;
419 | }
420 | }
421 |
--------------------------------------------------------------------------------
/dist/docsify-charty.js:
--------------------------------------------------------------------------------
1 | /*! docsify-charty 3.0.0 | (c) Mark Battistella */
2 |
3 | //
4 | // MARK: - safety first
5 | //
6 | 'use strict'; //
7 | // MARK: - get the docsify.config options
8 | //
9 |
10 | function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
11 |
12 | function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
13 |
14 | function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
15 |
16 | function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
17 |
18 | function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
19 |
20 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
21 |
22 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
23 |
24 | function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
25 |
26 | function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
27 |
28 | function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
29 |
30 | function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
31 |
32 | function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
33 |
34 | function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
35 |
36 | function getChartyOptions(chartyOptions) {
37 | var chartyTheme = chartyOptions.theme != '' ? chartyOptions.theme : '#0984E3',
38 | chartyMode = chartyOptions.mode != '' ? chartyOptions.mode : 'light',
39 | chartyDebug = chartyOptions.debug === true ? true : false; // build the array
40 |
41 | var outputArray = [chartyTheme, // colour to use for shades
42 | chartyMode, // light or dark mode
43 | chartyDebug // show debug messages
44 | ]; // output
45 |
46 | return outputArray;
47 | } //
48 | // MARK: - default configuration settings
49 | //
50 |
51 |
52 | var chartyOptions = {
53 | theme: '',
54 | mode: 'light',
55 | debug: 0
56 | }; //
57 | // MARK: - main function
58 | //
59 |
60 | function charty(hook, vm) {
61 | // get the variables from the cofig
62 | var chartyOptionsArray = getChartyOptions(chartyOptions),
63 | // create global options
64 | configTheme = chartyOptionsArray[0],
65 | configMode = chartyOptionsArray[1],
66 | configDebug = chartyOptionsArray[2],
67 | acceptedCharts = ['radar', 'area', 'donut', 'doughnut', 'pie', 'section', 'sectional', 'rings', 'line', 'plot', 'scatter', 'bubble', 'rating', 'review', 'bar', 'column', 'bar-stack', 'bar-stacked', 'column-stack', 'column-stacked'];
68 | console.log(configDebug); //
69 | // MARK: - custom local functions
70 | //
71 | // function: find the arc co-ordinates
72 |
73 | function getCoordinatesFromPercent(percentage) {
74 | // math angles are in radian not degrees
75 | var degreeToRadian = 360 * Math.PI / 180,
76 | // x = centerX + radius * cos( angleInRadians )
77 | x = 50 + 50 * Math.cos(degreeToRadian * percentage),
78 | // y = centerY + radius * sin( angleInRadians )
79 | y = 50 + 50 * Math.sin(degreeToRadian * percentage);
80 | return [x, y];
81 | } // function: check if correctly parsed json
82 |
83 |
84 | function isJSON(string) {
85 | try {
86 | JSON.parse(string);
87 | } catch (error) {
88 | console.log(error);
89 | return false;
90 | }
91 |
92 | return true;
93 | } // function: colour to HSL
94 |
95 |
96 | function colourHEXToHSL(hex) {
97 | var number = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
98 | // strip the hash
99 | hex = hex.replace(/#/g, ''); // convert 3 character hex to 6
100 |
101 | if (hex.length === 3) {
102 | hex = hex.split('').map(function (hex) {
103 | return hex + hex;
104 | }).join('');
105 | } // check if we are in the legal range
106 |
107 |
108 | var result = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})[\da-z]{0,0}$/i.exec(hex); // exit if not hex
109 |
110 | if (!result) {
111 | return null;
112 | } // variables
113 |
114 |
115 | var r = parseInt(result[1], 16) / 255,
116 | g = parseInt(result[2], 16) / 255,
117 | b = parseInt(result[3], 16) / 255,
118 | max = Math.max(r, g, b),
119 | min = Math.min(r, g, b),
120 | h,
121 | s,
122 | l = (max + min) / 2; // monochromatic
123 |
124 | if (max == min) {
125 | h = s = 0;
126 | } else {
127 | var d = max - min;
128 | s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
129 |
130 | switch (max) {
131 | case r:
132 | h = (g - b) / d + (g < b ? 6 : 0);
133 | break;
134 |
135 | case g:
136 | h = (b - r) / d + 2;
137 | break;
138 |
139 | case b:
140 | h = (r - g) / d + 4;
141 | break;
142 | }
143 |
144 | h /= 6;
145 | } // saturation
146 |
147 |
148 | s = Math.round(s * 100); // hue
149 |
150 | h = Math.round(360 * h); // get the shades
151 |
152 | if (number != 1 && number < 101 && number > 0) {
153 | l = Math.round(98 / number);
154 | } else {
155 | l = Math.round(l * 100);
156 | } // return it
157 |
158 |
159 | return {
160 | h: h,
161 | s: s,
162 | l: l
163 | };
164 | } //
165 | // MARK: - after the markdown has been parsed
166 | //
167 |
168 |
169 | hook.afterEach(function (html, next) {
170 | // we load the HTML inside a DOM node to allow for manipulation
171 | var htmlElement = document.createElement('div'); // insert the html into the new element
172 |
173 | htmlElement.innerHTML = html; // find all the charty tags
174 |
175 | htmlElement.querySelectorAll('pre[data-lang=charty]').forEach(function (element) {
176 | //
177 | // MARK: - create the variables
178 | //
179 | // -- let variables
180 | var replacement = document.createElement('figure'),
181 | // blank the rest of the options
182 | chartyContainer,
183 | //
184 | chartyHeader,
185 | //
186 | chartyCaption,
187 | //
188 | chartyDataGroup,
189 | // data-group
190 | chartyDataItem,
191 | // data-item
192 | // data customisations
193 | chartyDataItemColour,
194 | // data-item - colour
195 | chartyDataItemLabel,
196 | // data-item - label
197 | chartyDataItemValue; // data-item - value
198 | // assemble the div
199 | // -- add in the contents
200 |
201 | replacement.textContent = element.textContent; // check if the innerHTML is json
202 |
203 | if (!isJSON(replacement.innerHTML)) {
204 | // exit if not conformed
205 | return;
206 | } // -- constansts
207 | // namespace for svg
208 |
209 |
210 | var chartySVGw3 = 'http://www.w3.org/2000/svg',
211 | // parse the data
212 | chartyJSON = JSON.parse( // get the html to parse
213 | replacement.innerHTML // replace color --> colour
214 | .replace(/"color":/g, '"colour":')),
215 | // @return: type of chart
216 | chartyType = // does it have a type listed
217 | chartyJSON.type && // is it in the list of accepted types
218 | acceptedCharts.includes(chartyJSON.type) ? // spelling: doughnut
219 | chartyJSON.type === 'doughnut' ? 'donut' : // spelling: sectional
220 | chartyJSON.type === 'sectional' ? 'section' : // spelling: rings
221 | chartyJSON.type === 'rings' ? 'ring' : // spelling: scatter
222 | chartyJSON.type === 'scatter' ? 'plot' : // spelling: review
223 | chartyJSON.type === 'review' ? 'rating' : // spelling: *-stacked
224 | chartyJSON.type.endsWith('-stacked') ? chartyJSON.type.replace('-stacked', '-stack') : // all others
225 | chartyJSON.type : // otherwise null
226 | null,
227 | // @return: array of options
228 | chartyJSONOptions = chartyJSON.options,
229 | // option: charty theme
230 | chartyJSONOptionsTheme = // global theme AND local theme
231 | configTheme && chartyJSONOptions.theme ? // override with local
232 | chartyJSONOptions.theme : // else fallback
233 | configTheme,
234 | // option: show legend
235 | chartyJSONOptionsLegend = chartyJSONOptions.legend ? true : false,
236 | // option: show label
237 | chartyJSONOptionsLabel = chartyJSONOptions.labels ? true : false,
238 | // option: show number values
239 | chartyJSONOptionsNumbers = chartyJSONOptions.numbers ? true : false,
240 | // @return: array of data
241 | // -- turn single data into array
242 | chartyJSONData = Array.isArray(chartyJSON.data) ? chartyJSON.data : [chartyJSON.data],
243 | // normalise the data
244 | // -- some data values are singlular others arrays
245 | normaliseData = function normaliseData(arr) {
246 | var data = arr.map(function (_ref) {
247 | var value = _ref.value;
248 | return value;
249 | });
250 | return typeof arr[0].value === 'number' ? [data] : data;
251 | },
252 | // run it through normalisation
253 | valueArray = normaliseData(chartyJSONData),
254 | // data: get smallest, largest, sum of values
255 | chartyMinMax = valueArray.reduce(function (arr, el) {
256 | // remove the last item in array
257 | var highestValue = arr.pop(); // do a try-catch
258 |
259 | try {
260 | // check it
261 | // -- is an array
262 | // -- has more than 0
263 | // -- is only numbers
264 | if ((Array.isArray(el) || el.length) && !el.some(isNaN)) {
265 | // output on valid
266 | var current = {
267 | "min": Math.min.apply(Math, _toConsumableArray(el)),
268 | "max": Math.max.apply(Math, _toConsumableArray(el)),
269 | "sum": _toConsumableArray(el).reduce(function (v, w) {
270 | return v + w;
271 | }),
272 | "avg": _toConsumableArray(el).reduce(function (v, w) {
273 | return v + w;
274 | }) / _toConsumableArray(el).length
275 | }; // add in the current array
276 | // -- min / max / sum / avg
277 |
278 | arr.push(current); // change the largest value if it now is
279 |
280 | if (current.max > highestValue.largest) {
281 | highestValue.largest = current.max;
282 | }
283 | }
284 | } catch (err) {
285 | return configDebug ? console.log(err) : null;
286 | } // add in the highest number
287 |
288 |
289 | arr.push(highestValue); // return it
290 |
291 | return arr;
292 | }, [{
293 | largest: -Infinity
294 | }]),
295 | //
296 | trimLargeValue = function trimLargeValue(arr) {
297 | // get the last of the array
298 | var lastInArray = arr[arr.length - 1]; // return the new merged array
299 |
300 | return arr.slice(0, -1).map(function (o) {
301 | return _objectSpread(_objectSpread({}, o), lastInArray);
302 | });
303 | },
304 | // data: get smallest, largest, sum of values
305 | chartyJSONDataNumbers = trimLargeValue(chartyMinMax),
306 | // @return: colour hsl
307 | // -- passed: hex colour / total numbers
308 | chartyColours = chartyJSONData.map(function (data, index) {
309 | // if there is a manual set colour
310 | if (data.colour) {
311 | return data.colour;
312 | } // make the hsl data
313 |
314 |
315 | var hsl = colourHEXToHSL(chartyJSONOptionsTheme, chartyJSONData.length),
316 | // fix colour if only one item
317 | l = chartyJSONData.length === 1 ? 50 : 0; // return the colour and lightness
318 |
319 | return "hsl( ".concat(hsl.h, ", ").concat(hsl.s, "%, ").concat(hsl.l * index + l, "% )");
320 | }); // add the classes
321 | // -- main class
322 |
323 |
324 | replacement.classList.add('docsify-charty');
325 | replacement.classList.add("".concat(configMode)); // -- axes class
326 |
327 | if (chartyJSONOptionsLabel && ['area', 'plot', 'bubble', 'line', 'bar', 'column', 'bar-stack', 'column-stack'].includes(chartyType)) {
328 | replacement.classList.add('axes');
329 | } // create the parts for the switch
330 |
331 |
332 | var svg = document.createElementNS(chartySVGw3, 'svg'),
333 | defs = document.createElementNS(chartySVGw3, 'defs'),
334 | group = document.createElementNS(chartySVGw3, 'g'),
335 | flexbox = document.createElement('div'),
336 | dataset = document.createElement('div'),
337 | legend = document.createElement('fieldset'),
338 | a11yTitle = document.createElement('title'),
339 | a11yCaption = document.createElement('desc'); // -- svg container
340 |
341 | svg.setAttributeNS('charty', // namespace
342 | 'viewBox', // attribute
343 | '0 0 100 100' // value
344 | );
345 | svg.setAttributeNS('charty', // namespace
346 | 'preserveAspectRatio', // attribute
347 | 'xMidYMid meet' // value
348 | ); // -- defs background
349 |
350 | defs.innerHTML = ''; // -- flexbox container
351 |
352 | flexbox.setAttributeNS('charty', // namespace
353 | 'class', // attribute
354 | 'container' // value
355 | ); // -- dataset container
356 |
357 | dataset.setAttributeNS('charty', // namespace
358 | 'class', // attribute
359 | "dataset ".concat(chartyType) // value
360 | ); // -- group container
361 |
362 | group.setAttributeNS('charty', // namespace
363 | 'class', // attribute
364 | 'data-container' // value
365 | ); // -- a11y title
366 |
367 | a11yTitle.innerHTML = chartyJSON.title;
368 | a11yCaption.innerHTML = chartyJSON.caption; //
369 | // MARK: - assemble the items
370 | //
371 | // add the a11y to the svg
372 |
373 | svg.appendChild(a11yTitle);
374 | svg.appendChild(a11yCaption); // add the defs to the svg
375 |
376 | if (chartyJSONOptionsNumbers) {
377 | svg.appendChild(defs);
378 | } // add the group container to the svg
379 |
380 |
381 | svg.appendChild(group); // add the svg to the dataset
382 | // only if not rating
383 |
384 | if (!['rating'].includes(chartyType)) {
385 | dataset.appendChild(svg);
386 | } // add the dataset to the container
387 |
388 |
389 | flexbox.appendChild(dataset); // -- legend things
390 |
391 | if (chartyJSONOptionsLegend && !['rating'].includes(chartyType)) {
392 | // -- legend class
393 | replacement.classList.add('legend'); // add the legend
394 |
395 | flexbox.appendChild(legend); // add the title
396 |
397 | legend.innerHTML = '';
398 | } //
399 | // MARK: - switch the type
400 | //
401 |
402 |
403 | switch (chartyType) {
404 | // charty-radar
405 | case 'radar':
406 | // create the loop rings
407 | var radarDataHeader = document.createElementNS(chartySVGw3, 'g'),
408 | radarDataLines = document.createElementNS(chartySVGw3, 'g'),
409 | radarDataRings = document.createElementNS(chartySVGw3, 'g'),
410 | radarDataText = document.createElementNS(chartySVGw3, 'g'),
411 | radarDataPoints = chartyJSONData[0].points === undefined ? 0 : chartyJSONData[0].points; // add the classes
412 | // -- group container
413 |
414 | radarDataHeader.setAttributeNS('charty', // namespace
415 | 'class', // attribute
416 | 'data-header' // value
417 | );
418 | radarDataLines.setAttributeNS('charty', // namespace
419 | 'class', // attribute
420 | 'data-lines' // value
421 | );
422 | radarDataRings.setAttributeNS('charty', // namespace
423 | 'class', // attribute
424 | 'data-rings' // value
425 | );
426 | radarDataText.setAttributeNS('charty', // namespace
427 | 'class', // attribute
428 | 'data-label' // value
429 | ); // add the rings
430 |
431 | for (var i = 1; i <= 5; i++) {
432 | radarDataRings.innerHTML += '';
433 | } // add the items to the container group
434 |
435 |
436 | radarDataHeader.appendChild(radarDataLines);
437 | radarDataHeader.appendChild(radarDataRings); // -- show labels
438 |
439 | if (chartyJSONOptionsLabel) {
440 | radarDataHeader.appendChild(radarDataText);
441 | } // add in the titles for the heading rings
442 |
443 |
444 | if (radarDataPoints.length > 0) {
445 | // loop through the array
446 | radarDataPoints.forEach(function (item, i) {
447 | // constants
448 | var textItem = document.createElementNS(chartySVGw3, 'text'),
449 | textLine = document.createElementNS(chartySVGw3, 'line'); // -- item options
450 |
451 | textItem.setAttributeNS('charty', // namespace
452 | 'x', // attribute
453 | 0 // value
454 | );
455 | textItem.setAttributeNS('charty', // namespace
456 | 'y', // attribute
457 | 105 // value
458 | );
459 | textItem.setAttributeNS('charty', // namespace
460 | 'style', // attribute
461 | "--angle: ".concat(360 / radarDataPoints.length * i) // value
462 | ); // -- item options
463 |
464 | textLine.setAttributeNS('charty', // namespace
465 | 'x1', // attribute
466 | 0 // value
467 | );
468 | textLine.setAttributeNS('charty', // namespace
469 | 'x2', // attribute
470 | 100 // value
471 | );
472 | textLine.setAttributeNS('charty', // namespace
473 | 'y1', // attribute
474 | 0 // value
475 | );
476 | textLine.setAttributeNS('charty', // namespace
477 | 'y2', // attribute
478 | 0 // value
479 | );
480 | textLine.setAttributeNS('charty', // namespace
481 | 'style', // attribute
482 | "--angle: ".concat(360 / radarDataPoints.length * i) // value
483 | ); // add the text
484 |
485 | textItem.innerHTML = item; // add it to the container
486 |
487 | radarDataText.appendChild(textItem); // add it to the container
488 |
489 | radarDataLines.appendChild(textLine);
490 | });
491 | } // add in the header data
492 |
493 |
494 | group.appendChild(radarDataHeader); // loop through all the charty data lines
495 |
496 | chartyJSONData.forEach(function (data, index) {
497 | // error checking
498 | // -- if the values dont match number of points
499 | if (radarDataPoints.length !== data.value.length) {
500 | return configDebug ? console.log(">>> Charty input error\n --> ".concat(data.label, " has ").concat(data.value.length, " values but you have created ").concat(radarDataPoints.length, " labels - not creating the data")) : null;
501 | } // data item container
502 |
503 |
504 | var radarDataItem = document.createElementNS(chartySVGw3, 'g'),
505 | // -- the shape
506 | radarDataShape = document.createElementNS(chartySVGw3, 'polygon'),
507 | // -- text container
508 | radarDataLabels = document.createElementNS(chartySVGw3, 'g'); // radar points on spokes
509 |
510 | var radarPoints = ''; // -- calculate the spokes
511 |
512 | data.value.forEach(function (item, i) {
513 | // error checking
514 | // -- if the value greater than 100
515 | // -- if the value less than 0
516 | if (item < 0 || item > 100) {
517 | return configDebug ? console.log(">>> Charty input error\n --> ".concat(data.label, " has a value of ").concat(item, " in its array. Values need to be between 0-100")) : null;
518 | } // -- get the percentage
519 |
520 |
521 | var percent = item >= 0 && item <= 100 ? item / 100 : 0,
522 | // -- the degree turn
523 | degree = 360 / radarDataPoints.length * i,
524 | // -- radians to degrees
525 | number = degree * (Math.PI / 180),
526 | // -- the X position in the arc
527 | radarX = 100 * Math.cos(number) * percent,
528 | // -- the Y position in the arc
529 | radarY = 100 * Math.sin(number) * percent,
530 | // -- text labels
531 | radarDataLabelText = document.createElementNS(chartySVGw3, 'text'); // append the points
532 |
533 | radarPoints += "".concat(radarX, " ").concat(radarY, " "); // -- text items
534 |
535 | radarDataLabelText.setAttributeNS('charty', // namespace
536 | 'x', // attribute
537 | "".concat(radarX) // value
538 | );
539 | radarDataLabelText.setAttributeNS('charty', // namespace
540 | 'y', // attribute
541 | "".concat(radarY) // value
542 | );
543 | radarDataLabelText.setAttributeNS('charty', // namespace
544 | 'filter', // attribute
545 | 'url(#text-bg)' // value
546 | ); // -- insert the text
547 |
548 | radarDataLabelText.innerHTML = "".concat(item, "%"); // -- add into the group
549 |
550 | radarDataLabels.appendChild(radarDataLabelText);
551 | }); // -- data item
552 |
553 | radarDataItem.setAttributeNS('charty', // namespace
554 | 'class', // attribute
555 | 'data-item' // value
556 | );
557 | radarDataShape.setAttributeNS('charty', // namespace
558 | 'points', // attribute
559 | radarPoints // value
560 | );
561 | radarDataShape.setAttributeNS('charty', // namespace
562 | 'fill', // attribute
563 | chartyColours[index] // value
564 | ); // -- data-text class
565 |
566 | radarDataLabels.setAttributeNS('charty', // namespace
567 | 'class', // attribute
568 | 'data-text' // value
569 | ); // if there is a legend
570 |
571 | if (chartyJSONOptionsLegend) {
572 | legend.innerHTML += "");
573 | } // add in the items
574 |
575 |
576 | radarDataItem.appendChild(radarDataShape); // -- show values
577 |
578 | if (chartyJSONOptionsNumbers) {
579 | radarDataItem.appendChild(radarDataLabels);
580 | } // add the data-item to group
581 |
582 |
583 | group.appendChild(radarDataItem);
584 | });
585 | break;
586 | // charty-area
587 |
588 | case 'area':
589 | // create the loop rings
590 | var areaDataHeader = document.createElementNS(chartySVGw3, 'g'),
591 | // -- data-text
592 | areaDataHeaderText = document.createElementNS(chartySVGw3, 'g'),
593 | // -- data-lines
594 | areaDataHeaderLine = document.createElementNS(chartySVGw3, 'g'),
595 | // number of [data] points
596 | areaNumberInDataArray = chartyJSONData.length; // -- data-header class
597 |
598 | areaDataHeader.setAttributeNS('charty', 'class', 'data-header'); // -- data-header class
599 |
600 | areaDataHeaderText.setAttributeNS('charty', 'class', 'data-text'); // -- data-header class
601 |
602 | areaDataHeaderLine.setAttributeNS('charty', 'class', 'data-line'); // -- axes
603 |
604 | dataset.setAttributeNS('charty', 'axes-vertical', 'Values'); // add the lines
605 |
606 | for (var i = 1; i <= 10; i++) {
607 | var yPos = (i - 1) * 10,
608 | number = Math.round(chartyJSONDataNumbers[0].largest - chartyJSONDataNumbers[0].largest / 10 * (i - 1));
609 | areaDataHeaderLine.innerHTML += "");
610 | areaDataHeaderText.innerHTML += "").concat(number, "");
611 | } // add them to the main container
612 | // -- show labels
613 |
614 |
615 | if (chartyJSONOptionsLabel) {
616 | areaDataHeader.appendChild(areaDataHeaderText);
617 | } // -- show lines
618 |
619 |
620 | areaDataHeader.appendChild(areaDataHeaderLine); // add it into the group-container
621 |
622 | group.appendChild(areaDataHeader); // loop through all the charty data lines
623 |
624 | chartyJSONData.forEach(function (data, index) {
625 | // create the constants
626 | // -- create the polygon shape
627 | var areaDataPolygon = document.createElementNS(chartySVGw3, 'polygon'),
628 | // -- calculate the total number of points
629 | areaTotalPoints = chartyJSONData[index].value.length - 1,
630 | // -- check if we are looping or not
631 | areaCounter = chartyJSONData.length > 1 ? index : 0,
632 | // -- use the largest number as the scaling
633 | areaDataCount = chartyJSONDataNumbers[areaCounter].largest,
634 | // -- create the data-item
635 | areaDataItem = document.createElementNS(chartySVGw3, 'g'),
636 | // -- the label group
637 | areaDataLabels = document.createElementNS(chartySVGw3, 'g'); // the polygon points
638 |
639 | var areaPoints = ''; // loop the values
640 |
641 | data.value.forEach(function (item, i) {
642 | // points average
643 | var areaPointAsPercent = 100 - item / areaDataCount * 100,
644 | areaDataLabelText = document.createElementNS(chartySVGw3, 'text'); // -- text items
645 |
646 | areaDataLabelText.setAttributeNS('charty', // namespace
647 | 'x', // attribute
648 | "".concat(100 / areaTotalPoints * i) // value
649 | );
650 | areaDataLabelText.setAttributeNS('charty', // namespace
651 | 'y', // attribute
652 | "".concat(areaPointAsPercent) // value
653 | );
654 | areaDataLabelText.setAttributeNS('charty', // namespace
655 | 'filter', // attribute
656 | 'url(#text-bg)' // value
657 | ); // -- insert the text
658 |
659 | areaDataLabelText.innerHTML = item; // -- add into the group
660 |
661 | areaDataLabels.appendChild(areaDataLabelText); // add the poly points
662 |
663 | areaPoints += "".concat(100 / areaTotalPoints * i, " ").concat(areaPointAsPercent, ", ");
664 | }); // add the last two points
665 | // -- this blocks it off
666 |
667 | areaPoints += '100 100, 0 100'; // add the points to the polygon
668 |
669 | areaDataPolygon.setAttributeNS('charty', // namespace
670 | 'points', // attribute
671 | areaPoints // value
672 | ); // add the fill colour
673 |
674 | areaDataPolygon.setAttributeNS('charty', // namespace
675 | 'fill', // attribute
676 | chartyColours[index] // value
677 | ); // add the class to the data-item
678 |
679 | areaDataItem.setAttributeNS('charty', // namespace
680 | 'class', // attribute
681 | 'data-item' // value
682 | ); // add the class to the data-item
683 |
684 | areaDataLabels.setAttributeNS('charty', // namespace
685 | 'class', // attribute
686 | 'data-text' // value
687 | ); // add it into the group
688 |
689 | areaDataItem.appendChild(areaDataPolygon); // -- show labels
690 |
691 | if (chartyJSONOptionsNumbers) {
692 | areaDataItem.appendChild(areaDataLabels);
693 | }
694 |
695 | group.appendChild(areaDataItem); // if there is a legend
696 |
697 | if (chartyJSONOptionsLegend) {
698 | legend.innerHTML += "");
699 | }
700 | });
701 | break;
702 | // charty-pie
703 | // charty-donut
704 | // charty-section
705 |
706 | case 'pie':
707 | case 'donut':
708 | case 'section':
709 | // get the sum of all values
710 | var circleDataSum = chartyJSONDataNumbers[0].sum,
711 | // create the cut out hole
712 | donutHoleMask = ""; // starting total percentage
713 |
714 | var circleSliceTotalPercent = 0; // loop through all the charty data lines
715 |
716 | chartyJSONData.forEach(function (data, index) {
717 | // config: value as a percentage
718 | var circleDataPercent = chartyType === 'section' ? data.value : data.value / circleDataSum,
719 | // data-item
720 | circleDataItem = document.createElementNS(chartySVGw3, // attribute
721 | 'g' // value
722 | ),
723 | // config: value numbers
724 | // -- show values
725 | circleDataNumber = chartyJSONOptionsNumbers ? // -- is there a value
726 | chartyJSONData[index].value ? // -- leave sectional values
727 | chartyType === 'section' ? // output the value as percentage
728 | " (".concat((data.value * 100).toFixed(2), "%)") : // output the value as is
729 | " (".concat(data.value.toLocaleString(), " - ").concat((circleDataPercent * 100).toFixed(2), "%)") : // catch-all
730 | null : // catch-all
731 | ''; // find the start of the arc points
732 |
733 | var _getCoordinatesFromPe = getCoordinatesFromPercent(circleSliceTotalPercent),
734 | _getCoordinatesFromPe2 = _slicedToArray(_getCoordinatesFromPe, 2),
735 | circleArcX1 = _getCoordinatesFromPe2[0],
736 | circleArcY1 = _getCoordinatesFromPe2[1]; // each slice starts where the last slice ended
737 | // -- so keep a cumulative percent
738 | // -- section uses raw values
739 | // -- others use converted percent
740 |
741 |
742 | circleSliceTotalPercent += circleDataPercent; // find the end of the arc points
743 |
744 | var _getCoordinatesFromPe3 = getCoordinatesFromPercent(circleSliceTotalPercent),
745 | _getCoordinatesFromPe4 = _slicedToArray(_getCoordinatesFromPe3, 2),
746 | circleArcX2 = _getCoordinatesFromPe4[0],
747 | circleArcY2 = _getCoordinatesFromPe4[1]; // if the slice is more than 50%
748 | // take the large arc (the long way around)
749 |
750 |
751 | var largeArcFlag = circleDataPercent > 0.5 ? 1 : 0; // create an array
752 | // -- join it just for code readability
753 |
754 | var circleSlicePathData = [// move pen to these starting co-ordinates
755 | "M ".concat(circleArcX1, " ").concat(circleArcY1), // draw an arc
756 | // -- radius radius x-rotate
757 | // -- is it a large arc // > 50%
758 | // -- sweep is 1
759 | // -- stop drawing at these end co-ordinates
760 | "A 50 50 0 ".concat(largeArcFlag, " 1 ").concat(circleArcX2, " ").concat(circleArcY2), // draw a line back to 50, 50
761 | "L 50 50"].join(' '); // create a path
762 |
763 | var circleSlicePath = document.createElementNS(chartySVGw3, // attribute
764 | 'path' // value
765 | ); // add the path points
766 |
767 | circleSlicePath.setAttributeNS('charty', // namespace
768 | 'd', // attribute
769 | circleSlicePathData // value
770 | ); // the slice fill colour
771 |
772 | circleSlicePath.setAttributeNS('charty', // namespace
773 | 'fill', // attribute
774 | chartyColours[index] // value
775 | ); // add the class to the data-item
776 |
777 | circleDataItem.setAttributeNS('charty', // namespace
778 | 'class', // attribute
779 | 'data-item' // value
780 | ); // add it into the data-item
781 |
782 | circleDataItem.appendChild(circleSlicePath); // if there is a legend
783 |
784 | if (chartyJSONOptionsLegend) {
785 | var circleDataLabel = chartyJSONOptionsLabel ? data.label : ''; // add the data
786 |
787 | legend.innerHTML += "");
788 | } // add it into the group-container
789 |
790 |
791 | group.appendChild(circleDataItem);
792 | }); // add the donut hole
793 |
794 | if (chartyType === 'donut') {
795 | // insert the hole mask
796 | defs.innerHTML += donutHoleMask; // add the mask attribute
797 |
798 | group.setAttributeNS('charty', // namespace
799 | 'mask', // attribute
800 | 'url(#donut-hole)' // value
801 | );
802 | }
803 |
804 | break;
805 | // charty-rings
806 |
807 | case 'ring':
808 | var ringWidth = 32 / chartyJSONData.length,
809 | ringRadius = 50; // loop through all the charty data lines
810 |
811 | chartyJSONData.forEach(function (data, index) {
812 | // data-item
813 | var ringDataItem = document.createElementNS(chartySVGw3, // attribute
814 | 'g' // value
815 | ),
816 | // background element
817 | ringDataItemBG = document.createElementNS(chartySVGw3, // attribute
818 | 'circle' // value
819 | ),
820 | // foreground element
821 | ringDataItemFG = document.createElementNS(chartySVGw3, // attribute
822 | 'circle' // value
823 | ),
824 | // how thick based on total values
825 | ringStrokeWidth = ringRadius - (3 * index + 1) * ringWidth / 2,
826 | // get the value percentage
827 | ringPercent = // use raw value if
828 | // value is between 0 and 1
829 | data.value >= 0 && data.value <= 1 && // the sum of the values is less than count
830 | // -- if each were weighted at 1.00
831 | chartyJSONDataNumbers[0].sum <= chartyJSONData.length * 1 ? // is a percentage
832 | data.value : // value is between 0 and 100
833 | data.value >= 0 && data.value <= 100 && // the sum of the values is less than count
834 | // -- if each were weighted at 100
835 | chartyJSONDataNumbers[0].sum <= chartyJSONData.length * 100 ? // convert to a percentage
836 | data.value / 100 : // all other values exit
837 | null; // add the data-item class
838 |
839 | ringDataItem.setAttributeNS('charty', // namespace
840 | 'class', // attribute
841 | 'data-item' // value
842 | ); // background elements
843 |
844 | ringDataItemBG.setAttributeNS('charty', // namespace
845 | 'class', // attribute
846 | 'ring-bg' // value
847 | );
848 | ringDataItemBG.setAttributeNS('charty', // namespace
849 | 'cx', // attribute
850 | '50' // value
851 | );
852 | ringDataItemBG.setAttributeNS('charty', // namespace
853 | 'cy', // attribute
854 | '50' // value
855 | );
856 | ringDataItemBG.setAttributeNS('charty', // namespace
857 | 'stroke-width', // attribute
858 | "".concat(ringWidth) // value
859 | );
860 | ringDataItemBG.setAttributeNS('charty', // namespace
861 | 'r', // attribute
862 | "".concat(ringStrokeWidth) // value
863 | ); // foreground elements
864 |
865 | ringDataItemFG.setAttributeNS('charty', // namespace
866 | 'cx', // attribute
867 | '50' // value
868 | );
869 | ringDataItemFG.setAttributeNS('charty', // namespace
870 | 'cy', // attribute
871 | '50' // value
872 | );
873 | ringDataItemFG.setAttributeNS('charty', // namespace
874 | 'stroke', // attribute
875 | "".concat(chartyColours[index]) // value
876 | );
877 | ringDataItemFG.setAttributeNS('charty', // namespace
878 | 'fill', // attribute
879 | 'none' // value
880 | );
881 | ringDataItemFG.setAttributeNS('charty', // namespace
882 | 'stroke-width', // attribute
883 | "".concat(ringWidth) // value
884 | );
885 | ringDataItemFG.setAttributeNS('charty', // namespace
886 | 'r', // attribute
887 | "".concat(ringStrokeWidth) // value
888 | );
889 | ringDataItemFG.setAttributeNS('charty', // namespace
890 | 'stroke-dasharray', // attribute
891 | "".concat(2 * Math.PI * ringStrokeWidth, " ").concat(2 * Math.PI * ringStrokeWidth) // value
892 | );
893 | ringDataItemFG.setAttributeNS('charty', // namespace
894 | 'stroke-dashoffset', // attribute
895 | "".concat(2 * Math.PI * ringStrokeWidth - ringPercent * 100 / 100 * (2 * Math.PI * ringStrokeWidth)) // value
896 | ); // add it into the data-item
897 |
898 | ringDataItem.appendChild(ringDataItemBG);
899 | ringDataItem.appendChild(ringDataItemFG); // add it into the group-container
900 |
901 | group.appendChild(ringDataItem); // if there is a legend
902 |
903 | if (chartyJSONOptionsLegend) {
904 | var ringDataLabel = chartyJSONOptionsLabel ? data.label : '',
905 | ringDataValue = chartyJSONOptionsNumbers ? " (".concat(ringPercent.toFixed(2) * 100, "%)") : ''; // add the data
906 |
907 | legend.innerHTML += "");
908 | }
909 | });
910 | break;
911 | // charty-plot
912 | // charty-line
913 | // charty-bubble
914 |
915 | case 'plot':
916 | case 'line':
917 | case 'bubble':
918 | // -- data-header
919 | var plotDataHeader = document.createElementNS(chartySVGw3, 'g'),
920 | // -- data-text
921 | plotDataHeaderText = document.createElementNS(chartySVGw3, 'g'),
922 | // -- data-lines
923 | plotDataHeaderLine = document.createElementNS(chartySVGw3, 'g'),
924 | // number of [data] points
925 | plotNumberInDataArray = chartyJSONData.length; // -- data-header class
926 |
927 | plotDataHeader.setAttributeNS('charty', 'class', 'data-header'); // -- data-header class
928 |
929 | plotDataHeaderText.setAttributeNS('charty', 'class', 'data-text'); // -- data-header class
930 |
931 | plotDataHeaderLine.setAttributeNS('charty', 'class', 'data-line'); // -- axes
932 |
933 | dataset.setAttributeNS('charty', 'axes-vertical', 'Values'); // add the lines
934 |
935 | for (var i = 1; i <= 10; i++) {
936 | var _yPos = (i - 1) * 10,
937 | _number = Math.round(chartyJSONDataNumbers[0].largest - chartyJSONDataNumbers[0].largest / 10 * (i - 1));
938 |
939 | plotDataHeaderLine.innerHTML += "");
940 | plotDataHeaderText.innerHTML += "").concat(_number, "");
941 | } // add them to the main container
942 | // -- show numbers
943 |
944 |
945 | if (chartyJSONOptionsLabel) {
946 | plotDataHeader.appendChild(plotDataHeaderText);
947 | } // -- show lines
948 |
949 |
950 | plotDataHeader.appendChild(plotDataHeaderLine); // add it into the group-container
951 |
952 | group.appendChild(plotDataHeader); // loop through all the charty data lines
953 |
954 | chartyJSONData.forEach(function (data, index) {
955 | // create the data-item
956 | var plotDataItem = document.createElementNS(chartySVGw3, 'g'),
957 | // create the data-text
958 | plotDataText = document.createElementNS(chartySVGw3, 'g'),
959 | // total number of points
960 | // -- because we're inside an array
961 | plotTotalPoints = chartyJSONData[index].value.length,
962 | // scale for single or stacked
963 | plotCounter = chartyJSONData.length > 1 ? index : 0,
964 | plotDataCount = chartyJSONDataNumbers[plotCounter].largest,
965 | // values in the array
966 | plotDataPoint = chartyJSONData[index].value,
967 | // create the constants
968 | plotDataPolyline = document.createElementNS(chartySVGw3, 'polyline'); // polyline data
969 |
970 | var plotDataPolylinePoints = ''; // add the data-item class
971 |
972 | plotDataItem.setAttributeNS('charty', // namespace
973 | 'class', // attribute
974 | 'data-item' // value
975 | ); // loop the values from the data-value
976 |
977 | plotDataPoint.forEach(function (item, i) {
978 | // create the points
979 | var plotDataPointItem = document.createElementNS(chartySVGw3, 'circle'),
980 | // create the text item
981 | plotDataTextItem = document.createElementNS(chartySVGw3, 'text'),
982 | // x position
983 | plotDataPointX = 100 / plotTotalPoints * (i + 1) - 100 / plotTotalPoints / 2,
984 | // y position
985 | plotDataPointY = 100 - item / plotDataCount * 100,
986 | // adius of circle
987 | plotDataPointRadius = chartyType === 'bubble' ? // normal + 5*percentage
988 | 1.25 + 5 * item / chartyJSONDataNumbers[plotCounter].sum : // normal
989 | 1.25; // -- radius
990 |
991 | plotDataPointItem.setAttributeNS('charty', // namespace
992 | 'r', // attribute
993 | "".concat(plotDataPointRadius) // value
994 | ); // -- x position
995 |
996 | plotDataPointItem.setAttributeNS('charty', // namespace
997 | 'cx', // attribute
998 | "".concat(plotDataPointX) // value
999 | ); // -- y position
1000 |
1001 | plotDataPointItem.setAttributeNS('charty', // namespace
1002 | 'cy', // attribute
1003 | "".concat(plotDataPointY) // value
1004 | ); // -- fill colour
1005 |
1006 | plotDataPointItem.setAttributeNS('charty', // namespace
1007 | 'fill', // attribute
1008 | "".concat(chartyColours[index]) // value
1009 | ); // add in the line for the graph
1010 |
1011 | if (chartyType === 'line') {
1012 | // add the points to variable
1013 | plotDataPolylinePoints += " ".concat(plotDataPointX, " ");
1014 | plotDataPolylinePoints += "".concat(plotDataPointY); // set the polyline up
1015 |
1016 | plotDataPolyline.setAttributeNS('charty', // namespace
1017 | 'points', // attribute
1018 | "".concat(plotDataPolylinePoints) // value
1019 | );
1020 | plotDataPolyline.setAttributeNS('charty', // namespace
1021 | 'stroke-width', // attribute
1022 | '0.3' // value
1023 | );
1024 | plotDataPolyline.setAttributeNS('charty', // namespace
1025 | 'style', // attribute
1026 | "stroke: ".concat(chartyColours[index], ";") // value
1027 | ); // add the line to the data-item
1028 |
1029 | plotDataItem.appendChild(plotDataPolyline);
1030 | } // text items
1031 |
1032 |
1033 | plotDataText.setAttributeNS('charty', // namespace
1034 | 'class', // attribute
1035 | 'data-text' // value
1036 | );
1037 | plotDataTextItem.setAttributeNS('charty', // namespace
1038 | 'x', // attribute
1039 | "".concat(plotDataPointX) // value
1040 | );
1041 | plotDataTextItem.setAttributeNS('charty', // namespace
1042 | 'y', // attribute
1043 | "".concat(plotDataPointY - 6) // value
1044 | );
1045 | plotDataTextItem.setAttributeNS('charty', // namespace
1046 | 'filter', // attribute
1047 | "url(#text-bg)" // value
1048 | ); // add the value to the text element
1049 |
1050 | plotDataTextItem.innerHTML = item; // add the text to the container
1051 | // -- show values
1052 |
1053 | if (chartyJSONOptionsNumbers) {
1054 | plotDataText.appendChild(plotDataTextItem);
1055 | } // add the points to the data-item
1056 |
1057 |
1058 | plotDataItem.appendChild(plotDataPointItem);
1059 | }); // add the text container to the data-item
1060 |
1061 | plotDataItem.appendChild(plotDataText); // add it into the group-container
1062 |
1063 | group.appendChild(plotDataItem); // if there is a legend
1064 |
1065 | if (chartyJSONOptionsLegend) {
1066 | // add the data
1067 | legend.innerHTML += "");
1068 | }
1069 | });
1070 | break;
1071 |
1072 | case 'bar':
1073 | case 'column':
1074 | case 'bar-stack':
1075 | case 'column-stack':
1076 | //
1077 | // constants
1078 | //
1079 | // -- using a column graph
1080 | var isColumn = chartyType.startsWith('column') ? true : false,
1081 | // -- are we using a stack graph
1082 | isStacked = chartyType.endsWith('stack') ? true : false,
1083 | // -- data-header
1084 | barDataHeader = document.createElementNS(chartySVGw3, // namespace
1085 | 'g' // property
1086 | ),
1087 | // -- data-header > data-label
1088 | barDataHeaderLabel = document.createElementNS(chartySVGw3, // namespace
1089 | 'g' // property
1090 | ),
1091 | // -- data-header > data-lines
1092 | barDataHeaderLines = document.createElementNS(chartySVGw3, // namespace
1093 | 'g' // property
1094 | ); //
1095 | // numbers
1096 | //
1097 | // -- count of data items
1098 |
1099 | var numberOfDataItems = chartyJSONData.length,
1100 | // -- rework the data
1101 | // ---- get the columns
1102 | // ---- then the sum of the columns
1103 | chartyJSONDataColumn = chartyJSONData.map(function (current, index, arr) {
1104 | // create the blanks
1105 | var outputArray = [],
1106 | previousTotal = 0; // loop through
1107 |
1108 | for (var _i2 = 0; _i2 < current.value.length; _i2++) {
1109 | // if it is first item
1110 | if (_i2 < 1) {
1111 | // set the value to 0
1112 | previousTotal = 0;
1113 | } else {
1114 | // add from the last value
1115 | previousTotal += arr[_i2 - 1].value[index];
1116 | } // output the new array
1117 |
1118 |
1119 | outputArray.push(previousTotal);
1120 | }
1121 |
1122 | return outputArray;
1123 | }); // -- get the sum of all vertical values
1124 |
1125 | var stackIndexTotal = chartyJSONData.slice(1).reduce(function (sums, _ref2) {
1126 | var value = _ref2.value;
1127 | return sums.map(function (sum, i) {
1128 | return sum + value[i];
1129 | });
1130 | }, chartyJSONData[0].value); //
1131 | // attributes
1132 | //
1133 | // -- not for stacked
1134 |
1135 | if (!isStacked) {
1136 | var orientationHorizontal = isColumn ? 'horizontal' : 'vertical',
1137 | orientationVertical = isColumn ? 'vertical' : 'horizontal'; // -- axes
1138 |
1139 | dataset.setAttributeNS('charty', // namespace
1140 | "axes-".concat(orientationHorizontal), // property
1141 | 'Values' // value
1142 | );
1143 | dataset.setAttributeNS('charty', // namespace
1144 | "axes-".concat(orientationVertical), // property
1145 | 'Labels' // value
1146 | );
1147 | } // -- data-header class
1148 |
1149 |
1150 | barDataHeader.setAttributeNS('charty', 'class', 'data-header'); // -- data-header > data-label class
1151 |
1152 | barDataHeaderLabel.setAttributeNS('charty', // namespace
1153 | 'class', // property
1154 | 'data-label' // value
1155 | ); // -- data-line class
1156 |
1157 | barDataHeaderLines.setAttributeNS('charty', // namespace
1158 | 'class', // property
1159 | 'data-line' // value
1160 | ); //
1161 | // lines / labels
1162 | //
1163 | // -- add the lines
1164 | // -- add the labels
1165 |
1166 | for (var i = 1; i <= 10; i++) {
1167 | // -- move the labels to the bottom
1168 | var headerLabelOffset = isColumn ? 110 : 0,
1169 | // -- separate the lines
1170 | lineYPosition = (i - 1) * 10,
1171 | // -- label text
1172 | labelNumber = !isStacked ? Math.round(chartyJSONDataNumbers[0].largest - chartyJSONDataNumbers[0].largest / 10 * (i - 1)) // not stacked
1173 | : 100 - 100 / 10 * (i - 1); // -- add: lines
1174 |
1175 | barDataHeaderLines.innerHTML += ""); // -- add: lines
1176 |
1177 | barDataHeaderLabel.innerHTML += " ").concat(labelNumber, " ");
1178 | } // the parts to the data-header
1179 | // -- show labels
1180 |
1181 |
1182 | if (chartyJSONOptionsLabel) {
1183 | barDataHeader.appendChild(barDataHeaderLabel);
1184 | } // -- show lines
1185 |
1186 |
1187 | barDataHeader.appendChild(barDataHeaderLines); // add it into the group-container
1188 |
1189 | group.appendChild(barDataHeader); //
1190 | // main loop
1191 | //
1192 | // loop through all the charty data bars
1193 |
1194 | chartyJSONData.forEach(function (data, index) {
1195 | //
1196 | // constants
1197 | //
1198 | // -- cache wrapper
1199 | var dataValue = Array.isArray(data.value) ? data.value : [data.value],
1200 | // sum of new array
1201 | // -- in the columns
1202 | chartyJSONDataColumnTotal = chartyJSONDataColumn[index][chartyJSONDataColumn[index].length - 1],
1203 | //
1204 | // numbers
1205 | //
1206 | // -- number of [value] points
1207 | numberInValueArray = dataValue.length,
1208 | // -- size of the group sections
1209 | widthOfColumn = 100 / numberOfDataItems,
1210 | // -- size of the value item
1211 | sizeOfValue = widthOfColumn / numberInValueArray,
1212 | // -- size of the value item (half)
1213 | sizeOfValueHalf = sizeOfValue / 2,
1214 | //
1215 | // create the elements
1216 | //
1217 | // -- data-item
1218 | barDataItem = document.createElementNS(chartySVGw3, // namespace
1219 | 'g' // property
1220 | ),
1221 | // create the data-text
1222 | barDataText = document.createElementNS(chartySVGw3, // namespace
1223 | 'g' // property
1224 | ); // -- data-item
1225 |
1226 | barDataItem.setAttributeNS('charty', // namespace
1227 | 'class', // property
1228 | 'data-item' // value
1229 | ); // -- data-text
1230 |
1231 | barDataText.setAttributeNS('charty', // namespace
1232 | 'class', // property
1233 | 'data-text' // value
1234 | ); // add it into the group-container
1235 |
1236 | group.appendChild(barDataItem); //
1237 | // second loop
1238 | //
1239 | // loop the values
1240 |
1241 | dataValue.forEach(function (item, i) {
1242 | // dont label if not matching
1243 | if (numberOfDataItems !== numberInValueArray) {
1244 | return configDebug ? console.log("Charty error:\n>>> The number of items in the value list does not match the number of titles") : null;
1245 | } // -- stacked data
1246 |
1247 |
1248 | if (isStacked) {
1249 | // how tall is the bar in the stack
1250 | var barDataItemPercent = item / stackIndexTotal[i] * 100,
1251 | // how far to offset it
1252 | barDataItemOffset = chartyJSONDataColumn[i][index] / stackIndexTotal[i] * 100; // bar item value
1253 |
1254 | barDataItem.innerHTML += " "); // -- show values
1255 |
1256 | if (chartyJSONOptionsNumbers) {
1257 | barDataText.innerHTML += "").concat(item, "");
1258 | } // -- normal data
1259 |
1260 | } else {
1261 | // largest
1262 | var largestValue = chartyJSONDataNumbers[index].largest,
1263 | // how tall is the bar
1264 | _barDataItemPercent = item / largestValue * 100,
1265 | // how far to offset the bar
1266 | _barDataItemOffset = 100 - _barDataItemPercent; // bar item value
1267 |
1268 |
1269 | barDataItem.innerHTML += " "); // add in the footer label text
1270 |
1271 | barDataHeaderLabel.innerHTML += " ").concat(data.label, " "); // add in the hover text
1272 | // -- show values
1273 |
1274 | if (chartyJSONOptionsNumbers) {
1275 | barDataText.innerHTML += "").concat(item, "");
1276 | }
1277 | }
1278 | }); // if there is a legend
1279 |
1280 | if (chartyJSONOptionsLegend) {
1281 | // add the data
1282 | legend.innerHTML += "");
1283 | } // add the text into the data-item
1284 |
1285 |
1286 | barDataItem.appendChild(barDataText);
1287 | });
1288 | break;
1289 |
1290 | case 'rating':
1291 | // constants
1292 | var ratingMaxValue = chartyJSONDataNumbers[0].max; // loop through all the charty rating items
1293 |
1294 | chartyJSONData.forEach(function (data, index) {
1295 | // constansts
1296 | // -- data-item
1297 | var ratingDataItem = document.createElement('div'),
1298 | // -- data-item rating-label
1299 | ratingDataItemLabel = document.createElement('div'),
1300 | // -- data-item rating-value
1301 | ratingDataItemValue = document.createElement('div'),
1302 | // -- data-item rating-bar-container
1303 | ratingDataItemBarContainer = document.createElement('div'),
1304 | // -- data-item rating-bar-colour
1305 | ratingDataItemBarColour = document.createElement('div'),
1306 | // calculate percentage of bar
1307 | ratingDataItemBarColourSize = data.value / ratingMaxValue * 100; // add the class
1308 |
1309 | ratingDataItem.setAttribute('class', // property
1310 | 'data-item' // value
1311 | );
1312 | ratingDataItemLabel.setAttribute('class', // property
1313 | 'rating-label' // value
1314 | );
1315 | ratingDataItemValue.setAttribute('class', // property
1316 | 'rating-value' // value
1317 | );
1318 | ratingDataItemBarContainer.setAttribute('class', // property
1319 | 'rating-bar-container' // value
1320 | );
1321 | ratingDataItemBarColour.setAttribute('class', // property
1322 | 'rating-bar-colour' // value
1323 | ); // add the data
1324 |
1325 | ratingDataItemLabel.innerHTML = data.label;
1326 | ratingDataItemValue.innerHTML = data.value;
1327 | ratingDataItemBarColour.setAttribute('style', // property
1328 | "width: ".concat(ratingDataItemBarColourSize, "%; background-color: ").concat(chartyColours[index], ";") // value
1329 | ); // add to the rating data-item
1330 | // -- show labels
1331 |
1332 | if (chartyJSONOptionsLabel) {
1333 | ratingDataItem.appendChild(ratingDataItemLabel);
1334 | } // -- show values
1335 |
1336 |
1337 | if (chartyJSONOptionsNumbers) {
1338 | ratingDataItem.appendChild(ratingDataItemValue);
1339 | } // -- bar data
1340 |
1341 |
1342 | ratingDataItem.appendChild(ratingDataItemBarContainer);
1343 | ratingDataItemBarContainer.appendChild(ratingDataItemBarColour); // add it into the dom
1344 |
1345 | dataset.appendChild(ratingDataItem);
1346 | }); // footer notice
1347 |
1348 | dataset.innerHTML += "Ratings are out of a total of ".concat(ratingMaxValue, "");
1349 | break;
1350 | // no results
1351 |
1352 | default:
1353 | return;
1354 | break;
1355 | } // add the generated chart
1356 |
1357 |
1358 | charty = flexbox.outerHTML; //
1359 | // MARK: build the charts
1360 | //
1361 | // check before changing DOM
1362 |
1363 | if (charty) {
1364 | // TODO: add link anchor
1365 | // TODO: add figure numbering
1366 | // add the header (if present)
1367 | chartyHeader = chartyJSON.title === '' || !chartyJSON.title ? '' : "".concat(chartyJSON.title, "
"); // add the caption (if present)
1368 |
1369 | chartyCaption = chartyJSON.caption === '' || !chartyJSON.caption ? '' : "".concat(chartyJSON.caption, ""); // fix spacing on header or caption not entered
1370 |
1371 | var chartyHeading = chartyHeader || chartyCaption ? "".concat(chartyHeader).concat(chartyCaption, "") : ''; // add in the bars
1372 |
1373 | replacement.innerHTML = "".concat(chartyHeading).concat(charty); // commit the manipulation
1374 |
1375 | element.parentNode.replaceChild(replacement, element);
1376 | } else {
1377 | // exit if no changes
1378 | return;
1379 | }
1380 | }); // docsify return data
1381 |
1382 | next(htmlElement.innerHTML);
1383 | }); //
1384 | // MARK: - after the parsing has completed
1385 | //
1386 |
1387 | hook.doneEach(function () {
1388 | // get all the charty items
1389 | var docsifyCharty = document.querySelectorAll('.docsify-charty'); // loop through them
1390 |
1391 | docsifyCharty.forEach(function (item, i) {
1392 | // get the parts
1393 | // --
1394 | var docsifyChartyDataItems = _toConsumableArray(item.getElementsByClassName('data-item')); // -- labels
1395 |
1396 |
1397 | var docsifyChartyDataLabels = _toConsumableArray(item.getElementsByTagName('label')); // loop through the labels
1398 |
1399 |
1400 | docsifyChartyDataLabels.forEach(function (el, index) {
1401 | // hover:
1402 | el.addEventListener('mouseover', function (e) {
1403 | item.classList.add('hover'); //
1404 |
1405 | docsifyChartyDataItems.forEach(function (dataItem, index2) {
1406 | if (index === index2) {
1407 | dataItem.classList.add('active');
1408 | } else {
1409 | dataItem.classList.remove('active');
1410 | }
1411 | });
1412 | }); // hover: off
1413 |
1414 | el.addEventListener('mouseout', function (e) {
1415 | // remove the class
1416 | item.classList.remove('hover');
1417 | docsifyChartyDataItems.forEach(function (r) {
1418 | return r.classList.remove('active');
1419 | });
1420 | });
1421 | });
1422 | });
1423 | });
1424 | } // docsify plugin options
1425 |
1426 |
1427 | window.$docsify.charty = Object.assign(chartyOptions, window.$docsify.charty);
1428 | window.$docsify.plugins = [].concat(charty, window.$docsify.plugins);
1429 |
--------------------------------------------------------------------------------
/dist/docsify-charty.min.css:
--------------------------------------------------------------------------------
1 | /*! docsify-charty 3.0.0 | (c) Mark Battistella */
2 | .docsify-charty{--charty-colour-focus:#FDCB6E;--charty-colour-dark:#333;--charty-colour-light:#CCC;--charty-colour-medium:#888;--charty-size-title:0;--charty-size-baseline:16;--charty-size-hole:50;--charty-size-radius:.3;position:relative;display:block;margin:0 auto;padding:0;border:0;width:100%;font-size:calc(var(--charty-size-baseline) * 1px);line-height:calc(var(--charty-size-baseline) * 1px * 1.5);color:var(--charty-colour-text);color-adjust:exact}.docsify-charty.dark{--charty-colour-focus:#023491;--charty-colour-dark:#CCC;--charty-colour-light:#333;--charty-colour-medium:#777}.docsify-charty,.docsify-charty:before,.docsify-charty:after,.docsify-charty *,.docsify-charty :before,.docsify-charty :after{box-sizing:border-box;vertical-align:middle}.docsify-charty .container{display:flex;flex-direction:row;margin-bottom:4em!important}.docsify-charty .container > *{align-self:center}.docsify-charty .dataset{max-width:25em;width:100%}.docsify-charty .dataset svg{overflow:visible;max-width:25em;max-height:25em}.docsify-charty .dataset svg *{transform-origin:center center}.docsify-charty .dataset polyline,.docsify-charty .dataset line,.docsify-charty .dataset.radar .data-header circle{fill:none;stroke:var(--charty-colour-light)}.docsify-charty text{transition:all 600ms;alignment-baseline:middle;text-anchor:middle;font-size:15%;fill:var(--charty-colour-light)}.docsify-charty .data-header text{fill:var(--charty-colour-medium)}.docsify-charty .data-item text{opacity:0}.docsify-charty .dataset.radar text{font-size:35%}.docsify-charty .focus:after{content:'';position:absolute;z-index:-1;background:var(--charty-colour-focus);border-radius:calc(var(--charty-size-radius) * 1em);opacity:.5;top:0;bottom:0;left:0;right:0}.docsify-charty header{margin-bottom:1.3em}.docsify-charty h3{--charty-size-title:1.35;font-size:calc(var(--charty-size-title) * 1em);font-weight:700;text-align:left}.docsify-charty figcaption{font-size:.9em;color:var(--charty-colour-medium)}.docsify-charty.legend fieldset{order:2;margin-left:auto;border-width:5px 0 0;border-color:var(--charty-colour-light);border-style:solid;font-size:.9em;max-width:30%;width:100%}.docsify-charty.legend fieldset legend{font-size:1em;font-family:sans-serif;font-weight:700;padding:0 1em;margin:0 0 .5em -1em}.docsify-charty.legend fieldset label{display:block;text-indent:-2em;margin:.25em 0 0 2em;line-height:1.5em;border-radius:3px;padding:2px 5px}.docsify-charty.legend fieldset label span{height:1em;width:1em;margin-right:1em;border-radius:.2em;display:inline-block}.docsify-charty.legend fieldset label:hover{background:var(--charty-colour-light)}.docsify-charty.legend .dataset .data-item{opacity:.85;transition:opacity 300ms}.docsify-charty.legend.hover .dataset .data-item{opacity:.1}.docsify-charty header:hover ~ .container .data-text text,.docsify-charty header:hover ~ .container .data-item:after,/* hover: label */
3 | .docsify-charty .dataset .data-item.active .data-text text,.docsify-charty.legend.hover .dataset .data-item.active,/* hover: data-item */
4 | .docsify-charty .data-item:hover text,/* hover: data-text */
5 | .docsify-charty .data-text text:hover,.docsify-charty .data-text text.focus,.docsify-charty .dataset.bar .data-item:hover:after{opacity:1}.docsify-charty.axes .dataset{padding:0;margin:0;border-width:0 0 3px 3px;border-style:solid;border-color:var(--charty-colour-dark,#333);position:relative}.docsify-charty.axes .dataset[axes-horizontal]{margin-bottom:2em}.docsify-charty.axes .dataset[axes-vertical]{margin-left:3.5em}.docsify-charty.axes .dataset:before,.docsify-charty.axes .dataset:after{content:'';position:absolute;z-index:-1;left:0;width:100%;font-size:.7em;font-weight:700;text-align:center;letter-spacing:1px;color:var(--charty-colour-dark,#333)}.docsify-charty.axes .dataset:before{content:attr(axes-horizontal);bottom:-5.5em}.docsify-charty.axes .dataset:after{content:attr(axes-vertical);transform-origin:top right;left:calc(-100% - 5.5em);transform:rotate(-90deg)}.docsify-charty .dataset.radar svg{transform:scale(0.5) translate(50%,50%)}.docsify-charty .dataset.radar svg *{transform-origin:0 0}.docsify-charty .dataset.radar .data-header circle:nth-child( even ){opacity:.3}.docsify-charty .dataset.radar .data-container,.docsify-charty .dataset.radar .data-header line,.docsify-charty .dataset.radar .data-header .data-text{transform-origin:top left}.docsify-charty .dataset.radar svg .data-header line{transform:rotate(calc(var(--angle) * 1deg))}.docsify-charty .dataset.radar .data-header text{font-weight:700;transform:rotate(calc(var(--angle) * 1deg))}.docsify-charty .dataset.pie .data-item,.docsify-charty .dataset.donut .data-item,.docsify-charty .dataset.section .data-item,.docsify-charty .dataset.ring .data-item{transform:rotate(-90deg)}.docsify-charty .dataset.donut #donut-hole circle{fill:#000;r:calc(var(--charty-size-hole,50) * 1% / 2)}.docsify-charty .dataset.ring .data-item circle.ring-bg{fill:none;stroke:var(--charty-colour-light)}.docsify-charty .dataset.column .data-container,.docsify-charty .dataset.column-stack .data-container{transform:rotate(90deg)}.docsify-charty .dataset.rating{max-width:none}.docsify-charty .dataset.rating small{display:block;text-align:right}.docsify-charty .dataset.rating .data-item{display:flex;font-weight:700;color:#FFF;text-align:center;line-height:2.75;margin-top:1px;overflow:hidden}.docsify-charty .dataset.rating .data-item:nth-of-type(1){border-radius:2px 2px 0 0}.docsify-charty .dataset.rating .data-item:nth-last-of-type(1){border-radius:0 0 2px 2px}.docsify-charty .dataset.rating .data-item > div{margin-right:1px;width:100%}.docsify-charty .dataset.rating .data-item .rating-label{max-width:10em;background:var(--charty-colour-dark)}.docsify-charty .dataset.rating .data-item .rating-value{max-width:4em;background:var(--charty-colour-medium)}.docsify-charty .dataset.rating .rating-bar-container{background:var(--charty-colour-light)}.docsify-charty .dataset.rating .rating-bar-colour{width:0;height:100%;background:var(--charty-colour-light)}@media( max-width: 800px ){.docsify-charty .container{flex-direction:column}.docsify-charty .container > *{align-self:flex-start}.docsify-charty.legend fieldset{margin:2em 0;max-width:25em}}@media( max-width: 480px ){.docsify-charty.axes .dataset[axes-vertical]{margin-left:1em}}
6 |
--------------------------------------------------------------------------------
/dist/docsify-charty.min.js:
--------------------------------------------------------------------------------
1 | /*! docsify-charty 3.0.0 | (c) Mark Battistella */
2 | "use strict";function _slicedToArray(t,e){return _arrayWithHoles(t)||_iterableToArrayLimit(t,e)||_unsupportedIterableToArray(t,e)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArrayLimit(t,e){var a=t&&("undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"]);if(null!=a){var r,n,c=[],o=!0,l=!1;try{for(a=a.call(t);!(o=(r=a.next()).done)&&(c.push(r.value),!e||c.length!==e);o=!0);}catch(t){l=!0,n=t}finally{try{o||null==a.return||a.return()}finally{if(l)throw n}}return c}}function _arrayWithHoles(t){if(Array.isArray(t))return t}function ownKeys(e,t){var a,r=Object.keys(e);return Object.getOwnPropertySymbols&&(a=Object.getOwnPropertySymbols(e),t&&(a=a.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,a)),r}function _objectSpread(e){for(var t=1;tt.length)&&(e=t.length);for(var a=0,r=new Array(e);ar.largest&&(r.largest=a.max))}catch(t){return X?console.log(t):null}return t.push(r),t},[{largest:-1/0}]),S=(W=r[r.length-1],r.slice(0,-1).map(function(t){return _objectSpread(_objectSpread({},t),W)})),A=f.map(function(t,e){var a;return t.colour||(t=function(t,e){if(e=1Legend"),b){case"radar":var u=document.createElementNS(p,"g"),d=document.createElementNS(p,"g"),h=document.createElementNS(p,"g"),y=document.createElementNS(p,"g"),E=void 0===f[0].points?0:f[0].points;u.setAttributeNS("charty","class","data-header"),d.setAttributeNS("charty","class","data-lines"),h.setAttributeNS("charty","class","data-rings"),y.setAttributeNS("charty","class","data-label");for(var x=1;x<=5;x++)h.innerHTML+='';u.appendChild(d),u.appendChild(h),s&&u.appendChild(y),0>> Charty input error\n --\x3e ".concat(n.label," has ").concat(n.value.length," values but you have created ").concat(E.length," labels - not creating the data")):null;var e=document.createElementNS(p,"g"),a=document.createElementNS(p,"polygon"),c=document.createElementNS(p,"g"),o="";n.value.forEach(function(t,e){if(t<0||100>> Charty input error\n --\x3e ".concat(n.label," has a value of ").concat(t," in its array. Values need to be between 0-100")):null;var a=0<=t&&t<=100?t/100:0,e=360/E.length*e*(Math.PI/180),r=100*Math.cos(e)*a,e=100*Math.sin(e)*a,a=document.createElementNS(p,"text");o+="".concat(r," ").concat(e," "),a.setAttributeNS("charty","x","".concat(r)),a.setAttributeNS("charty","y","".concat(e)),a.setAttributeNS("charty","filter","url(#text-bg)"),a.innerHTML="".concat(t,"%"),c.appendChild(a)}),e.setAttributeNS("charty","class","data-item"),a.setAttributeNS("charty","points",o),a.setAttributeNS("charty","fill",A[t]),c.setAttributeNS("charty","class","data-text"),m&&(v.innerHTML+='")),e.appendChild(a),g&&e.appendChild(c),N.appendChild(e)});break;case"area":var u=document.createElementNS(p,"g"),C=document.createElementNS(p,"g"),M=document.createElementNS(p,"g");f.length;u.setAttributeNS("charty","class","data-header"),C.setAttributeNS("charty","class","data-text"),M.setAttributeNS("charty","class","data-line"),i.setAttributeNS("charty","axes-vertical","Values");for(x=1;x<=10;x++){var L=10*(x-1),$=Math.round(S[0].largest-S[0].largest/10*(x-1));M.innerHTML+=''),C.innerHTML+='').concat($,"")}s&&u.appendChild(C),u.appendChild(M),N.appendChild(u),f.forEach(function(t,e){var a=document.createElementNS(p,"polygon"),n=f[e].value.length-1,r=1').concat(t.label,""))});break;case"pie":case"donut":case"section":var D=S[0].sum,F=0;f.forEach(function(t,e){var a="section"===b?t.value:t.value/D,r=document.createElementNS(p,"g"),n=g?f[e].value?"section"===b?" (".concat((100*t.value).toFixed(2),"%)"):" (".concat(t.value.toLocaleString()," - ").concat((100*a).toFixed(2),"%)"):null:"",c=_slicedToArray(tt(F),2),o=c[0],c=c[1],l=_slicedToArray(tt(F+=a),2),i=l[0],l=l[1],a=.5 ').concat(a," ").concat(n,"")),N.appendChild(r)}),"donut"===b&&(c.innerHTML+='',N.setAttributeNS("charty","mask","url(#donut-hole)"));break;case"ring":var T=32/f.length;f.forEach(function(t,e){var a=document.createElementNS(p,"g"),r=document.createElementNS(p,"circle"),n=document.createElementNS(p,"circle"),c=50-(3*e+1)*T/2,o=0<=t.value&&t.value<=1&&S[0].sum<=+f.length?t.value:0<=t.value&&t.value<=100&&S[0].sum<=100*f.length?t.value/100:null;a.setAttributeNS("charty","class","data-item"),r.setAttributeNS("charty","class","ring-bg"),r.setAttributeNS("charty","cx","50"),r.setAttributeNS("charty","cy","50"),r.setAttributeNS("charty","stroke-width","".concat(T)),r.setAttributeNS("charty","r","".concat(c)),n.setAttributeNS("charty","cx","50"),n.setAttributeNS("charty","cy","50"),n.setAttributeNS("charty","stroke","".concat(A[e])),n.setAttributeNS("charty","fill","none"),n.setAttributeNS("charty","stroke-width","".concat(T)),n.setAttributeNS("charty","r","".concat(c)),n.setAttributeNS("charty","stroke-dasharray","".concat(2*Math.PI*c," ").concat(2*Math.PI*c)),n.setAttributeNS("charty","stroke-dashoffset","".concat(2*Math.PI*c-100*o/100*(2*Math.PI*c))),a.appendChild(r),a.appendChild(n),N.appendChild(a),m&&(c=s?t.label:"",r=g?" (".concat(100*o.toFixed(2),"%)"):"",v.innerHTML+='"))});break;case"plot":case"line":case"bubble":var u=document.createElementNS(p,"g"),k=document.createElementNS(p,"g"),w=document.createElementNS(p,"g");f.length;u.setAttributeNS("charty","class","data-header"),k.setAttributeNS("charty","class","data-text"),w.setAttributeNS("charty","class","data-line"),i.setAttributeNS("charty","axes-vertical","Values");for(x=1;x<=10;x++){var H=10*(x-1),R=Math.round(S[0].largest-S[0].largest/10*(x-1));w.innerHTML+=''),k.innerHTML+='').concat(R,"")}s&&u.appendChild(k),u.appendChild(w),N.appendChild(u),f.forEach(function(t,o){var l=document.createElementNS(p,"g"),i=document.createElementNS(p,"g"),s=f[o].value.length,u=1 ').concat(t.label,""))});break;case"bar":case"column":case"bar-stack":case"column-stack":var V,_=!!b.startsWith("column"),O=!!b.endsWith("stack"),u=document.createElementNS(p,"g"),j=document.createElementNS(p,"g"),I=document.createElementNS(p,"g"),z=f.length,B=f.map(function(t,e,a){for(var r=[],n=0,c=0;c'),j.innerHTML+=' ').concat(G," ")}s&&u.appendChild(j),u.appendChild(I),N.appendChild(u),f.forEach(function(n,c){var t=Array.isArray(n.value)?n.value:[n.value],o=(B[c][B[c].length-1],t.length),l=100/z,i=l/o,s=i/2,u=document.createElementNS(p,"g"),d=document.createElementNS(p,"g");u.setAttributeNS("charty","class","data-item"),d.setAttributeNS("charty","class","data-text"),N.appendChild(u),t.forEach(function(t,e){if(z!==o)return X?console.log("Charty error:\n>>> The number of items in the value list does not match the number of titles"):null;var a,r;O?(r=t/K[e]*100,a=B[e][c]/K[e]*100,u.innerHTML+=' '),g&&(d.innerHTML+='').concat(t,""))):(r=100-(a=t/S[c].largest*100),u.innerHTML+=' '),j.innerHTML+=' ').concat(n.label," "),g&&(d.innerHTML+='').concat(t,"")))}),m&&(v.innerHTML+='")),u.appendChild(d)});break;case"rating":var U=S[0].max;f.forEach(function(t,e){var a=document.createElement("div"),r=document.createElement("div"),n=document.createElement("div"),c=document.createElement("div"),o=document.createElement("div"),l=t.value/U*100;a.setAttribute("class","data-item"),r.setAttribute("class","rating-label"),n.setAttribute("class","rating-value"),c.setAttribute("class","rating-bar-container"),o.setAttribute("class","rating-bar-colour"),r.innerHTML=t.label,n.innerHTML=t.value,o.setAttribute("style","width: ".concat(l,"%; background-color: ").concat(A[e],";")),s&&a.appendChild(r),g&&a.appendChild(n),a.appendChild(c),c.appendChild(o),i.appendChild(a)}),i.innerHTML+="Ratings are out of a total of ".concat(U,"");break;default:return}(charty=r.outerHTML)&&(o=""!==a.title&&a.title?"".concat(a.title,"
"):"",l=""!==a.caption&&a.caption?"".concat(a.caption,""):"",n=o||l?""):"",e.innerHTML="".concat(n).concat(charty),t.parentNode.replaceChild(e,t))}}),e(a.innerHTML)}),t.doneEach(function(){document.querySelectorAll(".docsify-charty").forEach(function(e,t){var r=_toConsumableArray(e.getElementsByClassName("data-item"));_toConsumableArray(e.getElementsByTagName("label")).forEach(function(t,a){t.addEventListener("mouseover",function(t){e.classList.add("hover"),r.forEach(function(t,e){a===e?t.classList.add("active"):t.classList.remove("active")})}),t.addEventListener("mouseout",function(t){e.classList.remove("hover"),r.forEach(function(t){return t.classList.remove("active")})})})})})}window.$docsify.charty=Object.assign(chartyOptions,window.$docsify.charty),window.$docsify.plugins=[].concat(charty,window.$docsify.plugins);
--------------------------------------------------------------------------------
/docs/CNAME:
--------------------------------------------------------------------------------
1 | charty.docsify.markbattistella.com
--------------------------------------------------------------------------------
/docs/LICENCE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 Mark Battistella
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 |
--------------------------------------------------------------------------------
/docs/charty/area-radar.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ```charty
4 | {
5 | "title": "Radar chart",
6 | "caption": "With a caption",
7 | "type": "radar",
8 | "options": {
9 | "legend": true,
10 | "labels": true,
11 | "numbers": true
12 | },
13 | "data": [
14 | {
15 | "label": "iPhone",
16 | "value": [64, 23, 45, 34, 52, 43, 59, 40],
17 | "points": [
18 | "Features",
19 | "Style",
20 | "Usability",
21 | "Ratings",
22 | "Apps",
23 | "Softness",
24 | "Ruggedness",
25 | "Appeal"
26 | ]
27 | },
28 | {
29 | "label": "Android",
30 | "value": [86, 53, 55, 66, 80, 46, 49, 40]
31 | },
32 | {
33 | "label": "Chrome",
34 | "value": [100, 35, 76, 90, 36, 9, 0, 90]
35 | }
36 | ]
37 | }
38 | ```
39 |
40 | ## Raw code
41 |
42 | ```json
43 | {
44 | "title": "Radar chart",
45 | "caption": "With a caption",
46 | "type": "radar",
47 | "options": {
48 | "legend": true,
49 | "labels": true,
50 | "numbers": true
51 | },
52 | "data": [
53 | {
54 | "label": "iPhone",
55 | "value": [64, 23, 45, 34, 52, 43, 59, 40],
56 | "points": [
57 | "Features",
58 | "Style",
59 | "Usability",
60 | "Ratings",
61 | "Apps",
62 | "Softness",
63 | "Ruggedness",
64 | "Appeal"
65 | ]
66 | },
67 | {
68 | "label": "Android",
69 | "value": [86, 53, 55, 66, 80, 46, 49, 40]
70 | },
71 | {
72 | "label": "Chrome",
73 | "value": [100, 35, 76, 90, 36, 9, 0, 90]
74 | }
75 | ]
76 | }
77 | ```
78 |
--------------------------------------------------------------------------------
/docs/charty/area-single.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ```charty
4 | {
5 | "title": "Area chart",
6 | "caption": "With a caption",
7 | "type": "area",
8 | "options": {
9 | "legend": true,
10 | "labels": true,
11 | "numbers": true
12 | },
13 | "data": [
14 | {
15 | "label": "2010",
16 | "value": [120, 23, 45, 34, 52, 43, 59, 40]
17 | }
18 | ]
19 | }
20 | ```
21 |
22 | ## Raw code
23 |
24 | ```json
25 | {
26 | "title": "Area chart",
27 | "caption": "With a caption",
28 | "type": "area",
29 | "options": {
30 | "legend": true,
31 | "labels": true,
32 | "numbers": true
33 | },
34 | "data": [
35 | {
36 | "label": "2010",
37 | "value": [120, 23, 45, 34, 52, 43, 59, 40]
38 | }
39 | ]
40 | }
41 | ```
42 |
--------------------------------------------------------------------------------
/docs/charty/area-stacked.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ```charty
4 | {
5 | "title": "Area chart",
6 | "caption": "With a caption",
7 | "type": "area",
8 | "options": {
9 | "legend": true,
10 | "labels": true,
11 | "numbers": true
12 | },
13 | "data": [
14 | {
15 | "label": "2010",
16 | "value": [120, 23, 45, 34, 52, 43, 59, 40]
17 | },
18 | {
19 | "label": "2010",
20 | "value": [1520, 523, 445, 364, 952, 43, 959, 40]
21 | }
22 | ]
23 | }
24 | ```
25 |
26 | ## Raw code
27 |
28 | ```json
29 | {
30 | "title": "Area chart",
31 | "caption": "With a caption",
32 | "type": "area",
33 | "options": {
34 | "legend": true,
35 | "labels": true,
36 | "numbers": true
37 | },
38 | "data": [
39 | {
40 | "label": "2010",
41 | "value": [120, 23, 45, 34, 52, 43, 59, 40]
42 | },
43 | {
44 | "label": "2010",
45 | "value": [1520, 523, 445, 364, 952, 43, 959, 40]
46 | }
47 | ]
48 | }
49 | ```
50 |
--------------------------------------------------------------------------------
/docs/charty/bar-horizontal-single.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ```charty
4 | {
5 | "title": "Bar chart",
6 | "caption": "With a caption",
7 | "type": "bar",
8 | "options": {
9 | "legend": true,
10 | "labels": true,
11 | "numbers": true
12 | },
13 | "data": [
14 | { "label": "2012", "value": [199, 100] },
15 | { "label": "2014", "value": [85, 217] }
16 | ]
17 | }
18 | ```
19 |
20 | ## Raw code
21 |
22 | ```json
23 | {
24 | "title": "Bar chart",
25 | "caption": "With a caption",
26 | "type": "bar",
27 | "options": {
28 | "legend": true,
29 | "labels": true,
30 | "numbers": true
31 | },
32 | "data": [
33 | { "label": "2012", "value": [199, 100] },
34 | { "label": "2014", "value": [85, 217] }
35 | ]
36 | }
37 | ```
38 |
--------------------------------------------------------------------------------
/docs/charty/bar-horizontal-stacked.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ```charty
4 | {
5 | "title": "Bar (stacked) chart",
6 | "caption": "With a caption",
7 | "type": "bar-stacked",
8 | "options": {
9 | "legend": true,
10 | "labels": true,
11 | "numbers": true
12 | },
13 | "data": [
14 | { "label": "2012", "value": [1, 2, 3, 4] },
15 | { "label": "2012", "value": [5, 6, 7, 8] },
16 | { "label": "2012", "value": [9, 1, 2, 3] },
17 | { "label": "2012", "value": [4, 5, 6, 7] }
18 | ]
19 | }
20 | ```
21 |
22 | ## Raw code
23 |
24 | ```json
25 | {
26 | "title": "Bar (stacked) chart",
27 | "caption": "With a caption",
28 | "type": "bar-stacked",
29 | "options": {
30 | "legend": true,
31 | "labels": true,
32 | "numbers": true
33 | },
34 | "data": [
35 | { "label": "2012", "value": [1, 2, 3, 4] },
36 | { "label": "2012", "value": [5, 6, 7, 8] },
37 | { "label": "2012", "value": [9, 1, 2, 3] },
38 | { "label": "2012", "value": [4, 5, 6, 7] }
39 | ]
40 | }
41 | ```
42 |
--------------------------------------------------------------------------------
/docs/charty/bar-vertical-single.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ```charty
4 | {
5 | "title": "Column chart",
6 | "caption": "With a caption",
7 | "type": "column",
8 | "options": {
9 | "legend": true,
10 | "labels": true,
11 | "numbers": true
12 | },
13 | "data": [
14 | { "label": "2012", "value": [199, 100] },
15 | { "label": "2014", "value": [85, 217] }
16 | ]
17 | }
18 | ```
19 |
20 | ## Raw code
21 |
22 | ```json
23 | {
24 | "title": "Column chart",
25 | "caption": "With a caption",
26 | "type": "column",
27 | "options": {
28 | "legend": true,
29 | "labels": true,
30 | "numbers": true
31 | },
32 | "data": [
33 | { "label": "2012", "value": [199, 100] },
34 | { "label": "2014", "value": [85, 217] }
35 | ]
36 | }
37 | ```
38 |
--------------------------------------------------------------------------------
/docs/charty/bar-vertical-stacked.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ```charty
4 | {
5 | "title": "Column (stacked) chart",
6 | "caption": "With a caption",
7 | "type": "column-stacked",
8 | "options": {
9 | "legend": true,
10 | "labels": true,
11 | "numbers": true
12 | },
13 | "data": [
14 | { "label": "2012", "value": [11, 2, 3, 4] },
15 | { "label": "2012", "value": [5, 6, 7, 8] },
16 | { "label": "2012", "value": [9, 1, 2, 3] },
17 | { "label": "2012", "value": [4, 5, 6, 7] }
18 | ]
19 | }
20 | ```
21 |
22 | ## Raw code
23 |
24 | ```json
25 | {
26 | "title": "Column (stacked) chart",
27 | "caption": "With a caption",
28 | "type": "column-stacked",
29 | "options": {
30 | "legend": true,
31 | "labels": true,
32 | "numbers": true
33 | },
34 | "data": [
35 | { "label": "2012", "value": [11, 2, 3, 4] },
36 | { "label": "2012", "value": [5, 6, 7, 8] },
37 | { "label": "2012", "value": [9, 1, 2, 3] },
38 | { "label": "2012", "value": [4, 5, 6, 7] }
39 | ]
40 | }
41 | ```
42 |
--------------------------------------------------------------------------------
/docs/charty/bar.md:
--------------------------------------------------------------------------------
1 | ```charty
2 | {
3 | "title": "Labels and numbers",
4 | "config": {
5 | "type": "bar",
6 | "labels": true,
7 | "numbers": true,
8 | "groups": 4
9 | },
10 | "data": [
11 | { "label": "2010", "value": 10, "color": "var(--mb-colour-green)" },
12 | { "label": "2011", "value": 150, "color": "var(--mb-colour-blue)" },
13 | { "label": "2012", "value": 30, "color": "var(--mb-colour-green)" },
14 | { "label": "2013", "value": 90, "color": "var(--mb-colour-yellow)" },
15 |
16 | { "label": "2010", "value": 10, "color": "var(--mb-colour-green)" },
17 | { "label": "2011", "value": 50, "color": "var(--mb-colour-blue)" },
18 | { "label": "2012", "value": 30, "color": "var(--mb-colour-green)" },
19 | { "label": "2013", "value": 90, "color": "var(--mb-colour-yellow)" }
20 | ]
21 | }
22 | ```
23 |
24 | ```charty
25 | {
26 | "title": "Labels, no numbers",
27 | "config": {
28 | "type": "bar",
29 | "labels": true,
30 | "numbers": false,
31 | "groups": 2
32 | },
33 | "data": [
34 | { "label": "2010", "value": 10, "color": "var(--mb-colour-blue)" },
35 | { "label": "2011", "value": 28, "color": "var(--mb-colour-green)" },
36 | { "label": "2012", "value": 89, "color": "var(--mb-colour-yellow)" }
37 | ]
38 | }
39 | ```
40 |
41 | ```charty
42 | {
43 | "title": "No labels or numbers",
44 | "config": {
45 | "type": "bar",
46 | "labels": false,
47 | "numbers": false
48 | },
49 | "data": [
50 | { "label": "2010", "value": 10, "color": "var(--mb-colour-blue)" },
51 | { "label": "2011", "value": 28, "color": "var(--mb-colour-green)" },
52 | { "label": "2012", "value": 89, "color": "var(--mb-colour-yellow)" }
53 | ]
54 | }
55 | ```
56 |
--------------------------------------------------------------------------------
/docs/charty/circle-donut.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ```charty
4 | {
5 | "title": "Donut chart",
6 | "caption": "With a caption",
7 | "type": "doughnut",
8 | "options": {
9 | "legend": true,
10 | "labels": true,
11 | "numbers": true
12 | },
13 | "data": [
14 | { "label": "1", "value": 54746850 },
15 | { "label": "2", "value": 319169166 },
16 | { "label": "3", "value": 31281822 },
17 | { "label": "4", "value": 142856940 },
18 | { "label": "5", "value": 275231882 }
19 | ]
20 | }
21 | ```
22 |
23 | ## Raw code
24 |
25 | ```json
26 | {
27 | "title": "Donut chart",
28 | "caption": "With a caption",
29 | "type": "doughnut",
30 | "options": {
31 | "legend": true,
32 | "labels": true,
33 | "numbers": true
34 | },
35 | "data": [
36 | { "label": "1", "value": 54746850 },
37 | { "label": "2", "value": 319169166 },
38 | { "label": "3", "value": 31281822 },
39 | { "label": "4", "value": 142856940 },
40 | { "label": "5", "value": 275231882 }
41 | ]
42 | }
43 | ```
44 |
--------------------------------------------------------------------------------
/docs/charty/circle-pie.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ```charty
4 | {
5 | "title": "Pie chart",
6 | "caption": "With a caption",
7 | "type": "pie",
8 | "options": {
9 | "legend": true,
10 | "labels": true,
11 | "numbers": true
12 | },
13 | "data": [
14 | { "label": "2012", "value": 1024 },
15 | { "label": "2010", "value": 200 },
16 | { "label": "2011", "value": 560 }
17 | ]
18 | }
19 | ```
20 |
21 | ## Raw code
22 |
23 | ```json
24 | {
25 | "title": "Pie chart",
26 | "caption": "With a caption",
27 | "type": "pie",
28 | "options": {
29 | "legend": true,
30 | "labels": true,
31 | "numbers": true
32 | },
33 | "data": [
34 | { "label": "2012", "value": 1024 },
35 | { "label": "2010", "value": 200 },
36 | { "label": "2011", "value": 560 }
37 | ]
38 | }
39 | ```
40 |
--------------------------------------------------------------------------------
/docs/charty/circle-rings.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ```charty
4 | {
5 | "title": "Ring chart",
6 | "caption": "With a caption",
7 | "type": "rings",
8 | "options": {
9 | "legend": true,
10 | "labels": true,
11 | "numbers": true
12 | },
13 | "data": [
14 | { "label": "2010", "value": 0.75 },
15 | { "label": "2010", "value": 0.45 },
16 | { "label": "2010", "value": 0.90 },
17 | { "label": "2012", "value": 0.80 }
18 | ]
19 | }
20 | ```
21 |
22 | ## Raw code
23 |
24 | ```json
25 | {
26 | "title": "Ring chart",
27 | "caption": "With a caption",
28 | "type": "rings",
29 | "options": {
30 | "legend": true,
31 | "labels": true,
32 | "numbers": true
33 | },
34 | "data": [
35 | { "label": "2010", "value": 0.75 },
36 | { "label": "2010", "value": 0.45 },
37 | { "label": "2010", "value": 0.90 },
38 | { "label": "2012", "value": 0.80 }
39 | ]
40 | }
41 | ```
42 |
--------------------------------------------------------------------------------
/docs/charty/circle-section.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ```charty
4 | {
5 | "title": "Section chart",
6 | "caption": "With a caption",
7 | "type": "section",
8 | "options": {
9 | "legend": true,
10 | "labels": true,
11 | "numbers": true
12 | },
13 | "data": [
14 | { "label": "2012", "value": 0.3 },
15 | { "label": "2010", "value": 0.5 },
16 | { "label": "2012", "value": 0.02 }
17 | ]
18 | }
19 | ```
20 |
21 | ## Raw code
22 |
23 | ```json
24 | {
25 | "title": "Section chart",
26 | "caption": "With a caption",
27 | "type": "section",
28 | "options": {
29 | "legend": true,
30 | "labels": true,
31 | "numbers": true
32 | },
33 | "data": [
34 | { "label": "2012", "value": 0.3 },
35 | { "label": "2010", "value": 0.5 },
36 | { "label": "2012", "value": 0.02 }
37 | ]
38 | }
39 | ```
40 |
--------------------------------------------------------------------------------
/docs/charty/plot-line-single.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ```charty
4 | {
5 | "title": "Line chart",
6 | "caption": "With a caption",
7 | "type": "line",
8 | "options": {
9 | "legend": true,
10 | "labels": true,
11 | "numbers": true
12 | },
13 | "data": [
14 | { "label": "Features", "value": [ 10, 90, 20, 80, 60, 70, 30, 40, 0 ] }
15 | ]
16 | }
17 | ```
18 |
19 | ## Raw code
20 |
21 | ```json
22 | {
23 | "title": "Line chart",
24 | "caption": "With a caption",
25 | "type": "line",
26 | "options": {
27 | "legend": true,
28 | "labels": true,
29 | "numbers": true
30 | },
31 | "data": [
32 | { "label": "Features", "value": [ 10, 90, 20, 80, 60, 70, 30, 40, 0 ] }
33 | ]
34 | }
35 | ```
36 |
--------------------------------------------------------------------------------
/docs/charty/plot-line-stacked.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ```charty
4 | {
5 | "title": "Line chart",
6 | "caption": "With a caption",
7 | "type": "line",
8 | "options": {
9 | "legend": true,
10 | "labels": true,
11 | "numbers": true
12 | },
13 | "data": [
14 | {
15 | "label": "Features",
16 | "value": [ 231, 923, 234, 834, 345, 643, 464, 0, 743, 335 ]
17 | },
18 | { "label": "Sales", "value": [ 10, 90, 20, 80, 30, 70 ] }
19 | ]
20 | }
21 | ```
22 |
23 | # Raw code
24 |
25 | ```json
26 | {
27 | "title": "Line chart",
28 | "caption": "With a caption",
29 | "type": "line",
30 | "options": {
31 | "legend": true,
32 | "labels": true,
33 | "numbers": true
34 | },
35 | "data": [
36 | {
37 | "label": "Features",
38 | "value": [ 231, 923, 234, 834, 345, 643, 464, 0, 743, 335 ]
39 | },
40 | { "label": "Sales", "value": [ 10, 90, 20, 80, 30, 70 ] }
41 | ]
42 | }
43 | ```
44 |
--------------------------------------------------------------------------------
/docs/charty/plot-scatter-bubble.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ```charty
4 | {
5 | "title": "Bubble chart",
6 | "caption": "With a caption",
7 | "type": "bubble",
8 | "options": {
9 | "legend": true,
10 | "labels": true,
11 | "numbers": true
12 | },
13 | "data": [
14 | { "label": "Test 1", "value": [ 2455, 7665, 47, 70, 443, 2142 ] },
15 | { "label": "Test 2", "value": [ 6321, 8765, 223, 873, 443, 2142 ] }
16 | ]
17 | }
18 | ```
19 |
20 | # Raw code
21 |
22 | ```json
23 | {
24 | "title": "Bubble chart",
25 | "caption": "With a caption",
26 | "type": "bubble",
27 | "options": {
28 | "legend": true,
29 | "labels": true,
30 | "numbers": true
31 | },
32 | "data": [
33 | { "label": "Test 1", "value": [ 2455, 7665, 47, 70, 443, 2142 ] },
34 | { "label": "Test 2", "value": [ 6321, 8765, 223, 873, 443, 2142 ] }
35 | ]
36 | }
37 | ```
38 |
--------------------------------------------------------------------------------
/docs/charty/plot-scatter-point.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ```charty
4 | {
5 | "title": "Scatter chart",
6 | "caption": "With a caption",
7 | "type": "scatter",
8 | "options": {
9 | "legend": true,
10 | "labels": true,
11 | "numbers": true
12 | },
13 | "data": [
14 | { "label": "2010", "value": [ 10, 90, 20, 80, 30, 70, 20 ] },
15 | { "label": "2015", "value": [ 245, 765, 467, 70, 443, 242, 30 ] },
16 | { "label": "2020", "value": [ 995, 33, 85, 650, 56, 200 ] }
17 | ]
18 | }
19 | ```
20 |
21 | ## Raw code
22 |
23 | ```json
24 | {
25 | "title": "Scatter chart",
26 | "caption": "With a caption",
27 | "type": "scatter",
28 | "options": {
29 | "legend": true,
30 | "labels": true,
31 | "numbers": true
32 | },
33 | "data": [
34 | { "label": "2010", "value": [ 10, 90, 20, 80, 30, 70, 20 ] },
35 | { "label": "2015", "value": [ 245, 765, 467, 70, 443, 242, 30 ] },
36 | { "label": "2020", "value": [ 995, 33, 85, 650, 56, 200 ] }
37 | ]
38 | }
39 | ```
40 |
--------------------------------------------------------------------------------
/docs/charty/rating.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ```charty
4 | {
5 | "title": "Review chart",
6 | "caption": "With a caption",
7 | "type": "review",
8 | "options": {
9 | "labels": true,
10 | "numbers": true
11 | },
12 | "data": [
13 | { "label": "2010", "value": 10 },
14 | { "label": "2012", "value": 20 },
15 | { "label": "2014", "value": 30 }
16 | ]
17 | }
18 | ```
19 |
20 | ## Raw code
21 |
22 | ```json
23 | {
24 | "title": "Review chart",
25 | "caption": "With a caption",
26 | "type": "review",
27 | "options": {
28 | "labels": true,
29 | "numbers": true
30 | },
31 | "data": [
32 | { "label": "2010", "value": 10 },
33 | { "label": "2012", "value": 20 },
34 | { "label": "2014", "value": 30 }
35 | ]
36 | }
37 | ```
38 |
--------------------------------------------------------------------------------
/docs/demo/area.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markbattistella/docsify-charty/cddb65a204bbd09de31b654ef3b3786cc6a346f9/docs/demo/area.jpg
--------------------------------------------------------------------------------
/docs/demo/bar-stack.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markbattistella/docsify-charty/cddb65a204bbd09de31b654ef3b3786cc6a346f9/docs/demo/bar-stack.jpg
--------------------------------------------------------------------------------
/docs/demo/bar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markbattistella/docsify-charty/cddb65a204bbd09de31b654ef3b3786cc6a346f9/docs/demo/bar.jpg
--------------------------------------------------------------------------------
/docs/demo/bubble.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markbattistella/docsify-charty/cddb65a204bbd09de31b654ef3b3786cc6a346f9/docs/demo/bubble.jpg
--------------------------------------------------------------------------------
/docs/demo/column-stack.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markbattistella/docsify-charty/cddb65a204bbd09de31b654ef3b3786cc6a346f9/docs/demo/column-stack.jpg
--------------------------------------------------------------------------------
/docs/demo/column.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markbattistella/docsify-charty/cddb65a204bbd09de31b654ef3b3786cc6a346f9/docs/demo/column.jpg
--------------------------------------------------------------------------------
/docs/demo/donut.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markbattistella/docsify-charty/cddb65a204bbd09de31b654ef3b3786cc6a346f9/docs/demo/donut.jpg
--------------------------------------------------------------------------------
/docs/demo/line-stack.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markbattistella/docsify-charty/cddb65a204bbd09de31b654ef3b3786cc6a346f9/docs/demo/line-stack.jpg
--------------------------------------------------------------------------------
/docs/demo/line.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markbattistella/docsify-charty/cddb65a204bbd09de31b654ef3b3786cc6a346f9/docs/demo/line.jpg
--------------------------------------------------------------------------------
/docs/demo/pie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markbattistella/docsify-charty/cddb65a204bbd09de31b654ef3b3786cc6a346f9/docs/demo/pie.jpg
--------------------------------------------------------------------------------
/docs/demo/radar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markbattistella/docsify-charty/cddb65a204bbd09de31b654ef3b3786cc6a346f9/docs/demo/radar.jpg
--------------------------------------------------------------------------------
/docs/demo/rating.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markbattistella/docsify-charty/cddb65a204bbd09de31b654ef3b3786cc6a346f9/docs/demo/rating.jpg
--------------------------------------------------------------------------------
/docs/demo/rings.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markbattistella/docsify-charty/cddb65a204bbd09de31b654ef3b3786cc6a346f9/docs/demo/rings.jpg
--------------------------------------------------------------------------------
/docs/demo/scatter.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markbattistella/docsify-charty/cddb65a204bbd09de31b654ef3b3786cc6a346f9/docs/demo/scatter.jpg
--------------------------------------------------------------------------------
/docs/demo/section.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markbattistella/docsify-charty/cddb65a204bbd09de31b654ef3b3786cc6a346f9/docs/demo/section.jpg
--------------------------------------------------------------------------------
/docs/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markbattistella/docsify-charty/cddb65a204bbd09de31b654ef3b3786cc6a346f9/docs/favicon.ico
--------------------------------------------------------------------------------
/docs/home.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | # docsify-charty
5 |
6 | by Mark Battistella
7 |
8 | [](https://www.paypal.me/markbattistella/6AUD) [](https://www.buymeacoffee.com/markbattistella)
9 |
10 |
11 |
12 |
15 | ---
16 |
17 |
18 |
19 | ## ** Home **
20 |
21 | [Home](https://raw.githubusercontent.com/markbattistella/docsify-charty/main/README.md ':include')
22 |
23 | ## ** Area **
24 |
25 | [Area - single](charty/area-single.md ':include')
26 |
27 | ---
28 |
29 | [Area - stacked](charty/area-stacked.md ':include')
30 |
31 | ## ** Radar **
32 |
33 | [Area - radar](charty/area-radar.md ':include')
34 |
35 | ## ** Pie **
36 |
37 | [Circle - Pie](charty/circle-pie.md ':include')
38 |
39 | ## ** Donut **
40 |
41 | [Circle - Donut](charty/circle-donut.md ':include')
42 |
43 | ## ** Section **
44 |
45 | [Circle - Donut](charty/circle-section.md ':include')
46 |
47 | ## ** Rings **
48 |
49 | [Circle - Rings](charty/circle-rings.md ':include')
50 |
51 | ## ** Plot **
52 |
53 | [Plot - scatter](charty/plot-scatter-point.md ':include')
54 |
55 | [Plot - bubble](charty/plot-scatter-bubble.md ':include')
56 |
57 | ## ** Line **
58 |
59 | [Line - single](charty/plot-line-single.md ':include')
60 |
61 | ---
62 |
63 | [Line - stacked](charty/plot-line-stacked.md ':include')
64 |
65 | ## ** Bar **
66 |
67 | [Bar - horizontal - single](charty/bar-horizontal-single.md ':include')
68 |
69 | ---
70 |
71 | [Bar - vertical - single](charty/bar-vertical-single.md ':include')
72 |
73 | ---
74 |
75 | [Bar - horizontal - stacked](charty/bar-horizontal-stacked.md ':include')
76 |
77 | ---
78 |
79 | [Bar - vertical - stacked](charty/bar-vertical-stacked.md ':include')
80 |
81 | ## ** Rating **
82 |
83 | [rating](charty/rating.md ':include')
84 |
85 |
86 |
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | docsify: Charty
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/docs/site/404.md:
--------------------------------------------------------------------------------
1 | # Sorry this page is not found
2 |
3 | !> Please [log an issue](https://github.com/markbattistella/docsify-charty/issues/new?labels=bug,documentation&title=404+error+page) so I can fix it :thumbsup:
4 |
5 | Or if you wait 30 seconds this page will redirect you to the home page
6 |
7 |
8 |
--------------------------------------------------------------------------------
/docs/site/cover.md:
--------------------------------------------------------------------------------
1 | # **charty** plugin
for docsify.js :id=main
2 |
3 | Add some charts to your life
4 |
5 | [Read more ↓](#docsify-charty)
6 |
7 | [Github](https://github.com/markbattistella/docsify-charty)
8 | [npmjs](https://www.npmjs.com/package/@markbattistella/docsify-charty)
9 |
--------------------------------------------------------------------------------
/docs/site/font/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "",
3 | "css_prefix_text": "i-",
4 | "css_use_suffix": false,
5 | "hinting": true,
6 | "units_per_em": 1000,
7 | "ascent": 850,
8 | "copyright": "Mark Battistella",
9 | "glyphs": [
10 | {
11 | "uid": "1dbc2b4a7f00ef209a85e4b5d9fedec4",
12 | "css": "macos",
13 | "code": 59392,
14 | "src": "zocial"
15 | },
16 | {
17 | "uid": "8aff323697468c4a63993cde00386ec6",
18 | "css": "windows",
19 | "code": 61818,
20 | "src": "fontawesome"
21 | },
22 | {
23 | "uid": "47a35af762c8e06f3d152750134c8750",
24 | "css": "linux",
25 | "code": 61820,
26 | "src": "fontawesome"
27 | },
28 | {
29 | "uid": "767fede84586366cd7d6c835be745454",
30 | "css": "ios",
31 | "code": 59393,
32 | "src": "entypo"
33 | },
34 | {
35 | "uid": "aaf371ab44841e9aaffebd179d324ce4",
36 | "css": "android",
37 | "code": 59395,
38 | "src": "zocial"
39 | },
40 | {
41 | "uid": "8aa99bc60f3553bb3e31b73dd6e744c8",
42 | "css": "applications",
43 | "code": 61749,
44 | "src": "fontawesome"
45 | },
46 | {
47 | "uid": "bc4b94dd7a9a1dd2e02f9e4648062596",
48 | "css": "fork",
49 | "code": 61734,
50 | "src": "fontawesome"
51 | },
52 | {
53 | "uid": "8d584f31a5d54de313f1f3da28708ec0",
54 | "css": "pp",
55 | "code": 62274,
56 | "src": "entypo"
57 | },
58 | {
59 | "uid": "c2958cfd1eed4434ab6e4bd6ab337af9",
60 | "css": "bmac",
61 | "code": 59394,
62 | "src": "linecons"
63 | },
64 | {
65 | "uid": "d7271d490b71df4311e32cdacae8b331",
66 | "css": "home",
67 | "code": 59396,
68 | "src": "fontawesome"
69 | },
70 | {
71 | "uid": "2f9f67ee4354feef8c1f51e03bac6ef3",
72 | "css": "help",
73 | "code": 59397,
74 | "src": "entypo"
75 | }
76 | ]
77 | }
--------------------------------------------------------------------------------
/docs/site/font/mfp.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markbattistella/docsify-charty/cddb65a204bbd09de31b654ef3b3786cc6a346f9/docs/site/font/mfp.eot
--------------------------------------------------------------------------------
/docs/site/font/mfp.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/docs/site/font/mfp.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markbattistella/docsify-charty/cddb65a204bbd09de31b654ef3b3786cc6a346f9/docs/site/font/mfp.ttf
--------------------------------------------------------------------------------
/docs/site/font/mfp.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markbattistella/docsify-charty/cddb65a204bbd09de31b654ef3b3786cc6a346f9/docs/site/font/mfp.woff
--------------------------------------------------------------------------------
/docs/site/font/mfp.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markbattistella/docsify-charty/cddb65a204bbd09de31b654ef3b3786cc6a346f9/docs/site/font/mfp.woff2
--------------------------------------------------------------------------------
/docs/site/nav.md:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/docs/site/sidebar.md:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/docs/site/style.min.css:
--------------------------------------------------------------------------------
1 | /*! (c) Mark Battistella | @markbattistella */
2 |
3 | :root {
4 | --emoji-size: calc( 1.3 * 1em );
5 | --mb-colour-green: #00b894;
6 | --mb-colour-yellow: #fdcb6e;
7 | --mb-colour-red: #d63031;
8 | --mb-colour-blue: #0984e3;
9 | --mb-colour-orange: #e17055;
10 | --mb-colour-pink: #e84393;
11 | --mb-colour-purple: #6c5ce7;
12 | --mb-colour-gray: #2d3436;
13 | --mb-colour-grey: var(--mb-colour-gray);
14 | --mb-colour-gray2: #636e72;
15 | --mb-colour-grey2: var(--mb-colour-gray2);
16 | --mb-colour-light: #dfe6e9;
17 | }
18 |
19 |
20 |
21 | /* track */
22 | body { overflow-y: scroll; }
23 |
24 | ::-webkit-scrollbar {
25 | width: 20px;
26 | }
27 |
28 | ::-webkit-scrollbar-track {
29 | background: #FFF;
30 | border-left: 1px solid #EEE;
31 | }
32 | ::-webkit-scrollbar-thumb {
33 | background-color: var(--theme-color);
34 | }
35 |
36 |
37 | /* docsify cleanup */
38 | :root {
39 | --tab-no: 11;
40 | }
41 | [class*=docsify-tabs--] .docsify-tabs__content {
42 | margin: 2em 0;
43 | padding: 0;
44 | border: 0;
45 | }
46 | .docsify-tabs__tab {
47 | width: calc( 100% / var(--tab-no) );
48 | text-align: center;
49 | }
50 | .docsify-tabs__tab--active+.docsify-tabs__content {
51 | overflow: visible;
52 | }
53 | .sidebar-toggle,
54 | .github-corner {
55 | display: none;
56 | }
57 |
58 |
59 |
60 |
61 |
62 | /* fonts */
63 | @font-face {
64 | font-family: 'fontello';
65 | src: url('font/mfp.eot?96951351');
66 | src: url('font/mfp.eot?96951351#iefix') format('embedded-opentype'),
67 | url('font/mfp.woff2?96951351') format('woff2'),
68 | url('font/mfp.woff?96951351') format('woff'),
69 | url('font/mfp.ttf?96951351') format('truetype'),
70 | url('font/mfp.svg?96951351#fontello') format('svg');
71 | font-weight: normal;
72 | font-style: normal;
73 | }
74 | [class^="i-"]:before {
75 | font-family: "fontello";
76 | font-style: normal;
77 | font-weight: normal;
78 | speak: never;
79 | display: inline-block;
80 | text-decoration: inherit;
81 | margin: 0;
82 | text-align: center;
83 | font-variant: normal;
84 | text-transform: none;
85 | -webkit-font-smoothing: antialiased;
86 | -moz-osx-font-smoothing: grayscale;
87 | }
88 | .i-windows:before { content: '\f17a'; }
89 | .i-macos:before { content: '\e800'; }
90 | .i-linux:before { content: '\f17c'; }
91 | .i-ios:before { content: '\e801'; }
92 | .i-android:before { content: '\e803'; }
93 | .i-apps:before { content: '\f135'; }
94 | .i-helper:before { content: '\e805'; }
95 | .i-fork:before { content: '\f126'; }
96 | .i-home:before { content: '\e804'; }
97 | .i-paypal:before { content: '\f342'; }
98 | .i-bmac:before { content: '\e802'; }
99 | .mb-button [class^="i-"]:before{
100 | position: absolute;
101 | top: 0.5em;
102 | left: 0.75em;;
103 | width: 2em;
104 | line-height: 2em;
105 | text-align: center;
106 | background: rgba(255, 255, 255, 0.3);
107 | border-radius: calc(
108 | var(--cover-button-border-radius) * 2.5 )
109 | var(--cover-button-border-radius);
110 | color: rgba(0,0,0,0.7);
111 | }
112 |
113 | #main a[target="_blank"]:after{
114 | content:"\29C9";
115 | display:inline-block;
116 | margin-left:5px
117 | }
118 | #main:not([align=center]) a[target="_blank"]:after{ content: ''; }
119 |
120 | .mb-button{
121 | position:relative;
122 | text-decoration:none!important;
123 | line-height:3em;
124 | border:0!important;
125 | display:block;
126 | text-align:left;
127 | padding:0 6em 0 4em;
128 | border-radius:var(--cover-button-border-radius);
129 | background:var(--mb-theme-02);
130 | color:#FFF!important;
131 | margin-bottom:1em
132 | }
133 | .mb-button[href^="https://github.com"]{
134 | background:var(--mb-theme-01)
135 | }
136 | .mb-button:after{
137 | content:'\2192';
138 | position:absolute;
139 | right:.75em;
140 | top:.5em;
141 | width:2em;
142 | line-height:2em;
143 | text-align:center;
144 | background:rgba(0,0,0,0.3);
145 | border-radius:var(--cover-button-border-radius)
146 | }
147 | #linked-areas p{
148 | display:flex;
149 | flex-wrap:wrap;
150 | justify-content:space-around
151 | }
152 | #linked-areas p a{
153 | flex:48%
154 | }
155 | #linked-areas p a:nth-child(even){
156 | margin-left:2%
157 | }
158 | section.cover.show:before{
159 | background: linear-gradient(
160 | to
161 | bottom,
162 | var(--mb-colour-pink)
163 | 0%,
164 | var(--mb-colour-blue)
165 | 100%
166 | )
167 | }
168 | section.cover{
169 | color:#FFF
170 | }
171 | section.cover h1{
172 | text-shadow:0 1px 1em rgba(0,0,0,0.25)
173 | }
174 | section.cover p:last-child a{
175 | border:none!important;
176 | background:rgba(255,255,255,0.1)!important;
177 | color:#FFF!important
178 | }
179 | section.cover .cover-main{
180 | max-width:100%
181 | }
182 | section.cover h1 span span:before{
183 | content:"Fudging"
184 | }
185 | section.cover h1:hover span span:before{
186 | content:"F#%&ing"
187 | }
188 | .cover .cover-main p:last-child a:first-child{
189 | color:#222!important;
190 | background:#FFF!important;
191 | width:100%;
192 | max-width:34em;
193 | line-height:3em;
194 | font-weight:700
195 | }
196 | section.cover p:last-child .fund{
197 | text-decoration:none!important;
198 | line-height:2.5em;
199 | display:inline-block;
200 | border:0;
201 | color:#FFF!important;
202 | position:relative;
203 | padding:0 2em 0 3.5em;
204 | border-radius:var(--cover-button-border-radius);
205 | margin:.5em 1em;
206 | min-width:13em
207 | }
208 | section.cover p:last-child .fund:hover{
209 | box-shadow:0 0 5em rgba(255,255,255,0.1);
210 | transform:scale(1.03)
211 | }
212 | section.cover p:last-child .fund i{
213 | position:absolute;
214 | left:.5em;
215 | top:.35em;
216 | background:rgba(0,0,0,0.3);
217 | width:2em;
218 | text-align:center;
219 | line-height:1.75em;
220 | border-radius:var(--cover-button-border-radius)
221 | }
222 | h1,h2,h3,h4,h5,h6{
223 | font-weight:700!important
224 | }
225 | h1 i[class^="i-"]{
226 | margin-right:.3em
227 | }
228 | h1 i[class^="i-"]:before{
229 | background:rgba(0,0,0,0.1);
230 | border-radius:100%;
231 | padding:.5em;
232 | font-size:50%;
233 | margin:0;
234 | text-indent:0;
235 | width:2.5em;
236 | height:2.5em;
237 | line-height:1.1;
238 | vertical-align:text-bottom;
239 | border:5px double rgba(0,0,0,0.1)
240 | }
241 | article#main{
242 | padding-bottom:3em
243 | }
244 | article#main h4,article#main h5,article#main h6{
245 | font-size:var(--heading-h4-font-size)
246 | }
247 | article#main a{
248 | font-weight:700;
249 | color:var(--blockquote-color)
250 | }
251 |
252 | .markdown-section li p {
253 | margin: 0;
254 | }
255 | .markdown-section li {
256 | margin-bottom: 1em;
257 | }
258 |
259 | .markdown-section ol ol,.markdown-section ul ol{
260 | list-style-type:lower-alpha
261 | }
262 | .markdown-section ol ol ol,.markdown-section ul ol ol{
263 | list-style-type:lower-roman
264 | }
265 | .markdown-section strong + .emoji{
266 | width:1em
267 | }
268 | .mbwrapper{
269 | position:relative;
270 | padding-bottom:calc(var(--aspect-ratio,.5625) * 100%);
271 | height:0
272 | }
273 | .mbwrapper iframe,.mbwrapper video {
274 | position:absolute;
275 | top:0;
276 | left:0;
277 | width:100%;
278 | height:100%
279 | }
280 | img{
281 | border-radius:.6em;
282 | margin-bottom:1em!important
283 | }
284 |
285 |
286 | /* small screen */
287 | @media( max-width: 800px ){
288 | #linked-areas p a{
289 | flex:100%;
290 | margin:.5em 0!important
291 | }
292 | .docsify-tabs__tab { width: 100%; }
293 | }
294 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@markbattistella/docsify-charty",
3 | "version": "3.0.0",
4 | "description": "Add charts and graphs to your docsify website",
5 | "main": "dist/docsify-charty.min.js",
6 | "repository": {
7 | "type": "git",
8 | "url": "git+https://github.com/markbattistella/docsify-charty.git"
9 | },
10 | "scripts": {
11 | "launch": "docsify serve ./docs -o",
12 | "update": "ncu -u",
13 | "babel": "npx babel ./dist/docsify-charty.js -o ./dist/docsify-charty.babel.js",
14 | "uglify": "uglifyjs ./dist/docsify-charty.babel.js --verbose -c -m -o ./dist/docsify-charty.min.js",
15 | "minify": "npm run babel && npm run uglify",
16 | "patch": "node ./.github/scripts/release.js -patch",
17 | "minor": "node ./.github/scripts/release.js -minor",
18 | "major": "node ./.github/scripts/release.js -major"
19 | },
20 | "devDependencies": {
21 | "@babel/cli": "^7.24.7",
22 | "@babel/core": "^7.24.7",
23 | "@babel/preset-env": "^7.24.7",
24 | "jsonfile": "^6.1.0"
25 | },
26 | "babel": {
27 | "presets": [
28 | "@babel/env"
29 | ]
30 | },
31 | "unpkg": "./dist/docsify-charty.min.js",
32 | "jsdelivr": "./dist/docsify-charty.min.js",
33 | "keywords": [
34 | "docsify",
35 | "plugin",
36 | "charts",
37 | "graphs",
38 | "pie chart",
39 | "line graph"
40 | ],
41 | "author": "Mark Battistella",
42 | "license": "MIT",
43 | "bugs": {
44 | "url": "https://github.com/markbattistella/docsify-charty/issues"
45 | },
46 | "homepage": "https://charty.docsify.markbattistella.com/"
47 | }
48 |
--------------------------------------------------------------------------------