@markbattistella/docsify-charty 2.0.2 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/README.md +60 -77
- package/dist/docsify-charty.css +1 -10
- package/dist/docsify-charty.js +2 -5
- package/dist/docsify-charty.min.css +1 -5
- package/dist/docsify-charty.min.js +2 -6
- package/package.json +45 -38
- package/.gitattributes +0 -2
- package/.nojekyll +0 -0
package/CHANGELOG.md
ADDED
package/README.md
CHANGED
|
@@ -1,66 +1,58 @@
|
|
|
1
|
-
<div align="center">
|
|
1
|
+
<div align="center" class="gh">
|
|
2
2
|
|
|
3
|
-
# docsify
|
|
4
|
-
|
|
5
|
-
<small style="margin-bottom:2em;">by Mark Battistella</small>
|
|
6
|
-
|
|
7
|
-
[](https://www.paypal.me/markbattistella/6AUD) [](https://www.buymeacoffee.com/markbattistella)
|
|
8
|
-
|
|
9
|
-
:sparkles: [](https://markbattistella.github.io/docsify-charty-docs/) :sparkles:
|
|
3
|
+
# docsify.js charty
|
|
10
4
|
|
|
11
5
|
</div>
|
|
12
6
|
|
|
13
|
-
|
|
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.
|
|
14
8
|
|
|
15
9
|
## Installation
|
|
16
10
|
|
|
17
11
|
### Update `index.html` file
|
|
18
12
|
|
|
13
|
+
Assuming you have a working [docsify](https://docsify.js.org/) framework set up, it is easy to use the plugin.
|
|
14
|
+
|
|
19
15
|
1. Add the following script and stylesheet to your `index.html` via either CDN or downloading it and using it locally:
|
|
20
16
|
|
|
21
|
-
**unpkg.com**
|
|
22
17
|
```html
|
|
23
|
-
|
|
24
|
-
<
|
|
25
|
-
|
|
18
|
+
<!-- unpkg.com -->
|
|
19
|
+
<script src="https://unpkg.com/@markbattistella/docsify-charty@latest/dist/docsify-charty.min.js"></script>
|
|
20
|
+
<link rel="stylesheet" href="https://unpkg.com/@markbattistella/docsify-charty@latest/dist/docsify-charty.min.css">
|
|
26
21
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
<
|
|
30
|
-
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@markbattistella/docsify-charty@latest/dist/docsify-charty.min.css">
|
|
31
|
-
```
|
|
22
|
+
<!-- jsDelivr -->
|
|
23
|
+
<script src="https://cdn.jsdelivr.net/npm/@markbattistella/docsify-charty@latest"></script>
|
|
24
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@markbattistella/docsify-charty@latest/dist/docsify-charty.min.css">
|
|
32
25
|
|
|
33
|
-
|
|
34
|
-
```html
|
|
26
|
+
<!-- locally -->
|
|
35
27
|
<script src="docsify-charty.min.js"></script>
|
|
36
28
|
<link rel="stylesheet" href="docsify-charty.min.css">
|
|
37
29
|
```
|
|
38
30
|
|
|
39
|
-
1. In docsify setup configure the plugin
|
|
31
|
+
1. In docsify setup, configure the plugin:
|
|
40
32
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
"mode": String,
|
|
46
|
-
"debug": Boolean
|
|
47
|
-
}
|
|
48
|
-
};
|
|
49
|
-
```
|
|
33
|
+
```js
|
|
34
|
+
<script>
|
|
35
|
+
window.$docsify = {
|
|
36
|
+
charty: {
|
|
50
37
|
|
|
51
|
-
|
|
38
|
+
// Global theme for chart colours in HEX
|
|
39
|
+
theme: '.',
|
|
52
40
|
|
|
53
|
-
|
|
41
|
+
// Accepts "dark" or "light"
|
|
42
|
+
mode: "light",
|
|
54
43
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
44
|
+
// Boolean to enable or disable debug messages
|
|
45
|
+
debug: false
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
</script>
|
|
49
|
+
```
|
|
58
50
|
|
|
59
51
|
## Configuration
|
|
60
52
|
|
|
61
|
-
|
|
53
|
+
There are several options available for the docsify-charty plugin:
|
|
62
54
|
|
|
63
|
-
> Example: [index.html](https://github.com/markbattistella/docsify-charty
|
|
55
|
+
> Example: [index.html](https://github.com/markbattistella/docsify-charty/blob/b792e7701e740587f48598c7b61bc7f7ea39c366/docs/index.html#L36-L40)
|
|
64
56
|
|
|
65
57
|
| Name | Type | Example | Description |
|
|
66
58
|
|---------|-----------|-----------|-------------------------------------------|
|
|
@@ -105,87 +97,78 @@ npm i @markbattistella/docsify-charty
|
|
|
105
97
|
}
|
|
106
98
|
]
|
|
107
99
|
}
|
|
108
|
-
|
|
109
|
-
// can't show it here
|
|
100
|
+
\`\`\`
|
|
110
101
|
```
|
|
111
102
|
|
|
112
103
|
## Types of charts
|
|
113
104
|
|
|
114
105
|
### Circular
|
|
115
106
|
|
|
116
|
-
####
|
|
107
|
+
#### Pie chart
|
|
117
108
|
|
|
118
|
-
|
|
119
110
|
|
|
120
|
-
####
|
|
111
|
+
#### Donut / Doughnut chart
|
|
121
112
|
|
|
122
|
-
|
|
123
114
|
|
|
124
|
-
####
|
|
115
|
+
#### Section / Sectional chart
|
|
125
116
|
|
|
126
|
-
|
|
127
118
|
|
|
128
|
-
####
|
|
119
|
+
#### Rings chart
|
|
129
120
|
|
|
130
|
-
|
|
131
122
|
|
|
132
123
|
### Area
|
|
133
124
|
|
|
134
|
-
####
|
|
125
|
+
#### Radar chart
|
|
135
126
|
|
|
136
|
-
|
|
137
128
|
|
|
138
|
-
####
|
|
129
|
+
#### Area chart
|
|
139
130
|
|
|
140
|
-
|
|
141
132
|
|
|
142
133
|
### Plot
|
|
143
134
|
|
|
144
|
-
####
|
|
135
|
+
#### Scatter chart
|
|
145
136
|
|
|
146
|
-
|
|
147
138
|
|
|
148
|
-
####
|
|
139
|
+
#### Bubble chart
|
|
149
140
|
|
|
150
|
-
|
|
151
142
|
|
|
152
|
-
####
|
|
143
|
+
#### Line chart
|
|
153
144
|
|
|
154
|
-
<br>
|
|
146
|
+
|
|
156
147
|
|
|
157
148
|
### Bar / Column
|
|
158
149
|
|
|
159
|
-
###
|
|
150
|
+
### Bar / Bar-stack chart
|
|
160
151
|
|
|
161
|
-
<br>
|
|
153
|
+
|
|
163
154
|
|
|
164
|
-
###
|
|
155
|
+
### Column / Column-stack chart
|
|
165
156
|
|
|
166
|
-
<br>
|
|
158
|
+
|
|
168
159
|
|
|
169
160
|
### Rating
|
|
170
161
|
|
|
171
|
-
|
|
172
163
|
|
|
173
164
|
## Contributing
|
|
174
165
|
|
|
175
|
-
1. Clone the repo:
|
|
176
|
-
|
|
177
|
-
`git clone https://github.com/markbattistella/docsify-charty.git`
|
|
178
|
-
|
|
179
|
-
1. Create your feature branch:
|
|
180
|
-
|
|
181
|
-
`git checkout -b my-feature`
|
|
182
|
-
|
|
183
|
-
1. Commit your changes:
|
|
166
|
+
1. Clone the repo: `git clone https://github.com/markbattistella/docsify-charty.git`
|
|
184
167
|
|
|
185
|
-
|
|
168
|
+
1. Create your feature branch: `git checkout -b my-feature`
|
|
186
169
|
|
|
187
|
-
1. `
|
|
170
|
+
1. Commit your changes: `git commit -am 'Add some feature'`
|
|
188
171
|
|
|
189
|
-
|
|
172
|
+
1. `Push` to the branch: `git push origin my-new-feature`
|
|
190
173
|
|
|
191
174
|
1. Submit the `pull` request
|
package/dist/docsify-charty.css
CHANGED
|
@@ -1,10 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
* docsify-charty.css v2.0.2 (https://markbattistella.github.io/docsify-charty/)
|
|
3
|
-
* Copyright (c) 2021 Mark Battistella (@markbattistella)
|
|
4
|
-
* Licensed under MIT
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
/*! docsify-charty 3.0.0 | (c) Mark Battistella */
|
|
8
2
|
|
|
9
3
|
/*
|
|
10
4
|
* core
|
|
@@ -35,9 +29,6 @@
|
|
|
35
29
|
font-size: calc( var(--charty-size-baseline) * 1px );
|
|
36
30
|
line-height: calc( var(--charty-size-baseline) * 1px * 1.5 );
|
|
37
31
|
color: var(--charty-colour-text);
|
|
38
|
-
|
|
39
|
-
/* printing colour */
|
|
40
|
-
color-adjust: exact;
|
|
41
32
|
}
|
|
42
33
|
|
|
43
34
|
/* mode: dark */
|
package/dist/docsify-charty.js
CHANGED
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
* docsify-charty.css v2.0.2 (https://markbattistella.github.io/docsify-charty/)
|
|
3
|
-
* Copyright (c) 2021 Mark Battistella (@markbattistella)
|
|
4
|
-
* Licensed under MIT
|
|
5
|
-
*/
|
|
1
|
+
/*! docsify-charty 3.0.0 | (c) Mark Battistella */
|
|
6
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 */
|
|
7
3
|
.docsify-charty .dataset .data-item.active .data-text text,.docsify-charty.legend.hover .dataset .data-item.active,/* hover: data-item */
|
|
8
4
|
.docsify-charty .data-item:hover text,/* hover: data-text */
|
|
@@ -1,6 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
* docsify-charty.js v2.0.2 (https://markbattistella.github.io/docsify-charty/)
|
|
3
|
-
* Copyright (c) 2021 Mark Battistella (@markbattistella)
|
|
4
|
-
* Licensed under MIT
|
|
5
|
-
*/
|
|
6
|
-
"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 n,r,c=[],o=!0,l=!1;try{for(a=a.call(t);!(o=(n=a.next()).done)&&(c.push(n.value),!e||c.length!==e);o=!0);}catch(t){l=!0,r=t}finally{try{o||null==a.return||a.return()}finally{if(l)throw r}}return c}}function _arrayWithHoles(t){if(Array.isArray(t))return t}function ownKeys(e,t){var a,n=Object.keys(e);return Object.getOwnPropertySymbols&&(a=Object.getOwnPropertySymbols(e),t&&(a=a.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,a)),n}function _objectSpread(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?ownKeys(Object(a),!0).forEach(function(t){_defineProperty(e,t,a[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):ownKeys(Object(a)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))})}return e}function _defineProperty(t,e,a){return e in t?Object.defineProperty(t,e,{value:a,enumerable:!0,configurable:!0,writable:!0}):t[e]=a,t}function _toConsumableArray(t){return _arrayWithoutHoles(t)||_iterableToArray(t)||_unsupportedIterableToArray(t)||_nonIterableSpread()}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.")}function _unsupportedIterableToArray(t,e){if(t){if("string"==typeof t)return _arrayLikeToArray(t,e);var a=Object.prototype.toString.call(t).slice(8,-1);return"Map"===(a="Object"===a&&t.constructor?t.constructor.name:a)||"Set"===a?Array.from(t):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?_arrayLikeToArray(t,e):void 0}}function _iterableToArray(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}function _arrayWithoutHoles(t){if(Array.isArray(t))return _arrayLikeToArray(t)}function _arrayLikeToArray(t,e){(null==e||e>t.length)&&(e=t.length);for(var a=0,n=new Array(e);a<e;a++)n[a]=t[a];return n}function getChartyOptions(t){return[""!=t.theme?t.theme:"#0984E3",""!=t.mode?t.mode:"light",!0===t.debug]}var chartyOptions={theme:"",mode:"light",debug:0};function charty(t,e){var a=getChartyOptions(chartyOptions),tt=a[0],et=a[1],at=a[2],nt=["radar","area","donut","doughnut","pie","section","sectional","rings","line","plot","scatter","bubble","rating","review","bar","column","bar-stack","bar-stacked","column-stack","column-stacked"];function rt(t){var e=360*Math.PI/180;return[50+50*Math.cos(e*t),50+50*Math.sin(e*t)]}console.log(at),t.afterEach(function(t,e){var a=document.createElement("div");a.innerHTML=t,a.querySelectorAll("pre[data-lang=charty]").forEach(function(t){var e=document.createElement("figure");if(e.textContent=t.textContent,function(t){try{JSON.parse(t)}catch(t){return void console.log(t)}return 1}(e.innerHTML)){var a,n,r,p="http://www.w3.org/2000/svg",c=JSON.parse(e.innerHTML.replace(/"color":/g,'"colour":')),b=c.type&&nt.includes(c.type)?"doughnut"===c.type?"donut":"sectional"===c.type?"section":"rings"===c.type?"ring":"scatter"===c.type?"plot":"review"===c.type?"rating":c.type.endsWith("-stacked")?c.type.replace("-stacked","-stack"):c.type:null,o=c.options,l=tt&&o.theme?o.theme:tt,m=!!o.legend,s=!!o.labels,g=!!o.numbers,f=Array.isArray(c.data)?c.data:[c.data],i=(r=(n=f).map(function(t){return t.value}),"number"==typeof n[0].value?[r]:r).reduce(function(t,e){var a,n=t.pop();try{!Array.isArray(e)&&!e.length||e.some(isNaN)||(a={min:Math.min.apply(Math,_toConsumableArray(e)),max:Math.max.apply(Math,_toConsumableArray(e)),sum:_toConsumableArray(e).reduce(function(t,e){return t+e}),avg:_toConsumableArray(e).reduce(function(t,e){return t+e})/_toConsumableArray(e).length},t.push(a),a.max>n.largest&&(n.largest=a.max))}catch(t){return at?console.log(t):null}return t.push(n),t},[{largest:-1/0}]),S=(a=i[i.length-1],i.slice(0,-1).map(function(t){return _objectSpread(_objectSpread({},t),a)})),A=f.map(function(t,e){if(t.colour)return t.colour;var a=function(t,e){var a=1<arguments.length&&void 0!==e?e:1;if(3===(t=t.replace(/#/g,"")).length&&(t=t.split("").map(function(t){return t+t}).join("")),!(l=/^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})[\da-z]{0,0}$/i.exec(t)))return null;var n,r=parseInt(l[1],16)/255,c=parseInt(l[2],16)/255,o=parseInt(l[3],16)/255,e=Math.max(r,c,o),t=Math.min(r,c,o),l=(e+t)/2;if(e==t)n=s=0;else{var i=e-t,s=.5<l?i/(2-e-t):i/(e+t);switch(e){case r:n=(c-o)/i+(c<o?6:0);break;case c:n=(o-r)/i+2;break;case o:n=(r-c)/i+4}n/=6}return s=Math.round(100*s),{h:n=Math.round(360*n),s:s,l:l=1!=a&&a<101&&0<a?Math.round(98/a):Math.round(100*l)}}(l,f.length),t=1===f.length?50:0;return"hsl( ".concat(a.h,", ").concat(a.s,"%, ").concat(a.l*e+t,"% )")});e.classList.add("docsify-charty"),e.classList.add("".concat(et)),s&&["area","plot","bubble","line","bar","column","bar-stack","column-stack"].includes(b)&&e.classList.add("axes");var u=document.createElementNS(p,"svg"),d=document.createElementNS(p,"defs"),v=document.createElementNS(p,"g"),h=document.createElement("div"),y=document.createElement("div"),N=document.createElement("fieldset"),E=document.createElement("title"),o=document.createElement("desc");switch(u.setAttributeNS("charty","viewBox","0 0 100 100"),u.setAttributeNS("charty","preserveAspectRatio","xMidYMid meet"),d.innerHTML='<filter x="-0.25" y="-0.25" width="1.5" height="1.5" id="text-bg"><feFlood flood-color="var(--charty-colour-dark)"/><feComposite in="SourceGraphic" operator="over"/></filter>',h.setAttributeNS("charty","class","container"),y.setAttributeNS("charty","class","dataset ".concat(b)),v.setAttributeNS("charty","class","data-container"),E.innerHTML=c.title,o.innerHTML=c.caption,u.appendChild(E),u.appendChild(o),g&&u.appendChild(d),u.appendChild(v),["rating"].includes(b)||y.appendChild(u),h.appendChild(y),m&&!["rating"].includes(b)&&(e.classList.add("legend"),h.appendChild(N),N.innerHTML="<legend>Legend</legend>"),b){case"radar":var x=document.createElementNS(p,"g"),C=document.createElementNS(p,"g"),M=document.createElementNS(p,"g"),L=document.createElementNS(p,"g"),T=void 0===f[0].points?0:f[0].points;x.setAttributeNS("charty","class","data-header"),C.setAttributeNS("charty","class","data-lines"),M.setAttributeNS("charty","class","data-rings"),L.setAttributeNS("charty","class","data-label");for(var k=1;k<=5;k++)M.innerHTML+='<circle cx="0" cy="0" r="'+20*k+'"/>';x.appendChild(C),x.appendChild(M),s&&x.appendChild(L),0<T.length&&T.forEach(function(t,e){var a=document.createElementNS(p,"text"),n=document.createElementNS(p,"line");a.setAttributeNS("charty","x",0),a.setAttributeNS("charty","y",105),a.setAttributeNS("charty","style","--angle: ".concat(360/T.length*e)),n.setAttributeNS("charty","x1",0),n.setAttributeNS("charty","x2",100),n.setAttributeNS("charty","y1",0),n.setAttributeNS("charty","y2",0),n.setAttributeNS("charty","style","--angle: ".concat(360/T.length*e)),a.innerHTML=t,L.appendChild(a),C.appendChild(n)}),v.appendChild(x),f.forEach(function(r,t){if(T.length!==r.value.length)return at?console.log(">>> Charty input error\n --\x3e ".concat(r.label," has ").concat(r.value.length," values but you have created ").concat(T.length," labels - not creating the data")):null;var e=document.createElementNS(p,"g"),a=document.createElementNS(p,"polygon"),c=document.createElementNS(p,"g"),o="";r.value.forEach(function(t,e){if(t<0||100<t)return at?console.log(">>> Charty input error\n --\x3e ".concat(r.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,n=360/T.length*e*(Math.PI/180),e=100*Math.cos(n)*a,n=100*Math.sin(n)*a,a=document.createElementNS(p,"text");o+="".concat(e," ").concat(n," "),a.setAttributeNS("charty","x","".concat(e)),a.setAttributeNS("charty","y","".concat(n)),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&&(N.innerHTML+='<label><span style="background: '.concat(A[t],';"></span>').concat(r.label,"</label>")),e.appendChild(a),g&&e.appendChild(c),v.appendChild(e)});break;case"area":var w=document.createElementNS(p,"g"),H=document.createElementNS(p,"g"),_=document.createElementNS(p,"g");f.length;w.setAttributeNS("charty","class","data-header"),H.setAttributeNS("charty","class","data-text"),_.setAttributeNS("charty","class","data-line"),y.setAttributeNS("charty","axes-vertical","Values");for(k=1;k<=10;k++){var O=10*(k-1),j=Math.round(S[0].largest-S[0].largest/10*(k-1));_.innerHTML+='<line x1="0" x2="100" y1="'.concat(O,'" y2="').concat(O,'" stroke-width="0.2" stroke-dasharray="4,4" />'),H.innerHTML+='<text x="'.concat(-5,'" y="').concat(O,'">').concat(j,"</text>")}s&&w.appendChild(H),w.appendChild(_),v.appendChild(w),f.forEach(function(t,e){var a=document.createElementNS(p,"polygon"),r=f[e].value.length-1,n=1<f.length?e:0,c=S[n].largest,n=document.createElementNS(p,"g"),o=document.createElementNS(p,"g"),l="";t.value.forEach(function(t,e){var a=100-t/c*100,n=document.createElementNS(p,"text");n.setAttributeNS("charty","x","".concat(100/r*e)),n.setAttributeNS("charty","y","".concat(a)),n.setAttributeNS("charty","filter","url(#text-bg)"),n.innerHTML=t,o.appendChild(n),l+="".concat(100/r*e," ").concat(a,", ")}),l+="100 100, 0 100",a.setAttributeNS("charty","points",l),a.setAttributeNS("charty","fill",A[e]),n.setAttributeNS("charty","class","data-item"),o.setAttributeNS("charty","class","data-text"),n.appendChild(a),g&&n.appendChild(o),v.appendChild(n),m&&(N.innerHTML+='<label><span style="background: '.concat(A[e],';"></span>').concat(t.label,"</label>"))});break;case"pie":case"donut":case"section":var I=S[0].sum,P=0;f.forEach(function(t,e){var a="section"===b?t.value:t.value/I,n=document.createElementNS(p,"g"),r=g?f[e].value?"section"===b?" (".concat((100*t.value).toFixed(2),"%)"):" (".concat(t.value.toLocaleString()," - ").concat((100*a).toFixed(2),"%)"):null:"",c=_slicedToArray(rt(P),2),o=c[0],l=c[1],i=_slicedToArray(rt(P+=a),2),c=i[0],i=i[1],a=.5<a?1:0,c=["M ".concat(o," ").concat(l),"A 50 50 0 ".concat(a," 1 ").concat(c," ").concat(i),"L 50 50"].join(" "),i=document.createElementNS(p,"path");i.setAttributeNS("charty","d",c),i.setAttributeNS("charty","fill",A[e]),n.setAttributeNS("charty","class","data-item"),n.appendChild(i),m&&(t=s?t.label:"",N.innerHTML+='<label> <span style="background:'.concat(A[e],';"></span>').concat(t," ").concat(r,"</label>")),v.appendChild(n)}),"donut"===b&&(d.innerHTML+='<mask id="donut-hole"><rect width="100" height="100" fill="white" /><circle cx="50" cy="50"/></mask>',v.setAttributeNS("charty","mask","url(#donut-hole)"));break;case"ring":var W=32/f.length;f.forEach(function(t,e){var a=document.createElementNS(p,"g"),n=document.createElementNS(p,"circle"),r=document.createElementNS(p,"circle"),c=50-(3*e+1)*W/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"),n.setAttributeNS("charty","class","ring-bg"),n.setAttributeNS("charty","cx","50"),n.setAttributeNS("charty","cy","50"),n.setAttributeNS("charty","stroke-width","".concat(W)),n.setAttributeNS("charty","r","".concat(c)),r.setAttributeNS("charty","cx","50"),r.setAttributeNS("charty","cy","50"),r.setAttributeNS("charty","stroke","".concat(A[e])),r.setAttributeNS("charty","fill","none"),r.setAttributeNS("charty","stroke-width","".concat(W)),r.setAttributeNS("charty","r","".concat(c)),r.setAttributeNS("charty","stroke-dasharray","".concat(2*Math.PI*c," ").concat(2*Math.PI*c)),r.setAttributeNS("charty","stroke-dashoffset","".concat(2*Math.PI*c-100*o/100*(2*Math.PI*c))),a.appendChild(n),a.appendChild(r),v.appendChild(a),m&&(t=s?t.label:"",o=g?" (".concat(100*o.toFixed(2),"%)"):"",N.innerHTML+='<label> <span style="background:'.concat(A[e],';"></span>').concat(t).concat(o,"</label>"))});break;case"plot":case"line":case"bubble":var $=document.createElementNS(p,"g"),D=document.createElementNS(p,"g"),F=document.createElementNS(p,"g");f.length;$.setAttributeNS("charty","class","data-header"),D.setAttributeNS("charty","class","data-text"),F.setAttributeNS("charty","class","data-line"),y.setAttributeNS("charty","axes-vertical","Values");for(k=1;k<=10;k++){var R=10*(k-1),V=Math.round(S[0].largest-S[0].largest/10*(k-1));F.innerHTML+='<line x1="0" x2="100" y1="'.concat(R,'" y2="').concat(R,'" stroke-width="0.2" stroke-dasharray="4,4" />'),D.innerHTML+='<text x="'.concat(-5,'" y="').concat(R,'">').concat(V,"</text>")}s&&$.appendChild(D),$.appendChild(F),v.appendChild($),f.forEach(function(t,o){var l=document.createElementNS(p,"g"),i=document.createElementNS(p,"g"),s=f[o].value.length,u=1<f.length?o:0,d=S[u].largest,e=f[o].value,h=document.createElementNS(p,"polyline"),y="";l.setAttributeNS("charty","class","data-item"),e.forEach(function(t,e){var a=document.createElementNS(p,"circle"),n=document.createElementNS(p,"text"),r=100/s*(e+1)-100/s/2,c=100-t/d*100,e="bubble"===b?1.25+5*t/S[u].sum:1.25;a.setAttributeNS("charty","r","".concat(e)),a.setAttributeNS("charty","cx","".concat(r)),a.setAttributeNS("charty","cy","".concat(c)),a.setAttributeNS("charty","fill","".concat(A[o])),"line"===b&&(y+=" ".concat(r," "),y+="".concat(c),h.setAttributeNS("charty","points","".concat(y)),h.setAttributeNS("charty","stroke-width","0.3"),h.setAttributeNS("charty","style","stroke: ".concat(A[o],";")),l.appendChild(h)),i.setAttributeNS("charty","class","data-text"),n.setAttributeNS("charty","x","".concat(r)),n.setAttributeNS("charty","y","".concat(c-6)),n.setAttributeNS("charty","filter","url(#text-bg)"),n.innerHTML=t,g&&i.appendChild(n),l.appendChild(a)}),l.appendChild(i),v.appendChild(l),m&&(N.innerHTML+='<label> <span style="background:'.concat(A[o],';"></span>').concat(t.label,"</label>"))});break;case"bar":case"column":case"bar-stack":case"column-stack":var z=!!b.startsWith("column"),B=!!b.endsWith("stack"),w=document.createElementNS(p,"g"),K=document.createElementNS(p,"g"),q=document.createElementNS(p,"g"),J=f.length,G=f.map(function(t,e,a){for(var n=[],r=0,c=0;c<t.value.length;c++)c<1?r=0:r+=a[c-1].value[e],n.push(r);return n}),U=f.slice(1).reduce(function(t,e){var a=e.value;return t.map(function(t,e){return t+a[e]})},f[0].value);B||($=z?"vertical":"horizontal",y.setAttributeNS("charty","axes-".concat(z?"horizontal":"vertical"),"Values"),y.setAttributeNS("charty","axes-".concat($),"Labels")),w.setAttributeNS("charty","class","data-header"),K.setAttributeNS("charty","class","data-label"),q.setAttributeNS("charty","class","data-line");for(k=1;k<=10;k++){var Y=z?110:0,Q=10*(k-1),X=B?100-10*(k-1):Math.round(S[0].largest-S[0].largest/10*(k-1));q.innerHTML+='<line x1="0" x2="100" y1="'.concat(Q,'" y2="').concat(Q,'" stroke-width="0.2" stroke-dasharray="4, 4" />'),K.innerHTML+='<text x="'.concat(Y-5,'" y="').concat(Q,'"> ').concat(X," </text>")}s&&w.appendChild(K),w.appendChild(q),v.appendChild(w),f.forEach(function(r,c){var t=Array.isArray(r.value)?r.value:[r.value],o=(G[c][G[c].length-1],t.length),l=100/J,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"),v.appendChild(u),t.forEach(function(t,e){return J!==o?at?console.log("Charty error:\n>>> The number of items in the value list does not match the number of titles"):null:void(B?(n=t/U[e]*100,a=G[e][c]/U[e]*100,u.innerHTML+=' <rect width="'.concat(l,'" height="').concat(n,'" fill="').concat(A[c],'" x="').concat(l*e,'" y="').concat(a,'" /> '),g&&(d.innerHTML+='<text filter="url(#text-bg)" y="'.concat(a+n/2,'" x="').concat(l/2+e*l,'">').concat(t,"</text>"))):(n=100-(a=t/S[c].largest*100),u.innerHTML+=' <rect width="'.concat(i,'" height="').concat(a,'" fill="').concat(A[c],'" x="').concat(i*c+l*e,'" y="').concat(n,'" /> '),K.innerHTML+='<text y="'.concat(105,'" x="',i*c+l*e+s,' "> ').concat(r.label," </text>"),g&&(d.innerHTML+='<text filter="url(#text-bg)" y="'.concat(100-a,'" x="').concat(i*c+l*e+s,'">').concat(t,"</text>"))));var a,n}),m&&(N.innerHTML+='<label><span style="background:'.concat(A[c],';"></span>').concat(r.label,"</label>")),u.appendChild(d)});break;case"rating":var Z=S[0].max;f.forEach(function(t,e){var a=document.createElement("div"),n=document.createElement("div"),r=document.createElement("div"),c=document.createElement("div"),o=document.createElement("div"),l=t.value/Z*100;a.setAttribute("class","data-item"),n.setAttribute("class","rating-label"),r.setAttribute("class","rating-value"),c.setAttribute("class","rating-bar-container"),o.setAttribute("class","rating-bar-colour"),n.innerHTML=t.label,r.innerHTML=t.value,o.setAttribute("style","width: ".concat(l,"%; background-color: ").concat(A[e],";")),s&&a.appendChild(n),g&&a.appendChild(r),a.appendChild(c),c.appendChild(o),y.appendChild(a)}),y.innerHTML+="<small><em>Ratings are out of a total of <strong>".concat(Z,"</strong></em></small>");break;default:return}(charty=h.outerHTML)&&(h=""!==c.title&&c.title?"<h3>".concat(c.title,"</h3>"):"",c=""!==c.caption&&c.caption?"<figcaption>".concat(c.caption,"</figcaption>"):"",c=h||c?"<header>".concat(h).concat(c,"</header>"):"",e.innerHTML="".concat(c).concat(charty),t.parentNode.replaceChild(e,t))}}),e(a.innerHTML)}),t.doneEach(function(){document.querySelectorAll(".docsify-charty").forEach(function(e,t){var n=_toConsumableArray(e.getElementsByClassName("data-item"));_toConsumableArray(e.getElementsByTagName("label")).forEach(function(t,a){t.addEventListener("mouseover",function(t){e.classList.add("hover"),n.forEach(function(t,e){a===e?t.classList.add("active"):t.classList.remove("active")})}),t.addEventListener("mouseout",function(t){e.classList.remove("hover"),n.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);
|
|
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;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?ownKeys(Object(a),!0).forEach(function(t){_defineProperty(e,t,a[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):ownKeys(Object(a)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))})}return e}function _defineProperty(t,e,a){return e in t?Object.defineProperty(t,e,{value:a,enumerable:!0,configurable:!0,writable:!0}):t[e]=a,t}function _toConsumableArray(t){return _arrayWithoutHoles(t)||_iterableToArray(t)||_unsupportedIterableToArray(t)||_nonIterableSpread()}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.")}function _unsupportedIterableToArray(t,e){var a;if(t)return"string"==typeof t?_arrayLikeToArray(t,e):"Map"===(a="Object"===(a=Object.prototype.toString.call(t).slice(8,-1))&&t.constructor?t.constructor.name:a)||"Set"===a?Array.from(t):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?_arrayLikeToArray(t,e):void 0}function _iterableToArray(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}function _arrayWithoutHoles(t){if(Array.isArray(t))return _arrayLikeToArray(t)}function _arrayLikeToArray(t,e){(null==e||e>t.length)&&(e=t.length);for(var a=0,r=new Array(e);a<e;a++)r[a]=t[a];return r}function getChartyOptions(t){return[""!=t.theme?t.theme:"#0984E3",""!=t.mode?t.mode:"light",!0===t.debug]}var chartyOptions={theme:"",mode:"light",debug:0};function charty(t,e){var a=getChartyOptions(chartyOptions),Y=a[0],Q=a[1],X=a[2],Z=["radar","area","donut","doughnut","pie","section","sectional","rings","line","plot","scatter","bubble","rating","review","bar","column","bar-stack","bar-stacked","column-stack","column-stacked"];function tt(t){var e=360*Math.PI/180;return[50+50*Math.cos(e*t),50+50*Math.sin(e*t)]}console.log(X),t.afterEach(function(t,e){var a=document.createElement("div");a.innerHTML=t,a.querySelectorAll("pre[data-lang=charty]").forEach(function(t){var e=document.createElement("figure");if(e.textContent=t.textContent,function(t){try{JSON.parse(t)}catch(t){return console.log(t),0}return 1}(e.innerHTML)){var p="http://www.w3.org/2000/svg",a=JSON.parse(e.innerHTML.replace(/"color":/g,'"colour":')),b=a.type&&Z.includes(a.type)?"doughnut"===a.type?"donut":"sectional"===a.type?"section":"rings"===a.type?"ring":"scatter"===a.type?"plot":"review"===a.type?"rating":a.type.endsWith("-stacked")?a.type.replace("-stacked","-stack"):a.type:null,r=a.options,P=Y&&r.theme?r.theme:Y,m=!!r.legend,s=!!r.labels,g=!!r.numbers,f=Array.isArray(a.data)?a.data:[a.data];n=(r=f).map(function(t){return t.value});var W,r=("number"==typeof r[0].value?[n]:n).reduce(function(t,e){var a,r=t.pop();try{!Array.isArray(e)&&!e.length||e.some(isNaN)||(a={min:Math.min.apply(Math,_toConsumableArray(e)),max:Math.max.apply(Math,_toConsumableArray(e)),sum:_toConsumableArray(e).reduce(function(t,e){return t+e}),avg:_toConsumableArray(e).reduce(function(t,e){return t+e})/_toConsumableArray(e).length},t.push(a),a.max>r.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=1<arguments.length&&void 0!==e?e:1,3===(t=t.replace(/#/g,"")).length&&(t=t.split("").map(function(t){return t+t}).join("")),!(t=/^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})[\da-z]{0,0}$/i.exec(t)))return null;var a,r=parseInt(t[1],16)/255,n=parseInt(t[2],16)/255,c=parseInt(t[3],16)/255,t=Math.max(r,n,c),o=Math.min(r,n,c),l=(t+o)/2;if(t==o)a=s=0;else{var i=t-o,s=.5<l?i/(2-t-o):i/(t+o);switch(t){case r:a=(n-c)/i+(n<c?6:0);break;case n:a=(c-r)/i+2;break;case c:a=(r-n)/i+4}a/=6}return s=Math.round(100*s),{h:a=Math.round(360*a),s:s,l:l=1!=e&&e<101&&0<e?Math.round(98/e):Math.round(100*l)}}(P,f.length),a=1===f.length?50:0,"hsl( ".concat(t.h,", ").concat(t.s,"%, ").concat(t.l*e+a,"% )"))}),n=(e.classList.add("docsify-charty"),e.classList.add("".concat(Q)),s&&["area","plot","bubble","line","bar","column","bar-stack","column-stack"].includes(b)&&e.classList.add("axes"),document.createElementNS(p,"svg")),c=document.createElementNS(p,"defs"),N=document.createElementNS(p,"g"),r=document.createElement("div"),i=document.createElement("div"),v=document.createElement("fieldset"),o=document.createElement("title"),l=document.createElement("desc");switch(n.setAttributeNS("charty","viewBox","0 0 100 100"),n.setAttributeNS("charty","preserveAspectRatio","xMidYMid meet"),c.innerHTML='<filter x="-0.25" y="-0.25" width="1.5" height="1.5" id="text-bg"><feFlood flood-color="var(--charty-colour-dark)"/><feComposite in="SourceGraphic" operator="over"/></filter>',r.setAttributeNS("charty","class","container"),i.setAttributeNS("charty","class","dataset ".concat(b)),N.setAttributeNS("charty","class","data-container"),o.innerHTML=a.title,l.innerHTML=a.caption,n.appendChild(o),n.appendChild(l),g&&n.appendChild(c),n.appendChild(N),["rating"].includes(b)||i.appendChild(n),r.appendChild(i),m&&!["rating"].includes(b)&&(e.classList.add("legend"),r.appendChild(v),v.innerHTML="<legend>Legend</legend>"),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+='<circle cx="0" cy="0" r="'+20*x+'"/>';u.appendChild(d),u.appendChild(h),s&&u.appendChild(y),0<E.length&&E.forEach(function(t,e){var a=document.createElementNS(p,"text"),r=document.createElementNS(p,"line");a.setAttributeNS("charty","x",0),a.setAttributeNS("charty","y",105),a.setAttributeNS("charty","style","--angle: ".concat(360/E.length*e)),r.setAttributeNS("charty","x1",0),r.setAttributeNS("charty","x2",100),r.setAttributeNS("charty","y1",0),r.setAttributeNS("charty","y2",0),r.setAttributeNS("charty","style","--angle: ".concat(360/E.length*e)),a.innerHTML=t,y.appendChild(a),d.appendChild(r)}),N.appendChild(u),f.forEach(function(n,t){if(E.length!==n.value.length)return X?console.log(">>> 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<t)return X?console.log(">>> 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+='<label><span style="background: '.concat(A[t],';"></span>').concat(n.label,"</label>")),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+='<line x1="0" x2="100" y1="'.concat(L,'" y2="').concat(L,'" stroke-width="0.2" stroke-dasharray="4,4" />'),C.innerHTML+='<text x="'.concat(-5,'" y="').concat(L,'">').concat($,"</text>")}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<f.length?e:0,c=S[r].largest,r=document.createElementNS(p,"g"),o=document.createElementNS(p,"g"),l="";t.value.forEach(function(t,e){var a=100-t/c*100,r=document.createElementNS(p,"text");r.setAttributeNS("charty","x","".concat(100/n*e)),r.setAttributeNS("charty","y","".concat(a)),r.setAttributeNS("charty","filter","url(#text-bg)"),r.innerHTML=t,o.appendChild(r),l+="".concat(100/n*e," ").concat(a,", ")}),l+="100 100, 0 100",a.setAttributeNS("charty","points",l),a.setAttributeNS("charty","fill",A[e]),r.setAttributeNS("charty","class","data-item"),o.setAttributeNS("charty","class","data-text"),r.appendChild(a),g&&r.appendChild(o),N.appendChild(r),m&&(v.innerHTML+='<label><span style="background: '.concat(A[e],';"></span>').concat(t.label,"</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<a?1:0,o=["M ".concat(o," ").concat(c),"A 50 50 0 ".concat(a," 1 ").concat(i," ").concat(l),"L 50 50"].join(" "),c=document.createElementNS(p,"path");c.setAttributeNS("charty","d",o),c.setAttributeNS("charty","fill",A[e]),r.setAttributeNS("charty","class","data-item"),r.appendChild(c),m&&(a=s?t.label:"",v.innerHTML+='<label> <span style="background:'.concat(A[e],';"></span>').concat(a," ").concat(n,"</label>")),N.appendChild(r)}),"donut"===b&&(c.innerHTML+='<mask id="donut-hole"><rect width="100" height="100" fill="white" /><circle cx="50" cy="50"/></mask>',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+='<label> <span style="background:'.concat(A[e],';"></span>').concat(c).concat(r,"</label>"))});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+='<line x1="0" x2="100" y1="'.concat(H,'" y2="').concat(H,'" stroke-width="0.2" stroke-dasharray="4,4" />'),k.innerHTML+='<text x="'.concat(-5,'" y="').concat(H,'">').concat(R,"</text>")}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<f.length?o:0,d=S[u].largest,e=f[o].value,h=document.createElementNS(p,"polyline"),y="";l.setAttributeNS("charty","class","data-item"),e.forEach(function(t,e){var a=document.createElementNS(p,"circle"),r=document.createElementNS(p,"text"),e=100/s*(e+1)-100/s/2,n=100-t/d*100,c="bubble"===b?1.25+5*t/S[u].sum:1.25;a.setAttributeNS("charty","r","".concat(c)),a.setAttributeNS("charty","cx","".concat(e)),a.setAttributeNS("charty","cy","".concat(n)),a.setAttributeNS("charty","fill","".concat(A[o])),"line"===b&&(y=(y+=" ".concat(e," "))+"".concat(n),h.setAttributeNS("charty","points","".concat(y)),h.setAttributeNS("charty","stroke-width","0.3"),h.setAttributeNS("charty","style","stroke: ".concat(A[o],";")),l.appendChild(h)),i.setAttributeNS("charty","class","data-text"),r.setAttributeNS("charty","x","".concat(e)),r.setAttributeNS("charty","y","".concat(n-6)),r.setAttributeNS("charty","filter","url(#text-bg)"),r.innerHTML=t,g&&i.appendChild(r),l.appendChild(a)}),l.appendChild(i),N.appendChild(l),m&&(v.innerHTML+='<label> <span style="background:'.concat(A[o],';"></span>').concat(t.label,"</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<t.value.length;c++)c<1?n=0:n+=a[c-1].value[e],r.push(n);return r}),K=f.slice(1).reduce(function(t,e){var a=e.value;return t.map(function(t,e){return t+a[e]})},f[0].value);O||(V=_?"vertical":"horizontal",i.setAttributeNS("charty","axes-".concat(_?"horizontal":"vertical"),"Values"),i.setAttributeNS("charty","axes-".concat(V),"Labels")),u.setAttributeNS("charty","class","data-header"),j.setAttributeNS("charty","class","data-label"),I.setAttributeNS("charty","class","data-line");for(x=1;x<=10;x++){var q=_?110:0,J=10*(x-1),G=O?100-10*(x-1):Math.round(S[0].largest-S[0].largest/10*(x-1));I.innerHTML+='<line x1="0" x2="100" y1="'.concat(J,'" y2="').concat(J,'" stroke-width="0.2" stroke-dasharray="4, 4" />'),j.innerHTML+='<text x="'.concat(q-5,'" y="').concat(J,'"> ').concat(G," </text>")}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+=' <rect width="'.concat(l,'" height="').concat(r,'" fill="').concat(A[c],'" x="').concat(l*e,'" y="').concat(a,'" /> '),g&&(d.innerHTML+='<text filter="url(#text-bg)" y="'.concat(a+r/2,'" x="').concat(l/2+e*l,'">').concat(t,"</text>"))):(r=100-(a=t/S[c].largest*100),u.innerHTML+=' <rect width="'.concat(i,'" height="').concat(a,'" fill="').concat(A[c],'" x="').concat(i*c+l*e,'" y="').concat(r,'" /> '),j.innerHTML+='<text y="'.concat(105,'" x="',i*c+l*e+s,' "> ').concat(n.label," </text>"),g&&(d.innerHTML+='<text filter="url(#text-bg)" y="'.concat(100-a,'" x="').concat(i*c+l*e+s,'">').concat(t,"</text>")))}),m&&(v.innerHTML+='<label><span style="background:'.concat(A[c],';"></span>').concat(n.label,"</label>")),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+="<small><em>Ratings are out of a total of <strong>".concat(U,"</strong></em></small>");break;default:return}(charty=r.outerHTML)&&(o=""!==a.title&&a.title?"<h3>".concat(a.title,"</h3>"):"",l=""!==a.caption&&a.caption?"<figcaption>".concat(a.caption,"</figcaption>"):"",n=o||l?"<header>".concat(o).concat(l,"</header>"):"",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);
|
package/package.json
CHANGED
|
@@ -1,40 +1,47 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
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/"
|
|
40
47
|
}
|
package/.gitattributes
DELETED
package/.nojekyll
DELETED
|
File without changes
|