scroll-bar.js 5.7 KB

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