c3ext.js 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360
  1. var c3ext = {}
  2. c3ext.generate = function(options) {
  3. if (options.zoom2 != null) {
  4. zoom2_reducers = options.zoom2.reducers || {}
  5. zoom2_enabled = options.zoom2.enabled
  6. _zoom2_factor = options.zoom2.factor || 1
  7. _zoom2_maxItems = options.zoom2.maxItems
  8. }
  9. if (!zoom2_enabled) {
  10. return c3.generate(options)
  11. }
  12. var originalData = Q.copy(options.data)
  13. var zoom2_reducers
  14. var zoom2_enabled
  15. var _zoom2_maxItems
  16. if (_zoom2_maxItems == null) {
  17. var el = d3.select(options.bindto).node()
  18. if (el != null) {
  19. var availWidth = el.clientWidth
  20. var pointSize = 20
  21. _zoom2_maxItems = Math.ceil(availWidth / pointSize)
  22. }
  23. if (_zoom2_maxItems == null || _zoom2_maxItems < 10) {
  24. _zoom2_maxItems = 10
  25. }
  26. }
  27. function onZoomChanged(e) {
  28. refresh()
  29. }
  30. var zoom2 = c3ext.ZoomBehavior({
  31. changed: onZoomChanged,
  32. bindto: options.bindto
  33. })
  34. zoom2.enhance = function() {
  35. _zoom2_maxItems *= 2
  36. var totalItems = zoom2.getZoom().totalItems
  37. if (_zoom2_maxItems > totalItems) _zoom2_maxItems = totalItems
  38. refresh()
  39. }
  40. zoom2.dehance = function() {
  41. _zoom2_maxItems = Math.ceil(_zoom2_maxItems / 2) + 1
  42. refresh()
  43. }
  44. zoom2.maxItems = function() {
  45. return _zoom2_maxItems
  46. }
  47. function zoomAndReduceData(list, zoomRange, func, maxItems) {
  48. //var maxItems = 10;//Math.ceil(10 * zoomFactor);
  49. var list2 = list.slice(zoomRange[0], zoomRange[1])
  50. var chunkSize = 1
  51. var list3 = list2
  52. if (list3.length > maxItems) {
  53. var chunkSize = Math.ceil(list2.length / maxItems)
  54. list3 = list3.splitIntoChunksOf(chunkSize).map(func)
  55. }
  56. //console.log("x" + getCurrentZoomLevel() + ", maxItems=" + maxItems + " chunkSize=" + chunkSize + " totalBefore=" + list2.length + ", totalAfter=" + list3.length);
  57. return list3
  58. }
  59. function first(t) {
  60. return t[0]
  61. }
  62. var getDataForZoom = function(data) {
  63. if (data.columns == null || data.columns.length == 0) return
  64. var zoomInfo = zoom2.getZoom()
  65. if (zoomInfo.totalItems != data.columns[0].length - 1) {
  66. zoom2.setOptions({ totalItems: data.columns[0].length - 1 })
  67. zoomInfo = zoom2.getZoom()
  68. }
  69. data.columns = originalData.columns.map(function(column) {
  70. var name = column[0]
  71. var reducer = zoom2_reducers[name] || first //by default take the first
  72. var values = column.slice(1)
  73. var newValues = zoomAndReduceData(
  74. values,
  75. zoomInfo.currentZoom,
  76. reducer,
  77. _zoom2_maxItems
  78. )
  79. return [name].concat(newValues)
  80. })
  81. return data
  82. }
  83. getDataForZoom(options.data)
  84. var chart = c3.generate(options)
  85. var _chart_load_org = chart.load.bind(chart)
  86. chart.zoom2 = zoom2
  87. chart.load = function(data) {
  88. if (data.unload) {
  89. unload(data.unload)
  90. delete data.unload
  91. }
  92. Q.copy(data, originalData)
  93. refresh()
  94. }
  95. chart.unload = function(names) {
  96. unload(names)
  97. refresh()
  98. }
  99. function unload(names) {
  100. originalData.columns.removeAll(function(t) {
  101. names.contains(t)
  102. })
  103. }
  104. function refresh() {
  105. var data = Q.copy(originalData)
  106. getDataForZoom(data)
  107. _chart_load_org(data)
  108. }
  109. return chart
  110. }
  111. c3ext.ZoomBehavior = function(options) {
  112. var zoom = { __type: 'ZoomBehavior' }
  113. var _zoom2_factor
  114. var _left
  115. var totalItems
  116. var currentZoom
  117. var bindto = options.bindto
  118. var _zoomChanged = options.changed || function() {}
  119. var element
  120. var mousewheelTimer
  121. var deltaY = 0
  122. var leftRatio = 0
  123. zoom.setOptions = function(options) {
  124. if (options == null) options = {}
  125. _zoom2_factor = options.factor || 1
  126. _left = 0
  127. totalItems = options.totalItems || 0
  128. currentZoom = [0, totalItems]
  129. _zoomChanged = options.changed || _zoomChanged
  130. }
  131. zoom.setOptions(options)
  132. function verifyZoom(newZoom) {
  133. //newZoom.sort();
  134. if (newZoom[1] > totalItems) {
  135. var diff = newZoom[1] - totalItems
  136. newZoom[0] -= diff
  137. newZoom[1] -= diff
  138. }
  139. if (newZoom[0] < 0) {
  140. var diff = newZoom[0] * -1
  141. newZoom[0] += diff
  142. newZoom[1] += diff
  143. }
  144. if (newZoom[1] > totalItems) newZoom[1] = totalItems
  145. if (newZoom[0] < 0) newZoom[0] = 0
  146. }
  147. function zoomAndPan(zoomFactor, left) {
  148. var itemsToShow = Math.ceil(totalItems / zoomFactor)
  149. var newZoom = [left, left + itemsToShow]
  150. verifyZoom(newZoom)
  151. currentZoom = newZoom
  152. onZoomChanged()
  153. }
  154. function onZoomChanged() {
  155. if (_zoomChanged != null) _zoomChanged(zoom.getZoom())
  156. }
  157. function applyZoomAndPan() {
  158. zoomAndPan(_zoom2_factor, _left)
  159. }
  160. function getItemsToShow() {
  161. var itemsToShow = Math.ceil(totalItems / _zoom2_factor)
  162. return itemsToShow
  163. }
  164. zoom.getZoom = function() {
  165. return { totalItems: totalItems, currentZoom: currentZoom.slice() }
  166. }
  167. zoom.factor = function(factor, skipDraw) {
  168. if (arguments.length == 0) return _zoom2_factor
  169. _zoom2_factor = factor
  170. if (_zoom2_factor < 1) _zoom2_factor = 1
  171. if (skipDraw) return
  172. applyZoomAndPan()
  173. }
  174. zoom.left = function(left, skipDraw) {
  175. if (arguments.length == 0) return _left
  176. _left = left
  177. if (_left < 0) _left = 0
  178. var pageSize = getItemsToShow()
  179. //_left += pageSize;
  180. if (_left + pageSize > totalItems) _left = totalItems - pageSize
  181. console.log({ left: _left, pageSize: pageSize })
  182. if (skipDraw) return
  183. applyZoomAndPan()
  184. }
  185. zoom.zoomAndPanByRatio = function(zoomRatio, panRatio) {
  186. var pageSize = getItemsToShow()
  187. var leftOffset = Math.round(pageSize * panRatio)
  188. var mouseLeft = _left + leftOffset
  189. zoom.factor(zoom.factor() * zoomRatio, true)
  190. var finalLeft = mouseLeft
  191. if (zoomRatio != 1) {
  192. var pageSize2 = getItemsToShow()
  193. var leftOffset2 = Math.round(pageSize2 * panRatio)
  194. finalLeft = mouseLeft - leftOffset2
  195. }
  196. zoom.left(finalLeft, true)
  197. applyZoomAndPan()
  198. }
  199. zoom.zoomIn = function() {
  200. zoom.zoomAndPanByRatio(2, 0)
  201. }
  202. zoom.zoomOut = function() {
  203. zoom.zoomAndPanByRatio(0.5, 0)
  204. }
  205. zoom.panLeft = function() {
  206. zoom.zoomAndPanByRatio(1, -1)
  207. }
  208. zoom.panRight = function() {
  209. zoom.zoomAndPanByRatio(1, 1)
  210. }
  211. zoom.reset = function() {
  212. _left = 0
  213. _zoom2_factor = 1
  214. applyZoomAndPan()
  215. }
  216. function doZoom() {
  217. if (deltaY != 0) {
  218. var maxDelta = 10
  219. var multiply = (maxDelta + deltaY) / maxDelta
  220. //var factor = chart.zoom2.factor()*multiply;
  221. //factor= Math.ceil(factor*100) / 100;
  222. console.log({ deltaY: deltaY, multiply: multiply })
  223. zoom.zoomAndPanByRatio(multiply, leftRatio) //0.5);//leftRatio);
  224. deltaY = 0
  225. }
  226. }
  227. function element_mousewheel(e) {
  228. deltaY += e.deltaY
  229. leftRatio = (e.offsetX - 70) / (e.currentTarget.offsetWidth - 70)
  230. //console.log({ "e.offsetX": e.offsetX, "e.currentTarget.offsetWidth": e.currentTarget.offsetWidth, leftRatio: leftRatio });
  231. mousewheelTimer.set(150)
  232. e.preventDefault()
  233. }
  234. if (bindto != null) {
  235. element = $(options.bindto)
  236. if (element.mousewheel) {
  237. mousewheelTimer = new Timer(doZoom)
  238. element.mousewheel(element_mousewheel)
  239. }
  240. }
  241. return zoom
  242. }
  243. if (typeof Q == 'undefined') {
  244. var Q = function() {}
  245. Q.copy = function(src, target, options, depth) {
  246. ///<summary>Copies an object into a target object, recursively cloning any object or array in the way, overwrite=true will overwrite a primitive field value even if exists</summary>
  247. ///<param name="src" />
  248. ///<param name="target" />
  249. ///<param name="options" type="Object">{ overwrite:false }</param>
  250. ///<returns type="Object">The copied object</returns>
  251. if (depth == null) depth = 0
  252. if (depth == 100) {
  253. console.warn('Q.copy is in depth of 100 - possible circular reference')
  254. }
  255. options = options || { overwrite: false }
  256. if (src == target || src == null) return target
  257. if (typeof src != 'object') {
  258. if (options.overwrite || target == null) return src
  259. return target
  260. }
  261. if (typeof src.clone == 'function') {
  262. if (options.overwrite || target == null) return src.clone()
  263. return target
  264. }
  265. if (target == null) {
  266. if (src instanceof Array) target = []
  267. else target = {}
  268. }
  269. if (src instanceof Array) {
  270. for (var i = 0; i < src.length; i++) {
  271. var item = src[i]
  272. var item2 = target[i]
  273. item2 = Q.copy(item, item2, options, depth + 1)
  274. target[i] = item2
  275. }
  276. target.splice(src.length, target.length - src.length)
  277. return target
  278. }
  279. for (var p in src) {
  280. var value = src[p]
  281. var value2 = target[p]
  282. value2 = Q.copy(value, value2, options, depth + 1)
  283. target[p] = value2
  284. }
  285. return target
  286. }
  287. }
  288. if (typeof Timer == 'undefined') {
  289. var Timer = function(action, ms) {
  290. this.action = action
  291. if (ms != null) this.set(ms)
  292. }
  293. Timer.prototype.set = function(ms) {
  294. if (ms == null) ms = this._ms
  295. else this._ms = ms
  296. this.clear()
  297. if (ms == null) return
  298. this.timeout = window.setTimeout(this.onTick.bind(this), ms)
  299. }
  300. Timer.prototype.onTick = function() {
  301. this.clear()
  302. this.action()
  303. }
  304. Timer.prototype.clear = function(ms) {
  305. if (this.timeout == null) return
  306. window.clearTimeout(this.timeout)
  307. this.timeout = null
  308. }
  309. }
  310. if (typeof Array.prototype.splitIntoChunksOf == 'undefined') {
  311. Array.prototype.splitIntoChunksOf = function(countInEachChunk) {
  312. var chunks = Math.ceil(this.length / countInEachChunk)
  313. var list = []
  314. for (var i = 0; i < this.length; i += countInEachChunk) {
  315. list.push(this.slice(i, i + countInEachChunk))
  316. }
  317. return list
  318. }
  319. }