@plotdb/chart 1.0.1 → 1.0.2

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.
Files changed (164) hide show
  1. package/package.json +3 -1
  2. package/CHANGELOG.md +0 -29
  3. package/build +0 -45
  4. package/doc/charts.md +0 -58
  5. package/doc/config.md +0 -44
  6. package/doc/draft/chart.md +0 -146
  7. package/doc/draft/data.md +0 -8
  8. package/doc/draft/definition.md +0 -0
  9. package/doc/draft/events.md +0 -0
  10. package/doc/draft/filter.md +0 -0
  11. package/doc/draft/lifecycle.md +0 -89
  12. package/doc/spec.md +0 -89
  13. package/doc/todo.md +0 -27
  14. package/doc/utils/tip.md +0 -84
  15. package/src/data/en-US/category +0 -20
  16. package/src/data/en-US/fruit +0 -39
  17. package/src/data/en-US/movie +0 -125
  18. package/src/data/en-US/name +0 -58
  19. package/src/data/index.ls +0 -34
  20. package/src/data/zh-TW/category +0 -20
  21. package/src/data/zh-TW/fruits +0 -38
  22. package/src/data/zh-TW/movie +0 -125
  23. package/src/data/zh-TW/names +0 -105
  24. package/src/index.ls +0 -323
  25. package/src/index.styl +0 -6
  26. package/src/utils/axis.ls +0 -229
  27. package/src/utils/config.ls +0 -11
  28. package/src/utils/data.ls +0 -104
  29. package/src/utils/format.ls +0 -30
  30. package/src/utils/legend.ls +0 -134
  31. package/src/utils/legend.styl +0 -37
  32. package/src/utils/tint.ls +0 -66
  33. package/src/utils/tip.ls +0 -97
  34. package/web/src/pug/base.pug +0 -21
  35. package/web/src/pug/block/axis/0.0.1/index.ls +0 -32
  36. package/web/src/pug/block/axis/0.0.1/index.pug +0 -1
  37. package/web/src/pug/block/axis-bubble/0.0.1/index.ls +0 -137
  38. package/web/src/pug/block/axis-bubble/0.0.1/index.pug +0 -1
  39. package/web/src/pug/block/bar/0.0.1/index.ls +0 -270
  40. package/web/src/pug/block/bar/0.0.1/index.pug +0 -35
  41. package/web/src/pug/block/bar-list/0.0.1/index.ls +0 -81
  42. package/web/src/pug/block/bar-list/0.0.1/index.pug +0 -30
  43. package/web/src/pug/block/bar-race/0.0.1/index.ls +0 -79
  44. package/web/src/pug/block/bar-race/0.0.1/index.pug +0 -21
  45. package/web/src/pug/block/base/0.0.1/index.ls +0 -66
  46. package/web/src/pug/block/base/0.0.1/index.pug +0 -5
  47. package/web/src/pug/block/blank/0.0.1/index.ls +0 -21
  48. package/web/src/pug/block/blank/0.0.1/index.pug +0 -1
  49. package/web/src/pug/block/bubble/0.0.1/index.ls +0 -218
  50. package/web/src/pug/block/bubble/0.0.1/index.pug +0 -42
  51. package/web/src/pug/block/curve-bar/0.0.1/index.ls +0 -85
  52. package/web/src/pug/block/curve-bar/0.0.1/index.pug +0 -16
  53. package/web/src/pug/block/curve-bar/0.0.1/sample.js +0 -338
  54. package/web/src/pug/block/dumbbell/0.0.1/index.ls +0 -86
  55. package/web/src/pug/block/dumbbell/0.0.1/index.pug +0 -1
  56. package/web/src/pug/block/empty/0.0.1/index.ls +0 -28
  57. package/web/src/pug/block/empty/0.0.1/index.pug +0 -2
  58. package/web/src/pug/block/gauge/0.0.1/index.ls +0 -96
  59. package/web/src/pug/block/gauge/0.0.1/index.pug +0 -31
  60. package/web/src/pug/block/gauge/0.0.1/sample.js +0 -338
  61. package/web/src/pug/block/line/0.0.1/index.ls +0 -297
  62. package/web/src/pug/block/line/0.0.1/index.pug +0 -33
  63. package/web/src/pug/block/number/0.0.1/index.ls +0 -65
  64. package/web/src/pug/block/number/0.0.1/index.pug +0 -20
  65. package/web/src/pug/block/percent-list/0.0.1/index.ls +0 -161
  66. package/web/src/pug/block/percent-list/0.0.1/index.pug +0 -34
  67. package/web/src/pug/block/pie/0.0.1/index.ls +0 -121
  68. package/web/src/pug/block/pie/0.0.1/index.pug +0 -19
  69. package/web/src/pug/block/pie/0.0.1/sample.js +0 -338
  70. package/web/src/pug/block/pie-bubble/0.0.1/index.ls +0 -181
  71. package/web/src/pug/block/pie-bubble/0.0.1/index.pug +0 -40
  72. package/web/src/pug/block/radar/0.0.1/index.ls +0 -109
  73. package/web/src/pug/block/radar/0.0.1/index.pug +0 -1
  74. package/web/src/pug/block/radar/0.0.1/xx +0 -285
  75. package/web/src/pug/block/scatter/0.0.1/index.ls +0 -124
  76. package/web/src/pug/block/scatter/0.0.1/index.pug +0 -30
  77. package/web/src/pug/block/sheet/0.0.1/index.ls +0 -34
  78. package/web/src/pug/block/sheet/0.0.1/index.pug +0 -5
  79. package/web/src/pug/block/table/0.0.1/index.ls +0 -36
  80. package/web/src/pug/block/table/0.0.1/index.pug +0 -3
  81. package/web/src/pug/block/taiwancounty/0.0.1/index.ls +0 -70
  82. package/web/src/pug/block/taiwancounty/0.0.1/index.pug +0 -64
  83. package/web/src/pug/block/taiwantown/0.0.1/index.ls +0 -44
  84. package/web/src/pug/block/taiwantown/0.0.1/index.pug +0 -52
  85. package/web/src/pug/block/taiwanvillage/0.0.1/index.ls +0 -49
  86. package/web/src/pug/block/taiwanvillage/0.0.1/index.pug +0 -52
  87. package/web/src/pug/block/treemap/0.0.1/index.ls +0 -168
  88. package/web/src/pug/block/treemap/0.0.1/index.pug +0 -42
  89. package/web/src/pug/block/voronoi-treemap/0.0.1/index.ls +0 -170
  90. package/web/src/pug/block/voronoi-treemap/0.0.1/index.pug +0 -17
  91. package/web/src/pug/block/voronoi-treemap/0.0.1/sample.js +0 -241
  92. package/web/src/pug/block/wordcloud/0.0.1/index.ls +0 -57
  93. package/web/src/pug/block/wordcloud/0.0.1/index.pug +0 -1
  94. package/web/src/pug/block/worldmap/0.0.1/index.ls +0 -77
  95. package/web/src/pug/block/worldmap/0.0.1/index.pug +0 -12
  96. package/web/src/pug/index.ls +0 -72
  97. package/web/src/pug/index.pug +0 -51
  98. package/web/src/styl/index.styl +0 -6
  99. package/web/static/assets/block/cache.js +0 -4
  100. package/web/static/assets/custom-lib/d3/d3-array.v2.js +0 -1182
  101. package/web/static/assets/custom-lib/d3/d3-array.v2.min.js +0 -2
  102. package/web/static/assets/custom-lib/d3/d3-array.v3.js +0 -1273
  103. package/web/static/assets/custom-lib/d3/d3-array.v3.min.js +0 -1273
  104. package/web/static/assets/custom-lib/d3/d3-axis.v2.min.js +0 -2
  105. package/web/static/assets/custom-lib/d3/d3-brush.v2.min.js +0 -2
  106. package/web/static/assets/custom-lib/d3/d3-color.v2.min.js +0 -2
  107. package/web/static/assets/custom-lib/d3/d3-dispatch.v2.min.js +0 -2
  108. package/web/static/assets/custom-lib/d3/d3-drag.v2.min.js +0 -2
  109. package/web/static/assets/custom-lib/d3/d3-ease.v2.min.js +0 -2
  110. package/web/static/assets/custom-lib/d3/d3-force-boundary.v0.0.1.min.js +0 -2
  111. package/web/static/assets/custom-lib/d3/d3-force.v2.min.js +0 -2
  112. package/web/static/assets/custom-lib/d3/d3-format.v2.min.js +0 -2
  113. package/web/static/assets/custom-lib/d3/d3-geo.v2.js +0 -3127
  114. package/web/static/assets/custom-lib/d3/d3-geo.v2.min.js +0 -2
  115. package/web/static/assets/custom-lib/d3/d3-hierarchy.v2.min.js +0 -2
  116. package/web/static/assets/custom-lib/d3/d3-interpolate.v2.min.js +0 -2
  117. package/web/static/assets/custom-lib/d3/d3-path.v2.min.js +0 -2
  118. package/web/static/assets/custom-lib/d3/d3-quadtree.v2.min.js +0 -2
  119. package/web/static/assets/custom-lib/d3/d3-random.v2.min.js +0 -2
  120. package/web/static/assets/custom-lib/d3/d3-scale-chromatic.v1.min.js +0 -2
  121. package/web/static/assets/custom-lib/d3/d3-selection.v2.min.js +0 -2
  122. package/web/static/assets/custom-lib/d3/d3-shape.v2.min.js +0 -2
  123. package/web/static/assets/custom-lib/d3/d3-timer.v2.min.js +0 -2
  124. package/web/static/assets/custom-lib/d3/d3-transition.v2.min.js +0 -2
  125. package/web/static/assets/custom-lib/d3/d3.v4.js +0 -17178
  126. package/web/static/assets/custom-lib/d3/d3.v4.min.js +0 -2
  127. package/web/static/assets/custom-lib/d3/d3.v6.js +0 -19708
  128. package/web/static/assets/data/countrycode.json +0 -1
  129. package/web/static/assets/data/world-110m.json +0 -1
  130. package/web/static/assets/data/zh-to-alpha2.json +0 -1
  131. package/web/static/assets/img/fluid.svg +0 -16
  132. package/web/static/block/axis/0.0.1/index.html +0 -74
  133. package/web/static/block/axis-bubble/0.0.1/index.html +0 -217
  134. package/web/static/block/bar/0.0.1/index.html +0 -576
  135. package/web/static/block/bar-list/0.0.1/index.html +0 -226
  136. package/web/static/block/bar-race/0.0.1/index.html +0 -179
  137. package/web/static/block/base/0.0.1/index.html +0 -197
  138. package/web/static/block/blank/0.0.1/index.html +0 -37
  139. package/web/static/block/bubble/0.0.1/index.html +0 -422
  140. package/web/static/block/bubble/0.0.1/test.html +0 -0
  141. package/web/static/block/curve-bar/0.0.1/index.html +0 -143
  142. package/web/static/block/dumbbell/0.0.1/index.html +0 -173
  143. package/web/static/block/empty/0.0.1/index.html +0 -76
  144. package/web/static/block/gauge/0.0.1/index.html +0 -145
  145. package/web/static/block/line/0.0.1/index.html +0 -566
  146. package/web/static/block/number/0.0.1/index.html +0 -147
  147. package/web/static/block/percent-list/0.0.1/index.html +0 -311
  148. package/web/static/block/pie/0.0.1/index.html +0 -276
  149. package/web/static/block/pie-bubble/0.0.1/index.html +0 -353
  150. package/web/static/block/radar/0.0.1/index.html +0 -144
  151. package/web/static/block/scatter/0.0.1/index.html +0 -246
  152. package/web/static/block/sheet/0.0.1/index.html +0 -98
  153. package/web/static/block/table/0.0.1/index.html +0 -67
  154. package/web/static/block/taiwancounty/0.0.1/index.html +0 -197
  155. package/web/static/block/taiwantown/0.0.1/index.html +0 -205
  156. package/web/static/block/taiwanvillage/0.0.1/index.html +0 -215
  157. package/web/static/block/treemap/0.0.1/index.html +0 -355
  158. package/web/static/block/voronoi-treemap/0.0.1/index.html +0 -345
  159. package/web/static/block/wordcloud/0.0.1/index.html +0 -87
  160. package/web/static/block/worldmap/0.0.1/index.html +0 -202
  161. package/web/static/css/index.css +0 -6
  162. package/web/static/css/index.min.css +0 -1
  163. package/web/static/favicon.ico +0 -0
  164. package/web/static/index.html +0 -153
