scale.category.tests.js 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390
  1. // Test the category scale
  2. describe('Category scale tests', function() {
  3. it('Should register the constructor with the scale service', function() {
  4. var Constructor = Chart.scaleService.getScaleConstructor('category');
  5. expect(Constructor).not.toBe(undefined);
  6. expect(typeof Constructor).toBe('function');
  7. });
  8. it('Should have the correct default config', function() {
  9. var defaultConfig = Chart.scaleService.getScaleDefaults('category');
  10. expect(defaultConfig).toEqual({
  11. display: true,
  12. gridLines: {
  13. color: 'rgba(0, 0, 0, 0.1)',
  14. drawBorder: true,
  15. drawOnChartArea: true,
  16. drawTicks: true, // draw ticks extending towards the label
  17. tickMarkLength: 10,
  18. lineWidth: 1,
  19. offsetGridLines: false,
  20. display: true,
  21. zeroLineColor: 'rgba(0,0,0,0.25)',
  22. zeroLineWidth: 1,
  23. zeroLineBorderDash: [],
  24. zeroLineBorderDashOffset: 0.0,
  25. borderDash: [],
  26. borderDashOffset: 0.0
  27. },
  28. position: 'bottom',
  29. offset: false,
  30. scaleLabel: Chart.defaults.scale.scaleLabel,
  31. ticks: {
  32. beginAtZero: false,
  33. minRotation: 0,
  34. maxRotation: 50,
  35. mirror: false,
  36. padding: 0,
  37. reverse: false,
  38. display: true,
  39. callback: defaultConfig.ticks.callback, // make this nicer, then check explicitly below
  40. autoSkip: true,
  41. autoSkipPadding: 0,
  42. labelOffset: 0,
  43. minor: {},
  44. major: {},
  45. }
  46. });
  47. // Is this actually a function
  48. expect(defaultConfig.ticks.callback).toEqual(jasmine.any(Function));
  49. });
  50. it('Should generate ticks from the data labels', function() {
  51. var scaleID = 'myScale';
  52. var mockData = {
  53. datasets: [{
  54. yAxisID: scaleID,
  55. data: [10, 5, 0, 25, 78]
  56. }],
  57. labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5']
  58. };
  59. var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category'));
  60. var Constructor = Chart.scaleService.getScaleConstructor('category');
  61. var scale = new Constructor({
  62. ctx: {},
  63. options: config,
  64. chart: {
  65. data: mockData
  66. },
  67. id: scaleID
  68. });
  69. scale.determineDataLimits();
  70. scale.buildTicks();
  71. expect(scale.ticks).toEqual(mockData.labels);
  72. });
  73. it('Should generate ticks from the data xLabels', function() {
  74. var scaleID = 'myScale';
  75. var mockData = {
  76. datasets: [{
  77. yAxisID: scaleID,
  78. data: [10, 5, 0, 25, 78]
  79. }],
  80. xLabels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5']
  81. };
  82. var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category'));
  83. var Constructor = Chart.scaleService.getScaleConstructor('category');
  84. var scale = new Constructor({
  85. ctx: {},
  86. options: config,
  87. chart: {
  88. data: mockData
  89. },
  90. id: scaleID
  91. });
  92. scale.determineDataLimits();
  93. scale.buildTicks();
  94. expect(scale.ticks).toEqual(mockData.xLabels);
  95. });
  96. it('Should generate ticks from the data yLabels', function() {
  97. var scaleID = 'myScale';
  98. var mockData = {
  99. datasets: [{
  100. yAxisID: scaleID,
  101. data: [10, 5, 0, 25, 78]
  102. }],
  103. yLabels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5']
  104. };
  105. var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category'));
  106. config.position = 'left'; // y axis
  107. var Constructor = Chart.scaleService.getScaleConstructor('category');
  108. var scale = new Constructor({
  109. ctx: {},
  110. options: config,
  111. chart: {
  112. data: mockData
  113. },
  114. id: scaleID
  115. });
  116. scale.determineDataLimits();
  117. scale.buildTicks();
  118. expect(scale.ticks).toEqual(mockData.yLabels);
  119. });
  120. it('Should generate ticks from the axis labels', function() {
  121. var labels = ['tick1', 'tick2', 'tick3', 'tick4', 'tick5'];
  122. var chart = window.acquireChart({
  123. type: 'line',
  124. data: {
  125. data: [10, 5, 0, 25, 78]
  126. },
  127. options: {
  128. scales: {
  129. xAxes: [{
  130. id: 'x',
  131. type: 'category',
  132. labels: labels
  133. }]
  134. }
  135. }
  136. });
  137. var scale = chart.scales.x;
  138. expect(scale.ticks).toEqual(labels);
  139. });
  140. it ('should get the correct label for the index', function() {
  141. var scaleID = 'myScale';
  142. var mockData = {
  143. datasets: [{
  144. yAxisID: scaleID,
  145. data: [10, 5, 0, 25, 78]
  146. }],
  147. labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5']
  148. };
  149. var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category'));
  150. var Constructor = Chart.scaleService.getScaleConstructor('category');
  151. var scale = new Constructor({
  152. ctx: {},
  153. options: config,
  154. chart: {
  155. data: mockData
  156. },
  157. id: scaleID
  158. });
  159. scale.determineDataLimits();
  160. scale.buildTicks();
  161. expect(scale.getLabelForIndex(1)).toBe('tick2');
  162. });
  163. it ('Should get the correct pixel for a value when horizontal', function() {
  164. var chart = window.acquireChart({
  165. type: 'line',
  166. data: {
  167. datasets: [{
  168. xAxisID: 'xScale0',
  169. yAxisID: 'yScale0',
  170. data: [10, 5, 0, 25, 78]
  171. }],
  172. labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick_last']
  173. },
  174. options: {
  175. scales: {
  176. xAxes: [{
  177. id: 'xScale0',
  178. type: 'category',
  179. position: 'bottom'
  180. }],
  181. yAxes: [{
  182. id: 'yScale0',
  183. type: 'linear'
  184. }]
  185. }
  186. }
  187. });
  188. var xScale = chart.scales.xScale0;
  189. expect(xScale.getPixelForValue(0, 0, 0)).toBeCloseToPixel(23 + 6); // plus lineHeight
  190. expect(xScale.getValueForPixel(23)).toBe(0);
  191. expect(xScale.getPixelForValue(0, 4, 0)).toBeCloseToPixel(487);
  192. expect(xScale.getValueForPixel(487)).toBe(4);
  193. xScale.options.offset = true;
  194. chart.update();
  195. expect(xScale.getPixelForValue(0, 0, 0)).toBeCloseToPixel(69 + 6); // plus lineHeight
  196. expect(xScale.getValueForPixel(69)).toBe(0);
  197. expect(xScale.getPixelForValue(0, 4, 0)).toBeCloseToPixel(441);
  198. expect(xScale.getValueForPixel(397)).toBe(4);
  199. });
  200. it ('Should get the correct pixel for a value when there are repeated labels', function() {
  201. var chart = window.acquireChart({
  202. type: 'line',
  203. data: {
  204. datasets: [{
  205. xAxisID: 'xScale0',
  206. yAxisID: 'yScale0',
  207. data: [10, 5, 0, 25, 78]
  208. }],
  209. labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick_last']
  210. },
  211. options: {
  212. scales: {
  213. xAxes: [{
  214. id: 'xScale0',
  215. type: 'category',
  216. position: 'bottom'
  217. }],
  218. yAxes: [{
  219. id: 'yScale0',
  220. type: 'linear'
  221. }]
  222. }
  223. }
  224. });
  225. var xScale = chart.scales.xScale0;
  226. expect(xScale.getPixelForValue('tick_1', 0, 0)).toBeCloseToPixel(23 + 6); // plus lineHeight
  227. expect(xScale.getPixelForValue('tick_1', 1, 0)).toBeCloseToPixel(143);
  228. });
  229. it ('Should get the correct pixel for a value when horizontal and zoomed', function() {
  230. var chart = window.acquireChart({
  231. type: 'line',
  232. data: {
  233. datasets: [{
  234. xAxisID: 'xScale0',
  235. yAxisID: 'yScale0',
  236. data: [10, 5, 0, 25, 78]
  237. }],
  238. labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick_last']
  239. },
  240. options: {
  241. scales: {
  242. xAxes: [{
  243. id: 'xScale0',
  244. type: 'category',
  245. position: 'bottom',
  246. ticks: {
  247. min: 'tick2',
  248. max: 'tick4'
  249. }
  250. }],
  251. yAxes: [{
  252. id: 'yScale0',
  253. type: 'linear'
  254. }]
  255. }
  256. }
  257. });
  258. var xScale = chart.scales.xScale0;
  259. expect(xScale.getPixelForValue(0, 1, 0)).toBeCloseToPixel(23 + 6); // plus lineHeight
  260. expect(xScale.getPixelForValue(0, 3, 0)).toBeCloseToPixel(496);
  261. xScale.options.offset = true;
  262. chart.update();
  263. expect(xScale.getPixelForValue(0, 1, 0)).toBeCloseToPixel(102 + 6); // plus lineHeight
  264. expect(xScale.getPixelForValue(0, 3, 0)).toBeCloseToPixel(417);
  265. });
  266. it ('should get the correct pixel for a value when vertical', function() {
  267. var chart = window.acquireChart({
  268. type: 'line',
  269. data: {
  270. datasets: [{
  271. xAxisID: 'xScale0',
  272. yAxisID: 'yScale0',
  273. data: ['3', '5', '1', '4', '2']
  274. }],
  275. labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5'],
  276. yLabels: ['1', '2', '3', '4', '5']
  277. },
  278. options: {
  279. scales: {
  280. xAxes: [{
  281. id: 'xScale0',
  282. type: 'category',
  283. position: 'bottom',
  284. }],
  285. yAxes: [{
  286. id: 'yScale0',
  287. type: 'category',
  288. position: 'left'
  289. }]
  290. }
  291. }
  292. });
  293. var yScale = chart.scales.yScale0;
  294. expect(yScale.getPixelForValue(0, 0, 0)).toBe(32);
  295. expect(yScale.getValueForPixel(32)).toBe(0);
  296. expect(yScale.getPixelForValue(0, 4, 0)).toBe(484);
  297. expect(yScale.getValueForPixel(484)).toBe(4);
  298. yScale.options.offset = true;
  299. chart.update();
  300. expect(yScale.getPixelForValue(0, 0, 0)).toBe(77);
  301. expect(yScale.getValueForPixel(77)).toBe(0);
  302. expect(yScale.getPixelForValue(0, 4, 0)).toBe(439);
  303. expect(yScale.getValueForPixel(439)).toBe(4);
  304. });
  305. it ('should get the correct pixel for a value when vertical and zoomed', function() {
  306. var chart = window.acquireChart({
  307. type: 'line',
  308. data: {
  309. datasets: [{
  310. xAxisID: 'xScale0',
  311. yAxisID: 'yScale0',
  312. data: ['3', '5', '1', '4', '2']
  313. }],
  314. labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5'],
  315. yLabels: ['1', '2', '3', '4', '5']
  316. },
  317. options: {
  318. scales: {
  319. xAxes: [{
  320. id: 'xScale0',
  321. type: 'category',
  322. position: 'bottom',
  323. }],
  324. yAxes: [{
  325. id: 'yScale0',
  326. type: 'category',
  327. position: 'left',
  328. ticks: {
  329. min: '2',
  330. max: '4'
  331. }
  332. }]
  333. }
  334. }
  335. });
  336. var yScale = chart.scales.yScale0;
  337. expect(yScale.getPixelForValue(0, 1, 0)).toBe(32);
  338. expect(yScale.getPixelForValue(0, 3, 0)).toBe(484);
  339. yScale.options.offset = true;
  340. chart.update();
  341. expect(yScale.getPixelForValue(0, 1, 0)).toBe(107);
  342. expect(yScale.getPixelForValue(0, 3, 0)).toBe(409);
  343. });
  344. });