API Docs for: 3.10.3
Show:

File: charts/js/LeftAxisLayout.js

  1. /**
  2. * Provides base functionality for drawing chart axes.
  3. *
  4. * @module charts
  5. * @submodule axis
  6. */
  7. var CONFIG = Y.config,
  8. DOCUMENT = CONFIG.doc,
  9. Y_Lang = Y.Lang,
  10. IS_STRING = Y_Lang.isString,
  11. Y_DOM = Y.DOM,
  12. LeftAxisLayout,
  13. RightAxisLayout,
  14. BottomAxisLayout,
  15. TopAxisLayout;
  16. /**
  17. * Algorithmic strategy for rendering a left axis.
  18. *
  19. * @class LeftAxisLayout
  20. * @constructor
  21. * @submodule axis
  22. */
  23. LeftAxisLayout = function() {};
  24.  
  25. LeftAxisLayout.prototype = {
  26. /**
  27. * Default margins for text fields.
  28. *
  29. * @private
  30. * @method _getDefaultMargins
  31. * @return Object
  32. */
  33. _getDefaultMargins: function()
  34. {
  35. return {
  36. top: 0,
  37. left: 0,
  38. right: 4,
  39. bottom: 0
  40. };
  41. },
  42.  
  43. /**
  44. * Sets the length of the tick on either side of the axis line.
  45. *
  46. * @method setTickOffset
  47. * @protected
  48. */
  49. setTickOffsets: function()
  50. {
  51. var host = this,
  52. majorTicks = host.get("styles").majorTicks,
  53. tickLength = majorTicks.length,
  54. halfTick = tickLength * 0.5,
  55. display = majorTicks.display;
  56. host.set("topTickOffset", 0);
  57. host.set("bottomTickOffset", 0);
  58.  
  59. switch(display)
  60. {
  61. case "inside" :
  62. host.set("rightTickOffset", tickLength);
  63. host.set("leftTickOffset", 0);
  64. break;
  65. case "outside" :
  66. host.set("rightTickOffset", 0);
  67. host.set("leftTickOffset", tickLength);
  68. break;
  69. case "cross":
  70. host.set("rightTickOffset", halfTick);
  71. host.set("leftTickOffset", halfTick);
  72. break;
  73. default:
  74. host.set("rightTickOffset", 0);
  75. host.set("leftTickOffset", 0);
  76. break;
  77. }
  78. },
  79.  
  80. /**
  81. * Draws a tick
  82. *
  83. * @method drawTick
  84. * @param {Path} path reference to the path `Path` element in which to draw the tick.
  85. * @param {Object} pt Point on the axis in which the tick will intersect.
  86. * @param {Object} tickStyle Hash of properties to apply to the tick.
  87. * @protected
  88. */
  89. drawTick: function(path, pt, tickStyles)
  90. {
  91. var host = this,
  92. style = host.get("styles"),
  93. padding = style.padding,
  94. tickLength = tickStyles.length,
  95. start = {x:padding.left, y:pt.y},
  96. end = {x:tickLength + padding.left, y:pt.y};
  97. host.drawLine(path, start, end);
  98. },
  99.  
  100. /**
  101. * Calculates the coordinates for the first point on an axis.
  102. *
  103. * @method getLineStart
  104. * @return {Object}
  105. * @protected
  106. */
  107. getLineStart: function()
  108. {
  109. var style = this.get("styles"),
  110. padding = style.padding,
  111. majorTicks = style.majorTicks,
  112. tickLength = majorTicks.length,
  113. display = majorTicks.display,
  114. pt = {x:padding.left, y:0};
  115. if(display === "outside")
  116. {
  117. pt.x += tickLength;
  118. }
  119. else if(display === "cross")
  120. {
  121. pt.x += tickLength/2;
  122. }
  123. return pt;
  124. },
  125.  
  126. /**
  127. * Calculates the point for a label.
  128. *
  129. * @method getLabelPoint
  130. * @param {Object} point Point on the axis in which the tick will intersect.
  131. * @return {Object}
  132. * @protected
  133. */
  134. getLabelPoint: function(point)
  135. {
  136. return {x:point.x - this.get("leftTickOffset"), y:point.y};
  137. },
  138.  
  139. /**
  140. * Updates the value for the `maxLabelSize` for use in calculating total size.
  141. *
  142. * @method updateMaxLabelSize
  143. * @param {HTMLElement} label to measure
  144. * @protected
  145. */
  146. updateMaxLabelSize: function(labelWidth, labelHeight)
  147. {
  148. var host = this,
  149. props = this._labelRotationProps,
  150. rot = props.rot,
  151. absRot = props.absRot,
  152. sinRadians = props.sinRadians,
  153. cosRadians = props.cosRadians,
  154. max;
  155. if(rot === 0)
  156. {
  157. max = labelWidth;
  158. }
  159. else if(absRot === 90)
  160. {
  161. max = labelHeight;
  162. }
  163. else
  164. {
  165. max = (cosRadians * labelWidth) + (sinRadians * labelHeight);
  166. }
  167. host._maxLabelSize = Math.max(host._maxLabelSize, max);
  168. },
  169.  
  170. /**
  171. * Determines the available label width when the axis width has been explicitly set.
  172. *
  173. * @method getExplicitlySized
  174. * @return Boolean
  175. * @protected
  176. */
  177. getExplicitlySized: function(styles)
  178. {
  179. if(this._explicitWidth)
  180. {
  181. var host = this,
  182. w = host._explicitWidth,
  183. totalTitleSize = host._totalTitleSize,
  184. leftTickOffset = host.get("leftTickOffset"),
  185. margin = styles.label.margin.right;
  186. host._maxLabelSize = w - (leftTickOffset + margin + totalTitleSize);
  187. return true;
  188. }
  189. return false;
  190. },
  191.  
  192. /**
  193. * Rotate and position title.
  194. *
  195. * @method positionTitle
  196. * @param {HTMLElement} label to rotate position
  197. * @protected
  198. */
  199. positionTitle: function(label)
  200. {
  201. var host = this,
  202. bounds = host._titleBounds,
  203. margin = host.get("styles").title.margin,
  204. props = host._titleRotationProps,
  205. w = bounds.right - bounds.left,
  206. labelWidth = label.offsetWidth,
  207. labelHeight = label.offsetHeight,
  208. x = (labelWidth * -0.5) + (w * 0.5),
  209. y = (host.get("height") * 0.5) - (labelHeight * 0.5);
  210. props.labelWidth = labelWidth;
  211. props.labelHeight = labelHeight;
  212. if(margin && margin.left)
  213. {
  214. x += margin.left;
  215. }
  216. props.x = x;
  217. props.y = y;
  218. props.transformOrigin = [0.5, 0.5];
  219. host._rotate(label, props);
  220. },
  221.  
  222. /**
  223. * Rotate and position labels.
  224. *
  225. * @method positionLabel
  226. * @param {HTMLElement} label to rotate position
  227. * @param {Object} pt hash containing the x and y coordinates in which the label will be positioned
  228. * against.
  229. * @protected
  230. */
  231. positionLabel: function(label, pt, styles, i)
  232. {
  233. var host = this,
  234. tickOffset = host.get("leftTickOffset"),
  235. totalTitleSize = this._totalTitleSize,
  236. leftOffset = pt.x + totalTitleSize - tickOffset,
  237. topOffset = pt.y,
  238. props = this._labelRotationProps,
  239. rot = props.rot,
  240. absRot = props.absRot,
  241. maxLabelSize = host._maxLabelSize,
  242. labelWidth = this._labelWidths[i],
  243. labelHeight = this._labelHeights[i];
  244. if(rot === 0)
  245. {
  246. leftOffset -= labelWidth;
  247. topOffset -= labelHeight * 0.5;
  248. }
  249. else if(rot === 90)
  250. {
  251. leftOffset -= labelWidth * 0.5;
  252. }
  253. else if(rot === -90)
  254. {
  255. leftOffset -= labelWidth * 0.5;
  256. topOffset -= labelHeight;
  257. }
  258. else
  259. {
  260. leftOffset -= labelWidth + (labelHeight * absRot/360);
  261. topOffset -= labelHeight * 0.5;
  262. }
  263. props.labelWidth = labelWidth;
  264. props.labelHeight = labelHeight;
  265. props.x = Math.round(maxLabelSize + leftOffset);
  266. props.y = Math.round(topOffset);
  267. this._rotate(label, props);
  268. },
  269.  
  270. /**
  271. * Adjusts the coordinates of an axis label based on the rotation.
  272. *
  273. * @method _setRotationCoords
  274. * @param {Object} props Coordinates, dimension and rotation properties of the label.
  275. * @protected
  276. */
  277. _setRotationCoords: function(props)
  278. {
  279. var rot = props.rot,
  280. absRot = props.absRot,
  281. leftOffset,
  282. topOffset,
  283. labelWidth = props.labelWidth,
  284. labelHeight = props.labelHeight;
  285. if(rot === 0)
  286. {
  287. leftOffset = labelWidth;
  288. topOffset = labelHeight * 0.5;
  289. }
  290. else if(rot === 90)
  291. {
  292. topOffset = 0;
  293. leftOffset = labelWidth * 0.5;
  294. }
  295. else if(rot === -90)
  296. {
  297. leftOffset = labelWidth * 0.5;
  298. topOffset = labelHeight;
  299. }
  300. else
  301. {
  302. leftOffset = labelWidth + (labelHeight * absRot/360);
  303. topOffset = labelHeight * 0.5;
  304. }
  305. props.x -= leftOffset;
  306. props.y -= topOffset;
  307. },
  308.  
  309. /**
  310. * Returns the transformOrigin to use for an axis label based on the position of the axis
  311. * and the rotation of the label.
  312. *
  313. * @method _getTransformOrigin
  314. * @param {Number} rot The rotation (in degrees) of the label.
  315. * @return Array
  316. * @protected
  317. */
  318. _getTransformOrigin: function(rot)
  319. {
  320. var transformOrigin;
  321. if(rot === 0)
  322. {
  323. transformOrigin = [0, 0];
  324. }
  325. else if(rot === 90)
  326. {
  327. transformOrigin = [0.5, 0];
  328. }
  329. else if(rot === -90)
  330. {
  331. transformOrigin = [0.5, 1];
  332. }
  333. else
  334. {
  335. transformOrigin = [1, 0.5];
  336. }
  337. return transformOrigin;
  338. },
  339.  
  340. /**
  341. * Adjust the position of the Axis widget's content box for internal axes.
  342. *
  343. * @method offsetNodeForTick
  344. * @param {Node} cb contentBox of the axis
  345. * @protected
  346. */
  347. offsetNodeForTick: function()
  348. {
  349. },
  350.  
  351. /**
  352. * Sets the width of the axis based on its contents.
  353. *
  354. * @method setCalculatedSize
  355. * @protected
  356. */
  357. setCalculatedSize: function()
  358. {
  359. var host = this,
  360. graphic = this.get("graphic"),
  361. style = host.get("styles"),
  362. label = style.label,
  363. tickOffset = host.get("leftTickOffset"),
  364. max = host._maxLabelSize,
  365. totalTitleSize = this._totalTitleSize,
  366. ttl = Math.round(totalTitleSize + tickOffset + max + label.margin.right);
  367. if(this._explicitWidth)
  368. {
  369. ttl = this._explicitWidth;
  370. }
  371. this.set("calculatedWidth", ttl);
  372. graphic.set("x", ttl - tickOffset);
  373. }
  374. };
  375.  
  376. Y.LeftAxisLayout = LeftAxisLayout;
  377.