@@ -1,311 +0,0 @@
1
- <div><div plug="layout"><div class="pdl-layout"><div data-type="layout"><div class="pdl-cell" data-name="view"></div><div class="pdl-cell" data-name="link"></div><div class="pdl-cell" data-name="legend"></div></div><div data-type="render"></div></div></div><style type="text/css">.pdl-layout > div[data-type=layout] {
2
- display: flex;
3
- justify-content: center;
4
- align-items: center;
5
- padding: 0.5em;
6
- }
7
- .pdl-layout > div[data-type=layout] > [data-name=view] {
8
- height: 100%;
9
- min-width: 2.5em;
10
- margin-right: 0.5em;
11
- flex: 1 0 2.5em;
12
- }
13
- .pdl-layout > div[data-type=layout] > [data-name=link] {
14
- height: 100%;
15
- width: 2.5em;
16
- margin-right: 0.5em;
17
- flex: 0 0 auto;
18
- }
19
- .pdl-layout > div[data-type=layout] > [data-name=legend] {
20
- flex: 1 0 auto;
21
- width: fit-content;
22
- max-width: 60%;
23
- height: 100%;
24
- display: flex;
25
- flex-direction: column;
26
- justify-content: start;
27
- align-items: start;
28
- }
29
- </style><script type="@plotdb/block">var mod;
30
- module.exports = {
31
- pkg: {
32
- name: 'percent-list',
33
- version: '0.0.1',
34
- extend: {
35
- name: "base",
36
- version: "0.0.1"
37
- },
38
- dependencies: [],
39
- i18n: {
40
- "zh-TW": {
41
- "other": "其它"
42
- }
43
- }
44
- },
45
- init: function(arg$){
46
- var root, context, pubsub, t;
47
- root = arg$.root, context = arg$.context, pubsub = arg$.pubsub, t = arg$.t;
48
- return pubsub.fire('init', {
49
- mod: mod({
50
- context: context,
51
- t: t
52
- })
53
- });
54
- }
55
- };
56
- mod = function(arg$){
57
- var context, t, chart, d3, wrapSvgText, debounce;
58
- context = arg$.context, t = arg$.t;
59
- chart = context.chart, d3 = context.d3, wrapSvgText = context.wrapSvgText, debounce = context.debounce;
60
- return {
61
- sample: function(){
62
- return {
63
- raw: ["Bachchan Pandey", "The Good Maharaja", "Ramprasad Ki Tehrvi", "Madam Chief Minister", "Satya Sai Baba", "Lahore Confidential", "Sandeep Aur Pinky Faraar", "Silence... Can You Hear It?", "Hum Bhi Akele Tum Bhi Akele", "Radhe", "Shaadisthan", "Chandigarh Kare Aashiqui", "Gangubai Kathiawadi", "Attack", "The Battle of Bhima Koregaon", "Tadap", "Looop Lapeta"].map(function(val){
64
- return {
65
- val: Math.random(),
66
- name: val
67
- };
68
- }),
69
- binding: {
70
- name: {
71
- key: 'name'
72
- },
73
- value: {
74
- key: 'val'
75
- }
76
- }
77
- };
78
- },
79
- config: {},
80
- dimension: {
81
- value: {
82
- type: 'R',
83
- name: "value",
84
- priority: 20
85
- },
86
- name: {
87
- type: 'N',
88
- name: "name",
89
- priority: 10
90
- }
91
- },
92
- init: function(){
93
- var tint, this$ = this;
94
- this.g = {
95
- view: d3.select(this.layout.getGroup('view')),
96
- link: d3.select(this.layout.getGroup('link')),
97
- legend: d3.select(this.layout.getGroup('legend'))
98
- };
99
- this.tint = tint = new chart.utils.tint();
100
- this.scale = {
101
- y: d3.scaleLinear()
102
- };
103
- this.layout.getGroup('view').addEventListener('mousemove', function(evt){
104
- var n;
105
- if (!((n = evt.target) && n.nodeName.toLowerCase() === 'rect')) {
106
- return;
107
- }
108
- this$.idx = Array.from(n.parentNode.childNodes).indexOf(n);
109
- return this$.renderDebounced();
110
- });
111
- return this.renderDebounced = debounce(350, function(){
112
- return this$.render();
113
- });
114
- },
115
- parse: function(){
116
- var ref$, other, total, sum, i$, to$, idx, offset, i, ret, this$ = this;
117
- ((ref$ = this.cfg).collapse || (ref$.collapse = {})).enabled = false;
118
- this.parsed = this.data.map(function(it){
119
- return import$({}, it);
120
- });
121
- this.parsed.sort(function(a, b){
122
- return b.value - a.value;
123
- });
124
- if (this.cfg.collapse.enabled) {
125
- if (this.cfg.collapse.method === 'count') {
126
- other = this.parsed.splice(this.cfg.collapse.threshold || 7);
127
- if (other.length) {
128
- this.parsed.push({
129
- name: t("other"),
130
- value: other.reduce(function(a, b){
131
- return a + b.value;
132
- }, 0)
133
- });
134
- }
135
- } else {
136
- ref$ = [
137
- this.parsed.reduce(function(a, b){
138
- return a + b.value;
139
- }, 0), 0
140
- ], total = ref$[0], sum = ref$[1];
141
- for (i$ = 0, to$ = this.parsed.length; i$ < to$; ++i$) {
142
- idx = i$;
143
- sum += this.parsed[idx].value;
144
- if (sum / total > (this.cfg.collapse.threshold || 0.75)) {
145
- break;
146
- }
147
- }
148
- other = this.parsed.splice(idx + 1);
149
- if (other.length) {
150
- this.parsed.push({
151
- name: t("other"),
152
- value: other.reduce(function(a, b){
153
- return a + b.value;
154
- }, 0)
155
- });
156
- }
157
- }
158
- }
159
- this.tint.reset();
160
- this.parsed.map(function(it){
161
- return this$.tint.get(it.name || it._idx);
162
- });
163
- offset = 0;
164
- for (i$ = 0, to$ = this.parsed.length; i$ < to$; ++i$) {
165
- i = i$;
166
- ret = this.parsed[i];
167
- ret.offset = offset;
168
- offset += ret.value;
169
- }
170
- return this.total = offset || 1;
171
- },
172
- resize: function(){
173
- var node, box, ref$, w, h, size, this$ = this;
174
- this.layout.update(false);
175
- node = this.layout.getNode('legend');
176
- node.textContent = "";
177
- this.parsed.map(function(it){
178
- var div, p;
179
- div = document.createElement('div');
180
- p = (100 * (it.value / this$.total)).toFixed(1);
181
- div.textContent = it.text = it.name + " / " + p + "%";
182
- return node.appendChild(div);
183
- });
184
- this.nboxes = this.parsed.map(function(d, i){
185
- return this$.layout.getNode('legend').childNodes[i].getBoundingClientRect();
186
- });
187
- this.rbox = this.layout.getNode('legend').getBoundingClientRect();
188
- this.lbox = this.layout.getBox('link');
189
- box = this.layout.getBox('view');
190
- this.layout.update(false);
191
- box = this.layout.getBox('view');
192
- ref$ = [box.width, box.height], w = ref$[0], h = ref$[1];
193
- size = Math.min(w, h);
194
- return this.scale.y.range([0, box.height]).domain([0, this.total]);
195
- },
196
- render: function(){
197
- var total, cfg, layout, tint, scale, nboxes, rbox, lbox, box, offset, ref$, ref1$, ref2$, last, x$, y$, z$, z1$;
198
- total = this.total, cfg = this.cfg, layout = this.layout, tint = this.tint, scale = this.scale, nboxes = this.nboxes, rbox = this.rbox, lbox = this.lbox;
199
- if (this.cfg != null && this.cfg.palette) {
200
- this.tint.set(this.cfg.palette.colors.map(function(it){
201
- return it.value || it;
202
- }));
203
- }
204
- box = this.layout.getBox('view');
205
- offset = 0;
206
- if (this.idx != null && nboxes.length) {
207
- this.idx = (ref$ = (ref1$ = this.idx) < (ref2$ = this.nboxes.length - 1) ? ref1$ : ref2$) > 0 ? ref$ : 0;
208
- offset = nboxes[this.idx].y - rbox.y;
209
- last = nboxes[nboxes.length - 1].y + nboxes[nboxes.length - 1].height - rbox.y;
210
- if (last - offset < rbox.height) {
211
- offset = last - rbox.height;
212
- }
213
- }
214
- x$ = this.g.view.selectAll('rect').data(this.parsed);
215
- x$.exit().remove();
216
- x$.enter().append('rect');
217
- y$ = this.g.view.selectAll('rect');
218
- y$.attr('x', function(){
219
- return 0;
220
- });
221
- y$.attr('y', function(d, i){
222
- return scale.y(d.offset);
223
- });
224
- y$.attr('width', function(){
225
- return box.width;
226
- });
227
- y$.attr('height', function(d, i){
228
- var ref$;
229
- return (ref$ = scale.y(d.offset + d.value) - scale.y(d.offset) - 1) > 1 ? ref$ : 1;
230
- });
231
- y$.attr('fill', function(d, i){
232
- var ret, nbox, y1;
233
- return tint.get(Math.ceil(((d.offset + d.value / 2) / total) * 5));
234
- ret = tint.get(0, (i % 3 - 1) / 5);
235
- if (cfg.collapse.enabled) {
236
- nbox = nboxes[i];
237
- y1 = (nbox.y - rbox.y) + nbox.height / 2;
238
- if (y1 < rbox.height) {
239
- return ret;
240
- }
241
- ret = ldcolor.hcl(ret);
242
- ret.c = ret.c * 0.1;
243
- ret.l = ret.l * 1.1;
244
- }
245
- return ldcolor.web(ret);
246
- });
247
- z$ = this.g.legend.selectAll('g.label').data(this.parsed);
248
- z$.exit().remove();
249
- z$.enter().append('g').attr('class', 'label');
250
- this.g.legend.selectAll('g.label').each(function(d, i){
251
- var n, ret;
252
- if (this._text !== d.text) {
253
- this._text = d.text;
254
- n = layout.getNode('legend').childNodes[i];
255
- ret = wrapSvgText({
256
- node: n,
257
- useRange: true
258
- });
259
- this.textContent = "";
260
- return this.appendChild(ret);
261
- }
262
- }).transition().duration(350).attr('opacity', function(d, i){
263
- var nbox, y;
264
- nbox = nboxes[i];
265
- y = nbox.y - rbox.y - offset;
266
- if (y < 0 || y > rbox.height - nbox.height / 2) {
267
- return 0;
268
- } else {
269
- return 1;
270
- }
271
- }).attr('transform', function(d, i){
272
- var nbox;
273
- nbox = nboxes[i];
274
- return "translate(" + (nbox.x - rbox.x) + ", " + (nbox.y - rbox.y - offset) + ")";
275
- });
276
- z1$ = this.g.link.selectAll('path').data(this.parsed);
277
- z1$.exit().remove();
278
- z1$.enter().append('path').attr('fill', 'none').attr('stroke-width', 1);
279
- return this.g.link.selectAll('path').attr('stroke', function(d, i){
280
- return tint.get(Math.ceil(((d.offset + d.value / 2) / total) * 5));
281
- }).transition().duration(350).attr('d', function(d, i){
282
- var x0, x1, x2, x3, y0, nbox, y1;
283
- x0 = 0;
284
- x1 = lbox.width / 10;
285
- x2 = 9 * lbox.width / 10;
286
- x3 = lbox.width;
287
- y0 = scale.y(d.offset + d.value / 2);
288
- nbox = nboxes[i];
289
- y1 = (nbox.y - rbox.y) + nbox.height / 2 - offset;
290
- if (Math.abs(y1 - y0) < 2) {
291
- y1 = y0;
292
- }
293
- return "M" + x0 + " " + y0 + " L" + x1 + " " + y0 + " L" + x2 + " " + y1 + " L" + x3 + " " + y1;
294
- }).attr('opacity', function(d, i){
295
- var nbox, y0, y1;
296
- nbox = nboxes[i];
297
- y0 = scale.y(d.offset + d.value / 2);
298
- y1 = (nbox.y - rbox.y) + nbox.height / 2 - offset;
299
- if (Math.abs(y1 - y0) < 2) {
300
- y1 = y0;
301
- }
302
- return y1 > rbox.height || y1 < 0 ? 0 : 1;
303
- });
304
- }
305
- };
306
- };
307
- function import$(obj, src){
308
- var own = {}.hasOwnProperty;
309
- for (var key in src) if (own.call(src, key)) obj[key] = src[key];
310
- return obj;
311
- }</script></div>
@@ -1,276 +0,0 @@
1
- <div><div plug="layout"><div class="pdl-layout"><div data-type="layout"><div class="pdl-cell" data-name="view"></div><div class="pdl-cell" data-name="legend"></div></div><div data-type="render"></div></div></div><style type="text/css">.pdl-layout > div[data-type=layout] {
2
- display: flex;
3
- justify-content: center;
4
- align-items: center;
5
- }
6
- .pdl-layout > div[data-type=layout] > [data-name=view] {
7
- height: 100%;
8
- margin-right: 1em;
9
- }
10
- .pdl-layout > div[data-type=layout] > [data-name=legend] {
11
- min-width: 6em;
12
- }
13
- </style><script type="@plotdb/block">var mod;
14
- module.exports = {
15
- pkg: {
16
- name: 'pie',
17
- version: '0.0.1',
18
- extend: {
19
- name: "base",
20
- version: "0.0.1"
21
- },
22
- dependencies: [],
23
- i18n: {
24
- "zh-TW": {
25
- value: "數值",
26
- name: "名稱",
27
- other: "其它"
28
- }
29
- }
30
- },
31
- init: function(arg$){
32
- var root, context, pubsub, t;
33
- root = arg$.root, context = arg$.context, pubsub = arg$.pubsub, t = arg$.t;
34
- return pubsub.fire('init', {
35
- mod: mod({
36
- context: context,
37
- t: t
38
- })
39
- });
40
- }
41
- };
42
- mod = function(arg$){
43
- var context, t, chart, d3;
44
- context = arg$.context, t = arg$.t;
45
- chart = context.chart, d3 = context.d3;
46
- return {
47
- sample: function(){
48
- return {
49
- raw: [1, 2, 3, 4, 5].map(function(val){
50
- return {
51
- val: (10 * Math.random()).toFixed(2),
52
- name: val
53
- };
54
- }),
55
- binding: {
56
- name: {
57
- key: 'name'
58
- },
59
- value: {
60
- key: 'val'
61
- }
62
- }
63
- };
64
- },
65
- config: {},
66
- dimension: {
67
- value: {
68
- type: 'R',
69
- name: "value",
70
- priority: 20
71
- },
72
- name: {
73
- type: 'NO',
74
- name: "name",
75
- priority: 10
76
- }
77
- },
78
- init: function(){
79
- var tint, this$ = this;
80
- this.g = Object.fromEntries(['view', 'legend'].map(function(it){
81
- return [it, d3.select(this$.layout.getGroup(it)).append('g')];
82
- }));
83
- this.tint = tint = new chart.utils.tint();
84
- this.tip = new chart.utils.tip({
85
- root: this.root,
86
- accessor: function(arg$){
87
- var evt, data, v;
88
- evt = arg$.evt;
89
- if (!(evt.target && (data = d3.select(evt.target).datum()))) {
90
- return null;
91
- }
92
- v = isNaN(data.value)
93
- ? '-'
94
- : data.value.toFixed(2) + "" + (this$.binding.value.unit || '');
95
- return {
96
- name: data.name,
97
- value: v
98
- };
99
- },
100
- range: function(){
101
- return this$.layout.getNode('view').getBoundingClientRect();
102
- }
103
- });
104
- this.legend = new chart.utils.legend({
105
- layout: this.layout,
106
- name: 'legend',
107
- root: this.root,
108
- shape: function(d){
109
- return d3.select(this).attr('fill', tint.get(d.text));
110
- },
111
- cfg: {
112
- selectable: true
113
- }
114
- });
115
- this.legend.on('select', function(){
116
- this$.bind();
117
- this$.resize();
118
- return this$.render();
119
- });
120
- this.arc = d3.arc().innerRadius(0).outerRadius(100).startAngle(0).endAngle(Math.PI / 2);
121
- return this.total = {};
122
- },
123
- destroy: function(){
124
- return this.tip.destroy();
125
- },
126
- parse: function(){
127
- var other, ref$, total, sum, i$, to$, idx;
128
- this.tint.reset();
129
- this.parsed = this.data.map(function(it){
130
- var ret;
131
- ret = import$({}, it);
132
- if (isNaN(ret.value)) {
133
- ret.value = 0;
134
- }
135
- return ret;
136
- });
137
- this.parsed.sort(function(a, b){
138
- return b.value - a.value;
139
- });
140
- if (this.cfg.collapse != null && this.cfg.collapse.enabled) {
141
- if (this.cfg.collapse.method === 'count') {
142
- other = this.parsed.splice(this.cfg.collapse.threshold || 7);
143
- if (other.length) {
144
- this.parsed.push({
145
- name: t("other"),
146
- value: other.reduce(function(a, b){
147
- return a + b.value;
148
- }, 0)
149
- });
150
- }
151
- } else {
152
- ref$ = [
153
- this.parsed.reduce(function(a, b){
154
- return a + b.value;
155
- }, 0), 0
156
- ], total = ref$[0], sum = ref$[1];
157
- for (i$ = 0, to$ = this.parsed.length; i$ < to$; ++i$) {
158
- idx = i$;
159
- sum += this.parsed[idx].value;
160
- if (sum / total > (this.cfg.collapse.threshold || 0.75)) {
161
- break;
162
- }
163
- }
164
- other = this.parsed.splice(idx + 1);
165
- if (other.length) {
166
- this.parsed.push({
167
- name: t("other"),
168
- value: other.reduce(function(a, b){
169
- return a + b.value;
170
- }, 0)
171
- });
172
- }
173
- }
174
- }
175
- return this.legend.data(this.parsed.map(function(it){
176
- return {
177
- text: it.name,
178
- key: it.name
179
- };
180
- }));
181
- },
182
- bind: function(){
183
- var offset, i$, to$, i, obj, that, this$ = this, results$ = [];
184
- this.parsed.map(function(it){
185
- return it.picked = this$.legend.isSelected(it.name);
186
- });
187
- this.total.old = this.total.cur;
188
- this.total.cur = this.parsed.reduce(function(a, b){
189
- return a + (b.picked ? b.value : 0);
190
- }, 0) || 1;
191
- if (!this.total.old) {
192
- this.total.old = this.total.cur;
193
- }
194
- offset = 0;
195
- for (i$ = 0, to$ = this.parsed.length; i$ < to$; ++i$) {
196
- i = i$;
197
- obj = this.parsed[i];
198
- if (!obj.old) {
199
- obj.old = {
200
- s: (that = this.parsed[i - 1]) ? that.old.e : 0,
201
- e: 0
202
- };
203
- }
204
- if (obj.cur) {
205
- obj.old = obj.cur;
206
- }
207
- obj.cur = {
208
- s: offset,
209
- e: offset + (obj.picked ? obj.value : 0)
210
- };
211
- obj.angle = {
212
- old: {
213
- s: 2 * Math.PI * obj.old.s / this.total.old,
214
- e: 2 * Math.PI * obj.old.e / this.total.old
215
- },
216
- cur: {
217
- s: 2 * Math.PI * obj.cur.s / this.total.cur,
218
- e: 2 * Math.PI * obj.cur.e / this.total.cur
219
- }
220
- };
221
- if (obj.picked) {
222
- results$.push(offset += obj.value);
223
- }
224
- }
225
- return results$;
226
- },
227
- resize: function(){
228
- var box, ref$, w, h, size;
229
- this.layout.update(false);
230
- box = this.layout.getBox('view');
231
- this.layout.getNode('view').style.width = box.height + "px";
232
- this.layout.update(false);
233
- box = this.layout.getBox('view');
234
- ref$ = [box.width, box.height], w = ref$[0], h = ref$[1];
235
- size = Math.min(w, h);
236
- return this.arc.innerRadius((this.cfg.donutPercent || 0.7) * size / 2).outerRadius(size / 2);
237
- },
238
- render: function(){
239
- var tint, interpolateArc, box, x$, this$ = this;
240
- tint = this.tint;
241
- interpolateArc = function(a1, a2){
242
- return function(t){
243
- var ref$, s, e;
244
- ref$ = ['s', 'e'].map(function(i){
245
- return (a2[i] - a1[i]) * t + a1[i];
246
- }), s = ref$[0], e = ref$[1];
247
- this$.arc.startAngle(s).endAngle(e);
248
- return this$.arc();
249
- };
250
- };
251
- if (this.cfg != null && this.cfg.palette) {
252
- this.tint.set(this.cfg.palette.colors.map(function(it){
253
- return it.value || it;
254
- }));
255
- }
256
- box = this.layout.getBox('view');
257
- this.g.view.attr('transform', "translate(" + box.width / 2 + "," + box.height / 2 + ")");
258
- x$ = this.g.view.selectAll('path.data').data(this.parsed, function(it){
259
- return it.name || it._idx;
260
- });
261
- x$.exit().remove();
262
- x$.enter().append('path').attr('class', 'data');
263
- this.g.view.selectAll('path.data').attr('fill', function(d, i){
264
- return this$.tint.get(d.name || d._idx);
265
- }).transition().duration(350).attrTween('d', function(d, i){
266
- return interpolateArc(d.angle.old, d.angle.cur);
267
- });
268
- return this.legend.render();
269
- }
270
- };
271
- };
272
- function import$(obj, src){
273
- var own = {}.hasOwnProperty;
274
- for (var key in src) if (own.call(src, key)) obj[key] = src[key];
275
- return obj;
276
- }</script></div>