@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,44 +0,0 @@
1
- module.exports =
2
- pkg:
3
- name: 'taiwantown', version: '0.0.1'
4
- extend: {name: "base", version: "0.0.1"}
5
- dependencies: [
6
- {url: "https://d3js.org/topojson.v2.min.js", async: false}
7
- {url: "/js/work/map.list.js", async: false}
8
- {url: "https://cdn.jsdelivr.net/npm/pdmaptw@0.0.2/dist/pdmaptw.min.js"}
9
- ]
10
-
11
- init: ({root, context, pubsub}) ->
12
- pubsub.fire \init, mod: mod {context} .then ~> it.0
13
-
14
- mod = ({context}) ->
15
- {d3,forceBoundary,ldColor,repeatString$, pdmaptw, counties, towns} = context
16
- sample: ->
17
- val =
18
- counties: counties.map (d,i) -> {val: Math.random!, county: d}
19
- towns: towns.map (d,i) -> {val: Math.random!, town: d}
20
- raw: val.towns
21
- binding: do
22
- color: {key: \val}
23
- name: {key: \town}
24
- config: {}
25
- dimension:
26
- name: {type: \N, name: "國家"}
27
- color: {type: \R, name: "顏色"}
28
- init: ->
29
- @obj = pdmaptw.create do
30
- root: @svg
31
- type: \town
32
- baseurl: 'https://cdn.jsdelivr.net/npm/pdmaptw@0.0.2/dist'
33
- @obj.init!then ~> @obj.fit!
34
- parse: ->
35
- d3.select @svg .selectAll \path .each (d,i) ~>
36
- d.data = @data.filter(-> it.name == d.properties.name).0 or {}
37
- resize: -> #@obj.fit!
38
- render: ->
39
- @color = d3.interpolateTurbo
40
- if @cfg? and @cfg.palette =>
41
- @color = d3.interpolateDiscrete @cfg.palette.colors.map -> ldColor.web(it.value or it)
42
- d3.select @svg .selectAll \path
43
- .transition!duration 350
44
- .attr \fill, (d,i) ~> @color d.data.color
@@ -1,52 +0,0 @@
1
- div: script(type="@plotdb/block"): include:lsc index.ls
2
-
3
- div: script(type="@plotdb/block"): :lsc
4
- {
5
- pkg:
6
- name: 'taiwantown', version: '0.0.1'
7
- dependencies: [
8
- {url: "https://d3js.org/d3.v4.js", async: false}
9
- "https://d3js.org/d3-format.v2.min.js"
10
- "https://d3js.org/d3-array.v2.min.js"
11
- "https://d3js.org/topojson.v2.min.js"
12
- {url: "https://d3js.org/d3-color.v1.min.js", async: false}
13
- {url: "https://d3js.org/d3-interpolate.v1.min.js", async: false}
14
- {url: "https://d3js.org/d3-scale-chromatic.v1.min.js", async: false}
15
- "/js/map.list.js"
16
- "https://cdn.jsdelivr.net/npm/pdmaptw@0.0.2/dist/pdmaptw.min.js"
17
- ]
18
- init: ({root, context}) ->
19
- counties = context.counties.map (d,i) -> {val: Math.random!, county: d}
20
- towns = context.towns.map (d,i) -> {val: Math.random!, town: d}
21
- c = new chart do
22
- root: root
23
- raw: towns
24
- mod: @mod({context})
25
- binding: do
26
- color: {name: \val}
27
- name: {name: \town}
28
- c.init!then -> c.render!
29
- @c = c
30
-
31
- interface: -> @c
32
-
33
- mod: ({context}) ->
34
- return do
35
- init: ->
36
- @obj = context.pdmaptw.create do
37
- root: @svg
38
- type: \town
39
- baseurl: 'https://cdn.jsdelivr.net/npm/pdmaptw@0.0.2/dist'
40
- @obj.init!then ~> @obj.fit!
41
- parse: ->
42
- d3.select @svg .selectAll \path .each (d,i) ~>
43
- d.data = @data.filter(-> it.name == d.properties.name).0 or {}
44
- resize: -> #@obj.fit!
45
- render: ->
46
- @color = d3.interpolateTurbo
47
- if config.pal => @color = d3.interpolateDiscrete config.pal
48
- d3.select @svg .selectAll \path
49
- .transition!duration 350
50
- .attr \fill, (d,i) ~> @color d.data.color
51
-
52
- }
@@ -1,49 +0,0 @@
1
- module.exports =
2
- pkg:
3
- name: 'taiwanvillage', version: '0.0.1'
4
- extend: {name: "base", version: "0.0.1"}
5
- dependencies: [
6
- {url: "https://d3js.org/topojson.v2.min.js", async: false}
7
- {url: "/js/work/map.list.js", async: false}
8
- {url: "https://cdn.jsdelivr.net/npm/pdmaptw@0.0.2/dist/pdmaptw.min.js"}
9
- ]
10
-
11
- init: ({root, context, pubsub}) ->
12
- pubsub.fire \init, mod: mod {context} .then ~> it.0
13
-
14
- mod = ({context}) ->
15
- {d3,forceBoundary,ldColor,repeatString$, pdmaptw, counties, towns, villages} = context
16
- sample: ->
17
- val =
18
- counties: counties.map (d,i) -> {val: Math.random!, county: d}
19
- towns: towns.map (d,i) -> {val: Math.random!, town: d}
20
- villages: villages.map (d,i) -> {val: Math.random!, village: d}
21
- raw: val.villages
22
- binding: do
23
- color: {key: \val}
24
- name: {key: \village}
25
- config: {}
26
- dimension:
27
- name: {type: \N, name: "國家"}
28
- color: {type: \R, name: "顏色"}
29
- init: ->
30
- @obj = pdmaptw.create do
31
- root: @svg
32
- type: \village
33
- baseurl: 'https://cdn.jsdelivr.net/npm/pdmaptw@0.0.2/dist'
34
- @obj.init!then ~> @obj.fit!
35
- parse: ->
36
- d3.select @svg .selectAll \path .each (d,i) ~>
37
- d.data = @data.filter(-> it.name == d.properties.name).0 or {}
38
- d3.select @svg .selectAll \path
39
- .filter (d,i) -> !/彰化縣/.exec(d.properties.name)
40
- .remove!
41
- @obj.fit!
42
- resize: -> #@obj.fit!
43
- render: ->
44
- @color = d3.interpolateTurbo
45
- if @cfg? and @cfg.palette =>
46
- @color = d3.interpolateDiscrete @cfg.palette.colors.map -> ldColor.web(it.value or it)
47
- d3.select @svg .selectAll \path
48
- .transition!duration 350
49
- .attr \fill, (d,i) ~> @color d.data.color
@@ -1,52 +0,0 @@
1
- div: script(type="@plotdb/block"): include:lsc index.ls
2
-
3
- div: script(type="@plotdb/block"): :lsc
4
- {
5
- pkg:
6
- name: 'taiwantown', version: '0.0.1'
7
- dependencies: [
8
- {url: "https://d3js.org/d3.v4.js", async: false}
9
- "https://d3js.org/d3-format.v2.min.js"
10
- "https://d3js.org/d3-array.v2.min.js"
11
- "https://d3js.org/topojson.v2.min.js"
12
- {url: "https://d3js.org/d3-color.v1.min.js", async: false}
13
- {url: "https://d3js.org/d3-interpolate.v1.min.js", async: false}
14
- {url: "https://d3js.org/d3-scale-chromatic.v1.min.js", async: false}
15
- "/js/map.list.js"
16
- "https://cdn.jsdelivr.net/npm/pdmaptw@0.0.2/dist/pdmaptw.min.js"
17
- ]
18
- init: ({root, context}) ->
19
- counties = context.counties.map (d,i) -> {val: Math.random!, county: d}
20
- towns = context.towns.map (d,i) -> {val: Math.random!, town: d}
21
- c = new chart do
22
- root: root
23
- raw: towns
24
- mod: @mod({context})
25
- binding: do
26
- color: {name: \val}
27
- name: {name: \town}
28
- c.init!then -> c.render!
29
- @c = c
30
-
31
- interface: -> @c
32
-
33
- mod: ({context}) ->
34
- return do
35
- init: ->
36
- @obj = context.pdmaptw.create do
37
- root: @svg
38
- type: \town
39
- baseurl: 'https://cdn.jsdelivr.net/npm/pdmaptw@0.0.2/dist'
40
- @obj.init!then ~> @obj.fit!
41
- parse: ->
42
- d3.select @svg .selectAll \path .each (d,i) ~>
43
- d.data = @data.filter(-> it.name == d.properties.name).0 or {}
44
- resize: -> #@obj.fit!
45
- render: ->
46
- @color = d3.interpolateTurbo
47
- if config.pal => @color = d3.interpolateDiscrete config.pal
48
- d3.select @svg .selectAll \path
49
- .transition!duration 350
50
- .attr \fill, (d,i) ~> @color d.data.color
51
-
52
- }
@@ -1,168 +0,0 @@
1
- module.exports =
2
- pkg:
3
- name: 'treemap', version: '0.0.1'
4
- extend: {name: "base", version: "0.0.1"}
5
- dependencies: []
6
- i18n:
7
- "zh-TW":
8
- "other": "其它"
9
- "unit": "單位"
10
- init: ({root, context, pubsub, t}) ->
11
- pubsub.fire \init, mod: mod {root, context, t}
12
-
13
- mod = ({root, context, t}) ->
14
- {chart,d3,ldcolor,wrap-svg-text} = context
15
- sample: ->
16
- raw: [0 to 50].map (val) ~> {val: (Math.random!)toFixed(2), cat: Math.floor(1 + 6 * Math.random!)}
17
- binding:
18
- color: {key: \cat}
19
- area: {key: \val, unit: 'MB'}
20
- name: {key: \cat}
21
- category: {key: \cat}
22
- config:
23
- unit-position: type: \choice, values: <[inner outside none]>
24
- dimension:
25
- color: {type: \RC, name: "顏色", priority: 4}
26
- area: {type: \R, name: "面積", priority: 1}
27
- name: {type: \NC, name: "名稱", priority: 2}
28
- category: {type: \C, name: "分類", priority: 3}
29
- init: ->
30
- @tint = tint = new chart.utils.tint!
31
- @g = Object.fromEntries <[view unit legend]>.map ~> [it, d3.select(@layout.get-group it)]
32
- @text-renderer = text-renderer = document.createElement \div
33
- text-renderer.style <<< do
34
- textAlign: \right
35
- fontSize: \0.9em
36
- padding: ".5em .5em"
37
- line-height: \1.1em
38
- white-space: "pre-line"
39
- display: 'inline-block'
40
- position: \absolute
41
- top: 0
42
- left: 0
43
- opacity: 0
44
- pointer-events: \none
45
- user-select: \none
46
- zIndex: 0
47
- root.appendChild text-renderer
48
- @legend = new chart.utils.legend do
49
- layout: @layout
50
- name: \legend
51
- root: @root
52
- shape: (d) -> d3.select(@).attr \fill, tint.get d.key
53
- direction: if @cfg.{}legend.position == \bottom => \horizontal else \vertical
54
- cfg: selectable: true
55
- @legend.on \select, ~> @bind!; @resize!; @render!
56
- @tip = new chart.utils.tip {
57
- root: @root
58
- accessor: ({evt}) ~>
59
- if !(evt.target and data = d3.select(evt.target).datum!) => return null
60
- v = if isNaN(data.data.area) => '-' else "#{(data.data.area).toFixed(2)}#{@binding.area.unit or ''}"
61
- return {name: data.data.name, value: v}
62
- range: ~> @layout.get-node \view .getBoundingClientRect!
63
- }
64
-
65
- destroy: -> @tip.destroy!
66
-
67
- parse: ->
68
- @tint.reset!
69
- hash = {}
70
- @data.map (d,i) ->
71
- d.id = "name-#i"
72
- if !d.category or d.category == "" => d.category = t("other")
73
- if !@binding.category => @data.map (d) -> d.category = 'root-1'
74
- @data.map -> hash[it.category] = {id: it.category, category: 'root'}
75
- @cats = Array.from(new Set @data.map -> it.category).filter -> it != 'root-1'
76
- @data = @data ++ [v for k,v of hash] ++ [{id: 'root'}]
77
- @legend.data @cats.map -> {key: it, text: it}
78
- bind: ->
79
- data = @data.filter ~>
80
- it.id == 'root' or (it.category in <[root root-1]>) or @legend.is-selected(it.category)
81
- s = d3.stratify!
82
- .id -> it.id
83
- .parentId -> it.category
84
- @ret = s(data)
85
- resize: ->
86
- @root.querySelector('.pdl-layout').classList.toggle \legend-bottom, @cfg.{}legend.position == \bottom
87
- @tip.toggle(if @cfg.{}tip.enabled? => @cfg.tip.enabled else true)
88
- @unit =
89
- inner: if @cfg.{}unit.position == \inner => (@binding.area.unit or '') else ''
90
- outer: (
91
- if @cfg.{}unit.position in <[inner none]> => ''
92
- else if @binding.area.unit => "#{t('unit')}: #{@binding.area.unit or ''}" else ''
93
- )
94
- @layout.get-node \unit
95
- ..style.display = if !@unit.outer => 'none' else ''
96
- ..textContent = @unit.outer
97
- @legend.config @cfg.legend
98
- @legend.update!
99
- @layout.update false
100
- @ret.sum -> it.area
101
- box = @layout.get-box \view
102
- tree = d3.treemap!padding(1).size([box.width, box.height]) @ret
103
- @nodes = @ret.leaves!filter -> it.data._raw
104
- @nodes.map -> it._raw = it.data._raw
105
- @extent = d3.extent @nodes.map -> it.value
106
- render: ->
107
- {cfg, unit, binding, layout, text-renderer, tint} = @
108
- tint.set cfg.palette
109
- #else tint.set @cats.map (d,i) ~> ldcolor.web(d3.interpolateTurbo(i/((@cats.length - 1) or 1)))
110
- @g.unit.call ~>
111
- node = layout.get-node \unit
112
- ret = wrap-svg-text {node, useRange: true}
113
- @g.unit.node!textContent = ''
114
- @g.unit.node!appendChild ret
115
- @g.view.selectAll \rect.data .data(@nodes, -> it._raw._idx)
116
- ..exit!remove!
117
- ..enter!append \rect
118
- .attr \class, \data
119
- .attr \x, -> (it.x1 + it.x0)/2 - (it.x1 - it.x0)/4
120
- .attr \y, -> (it.y1 + it.y0)/2 - (it.y1 - it.y0)/4
121
- .attr \width, -> (it.x1 - it.x0) / 2
122
- .attr \height, -> (it.y1 - it.y0) / 2
123
- .attr \fill, ~> tint.get(it.data.color or it.data.category)
124
- .style \opacity, 0
125
-
126
- @g.view.selectAll \rect
127
- .transition!duration 350
128
- .attr \x, -> it.x0
129
- .attr \y, -> it.y0
130
- .attr \width, -> it.x1 - it.x0
131
- .attr \height, -> it.y1 - it.y0
132
- .attr \fill, ~>
133
- v = (((it.value - @extent.0) / (@extent.1 - @extent.0) ) - 0.5)
134
- tint.get(it.data.color or it.data.category)
135
- .style \opacity, 1
136
-
137
- @g.view.selectAll \g.label .data(@nodes, -> it._raw._idx)
138
- ..exit!remove!
139
- ..enter!append \g
140
- .attr \class, 'label data'
141
- .attr \transform, (d,i) -> "translate(#{d.x0},#{d.y0})"
142
- .attr \opacity, 0
143
- .style \pointer-events, \none
144
- .style \cursor, \pointer
145
- @g.view.selectAll \g.label
146
- .attr \font-size, \0.9em
147
- .each (d,i) ->
148
- text-renderer.style.width = "#{d.x1 - d.x0}px"
149
- area = d.data.area
150
- area = d3.format('.3s') area
151
- #area = if area > 1000000 => (area/1000000).toFixed(2) + t(\M)
152
- #else if area > 1000 => (area/1000).toFixed(2) + t(\K)
153
- #else if area? and area.toFixed => (area).toFixed(2)
154
- #else area
155
- text-renderer.innerHTML = """
156
- <div>#{d.data.name or ''}</div>
157
- <div>#{area}#{unit.inner}</div>
158
- """
159
- ret = wrap-svg-text node: text-renderer, useRange: true
160
- @textContent = ''
161
- @appendChild ret
162
- .transition!duration 350
163
- .attr \transform, (d,i) -> "translate(#{d.x0},#{d.y0})"
164
- .attr \fill, ~> tint.text(it.data.color or it.data.category)
165
- .attr \opacity, (d,i) ->
166
- box = @getBBox!
167
- return if box.width > d.x1 - d.x0 or box.height > d.y1 - d.y0 => 0 else 1
168
- @legend.render!
@@ -1,42 +0,0 @@
1
- div
2
- div(plug="layout")
3
- .pdl-layout
4
- div(data-type="layout")
5
- .pdl-cell(data-name="view")
6
- .pdl-cell(data-name="unit")
7
- .pdl-cell(data-name="legend")
8
- div(data-type="render")
9
- style(type="text/css"): :stylus
10
- .pdl-layout > div[data-type=layout]
11
- display: grid
12
- grid-template-columns: 1fr fit-content(10em)
13
- grid-template-rows: 1fr fit-content(1em)
14
- & > .pdl-cell[data-name=view]
15
- grid-area: 1 / 1
16
- & > .pdl-cell[data-name=legend]
17
- grid-column: 2
18
- grid-row: 1 / span 2
19
- padding: 0 .5em 0 .5em
20
- & > .pdl-cell[data-name=unit]
21
- grid-column: 1
22
- grid-row: 2
23
- line-height: 1em
24
- text-align: right
25
- padding: .25em 0
26
- .pdl-layout.legend-bottom > div[data-type=layout]
27
- grid-template-columns: 1fr fit-content(1em)
28
- grid-template-rows: 1fr fit-content(3em)
29
- .pdl-cell[data-name=view]
30
- grid-column: 1 / span 2
31
- grid-row: 1
32
- .pdl-cell[data-name=legend]
33
- padding-top: 1em
34
- grid-column: 1
35
- grid-row: 2
36
- .pdl-cell[data-name=unit]
37
- padding-top: 1em
38
- grid-column: 2
39
- grid-row: 2
40
-
41
-
42
- script(type="@plotdb/block"): include:lsc index.ls
@@ -1,170 +0,0 @@
1
- module.exports =
2
- pkg:
3
- name: 'voronoi-treemap', version: '0.0.1'
4
- extend: {name: "base", version: "0.0.1"}
5
- dependencies: [
6
- {name: "@zbryikt/voronoijs", version: "main", path: "voronoi.min.js"}
7
- ]
8
- init: ({root, context, pubsub}) ->
9
- pubsub.fire \init, mod: mod {context} .then ~> it.0
10
-
11
- mod = ({context}) ->
12
- {d3,ldcolor,voronoi,chart} = context
13
- sample: ->
14
- raw: [0 to 100].map (val) ~> {val: Math.random! * 10, cat: Math.floor(1 + 10 * Math.random!), name: val}
15
- binding:
16
- name: {key: \name}
17
- area: {key: \val}
18
- category: {key: \cat}
19
- config: {}
20
- dimension:
21
- area: { type: \R, name: "area"},
22
- name: { type: \N, desc: "name" },
23
- category: { type: \N, desc: "category"},
24
-
25
- init: ->
26
- @tint = tint = new chart.utils.tint!
27
- @g = Object.fromEntries <[view legend]>.map ~> [it, d3.select(@layout.get-group it)]
28
- @layout.get-group(\view).appendChild g = (document.createElementNS "http://www.w3.org/2000/svg", "g")
29
- @g.shape = d3.select g
30
- @site-boxes = []
31
- @legend = new chart.utils.legend do
32
- layout: @layout
33
- name: \legend
34
- root: @root
35
- shape: (d) -> d3.select(@).attr \fill, tint.get d.key
36
- cfg: selectable: true
37
- @legend.on \select, ~> @bind!; @resize!; @render!
38
- @tip = new chart.utils.tip do
39
- root: @root
40
- accessor: ({evt}) ~>
41
- if !(evt.target and data = d3.select(evt.target).datum!) => return null
42
- if Array.isArray(data) =>
43
- if !@_sites => return
44
- if !(data.idx?) => return
45
- if !(data = @_sites[data.idx]) => return
46
- return {name: data.name, value: "#{(data.area).toFixed 2}#{@binding.area.unit or ''}"}
47
- range: ~> @layout.get-node \view .getBoundingClientRect!
48
-
49
- @start!
50
- parse: ->
51
- @data.map -> it <<< {key: it.name, value: it.area}
52
- @total = @data.reduce(((a,b) -> a + b.area), 0)
53
- @cats = Array.from(new Set(@data.map (d) -> d.category))
54
- @legend.data @cats.map -> {key: it, text: it}
55
- bind: ->
56
- data = @data.filter ~> @legend.is-selected(it.category )
57
- @parsed = children: d3.nest!.key(->it.category).entries(data).map -> it <<< {children: it.values}
58
- box = @box or @svg.getBoundingClientRect!
59
- [w,h] = [box.width, box.height]
60
- w = h = Math.min(w,h)
61
- @treemap = new voronoi.Treemap(@parsed, voronoi.Polygon.create(w, h, 60), w, h)
62
- sites = @treemap.getSites!
63
- @g.shape.selectAll \path.data .data @treemap.getPolygons!
64
- ..exit!remove!
65
- ..enter!append \path .attr \class, \data
66
- .each (d,i) -> d.idx = i
67
- @g.shape.selectAll \path.data .attr \class, (d,i) -> if sites[i].lv <= 0 => 'data group' else 'data'
68
- @polygons = @g.shape.selectAll \path.data
69
-
70
- @g.shape.selectAll \g.label .data sites
71
- ..exit!remove!
72
- ..enter!append \g .attr \class, \label
73
- .each (d,i) ->
74
- d3.select @
75
- ..append \text .attr \class, 'name' .attr \font-size, '.8em'
76
- ..append \text .attr \class, 'value'
77
- @sites = @g.shape.selectAll \g.label
78
- @sites.each (d,i) ->
79
- d3.select @ .selectAll \text .data [d,d]
80
- .attr \text-anchor, \middle
81
- .attr \dominant-baseline, \center
82
- resize: ->
83
- box = @layout.get-box \view
84
- [w,h] = [box.width, box.height]
85
- s = Math.min(w,h)
86
- @legend.config @cfg.legend
87
- @legend.update!
88
- @layout.update false
89
- @g.shape.attr \transform, "translate(#{w/2 - s/2},#{h/2 - s/2})"
90
- @scale =
91
- x: d3.scaleLinear!domain [0,w] .range [0, w]
92
- y: d3.scaleLinear!domain [0,h] .range [0, h]
93
- color: d3.interpolateTurbo
94
- if @cfg? and @cfg.palette =>
95
- @scale.color = d3.interpolateDiscrete @cfg.palette.colors.map -> ldcolor.web(it.value or it)
96
- @tint.set @cfg.palette
97
- sites = @treemap.getSites!
98
- @count = 0
99
- @gbox = @svg.getBoundingClientRect!
100
-
101
- render: (tick = false)->
102
- @_sites = sites = @treemap.getSites!
103
- polygons = @treemap.getPolygons!
104
- [w,h] = [@box.width, @box.height]
105
-
106
- if !tick =>
107
-
108
- @legend.render!
109
- @sites.selectAll \.name
110
- .attr \dy, \0.88em
111
- .text ->
112
- n = ("#{it.name or ''}")
113
- return n
114
- if it.lv > 0 => n.substring(0,7) + (if n.length > 7 => '...' else '') else ''
115
- .attr \fill, (d,i) ~> if ldcolor.hcl(@tint.get d.category).l > 60 => \#000 else \#eee
116
- .style \pointer-events, \none
117
- @sites.selectAll \.value
118
- .attr \dy, \-0.28em
119
- .text -> if it.lv > 0 => (it.value or 0).toFixed(2) else ''
120
- .attr \fill, (d,i) ~> if ldcolor.hcl(@tint.get d.category).l > 60 => \#000 else \#eee
121
- .style \pointer-events, \none
122
- @site-boxes = site-boxes = []
123
- @sites.each (d,i) -> site-boxes.push @getBoundingClientRect!
124
- @polygons
125
- .attr \fill, (d,i) ~> @tint.get sites[i].category
126
- .attr \stroke, \#fff
127
- .attr \stroke-width, 1
128
-
129
- site-boxes = @site-boxes
130
- boxes = []
131
-
132
- @polygons.data polygons
133
- .attr \d, (d,i) ->
134
- d.idx = i
135
- if !(d and d.length) =>
136
- boxes.push {}
137
- return ""
138
- ret = [[\M, d.0.x, d.0.y]]
139
- [min,max] = [{x: d.0.x, y: d.0.y}, {d.0.x, d.0.y}]
140
- for idx from 0 til d.length =>
141
- [x,y] = [d[idx].x, d[idx].y]
142
- if min.x > x => min.x = x
143
- if max.x < x => max.x = x
144
- if min.y > y => min.y = y
145
- if max.y < y => max.y = y
146
- ret.push [\L, x, y]
147
- ret.push [\L, d.0.x, d.0.y]
148
- boxes.push {x: min.x, y: min.y, width: max.x - min.x, height: max.y - min.y}
149
- return ret.map(->it.join(' ')).join(' ')
150
-
151
- @sites
152
- .each (d,i) ->
153
- box = boxes[i]
154
- mybox = site-boxes[i]
155
- if !mybox => mybox = @getBoundingClientRect!
156
- d3.select @
157
- .attr \transform, ->
158
- x = box.x + box.width / 2
159
- y = box.y + box.height / 2
160
- if isNaN(x) => x = -10000
161
- if isNaN(y) => y = -10000
162
- return "translate(#x, #y)"
163
- .attr \opacity, -> (1 - 6 * ((mybox.width / (box.width >? 0) - 1) >? 0)) >? 0
164
-
165
-
166
- tick: ->
167
- @count = (@count or 0) + 1
168
- if @count < 100 =>
169
- @treemap.compute!
170
- @render true
@@ -1,17 +0,0 @@
1
- div
2
- div(plug="layout")
3
- .pdl-layout
4
- div(data-type="layout")
5
- .pdl-cell(data-name="view")
6
- .pdl-cell(data-name="legend")
7
- div(data-type="render")
8
- style(type="text/css"): :stylus
9
- .pdl-layout > div[data-type=layout]
10
- display: grid
11
- grid-template-columns: 1fr fit-content(10em)
12
- & > .pdl-cell[data-name=view]
13
- grid-column: 1
14
- & > .pdl-cell[data-name=legend]
15
- grid-column: 2
16
- padding: 0 .5em 0 .5em
17
- script(type="@plotdb/block"): include:lsc index.ls