@plotdb/chart 0.0.3 → 2.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.
Files changed (194) hide show
  1. package/CHANGELOG.md +34 -1
  2. package/README.md +3 -3
  3. package/{dist/data → data}/index.js +0 -0
  4. package/{dist/chart.css → index.css} +0 -0
  5. package/{dist/chart.js → index.js} +3 -1
  6. package/{dist/chart.min.css → index.min.css} +0 -0
  7. package/index.min.js +1 -0
  8. package/package.json +1 -89
  9. package/{dist/utils → utils}/axis.js +6 -0
  10. package/utils/axis.min.js +1 -0
  11. package/{dist/utils → utils}/config.js +0 -0
  12. package/utils/config.min.js +1 -0
  13. package/{dist/utils → utils}/data.js +0 -0
  14. package/utils/data.min.js +1 -0
  15. package/{dist/utils → utils}/format.js +0 -0
  16. package/utils/format.min.js +1 -0
  17. package/{dist/utils → utils}/legend.css +0 -0
  18. package/{dist/utils → utils}/legend.js +0 -0
  19. package/{dist/utils → utils}/legend.min.css +0 -0
  20. package/utils/legend.min.js +1 -0
  21. package/{dist/utils → utils}/tint.js +0 -0
  22. package/utils/tint.min.js +1 -0
  23. package/{dist/utils → utils}/tip.js +0 -0
  24. package/utils/tip.min.js +1 -0
  25. package/build +0 -39
  26. package/dist/chart.min.js +0 -1
  27. package/dist/utils/axis.min.js +0 -1
  28. package/dist/utils/config.min.js +0 -1
  29. package/dist/utils/data.min.js +0 -1
  30. package/dist/utils/format.min.js +0 -1
  31. package/dist/utils/legend.min.js +0 -1
  32. package/dist/utils/tint.min.js +0 -1
  33. package/dist/utils/tip.min.js +0 -1
  34. package/doc/charts.md +0 -58
  35. package/doc/config.md +0 -44
  36. package/doc/draft/chart.md +0 -146
  37. package/doc/draft/data.md +0 -8
  38. package/doc/draft/definition.md +0 -0
  39. package/doc/draft/events.md +0 -0
  40. package/doc/draft/filter.md +0 -0
  41. package/doc/draft/lifecycle.md +0 -89
  42. package/doc/spec.md +0 -89
  43. package/doc/todo.md +0 -27
  44. package/doc/utils/tip.md +0 -84
  45. package/src/chart.ls +0 -323
  46. package/src/chart.styl +0 -6
  47. package/src/data/en-US/category +0 -20
  48. package/src/data/en-US/fruit +0 -39
  49. package/src/data/en-US/movie +0 -125
  50. package/src/data/en-US/name +0 -58
  51. package/src/data/index.ls +0 -34
  52. package/src/data/zh-TW/category +0 -20
  53. package/src/data/zh-TW/fruits +0 -38
  54. package/src/data/zh-TW/movie +0 -125
  55. package/src/data/zh-TW/names +0 -105
  56. package/src/utils/axis.ls +0 -229
  57. package/src/utils/config.ls +0 -11
  58. package/src/utils/data.ls +0 -104
  59. package/src/utils/format.ls +0 -30
  60. package/src/utils/legend.ls +0 -134
  61. package/src/utils/legend.styl +0 -37
  62. package/src/utils/tint.ls +0 -66
  63. package/src/utils/tip.ls +0 -97
  64. package/web/src/pug/base.pug +0 -20
  65. package/web/src/pug/block/axis/0.0.1/index.ls +0 -38
  66. package/web/src/pug/block/axis/0.0.1/index.pug +0 -1
  67. package/web/src/pug/block/axis-bubble/0.0.1/index.ls +0 -141
  68. package/web/src/pug/block/axis-bubble/0.0.1/index.pug +0 -1
  69. package/web/src/pug/block/bar/0.0.1/index.ls +0 -274
  70. package/web/src/pug/block/bar/0.0.1/index.pug +0 -35
  71. package/web/src/pug/block/bar-list/0.0.1/index.ls +0 -85
  72. package/web/src/pug/block/bar-list/0.0.1/index.pug +0 -30
  73. package/web/src/pug/block/bar-race/0.0.1/index.ls +0 -83
  74. package/web/src/pug/block/bar-race/0.0.1/index.pug +0 -21
  75. package/web/src/pug/block/base/0.0.1/index.ls +0 -67
  76. package/web/src/pug/block/base/0.0.1/index.pug +0 -5
  77. package/web/src/pug/block/blank/0.0.1/index.ls +0 -25
  78. package/web/src/pug/block/blank/0.0.1/index.pug +0 -1
  79. package/web/src/pug/block/bubble/0.0.1/index.ls +0 -220
  80. package/web/src/pug/block/bubble/0.0.1/index.pug +0 -28
  81. package/web/src/pug/block/curve-bar/0.0.1/index.ls +0 -89
  82. package/web/src/pug/block/curve-bar/0.0.1/index.pug +0 -16
  83. package/web/src/pug/block/curve-bar/0.0.1/sample.js +0 -338
  84. package/web/src/pug/block/dumbbell/0.0.1/index.ls +0 -90
  85. package/web/src/pug/block/dumbbell/0.0.1/index.pug +0 -1
  86. package/web/src/pug/block/empty/0.0.1/index.ls +0 -27
  87. package/web/src/pug/block/empty/0.0.1/index.pug +0 -2
  88. package/web/src/pug/block/gauge/0.0.1/index.ls +0 -100
  89. package/web/src/pug/block/gauge/0.0.1/index.pug +0 -31
  90. package/web/src/pug/block/gauge/0.0.1/sample.js +0 -338
  91. package/web/src/pug/block/line/0.0.1/index.ls +0 -302
  92. package/web/src/pug/block/line/0.0.1/index.pug +0 -33
  93. package/web/src/pug/block/number/0.0.1/index.ls +0 -69
  94. package/web/src/pug/block/number/0.0.1/index.pug +0 -20
  95. package/web/src/pug/block/percent-list/0.0.1/index.ls +0 -167
  96. package/web/src/pug/block/percent-list/0.0.1/index.pug +0 -34
  97. package/web/src/pug/block/pie/0.0.1/index.ls +0 -125
  98. package/web/src/pug/block/pie/0.0.1/index.pug +0 -19
  99. package/web/src/pug/block/pie/0.0.1/sample.js +0 -338
  100. package/web/src/pug/block/pie-bubble/0.0.1/index.ls +0 -185
  101. package/web/src/pug/block/pie-bubble/0.0.1/index.pug +0 -40
  102. package/web/src/pug/block/radar/0.0.1/index.ls +0 -113
  103. package/web/src/pug/block/radar/0.0.1/index.pug +0 -1
  104. package/web/src/pug/block/radar/0.0.1/xx +0 -285
  105. package/web/src/pug/block/scatter/0.0.1/index.ls +0 -128
  106. package/web/src/pug/block/scatter/0.0.1/index.pug +0 -30
  107. package/web/src/pug/block/sheet/0.0.1/index.ls +0 -38
  108. package/web/src/pug/block/sheet/0.0.1/index.pug +0 -5
  109. package/web/src/pug/block/table/0.0.1/index.ls +0 -40
  110. package/web/src/pug/block/table/0.0.1/index.pug +0 -3
  111. package/web/src/pug/block/taiwancounty/0.0.1/index.ls +0 -74
  112. package/web/src/pug/block/taiwancounty/0.0.1/index.pug +0 -64
  113. package/web/src/pug/block/taiwantown/0.0.1/index.ls +0 -48
  114. package/web/src/pug/block/taiwantown/0.0.1/index.pug +0 -52
  115. package/web/src/pug/block/taiwanvillage/0.0.1/index.ls +0 -53
  116. package/web/src/pug/block/taiwanvillage/0.0.1/index.pug +0 -52
  117. package/web/src/pug/block/treemap/0.0.1/index.ls +0 -172
  118. package/web/src/pug/block/treemap/0.0.1/index.pug +0 -42
  119. package/web/src/pug/block/voronoi-treemap/0.0.1/index.ls +0 -174
  120. package/web/src/pug/block/voronoi-treemap/0.0.1/index.pug +0 -17
  121. package/web/src/pug/block/voronoi-treemap/0.0.1/sample.js +0 -241
  122. package/web/src/pug/block/wordcloud/0.0.1/index.ls +0 -61
  123. package/web/src/pug/block/wordcloud/0.0.1/index.pug +0 -1
  124. package/web/src/pug/block/worldmap/0.0.1/index.ls +0 -81
  125. package/web/src/pug/block/worldmap/0.0.1/index.pug +0 -12
  126. package/web/src/pug/index.ls +0 -72
  127. package/web/src/pug/index.pug +0 -51
  128. package/web/src/styl/index.styl +0 -0
  129. package/web/static/assets/block/cache.js +0 -4
  130. package/web/static/assets/custom-lib/d3/d3-array.v2.js +0 -1182
  131. package/web/static/assets/custom-lib/d3/d3-array.v2.min.js +0 -2
  132. package/web/static/assets/custom-lib/d3/d3-array.v3.js +0 -1273
  133. package/web/static/assets/custom-lib/d3/d3-array.v3.min.js +0 -1273
  134. package/web/static/assets/custom-lib/d3/d3-axis.v2.min.js +0 -2
  135. package/web/static/assets/custom-lib/d3/d3-brush.v2.min.js +0 -2
  136. package/web/static/assets/custom-lib/d3/d3-color.v2.min.js +0 -2
  137. package/web/static/assets/custom-lib/d3/d3-dispatch.v2.min.js +0 -2
  138. package/web/static/assets/custom-lib/d3/d3-drag.v2.min.js +0 -2
  139. package/web/static/assets/custom-lib/d3/d3-ease.v2.min.js +0 -2
  140. package/web/static/assets/custom-lib/d3/d3-force-boundary.v0.0.1.min.js +0 -2
  141. package/web/static/assets/custom-lib/d3/d3-force.v2.min.js +0 -2
  142. package/web/static/assets/custom-lib/d3/d3-format.v2.min.js +0 -2
  143. package/web/static/assets/custom-lib/d3/d3-geo.v2.js +0 -3127
  144. package/web/static/assets/custom-lib/d3/d3-geo.v2.min.js +0 -2
  145. package/web/static/assets/custom-lib/d3/d3-hierarchy.v2.min.js +0 -2
  146. package/web/static/assets/custom-lib/d3/d3-interpolate.v2.min.js +0 -2
  147. package/web/static/assets/custom-lib/d3/d3-path.v2.min.js +0 -2
  148. package/web/static/assets/custom-lib/d3/d3-quadtree.v2.min.js +0 -2
  149. package/web/static/assets/custom-lib/d3/d3-random.v2.min.js +0 -2
  150. package/web/static/assets/custom-lib/d3/d3-scale-chromatic.v1.min.js +0 -2
  151. package/web/static/assets/custom-lib/d3/d3-selection.v2.min.js +0 -2
  152. package/web/static/assets/custom-lib/d3/d3-shape.v2.min.js +0 -2
  153. package/web/static/assets/custom-lib/d3/d3-timer.v2.min.js +0 -2
  154. package/web/static/assets/custom-lib/d3/d3-transition.v2.min.js +0 -2
  155. package/web/static/assets/custom-lib/d3/d3.v4.js +0 -17178
  156. package/web/static/assets/custom-lib/d3/d3.v4.min.js +0 -2
  157. package/web/static/assets/custom-lib/d3/d3.v6.js +0 -19708
  158. package/web/static/assets/data/countrycode.json +0 -1
  159. package/web/static/assets/data/world-110m.json +0 -1
  160. package/web/static/assets/data/zh-to-alpha2.json +0 -1
  161. package/web/static/assets/img/fluid.svg +0 -16
  162. package/web/static/block/axis/0.0.1/index.html +0 -79
  163. package/web/static/block/axis-bubble/0.0.1/index.html +0 -222
  164. package/web/static/block/bar/0.0.1/index.html +0 -581
  165. package/web/static/block/bar-list/0.0.1/index.html +0 -231
  166. package/web/static/block/bar-race/0.0.1/index.html +0 -184
  167. package/web/static/block/base/0.0.1/index.html +0 -197
  168. package/web/static/block/blank/0.0.1/index.html +0 -42
  169. package/web/static/block/bubble/0.0.1/index.html +0 -402
  170. package/web/static/block/bubble/0.0.1/test.html +0 -0
  171. package/web/static/block/curve-bar/0.0.1/index.html +0 -148
  172. package/web/static/block/dumbbell/0.0.1/index.html +0 -178
  173. package/web/static/block/empty/0.0.1/index.html +0 -76
  174. package/web/static/block/gauge/0.0.1/index.html +0 -150
  175. package/web/static/block/line/0.0.1/index.html +0 -571
  176. package/web/static/block/number/0.0.1/index.html +0 -152
  177. package/web/static/block/percent-list/0.0.1/index.html +0 -316
  178. package/web/static/block/pie/0.0.1/index.html +0 -281
  179. package/web/static/block/pie-bubble/0.0.1/index.html +0 -358
  180. package/web/static/block/radar/0.0.1/index.html +0 -149
  181. package/web/static/block/scatter/0.0.1/index.html +0 -251
  182. package/web/static/block/sheet/0.0.1/index.html +0 -103
  183. package/web/static/block/table/0.0.1/index.html +0 -73
  184. package/web/static/block/taiwancounty/0.0.1/index.html +0 -202
  185. package/web/static/block/taiwantown/0.0.1/index.html +0 -210
  186. package/web/static/block/taiwanvillage/0.0.1/index.html +0 -220
  187. package/web/static/block/treemap/0.0.1/index.html +0 -360
  188. package/web/static/block/voronoi-treemap/0.0.1/index.html +0 -350
  189. package/web/static/block/wordcloud/0.0.1/index.html +0 -92
  190. package/web/static/block/worldmap/0.0.1/index.html +0 -207
  191. package/web/static/css/index.css +0 -0
  192. package/web/static/css/index.min.css +0 -0
  193. package/web/static/favicon.ico +0 -0
  194. package/web/static/index.html +0 -153
