scroll-bar.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. var Helper = require('../interaction/helper');
  2. var Util = require('../util/common');
  3. var DEFAULT_CFG = {
  4. mode: 'x',
  5. xStyle: {
  6. backgroundColor: 'rgba(202, 215, 239, .2)',
  7. fillerColor: 'rgba(202, 215, 239, .5)',
  8. size: 4,
  9. lineCap: 'round',
  10. offsetX: 0,
  11. offsetY: 8
  12. },
  13. yStyle: {
  14. backgroundColor: 'rgba(202, 215, 239, .2)',
  15. fillerColor: 'rgba(202, 215, 239, .5)',
  16. size: 4,
  17. lineCap: 'round',
  18. offsetX: 8,
  19. offsetY: 0
  20. }
  21. };
  22. module.exports = {
  23. init: function init(chart) {
  24. chart.set('_limitRange', {});
  25. chart.scrollBar = function (cfg) {
  26. if (cfg === true) {
  27. cfg = DEFAULT_CFG;
  28. } else if (Util.isObject(cfg)) {
  29. cfg = Util.deepMix({}, DEFAULT_CFG, cfg);
  30. }
  31. this.set('_scrollBarCfg', cfg);
  32. };
  33. },
  34. clear: function clear(chart) {
  35. chart.set('_limitRange', {});
  36. },
  37. changeData: function changeData(chart) {
  38. chart.set('_limitRange', {});
  39. },
  40. clearInner: function clearInner(chart) {
  41. var hBar = chart.get('_horizontalBar');
  42. var vBar = chart.get('_verticalBar');
  43. hBar && hBar.remove(true);
  44. vBar && vBar.remove(true);
  45. chart.set('_horizontalBar', null);
  46. chart.set('_verticalBar', null);
  47. },
  48. afterGeomDraw: function afterGeomDraw(chart) {
  49. var scrollBarCfg = chart.get('_scrollBarCfg');
  50. if (!scrollBarCfg) return;
  51. var data = chart.get('data');
  52. var plotRange = chart.get('plotRange');
  53. var backPlot = chart.get('backPlot');
  54. var canvas = chart.get('canvas');
  55. var canvasHeight = canvas.get('height');
  56. var limitRange = chart.get('_limitRange');
  57. var mode = scrollBarCfg.mode;
  58. if (Util.directionEnabled(mode, 'x')) {
  59. var _scrollBarCfg$xStyle = scrollBarCfg.xStyle,
  60. offsetX = _scrollBarCfg$xStyle.offsetX,
  61. offsetY = _scrollBarCfg$xStyle.offsetY,
  62. lineCap = _scrollBarCfg$xStyle.lineCap,
  63. backgroundColor = _scrollBarCfg$xStyle.backgroundColor,
  64. fillerColor = _scrollBarCfg$xStyle.fillerColor,
  65. size = _scrollBarCfg$xStyle.size;
  66. var xScale = chart.getXScale();
  67. var xLimitRange = limitRange[xScale.field];
  68. if (!xLimitRange) {
  69. xLimitRange = Helper.getLimitRange(data, xScale);
  70. limitRange[xScale.field] = xLimitRange;
  71. }
  72. var currentRange = Helper.getFieldRange(xScale, xLimitRange, xScale.type);
  73. var horizontalBar = chart.get('_horizontalBar');
  74. var yPos = canvasHeight - size / 2 + offsetY;
  75. if (horizontalBar) {
  76. var progressLine = horizontalBar.get('children')[1];
  77. progressLine.attr({
  78. x1: Math.max(plotRange.bl.x + plotRange.width * currentRange[0] + offsetX, plotRange.bl.x),
  79. x2: Math.min(plotRange.bl.x + plotRange.width * currentRange[1] + offsetX, plotRange.br.x)
  80. });
  81. } else {
  82. horizontalBar = backPlot.addGroup({
  83. className: 'horizontalBar'
  84. });
  85. horizontalBar.addShape('line', {
  86. attrs: {
  87. x1: plotRange.bl.x + offsetX,
  88. y1: yPos,
  89. x2: plotRange.br.x + offsetX,
  90. y2: yPos,
  91. lineWidth: size,
  92. stroke: backgroundColor,
  93. lineCap: lineCap
  94. }
  95. });
  96. horizontalBar.addShape('line', {
  97. attrs: {
  98. x1: Math.max(plotRange.bl.x + plotRange.width * currentRange[0] + offsetX, plotRange.bl.x),
  99. y1: yPos,
  100. x2: Math.min(plotRange.bl.x + plotRange.width * currentRange[1] + offsetX, plotRange.br.x),
  101. y2: yPos,
  102. lineWidth: size,
  103. stroke: fillerColor,
  104. lineCap: lineCap
  105. }
  106. });
  107. chart.set('_horizontalBar', horizontalBar);
  108. }
  109. }
  110. if (Util.directionEnabled(mode, 'y')) {
  111. var _scrollBarCfg$yStyle = scrollBarCfg.yStyle,
  112. _offsetX = _scrollBarCfg$yStyle.offsetX,
  113. _offsetY = _scrollBarCfg$yStyle.offsetY,
  114. _lineCap = _scrollBarCfg$yStyle.lineCap,
  115. _backgroundColor = _scrollBarCfg$yStyle.backgroundColor,
  116. _fillerColor = _scrollBarCfg$yStyle.fillerColor,
  117. _size = _scrollBarCfg$yStyle.size;
  118. var yScale = chart.getYScales()[0];
  119. var yLimitRange = limitRange[yScale.field];
  120. if (!yLimitRange) {
  121. yLimitRange = Helper.getLimitRange(data, yScale);
  122. limitRange[yScale.field] = yLimitRange;
  123. }
  124. var _currentRange = Helper.getFieldRange(yScale, yLimitRange, yScale.type);
  125. var verticalBar = chart.get('_verticalBar');
  126. var xPos = _size / 2 + _offsetX;
  127. if (verticalBar) {
  128. var _progressLine = verticalBar.get('children')[1];
  129. _progressLine.attr({
  130. y1: Math.max(plotRange.tl.y + plotRange.height * _currentRange[0] + _offsetY, plotRange.tl.y),
  131. y2: Math.min(plotRange.tl.y + plotRange.height * _currentRange[1] + _offsetY, plotRange.bl.y)
  132. });
  133. } else {
  134. verticalBar = backPlot.addGroup({
  135. className: 'verticalBar'
  136. });
  137. verticalBar.addShape('line', {
  138. attrs: {
  139. x1: xPos,
  140. y1: plotRange.tl.y + _offsetY,
  141. x2: xPos,
  142. y2: plotRange.bl.y + _offsetY,
  143. lineWidth: _size,
  144. stroke: _backgroundColor,
  145. lineCap: _lineCap
  146. }
  147. });
  148. verticalBar.addShape('line', {
  149. attrs: {
  150. x1: xPos,
  151. y1: Math.max(plotRange.tl.y + plotRange.height * _currentRange[0] + _offsetY, plotRange.tl.y),
  152. x2: xPos,
  153. y2: Math.min(plotRange.tl.y + plotRange.height * _currentRange[1] + _offsetY, plotRange.bl.y),
  154. lineWidth: _size,
  155. stroke: _fillerColor,
  156. lineCap: _lineCap
  157. }
  158. });
  159. chart.set('_verticalBar', verticalBar);
  160. }
  161. }
  162. }
  163. };