You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

245 lines
7.1KB

  1. // Tests of the scale service
  2. describe('Test the layout service', function() {
  3. beforeEach(function() {
  4. window.addDefaultMatchers(jasmine);
  5. });
  6. afterEach(function() {
  7. window.releaseAllCharts();
  8. });
  9. it('should fit a simple chart with 2 scales', function() {
  10. var chart = window.acquireChart({
  11. type: 'bar',
  12. data: {
  13. datasets: [
  14. { data: [10, 5, 0, 25, 78, -10] }
  15. ],
  16. labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5', 'tick6']
  17. },
  18. options: {
  19. scales: {
  20. xAxes: [{
  21. id: 'xScale',
  22. type: 'category'
  23. }],
  24. yAxes: [{
  25. id: 'yScale',
  26. type: 'linear'
  27. }]
  28. }
  29. }
  30. }, {
  31. height: '150px',
  32. width: '250px'
  33. });
  34. expect(chart.chartArea.bottom).toBeCloseToPixel(112);
  35. expect(chart.chartArea.left).toBeCloseToPixel(41);
  36. expect(chart.chartArea.right).toBeCloseToPixel(250);
  37. expect(chart.chartArea.top).toBeCloseToPixel(32);
  38. // Is xScale at the right spot
  39. expect(chart.scales.xScale.bottom).toBeCloseToPixel(150);
  40. expect(chart.scales.xScale.left).toBeCloseToPixel(41);
  41. expect(chart.scales.xScale.right).toBeCloseToPixel(250);
  42. expect(chart.scales.xScale.top).toBeCloseToPixel(112);
  43. expect(chart.scales.xScale.labelRotation).toBeCloseTo(25);
  44. // Is yScale at the right spot
  45. expect(chart.scales.yScale.bottom).toBeCloseToPixel(112);
  46. expect(chart.scales.yScale.left).toBeCloseToPixel(0);
  47. expect(chart.scales.yScale.right).toBeCloseToPixel(41);
  48. expect(chart.scales.yScale.top).toBeCloseToPixel(32);
  49. expect(chart.scales.yScale.labelRotation).toBeCloseTo(0);
  50. });
  51. it('should fit scales that are in the top and right positions', function() {
  52. var chart = window.acquireChart({
  53. type: 'bar',
  54. data: {
  55. datasets: [
  56. { data: [10, 5, 0, 25, 78, -10] }
  57. ],
  58. labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5', 'tick6']
  59. },
  60. options: {
  61. scales: {
  62. xAxes: [{
  63. id: 'xScale',
  64. type: 'category',
  65. position: 'top'
  66. }],
  67. yAxes: [{
  68. id: 'yScale',
  69. type: 'linear',
  70. position: 'right'
  71. }]
  72. }
  73. }
  74. }, {
  75. height: '150px',
  76. width: '250px'
  77. });
  78. expect(chart.chartArea.bottom).toBeCloseToPixel(150);
  79. expect(chart.chartArea.left).toBeCloseToPixel(0);
  80. expect(chart.chartArea.right).toBeCloseToPixel(209);
  81. expect(chart.chartArea.top).toBeCloseToPixel(71);
  82. // Is xScale at the right spot
  83. expect(chart.scales.xScale.bottom).toBeCloseToPixel(71);
  84. expect(chart.scales.xScale.left).toBeCloseToPixel(0);
  85. expect(chart.scales.xScale.right).toBeCloseToPixel(209);
  86. expect(chart.scales.xScale.top).toBeCloseToPixel(32);
  87. expect(chart.scales.xScale.labelRotation).toBeCloseTo(25);
  88. // Is yScale at the right spot
  89. expect(chart.scales.yScale.bottom).toBeCloseToPixel(150);
  90. expect(chart.scales.yScale.left).toBeCloseToPixel(209);
  91. expect(chart.scales.yScale.right).toBeCloseToPixel(250);
  92. expect(chart.scales.yScale.top).toBeCloseToPixel(71);
  93. expect(chart.scales.yScale.labelRotation).toBeCloseTo(0);
  94. });
  95. it('should fit scales that overlap the chart area', function() {
  96. var chart = window.acquireChart({
  97. type: 'radar',
  98. data: {
  99. datasets: [{
  100. data: [10, 5, 0, 25, 78, -10]
  101. }, {
  102. data: [-19, -20, 0, -99, -50, 0]
  103. }],
  104. labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5', 'tick6']
  105. }
  106. });
  107. expect(chart.chartArea.bottom).toBeCloseToPixel(512);
  108. expect(chart.chartArea.left).toBeCloseToPixel(0);
  109. expect(chart.chartArea.right).toBeCloseToPixel(512);
  110. expect(chart.chartArea.top).toBeCloseToPixel(32);
  111. expect(chart.scale.bottom).toBeCloseToPixel(512);
  112. expect(chart.scale.left).toBeCloseToPixel(0);
  113. expect(chart.scale.right).toBeCloseToPixel(512);
  114. expect(chart.scale.top).toBeCloseToPixel(32);
  115. expect(chart.scale.width).toBeCloseToPixel(512);
  116. expect(chart.scale.height).toBeCloseToPixel(480)
  117. });
  118. it('should fit multiple axes in the same position', function() {
  119. var chart = window.acquireChart({
  120. type: 'bar',
  121. data: {
  122. datasets: [{
  123. yAxisID: 'yScale1',
  124. data: [10, 5, 0, 25, 78, -10]
  125. }, {
  126. yAxisID: 'yScale2',
  127. data: [-19, -20, 0, -99, -50, 0]
  128. }],
  129. labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5', 'tick6']
  130. },
  131. options: {
  132. scales: {
  133. xAxes: [{
  134. id: 'xScale',
  135. type: 'category'
  136. }],
  137. yAxes: [{
  138. id: 'yScale1',
  139. type: 'linear'
  140. }, {
  141. id: 'yScale2',
  142. type: 'linear'
  143. }]
  144. }
  145. }
  146. }, {
  147. height: '150px',
  148. width: '250px'
  149. });
  150. expect(chart.chartArea.bottom).toBeCloseToPixel(102);
  151. expect(chart.chartArea.left).toBeCloseToPixel(86);
  152. expect(chart.chartArea.right).toBeCloseToPixel(250);
  153. expect(chart.chartArea.top).toBeCloseToPixel(32);
  154. // Is xScale at the right spot
  155. expect(chart.scales.xScale.bottom).toBeCloseToPixel(150);
  156. expect(chart.scales.xScale.left).toBeCloseToPixel(86);
  157. expect(chart.scales.xScale.right).toBeCloseToPixel(250);
  158. expect(chart.scales.xScale.top).toBeCloseToPixel(103);
  159. expect(chart.scales.xScale.labelRotation).toBeCloseTo(50);
  160. // Are yScales at the right spot
  161. expect(chart.scales.yScale1.bottom).toBeCloseToPixel(102);
  162. expect(chart.scales.yScale1.left).toBeCloseToPixel(0);
  163. expect(chart.scales.yScale1.right).toBeCloseToPixel(41);
  164. expect(chart.scales.yScale1.top).toBeCloseToPixel(32);
  165. expect(chart.scales.yScale1.labelRotation).toBeCloseTo(0);
  166. expect(chart.scales.yScale2.bottom).toBeCloseToPixel(102);
  167. expect(chart.scales.yScale2.left).toBeCloseToPixel(41);
  168. expect(chart.scales.yScale2.right).toBeCloseToPixel(86);
  169. expect(chart.scales.yScale2.top).toBeCloseToPixel(32);
  170. expect(chart.scales.yScale2.labelRotation).toBeCloseTo(0);
  171. });
  172. it ('should fix a full width box correctly', function() {
  173. var chart = window.acquireChart({
  174. type: 'bar',
  175. data: {
  176. datasets: [{
  177. xAxisID: 'xScale1',
  178. data: [10, 5, 0, 25, 78, -10]
  179. }, {
  180. xAxisID: 'xScale2',
  181. data: [-19, -20, 0, -99, -50, 0]
  182. }],
  183. labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5', 'tick6']
  184. },
  185. options: {
  186. scales: {
  187. xAxes: [{
  188. id: 'xScale1',
  189. type: 'category'
  190. }, {
  191. id: 'xScale2',
  192. type: 'category',
  193. position: 'top',
  194. fullWidth: true
  195. }],
  196. yAxes: [{
  197. id: 'yScale',
  198. type: 'linear'
  199. }]
  200. }
  201. }
  202. });
  203. expect(chart.chartArea.bottom).toBeCloseToPixel(484);
  204. expect(chart.chartArea.left).toBeCloseToPixel(45);
  205. expect(chart.chartArea.right).toBeCloseToPixel(512);
  206. expect(chart.chartArea.top).toBeCloseToPixel(60);
  207. // Are xScales at the right spot
  208. expect(chart.scales.xScale1.bottom).toBeCloseToPixel(512);
  209. expect(chart.scales.xScale1.left).toBeCloseToPixel(45);
  210. expect(chart.scales.xScale1.right).toBeCloseToPixel(512);
  211. expect(chart.scales.xScale1.top).toBeCloseToPixel(484);
  212. expect(chart.scales.xScale2.bottom).toBeCloseToPixel(28);
  213. expect(chart.scales.xScale2.left).toBeCloseToPixel(0);
  214. expect(chart.scales.xScale2.right).toBeCloseToPixel(512);
  215. expect(chart.scales.xScale2.top).toBeCloseToPixel(0);
  216. // Is yScale at the right spot
  217. expect(chart.scales.yScale.bottom).toBeCloseToPixel(484);
  218. expect(chart.scales.yScale.left).toBeCloseToPixel(0);
  219. expect(chart.scales.yScale.right).toBeCloseToPixel(45);
  220. expect(chart.scales.yScale.top).toBeCloseToPixel(60);
  221. });
  222. });