scroll-bar.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. import { getFieldRange, getLimitRange } from '../interaction/helper';
  2. import { isObject, deepMix, directionEnabled } from '../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. function init(chart) {
  23. chart.set('_limitRange', {});
  24. chart.scrollBar = function (cfg) {
  25. if (cfg === true) {
  26. cfg = DEFAULT_CFG;
  27. } else if (isObject(cfg)) {
  28. cfg = deepMix({}, DEFAULT_CFG, cfg);
  29. }
  30. this.set('_scrollBarCfg', cfg);
  31. };
  32. }
  33. function clear(chart) {
  34. chart.set('_limitRange', {});
  35. }
  36. function changeData(chart) {
  37. chart.set('_limitRange', {});
  38. }
  39. function clearInner(chart) {
  40. var hBar = chart.get('_horizontalBar');
  41. var vBar = chart.get('_verticalBar');
  42. hBar && hBar.remove(true);
  43. vBar && vBar.remove(true);
  44. chart.set('_horizontalBar', null);
  45. chart.set('_verticalBar', null);
  46. }
  47. function afterGeomDraw(chart) {
  48. var scrollBarCfg = chart.get('_scrollBarCfg');
  49. if (!scrollBarCfg) return;
  50. var data = chart.get('data');
  51. var plotRange = chart.get('plotRange');
  52. var backPlot = chart.get('backPlot');
  53. var canvas = chart.get('canvas');
  54. var canvasHeight = canvas.get('height');
  55. var limitRange = chart.get('_limitRange');
  56. var mode = scrollBarCfg.mode;
  57. if (directionEnabled(mode, 'x')) {
  58. var {
  59. offsetX,
  60. offsetY,
  61. lineCap,
  62. backgroundColor,
  63. fillerColor,
  64. size
  65. } = scrollBarCfg.xStyle;
  66. var xScale = chart.getXScale();
  67. var xLimitRange = limitRange[xScale.field];
  68. if (!xLimitRange) {
  69. xLimitRange = getLimitRange(data, xScale);
  70. limitRange[xScale.field] = xLimitRange;
  71. }
  72. var currentRange = 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
  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
  105. }
  106. });
  107. chart.set('_horizontalBar', horizontalBar);
  108. }
  109. }
  110. if (directionEnabled(mode, 'y')) {
  111. var {
  112. offsetX: _offsetX,
  113. offsetY: _offsetY,
  114. lineCap: _lineCap,
  115. backgroundColor: _backgroundColor,
  116. fillerColor: _fillerColor,
  117. size: _size
  118. } = scrollBarCfg.yStyle;
  119. var yScale = chart.getYScales()[0];
  120. var yLimitRange = limitRange[yScale.field];
  121. if (!yLimitRange) {
  122. yLimitRange = getLimitRange(data, yScale);
  123. limitRange[yScale.field] = yLimitRange;
  124. }
  125. var _currentRange = 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. export { init, clear, changeData, clearInner, afterGeomDraw };
  165. export default {
  166. init,
  167. clear,
  168. changeData,
  169. clearInner,
  170. afterGeomDraw
  171. };