@@ -1,274 +0,0 @@
1
- <-(->it!) _
2
-
3
- block-factory =
4
- pkg:
5
- name: 'bar', version: '0.0.1'
6
- extend: {name: "base", version: "0.0.1"}
7
- dependencies: []
8
- i18n:
9
- "zh-TW":
10
- "size": "長度"
11
- init: ({root, context, t, pubsub}) ->
12
- pubsub.fire \init, mod: mod({context, t})
13
-
14
- mod = ({context, t}) ->
15
- {chart,d3,debounce} = context
16
- sample: ->
17
- raw: [0 to 10].map (val) ~>
18
- ret = {name: val}
19
- for i from 1 to 4 => ret["val#i"] = Math.random!
20
- return ret
21
- binding:
22
- size: [1 to 4].map -> {key: "val#it", unit: "amount"}
23
- name: {key: "name"}
24
- config: {} <<< chart.utils.config.preset.default <<<
25
- sort:
26
- enabled: type: \boolean
27
- dir: type: \choice, values: <[asc desc none]>
28
- type: type: \choice, values: <[bar column]>, default: \column
29
- dimension:
30
- size: {type: \R, multiple: true, name: "size"}
31
- name: {type: \NO, name: "name"}
32
- init: ->
33
- @tint = tint = new chart.utils.tint!
34
- [[\multiple, \stack], [\percent, false], [\dancing, true]].map ([k,v]) ~>
35
- if !(@cfg[k]?) => @cfg[k] = v
36
- @svg.addEventListener \click, ~>
37
- if !@cfg.dancing or @cfg.percent => return
38
- @align-idx = ((@align-idx or 0) + 1) % (@binding.size.length + 1)
39
- @resize!
40
- @render!
41
- @brush = d3.brushX!
42
- @g = Object.fromEntries <[view xaxis yaxis legend]>.map ~> [it, d3.select(@layout.get-group it)]
43
- @range = "null"
44
- brush = debounce 150, (e) ~>
45
- if @cfg.{}brush.enabled? and !@cfg.brush.enabled => return
46
- range = e.selection
47
- if (_range = JSON.stringify(range)) == @range => return else @range = _range
48
- if !range => @filter {name: undefined}, true
49
- else
50
- domain = @scale.x.domain!
51
- bandwidth = @scale.x.bandwidth!
52
- range = range.map -> Math.floor(it / bandwidth) >? 0 <? (domain.length - 1)
53
- range = [range.0 to range.1].map -> domain[it]
54
- @filter {name: {type: 'index', value: range}}, true
55
- @brush.on \end, brush
56
- @brush.on \brush, brush
57
- @scale = scale = {}
58
- @yaxis = new chart.utils.axis layout: @layout, name: \yaxis, direction: \left
59
- @xaxis = new chart.utils.axis layout: @layout, name: \xaxis, direction: \bottom
60
- @legend = new chart.utils.legend do
61
- layout: @layout
62
- name: \legend
63
- root: @root
64
- shape: (d) -> d3.select(@).attr \fill, tint.get d.key
65
- # d3.brush covers the whole svg element. need to support by calculation. TODO
66
- /*
67
- @tip = new chart.utils.tip {
68
- root: @root
69
- accessor: ({evt}) ~>
70
- if !(evt.target and data = d3.select(evt.target).datum!) => return null
71
- v = if isNaN(data.size) => '-' else "#{data.size.toFixed(2)}#{data.unit or ''}"
72
- return {name: "#{data.group or ''} / #{data.name or ''}", value: v}
73
- range: ~> @layout.get-node \view .getBoundingClientRect!
74
- }
75
- */
76
-
77
- destroy: -> if @tip => @tip.destroy!
78
-
79
- filter: (filters, internal = false) ->
80
- @render!
81
- if internal => return
82
- @brush.move @g.view, if filters.name => filters.name.map ~> @scale.x(it) else null
83
- parse: ->
84
- @data.map (d) -> d.size = d.size.map -> if isNaN(it) => 0 else it
85
- @align-idx = undefined
86
- resize: ->
87
- @type = @cfg.type or \column
88
- #@tip.toggle(if @cfg.{}tip.enabled? => @cfg.tip.enabled else true)
89
- @legend.config @cfg.legend
90
- @legend.update!
91
- @layout.update false
92
-
93
- @max-per-group = @binding.size.map (d,i) ~> Math.max.apply(Math, @data.map -> it.size[i])
94
-
95
- # alternative align base. required for dancing stack
96
- if @cfg.align-idx and !@align-idx => @align-idx = @cfg.align-idx
97
- align-idx = (if @cfg.percent => 0 else (@align-idx or 0)) <? @binding.size.length
98
- @base-offset = @data.map (d) -> [0 til align-idx].reduce(((a,b) -> a + d.size[b]),0) or 0
99
- @delta = delta = Math.max.apply(Math, @base-offset)
100
- # stack bar
101
- if @cfg.multiple == \stack
102
- # 100% stack
103
- if @cfg.percent => max = 1
104
- else
105
- max = Math.max.apply(Math,
106
- @data.map (d) ~> [align-idx til d.size.length].reduce(((a,b) -> a + d.size[b]),0)
107
- ) + (delta or 0)
108
- # group bar
109
- else if @cfg.multiple == \group
110
- max = Math.max.apply(Math, @data.map (d) ~> Math.max.apply(Math, d.size))
111
- # split bars
112
- else if @cfg.multiple == \split
113
- max = @max-per-group.reduce(((a,b) -> a + b),0)
114
- @order = @data.map (d,i) -> {key: d._idx, idx: i, name: d.name}
115
- @data.map (d,i) -> d.sum = d.size.reduce(((a,b) -> a + b),0)
116
- if @cfg.{}sort.enabled =>
117
- @order.sort (a,b) ~> (if @cfg.sort.dir == \asc => 1 else -1) * (@data[a.idx].sum - @data[b.idx].sum)
118
- console.log @cfg
119
- if @cfg.palette => @tint.set(@cfg.palette.colors.map -> it.value or it)
120
- # order reversed to make it visually aligned with bar.
121
- @legend.data [{
122
- key: i, text: @binding.size[i].name or @binding.size[i].key
123
- } for i from @binding.size.length - 1 to 0 by -1 ]
124
- @layout.update false
125
-
126
- box = @layout.get-box \view
127
-
128
- if @type == \column =>
129
- @scale <<<
130
- y: d3.scaleLinear!domain([0,max]).range [box.height, 0]
131
- x: d3.scaleBand!domain @order.map(->it.name or it.key) .range [0, box.width]
132
- max-tick = Math.ceil(@layout.get-box \yaxis .height / 40) >? 2
133
- yticks = if @cfg.bump => [1 to ((@parsed.length or 1) >? 1)]
134
- else @scale.y.ticks((@cfg.{}yaxis.tick-count or 4) <? max-tick)
135
- @yaxis.config @cfg.yaxis
136
- v = @binding.size.0 or {}
137
- if @binding.size.length > 1 => @yaxis.caption( if v.unit => "#{v.unit}" else '')
138
- else @yaxis.caption( (v.name or v.key or '') + if v.unit => "(#{v.unit})" else '')
139
- @yaxis.ticks yticks
140
- @yaxis.scale @scale.y
141
- @xaxis.config @cfg.{}xaxis
142
- @xaxis.ticks @data.map -> it.name
143
- @xaxis.scale @scale.x
144
- @xaxis.caption(
145
- (@binding.name.name or @binding.name.key) +
146
- if @binding.name.unit => "(#{@binding.name.unit})" else ''
147
- )
148
- else
149
- @scale <<<
150
- x: d3.scaleLinear!domain([0,max]).range [box.width, 0]
151
- y: d3.scaleBand!domain @order.map(->it.name or it.key) .range [0, box.height]
152
- max-tick = Math.ceil(@layout.get-box \xaxis .width / 80) >? 2
153
- xticks = if @cfg.bump => [1 to ((@parsed.length or 1) >? 1)]
154
- else @scale.x.ticks((@cfg.{}xaxis.tick-count or 4) <? max-tick)
155
- @xaxis.config @cfg.xaxis
156
- v = @binding.size.0 or {}
157
- if @binding.size.length > 1 => @xaxis.caption( if v.unit => "#{v.unit}" else '')
158
- else @xaxis.caption( (v.name or v.key or '') + if v.unit => "(#{v.unit})" else '')
159
- @xaxis.ticks xticks
160
- @xaxis.scale @scale.x
161
- @yaxis.config @cfg.{}yaxis
162
- @yaxis.ticks @data.map -> it.name
163
- @yaxis.scale @scale.y
164
- @yaxis.caption(
165
- (@binding.name.name or @binding.name.key) +
166
- if @binding.name.unit => "(#{@binding.name.unit})" else ''
167
- )
168
-
169
- # xaxis and yaxis affect each other and they all affect view.
170
- # we may need to update them until stable but for now we simply layout twice.
171
- for i from 0 til 2 =>
172
- @layout.update false
173
- box = @layout.get-box('view')
174
- [w,h] = [box.width, box.height]
175
- @tint.set @cfg.palette
176
- r = @cfg.dot-size or 3
177
- @scale.x.range [0, w - r]
178
- @scale.y.range [h, r]
179
- @xaxis.render!
180
- @yaxis.render!
181
-
182
- box = @layout.get-box \view
183
- @brush.extent [[0, 1],[box.width, box.height - 1]]
184
-
185
- render: ->
186
- {binding, scale, range, delta, base-offset, max-per-group, cfg, tint, data, type} = @
187
- @g.view.selectAll \g.bar .data @data
188
- ..exit!remove!
189
- ..enter!append \g .attr \class, \bar
190
- @g.view.selectAll \g.bar
191
- .attr \transform, (d,i) ~>
192
- if @type == \column => "translate(#{scale.x(d.name)},0)"
193
- else "translate(0,#{scale.y(d.name)})"
194
- .each (item,j) ->
195
- [bars,offset] = [[],0]
196
- # alternative align base. required for dancing stack
197
- offset = (delta - base-offset[j])
198
-
199
- # use to tweak output size / offset. 1 = no modification
200
- sum = 1
201
- # and set sum to this for 100% stack bar
202
- if cfg.percent == true => sum = item.size.reduce(((a,b) -> a + b),0) >? 1
203
-
204
- for idx from 0 til item.size.length =>
205
- size = item.size[idx]
206
- key = idx
207
- bars.push {
208
- size: size / sum
209
- offset: offset / sum
210
- key: key
211
- group: item.name
212
- name: binding.size[key].name or binding.size[key].key
213
- unit: binding.size[key].unit or ''
214
- }
215
- # multiple bars
216
- if cfg.multiple == \split => offset += max-per-group[idx]
217
- # stack bar
218
- else if cfg.multiple == \stack => offset += size
219
-
220
-
221
- d3.select @ .selectAll \rect .data(bars, (d,i) -> d.key)
222
- ..exit!remove!
223
- ..enter!append \rect
224
- ..attr(\width, (d,i) -> (scale.x.bandwidth! - 2) >? 1) if type == \column
225
- ..attr(\y, (d,i) -> scale.y(0)) if type == \column
226
- ..attr(\height, (d,i) -> (scale.y.bandwidth! - 2) >? 1) if type != \column
227
- ..attr(\x, (d,i) -> scale.x(0)) if type != \column
228
-
229
- tran = d3.select @ .selectAll \rect
230
- .transition!duration 350
231
- # group bar
232
- .call (sel) ->
233
- if cfg.multiple != \group => return
234
- sel
235
- ..attr(\x, (d,i) -> 1 + i * (scale.x.bandwidth! - 2) / bars.length) if type == \column
236
- ..attr(\width, (d,i) -> (scale.x.bandwidth! - 2) / bars.length) if type == \column
237
- ..attr(\y, (d,i) -> Math.round(Math.min(scale.y(0), scale.y(d.size)))) if type == \column
238
-
239
- ..attr(\y, (d,i) -> 1 + i * (scale.y.bandwidth! - 2) / bars.length) if type != \column
240
- ..attr(\height, (d,i) -> (scale.y.bandwidth! - 2) / bars.length) if type != \column
241
- ..attr(\x, (d,i) -> Math.round(Math.min(scale.x(0), scale.x(d.size)))) if type != \column
242
-
243
- # stack bar
244
- .call (sel) ->
245
- if cfg.multiple != \stack => return
246
- sel
247
- ..attr(\x, 1) if type == \column
248
- ..attr(\width, (d,i) -> scale.x.bandwidth! - 2) if type == \column
249
- ..attr( \y, (d,i) -> Math.round(Math.min(scale.y(d.offset), scale.y(d.offset + d.size)))) if type == \column
250
- ..attr(\y, 1) if type != \column
251
- ..attr(\height, (d,i) -> scale.y.bandwidth! - 2) if type != \column
252
- ..attr( \x, (d,i) -> Math.round(Math.min(scale.x(d.offset), scale.x(d.offset + d.size)))) if type != \column
253
-
254
- if type == \column =>
255
- tran.attr \height, (d,i) -> Math.round(Math.abs(scale.y(0) - scale.y(d.size)))
256
- else
257
- tran.attr \width, (d,i) -> Math.round(Math.abs(scale.x(0) - scale.x(d.size)))
258
- tran
259
- .attr \fill, (d,i) ~> tint.get i, (if cfg.color-variant => ((j/data.length) - 0.5) else 0)
260
- .attr \fill-opacity, (d,i) ~>
261
- if !(binding.name and filter = binding.name.filter) => return 1
262
- if !(range = filter.value) => return 1
263
- if item.name in range => 1 else 0.2
264
-
265
- if !(@cfg.{}brush.enabled? and !@cfg.brush.enabled) => @g.view.call @brush
266
- @g.view.selectAll \rect.selection
267
- .attr \shape-rendering, \auto
268
- @legend.render!
269
- @yaxis.render!
270
- @xaxis.render!
271
-
272
- tick: ->
273
-
274
- return block-factory
@@ -1,35 +0,0 @@
1
- div
2
- div(plug="layout")
3
- .pdl-layout
4
- div(data-type="layout")
5
- .pdl-cell(data-name="yaxis") &nbsp;
6
- .pdl-cell(data-name="view")
7
- .pdl-cell
8
- .pdl-cell(data-name="xaxis") &nbsp;
9
- .pdl-cell(data-name="legend") &nbsp;
10
- div(data-type="render")
11
-
12
- style(type="text/css"): :stylus
13
- [data-name=xaxis] { font-size: 0.8em }
14
- [data-name=yaxis] { font-size: 0.8em }
15
- .pdl-layout > div[data-type=layout]
16
- display: grid
17
- grid-template-columns: fit-content(2em) 1fr fit-content(10em)
18
- grid-template-rows: 1fr fit-content(1em)
19
- /* 0.5em for axis label at the boundary */
20
- padding: 0 0.5em
21
- & > .pdl-cell[data-name=legend]
22
- grid-column: 3
23
- grid-row: 1 / span 2
24
- padding-left: 1em
25
-
26
- .pdl-layout.legend-below > div[data-type=layout]
27
- grid-template-columns: 2em 1fr
28
- grid-template-rows: 1fr fit-content(2em) fit-content(3em)
29
- .pdl-cell[data-name=legend]
30
- padding-top: 1em
31
- grid-column: 1 / span 2
32
- grid-row: 3
33
-
34
-
35
- script(type="@plotdb/block"): include:lsc index.ls
@@ -1,85 +0,0 @@
1
- <-(->it!) _
2
-
3
- block-factory =
4
- pkg:
5
- name: 'bar-list', version: '0.0.1'
6
- extend: {name: "base", version: "0.0.1"}
7
- dependencies: [
8
- {url: "/assets/lib/ldview/main/index.min.js"}
9
- ]
10
- init: ({root, context, t, pubsub}) ->
11
- pubsub.fire \init, {
12
- mod: mod({root, context, t})
13
- prepare-svg: false
14
- layout: false
15
- data-accessor: -> it._data._raw
16
- }
17
-
18
- mod = ({root, context, t}) ->
19
- {chart,d3,debounce} = context
20
- sample: ->
21
- raw: [0 to 10].map -> {name: it, value: (Math.random! * 100).toFixed(2)}
22
- binding:
23
- size: {key: "value"}
24
- name: {key: "name"}
25
- config: {}
26
- dimension:
27
- size: {type: \R, name: "size"}
28
- name: {type: \NO, name: "name"}
29
- init: ->
30
- @picked = {}
31
- @tint = tint = new chart.utils.tint!
32
- @scale = scale = {}
33
- @extent = {}
34
- get-list = ~>
35
- return [[k,v] for k,v of @picked].filter(-> !it.1).map -> it.0
36
-
37
- @view = new ldview do
38
- root: root
39
- init-render: false
40
- action: click:
41
- select: ({views, node}) ~>
42
- name = node.getAttribute \data-name
43
- if name == \none => @parsed.map ~> @picked[it.name] = false
44
- else @picked = {}
45
- @filter {name: {type: 'exclude', value: get-list!}}, true
46
- views.0.render \data
47
-
48
- handler:
49
- data:
50
- list: ~> @parsed
51
- key: -> it._idx
52
- action: click: ({views, node, data}) ~>
53
- @picked[data.name] = if @picked[data.name]? => !@picked[data.name] else false
54
- views.0.render \data, data._idx
55
- @filter {name: {type: 'exclude', value: get-list!}}, true
56
-
57
- handler: ({node, data}) ~>
58
- nn = node.querySelector('[ld=name]')
59
- nb = node.querySelector('[ld=bar]')
60
- unit = (@binding.{}size.unit or '')
61
- nn.textContent = "#{data.name} / #{data.size}#{unit}"
62
- nb.style <<< width: "#{(@scale.x data.size)}%", background: @tint.get 'size'
63
- node.style.opacity = if @picked[data.name] == false => 0.3 else 1
64
-
65
- filter: (filters, internal = false)->
66
- parse: ->
67
- @parsed = @data.map -> it
68
- names = @parsed.map -> it.name
69
- @parsed ++= [k for k of @picked]
70
- .filter -> !(it in names)
71
- .map ~> {name: it, size: 0}
72
- @parsed.sort (a,b) ~>
73
- pb = !(@picked[b.name]?) or @picked[b.name]
74
- pa = !(@picked[a.name]?) or @picked[a.name]
75
- if pb and !pa => return 1 else if !pb and pa => return -1
76
- if b.size - a.size => return that
77
- return 0
78
- @parsed.map (d,i) -> d._idx = i
79
-
80
- resize: ->
81
- @extent = d3.extent @parsed.map -> it.size
82
- @scale.x = d3.scaleLinear!domain [0, @extent.1] .range [0, 100]
83
- render: -> @view.render!
84
-
85
- return block-factory
@@ -1,30 +0,0 @@
1
- div
2
- div(plug="layout")
3
- .pdl-layout
4
- div(data-type="layout")
5
- div(data-type="render")
6
- .d-flex
7
- .flex-grow-1
8
- .data(ld-each="data")
9
- div(ld="name")
10
- div(ld="bar")
11
- div(style="position:sticky;margin-left:1em;margin-right:.25em;" +
12
- "cursor:pointer;white-space:nowrap;top:0;right:0;align-self:flex-start;height:auto;")
13
- div(ld="select",data-name="all") 全選
14
- div(ld="select",data-name="none") 全不選
15
-
16
- style(type="text/css"): :stylus
17
- .data
18
- padding-bottom: 1em
19
- .pdl-layout
20
- overflow-y: scroll
21
- user-select: none
22
- [data-type=render]
23
- overflow-y: visible
24
- height: auto
25
- .data
26
- cursor: pointer
27
- div[ld=bar]
28
- height: .5em
29
- border-radius: 2px
30
- script(type="@plotdb/block"): include:lsc index.ls
@@ -1,83 +0,0 @@
1
- <-(->it!) _
2
-
3
- block-factory =
4
- pkg:
5
- name: 'bar-race', version: '0.0.1'
6
- extend: {name: "base", version: "0.0.1"}
7
- dependencies: []
8
- i18n:
9
- "zh-TW":
10
- "height": "高度"
11
- init: ({root, context, t, pubsub}) ->
12
- pubsub.fire \init, mod: mod({context, t})
13
-
14
- mod = ({context, t}) ->
15
- {chart,d3,debounce} = context
16
- sample: ->
17
- raw: [0 to 100].map (val) ~>
18
- [n,o] = [val % 10, Math.floor(val / 10)]
19
- ret = {name: n, value: Math.random!, order: o}
20
- return ret
21
- binding:
22
- order: {key: "order"}
23
- value: {key: "value"}
24
- name: {key: "name"}
25
- config: {}
26
- dimension:
27
- order: {type: \O, name: "order", priority: 1}
28
- value: {type: \R, name: "value", priority: 2}
29
- name: {type: \N, name: "name"}
30
- init: ->
31
- @tint = tint = new chart.utils.tint!
32
- @g =
33
- view: d3.select(@layout.get-group \view)
34
- axis: d3.select(@layout.get-group \axis)
35
- @scale = scale = {}
36
- @axis-bottom = d3.axis-bottom!
37
- @legend = new chart.utils.legend do
38
- layout: @layout
39
- name: \legend
40
- root: @root
41
- shape: (d) -> d3.select(@).attr \fill, tint.get d.key
42
- parse: ->
43
- @data.map (d) -> d.value = d.value.map -> if isNaN(it) => 0 else +it
44
- @names = Array.from(new Set(@data.map -> it.name))
45
- resize: ->
46
- @layout.get-node \legend .style.width = if !(@cfg.{}legend.enabled?) or @cfg.legend.enabled => '' else '0'
47
- @layout.update false
48
-
49
- @max-per-group = @binding.height.map (d,i) ~> Math.max.apply(Math, @data.map -> it.height[i])
50
- @order = @data.map (d,i) -> {key: d._idx, idx: i, name: d.order}
51
- @order.sort (a,b) -> if b.name > a.name => 1 else if b.name < a.name => -1 else 0
52
-
53
- @tint.set @cfg.palette
54
- @legend.data [{ key: i, text: @names[i] } for i from 0 til @names.length]
55
- @layout.update false
56
- max = Math.max @data.map -> it.value
57
-
58
- box = @layout.get-box \view
59
- @scale <<<
60
- y: d3.scaleLinear!domain([0,max]).range [box.width, 0]
61
- x: d3.scaleBand!domain @order.map(->it.name or it.key) .range [0, box.height]
62
- /*
63
- @axis-bottom.scale @scale.x
64
- ..ticks(@cfg.tick-count) if @cfg.tick-count?
65
- ..tickFormat(d3.format(@cfg.tick-format)) if @cfg.tick-format?
66
- ..tickSizeInner @cfg.tick-size-inner if @cfg.tick-size-inner?
67
- ..tickSizeOuter @cfg.tick-size-outer if @cfg.tick-size-outer?
68
- ..tickPadding @cfg.tick-padding if @cfg.tick-padding?
69
- */
70
-
71
- render: ->
72
- {binding, scale, range, delta, cfg, tint, data} = @
73
- @g.view.selectAll \g.bar .data @data
74
- ..exit!remove!
75
- ..enter!append \g .attr \class, \bar
76
- @g.view.selectAll \g.bar
77
- .attr \transform, (d,i) -> "translate(#{scale.x(d.name)},0)"
78
-
79
- @g.axis.call @axis-bottom
80
- .attr \font-size, ''
81
- tick: ->
82
-
83
- return block-factory
@@ -1,21 +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="axis") &nbsp;
7
- .pdl-cell(data-name="legend") &nbsp;
8
- div(data-type="render")
9
-
10
- style(type="text/css"): :stylus
11
- g[data-name=axis] { font-size: 11px }
12
- .pdl-layout > div[data-type=layout]
13
- display: grid
14
- grid-template-columns: 1fr fit-content(10em)
15
- grid-template-rows: 1fr fit-content(1em)
16
- & > .pdl-cell[data-name=legend]
17
- grid-column: 2
18
- grid-row: 1 / span 2
19
- padding-left: 1em
20
-
21
- script(type="@plotdb/block"): include:lsc index.ls
@@ -1,67 +0,0 @@
1
-
2
-
3
- pkg:
4
- name: 'base', version: '0.0.1'
5
- dependencies: [
6
- {name: "d3", version: "4", async: false}
7
- {name: "d3-selection", version: "2", async: false}
8
- {name: "d3-random", version: "2"}
9
- {name: "d3-dispatch", version: "2", async: false}
10
- {name: "d3-transition", version: "2"}
11
- {name: "d3-format", version: "2"}
12
- {name: "d3-array", version: "2", async: false}
13
- {name: "d3-color", version: "2"}
14
- {name: "d3-path", version: "2"}
15
- {name: "d3-shape", version: "2"}
16
- {name: "d3-interpolate", version: "2", async: false}
17
- {name: "d3-scale-chromatic", version: "1"}
18
- {name: "d3-ease", version: "2"}
19
- {name: "d3-quadtree", version: "2"}
20
- {name: "d3-timer", version: "2"}
21
- {name: "d3-force", version: "2", async: false}
22
- {name: "d3-hierarchy", version: "2"}
23
- {name: "d3-force-boundary", version: "0.0.1"}
24
- {name: "d3-drag", version: "2"}
25
- {name: "d3-brush", version: "2"}
26
- {name: "d3-axis", version: "2"}
27
- {name: "@loadingio/debounce.js", version: "main", path: "debounce.min.js"}
28
- {name: "wrap-svg-text", version: "main", path: "index.min.js", async: false}
29
- {name: "@plotdb/layout", version: "main", path: "index.min.js", async: false}
30
- {name: "@plotdb/layout", version: "main", path: "index.min.css", type: \css}
31
- {name: "ldcolor", version: "main", path: "ldcolor.min.js", async: false}
32
- {name: "@plotdb/chart", version: "main", path: "chart.js", async: false}
33
- {name: "@plotdb/chart", version: "main", path: "chart.min.css", type: \css}
34
- {name: "@plotdb/chart", version: "main", path: "utils/config.js"}
35
- {name: "@plotdb/chart", version: "main", path: "utils/legend.js"}
36
- {name: "@plotdb/chart", version: "main", path: "utils/legend.css", type: \css}
37
- {name: "@plotdb/chart", version: "main", path: "utils/tint.js"}
38
- {name: "@plotdb/chart", version: "main", path: "utils/format.js", async: false}
39
- {name: "@plotdb/chart", version: "main", path: "utils/axis.js"}
40
- {name: "@plotdb/chart", version: "main", path: "utils/tip.js"}
41
- ]
42
- i18n:
43
- "zh-TW":
44
- "x axis": "X軸"
45
- name: "名稱"
46
-
47
- init: ({root, context, pubsub, data}) ->
48
- {d3,chart} = context
49
- pubsub.on \init, (opt = {}) ~>
50
- opt = {
51
- root: root
52
- delay-render: true
53
- auto-select: true
54
- data-accessor: -> d3.select(it).datum!._raw
55
- } <<< opt
56
- original-init = opt.mod.init
57
- opt.mod.init = ->
58
- @random = d3.randomUniform.source(d3.randomLcg(123))(0, 1)
59
- ret = original-init.apply @
60
- return Promise.resolve!
61
- @chart = c = new chart(opt <<< data)
62
- c.init!then -> c
63
- @
64
-
65
- interface: -> @chart
66
-
67
- mod: (root) -> {config: {}, dimension: {}, init: (->), resize: (->), render: (->)}
@@ -1,5 +0,0 @@
1
- .base(style="width:100%;height:100%")
2
- plug(name="layout")
3
- style(type="text/css"): :stylus
4
- *[plug=layout] { fill: currentColor }
5
- script(type="@plotdb/block"): include:lsc index.ls
@@ -1,25 +0,0 @@
1
- <-(->it!) _
2
-
3
- block-factory =
4
- pkg:
5
- name: \blank, version: \0.0.1
6
- extend: name: \base, version: \0.0.1
7
- dependencies: []
8
-
9
- init: ({root, context, pubsub}) ->
10
- pubsub.fire \init,
11
- mod: mod {context}
12
- raw: [0 to 100]
13
- binding: {}
14
-
15
- mod = ({context}) ->
16
- {} = context
17
- config: {}
18
- dimension: {}
19
- init: ->
20
- parse: ->
21
- resize: ->
22
- render: ->
23
- tick: ->
24
-
25
- return block-factory
@@ -1 +0,0 @@
1
- div(style="width:100%;height:100%"): script(type="@plotdb/block"): include:lsc index.ls