axis.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399
  1. var Util = require('../../util/common');
  2. var Axis = require('../../component/axis/');
  3. var Global = require('../../global');
  4. var _require = require('../../graphic/index'),
  5. Shape = _require.Shape;
  6. function formatTicks(ticks) {
  7. var tmp = ticks.slice(0);
  8. if (tmp.length > 0) {
  9. var first = tmp[0];
  10. var last = tmp[tmp.length - 1];
  11. if (first.value !== 0) {
  12. tmp.unshift({
  13. value: 0
  14. });
  15. }
  16. if (last.value !== 1) {
  17. tmp.push({
  18. value: 1
  19. });
  20. }
  21. }
  22. return tmp;
  23. }
  24. var AxisController =
  25. /*#__PURE__*/
  26. function () {
  27. function AxisController(cfg) {
  28. this.axisCfg = {};
  29. this.frontPlot = null;
  30. this.backPlot = null;
  31. this.axes = {}; // store the axes's options
  32. Util.mix(this, cfg);
  33. }
  34. var _proto = AxisController.prototype;
  35. _proto._isHide = function _isHide(field) {
  36. var axisCfg = this.axisCfg;
  37. return !axisCfg || axisCfg[field] === false;
  38. };
  39. _proto._getLinePosition = function _getLinePosition(scale, dimType, index, transposed) {
  40. var position = '';
  41. var field = scale.field;
  42. var axisCfg = this.axisCfg;
  43. if (axisCfg[field] && axisCfg[field].position) {
  44. position = axisCfg[field].position;
  45. } else if (dimType === 'x') {
  46. position = transposed ? 'left' : 'bottom';
  47. } else if (dimType === 'y') {
  48. position = index ? 'right' : 'left';
  49. if (transposed) {
  50. position = 'bottom';
  51. }
  52. }
  53. return position;
  54. };
  55. _proto._getLineCfg = function _getLineCfg(coord, dimType, position) {
  56. var start;
  57. var end;
  58. var factor = 1; // Mark clockwise or counterclockwise
  59. if (dimType === 'x') {
  60. start = {
  61. x: 0,
  62. y: 0
  63. };
  64. end = {
  65. x: 1,
  66. y: 0
  67. };
  68. } else {
  69. if (position === 'right') {
  70. // there will be several y axes
  71. start = {
  72. x: 1,
  73. y: 0
  74. };
  75. end = {
  76. x: 1,
  77. y: 1
  78. };
  79. } else {
  80. start = {
  81. x: 0,
  82. y: 0
  83. };
  84. end = {
  85. x: 0,
  86. y: 1
  87. };
  88. factor = -1;
  89. }
  90. }
  91. if (coord.transposed) {
  92. factor *= -1;
  93. }
  94. return {
  95. offsetFactor: factor,
  96. start: coord.convertPoint(start),
  97. end: coord.convertPoint(end)
  98. };
  99. };
  100. _proto._getCircleCfg = function _getCircleCfg(coord) {
  101. return {
  102. startAngle: coord.startAngle,
  103. endAngle: coord.endAngle,
  104. center: coord.center,
  105. radius: coord.circleRadius
  106. };
  107. };
  108. _proto._getRadiusCfg = function _getRadiusCfg(coord) {
  109. var transposed = coord.transposed;
  110. var start;
  111. var end;
  112. if (transposed) {
  113. start = {
  114. x: 0,
  115. y: 0
  116. };
  117. end = {
  118. x: 1,
  119. y: 0
  120. };
  121. } else {
  122. start = {
  123. x: 0,
  124. y: 0
  125. };
  126. end = {
  127. x: 0,
  128. y: 1
  129. };
  130. }
  131. return {
  132. offsetFactor: -1,
  133. start: coord.convertPoint(start),
  134. end: coord.convertPoint(end)
  135. };
  136. };
  137. _proto._getAxisCfg = function _getAxisCfg(coord, scale, verticalScale, dimType, defaultCfg) {
  138. var self = this;
  139. var axisCfg = this.axisCfg;
  140. var ticks = scale.getTicks();
  141. var cfg = Util.deepMix({
  142. ticks: ticks,
  143. frontContainer: this.frontPlot,
  144. backContainer: this.backPlot
  145. }, defaultCfg, axisCfg[scale.field]);
  146. var labels = [];
  147. var label = cfg.label;
  148. var count = ticks.length;
  149. var maxWidth = 0;
  150. var maxHeight = 0;
  151. var labelCfg = label;
  152. Util.each(ticks, function (tick, index) {
  153. if (Util.isFunction(label)) {
  154. var executedLabel = label(tick.text, index, count);
  155. labelCfg = executedLabel ? Util.mix({}, Global._defaultAxis.label, executedLabel) : null;
  156. }
  157. if (labelCfg) {
  158. var textStyle = {};
  159. if (labelCfg.textAlign) {
  160. textStyle.textAlign = labelCfg.textAlign;
  161. }
  162. if (labelCfg.textBaseline) {
  163. textStyle.textBaseline = labelCfg.textBaseline;
  164. }
  165. var axisLabel = new Shape.Text({
  166. className: 'axis-label',
  167. attrs: Util.mix({
  168. x: 0,
  169. y: 0,
  170. text: tick.text,
  171. fontFamily: self.chart.get('canvas').get('fontFamily')
  172. }, labelCfg),
  173. value: tick.value,
  174. textStyle: textStyle,
  175. top: labelCfg.top,
  176. context: self.chart.get('canvas').get('context')
  177. });
  178. labels.push(axisLabel);
  179. var _axisLabel$getBBox = axisLabel.getBBox(),
  180. width = _axisLabel$getBBox.width,
  181. height = _axisLabel$getBBox.height;
  182. maxWidth = Math.max(maxWidth, width);
  183. maxHeight = Math.max(maxHeight, height);
  184. }
  185. });
  186. cfg.labels = labels;
  187. cfg.maxWidth = maxWidth;
  188. cfg.maxHeight = maxHeight;
  189. return cfg;
  190. };
  191. _proto._createAxis = function _createAxis(coord, scale, verticalScale, dimType, index) {
  192. if (index === void 0) {
  193. index = '';
  194. }
  195. var self = this;
  196. var coordType = coord.type;
  197. var transposed = coord.transposed;
  198. var type;
  199. var key;
  200. var defaultCfg;
  201. if (coordType === 'cartesian' || coordType === 'rect') {
  202. var position = self._getLinePosition(scale, dimType, index, transposed);
  203. defaultCfg = Global.axis[position];
  204. defaultCfg.position = position;
  205. type = 'Line';
  206. key = position;
  207. } else {
  208. if (dimType === 'x' && !transposed || dimType === 'y' && transposed) {
  209. defaultCfg = Global.axis.circle;
  210. type = 'Circle';
  211. key = 'circle';
  212. } else {
  213. defaultCfg = Global.axis.radius;
  214. type = 'Line';
  215. key = 'radius';
  216. }
  217. }
  218. var cfg = self._getAxisCfg(coord, scale, verticalScale, dimType, defaultCfg);
  219. cfg.type = type;
  220. cfg.dimType = dimType;
  221. cfg.verticalScale = verticalScale;
  222. cfg.index = index;
  223. this.axes[key] = cfg;
  224. };
  225. _proto.createAxis = function createAxis(coord, xScale, yScales) {
  226. var self = this;
  227. if (xScale && !self._isHide(xScale.field)) {
  228. self._createAxis(coord, xScale, yScales[0], 'x');
  229. }
  230. Util.each(yScales, function (yScale, index) {
  231. if (!self._isHide(yScale.field)) {
  232. self._createAxis(coord, yScale, xScale, 'y', index);
  233. }
  234. });
  235. var axes = this.axes;
  236. var chart = self.chart;
  237. if (chart._isAutoPadding()) {
  238. var userPadding = Util.parsePadding(chart.get('padding'));
  239. var appendPadding = Util.parsePadding(chart.get('appendPadding'));
  240. var legendRange = chart.get('legendRange') || {
  241. top: 0,
  242. right: 0,
  243. bottom: 0,
  244. left: 0
  245. };
  246. var padding = [userPadding[0] === 'auto' ? legendRange.top + appendPadding[0] * 2 : userPadding[0], userPadding[1] === 'auto' ? legendRange.right + appendPadding[1] : userPadding[1], userPadding[2] === 'auto' ? legendRange.bottom + appendPadding[2] : userPadding[2], userPadding[3] === 'auto' ? legendRange.left + appendPadding[3] : userPadding[3]];
  247. if (coord.isPolar) {
  248. var circleAxis = axes.circle;
  249. if (circleAxis) {
  250. var maxHeight = circleAxis.maxHeight,
  251. maxWidth = circleAxis.maxWidth,
  252. labelOffset = circleAxis.labelOffset;
  253. padding[0] += maxHeight + labelOffset;
  254. padding[1] += maxWidth + labelOffset;
  255. padding[2] += maxHeight + labelOffset;
  256. padding[3] += maxWidth + labelOffset;
  257. }
  258. } else {
  259. if (axes.right && userPadding[1] === 'auto') {
  260. var _axes$right = axes.right,
  261. _maxWidth = _axes$right.maxWidth,
  262. _labelOffset = _axes$right.labelOffset;
  263. padding[1] += _maxWidth + _labelOffset;
  264. }
  265. if (axes.left && userPadding[3] === 'auto') {
  266. var _axes$left = axes.left,
  267. _maxWidth2 = _axes$left.maxWidth,
  268. _labelOffset2 = _axes$left.labelOffset;
  269. padding[3] += _maxWidth2 + _labelOffset2;
  270. }
  271. if (axes.bottom && userPadding[2] === 'auto') {
  272. var _axes$bottom = axes.bottom,
  273. _maxHeight = _axes$bottom.maxHeight,
  274. _labelOffset3 = _axes$bottom.labelOffset;
  275. padding[2] += _maxHeight + _labelOffset3;
  276. }
  277. }
  278. chart.set('_padding', padding);
  279. chart._updateLayout(padding);
  280. }
  281. Util.each(axes, function (axis) {
  282. var type = axis.type,
  283. grid = axis.grid,
  284. verticalScale = axis.verticalScale,
  285. ticks = axis.ticks,
  286. dimType = axis.dimType,
  287. position = axis.position,
  288. index = axis.index;
  289. var appendCfg;
  290. if (coord.isPolar) {
  291. if (type === 'Line') {
  292. appendCfg = self._getRadiusCfg(coord);
  293. } else if (type === 'Circle') {
  294. appendCfg = self._getCircleCfg(coord);
  295. }
  296. } else {
  297. appendCfg = self._getLineCfg(coord, dimType, position);
  298. }
  299. if (grid && verticalScale) {
  300. var gridPoints = [];
  301. var verticalTicks = formatTicks(verticalScale.getTicks());
  302. Util.each(ticks, function (tick) {
  303. var subPoints = [];
  304. Util.each(verticalTicks, function (verticalTick) {
  305. var x = dimType === 'x' ? tick.value : verticalTick.value;
  306. var y = dimType === 'x' ? verticalTick.value : tick.value;
  307. if (x >= 0 && x <= 1 && y >= 0 && y <= 1) {
  308. var point = coord.convertPoint({
  309. x: x,
  310. y: y
  311. });
  312. subPoints.push(point);
  313. }
  314. });
  315. gridPoints.push({
  316. points: subPoints,
  317. _id: 'axis-' + dimType + index + '-grid-' + tick.tickValue
  318. });
  319. });
  320. axis.gridPoints = gridPoints;
  321. if (coord.isPolar) {
  322. axis.center = coord.center;
  323. axis.startAngle = coord.startAngle;
  324. axis.endAngle = coord.endAngle;
  325. }
  326. }
  327. appendCfg._id = 'axis-' + dimType;
  328. if (!Util.isNil(index)) {
  329. appendCfg._id = 'axis-' + dimType + index;
  330. }
  331. new Axis[type](Util.mix(axis, appendCfg));
  332. });
  333. };
  334. _proto.clear = function clear() {
  335. this.axes = {};
  336. this.frontPlot.clear();
  337. this.backPlot.clear();
  338. };
  339. return AxisController;
  340. }();
  341. module.exports = AxisController;