scale.category.tests.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546
  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 chart = window.acquireChart({
  142. type: 'line',
  143. data: {
  144. datasets: [{
  145. xAxisID: 'xScale0',
  146. yAxisID: 'yScale0',
  147. data: [10, 5, 0, 25, 78]
  148. }],
  149. labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5']
  150. },
  151. options: {
  152. scales: {
  153. xAxes: [{
  154. id: 'xScale0',
  155. type: 'category',
  156. position: 'bottom'
  157. }],
  158. yAxes: [{
  159. id: 'yScale0',
  160. type: 'linear'
  161. }]
  162. }
  163. }
  164. });
  165. var scale = chart.scales.xScale0;
  166. expect(scale.getLabelForIndex(1, 0)).toBe('tick2');
  167. });
  168. it('Should get the correct pixel for a value when horizontal', function() {
  169. var chart = window.acquireChart({
  170. type: 'line',
  171. data: {
  172. datasets: [{
  173. xAxisID: 'xScale0',
  174. yAxisID: 'yScale0',
  175. data: [10, 5, 0, 25, 78]
  176. }],
  177. labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick_last']
  178. },
  179. options: {
  180. scales: {
  181. xAxes: [{
  182. id: 'xScale0',
  183. type: 'category',
  184. position: 'bottom'
  185. }],
  186. yAxes: [{
  187. id: 'yScale0',
  188. type: 'linear'
  189. }]
  190. }
  191. }
  192. });
  193. var xScale = chart.scales.xScale0;
  194. expect(xScale.getPixelForValue(0, 0, 0)).toBeCloseToPixel(23 + 6); // plus lineHeight
  195. expect(xScale.getValueForPixel(23)).toBe(0);
  196. expect(xScale.getPixelForValue(0, 4, 0)).toBeCloseToPixel(487);
  197. expect(xScale.getValueForPixel(487)).toBe(4);
  198. xScale.options.offset = true;
  199. chart.update();
  200. expect(xScale.getPixelForValue(0, 0, 0)).toBeCloseToPixel(71 + 6); // plus lineHeight
  201. expect(xScale.getValueForPixel(69)).toBe(0);
  202. expect(xScale.getPixelForValue(0, 4, 0)).toBeCloseToPixel(461);
  203. expect(xScale.getValueForPixel(417)).toBe(4);
  204. });
  205. it('Should get the correct pixel for a value when there are repeated labels', function() {
  206. var chart = window.acquireChart({
  207. type: 'line',
  208. data: {
  209. datasets: [{
  210. xAxisID: 'xScale0',
  211. yAxisID: 'yScale0',
  212. data: [10, 5, 0, 25, 78]
  213. }],
  214. labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick_last']
  215. },
  216. options: {
  217. scales: {
  218. xAxes: [{
  219. id: 'xScale0',
  220. type: 'category',
  221. position: 'bottom'
  222. }],
  223. yAxes: [{
  224. id: 'yScale0',
  225. type: 'linear'
  226. }]
  227. }
  228. }
  229. });
  230. var xScale = chart.scales.xScale0;
  231. expect(xScale.getPixelForValue('tick_1', 0, 0)).toBeCloseToPixel(23 + 6); // plus lineHeight
  232. expect(xScale.getPixelForValue('tick_1', 1, 0)).toBeCloseToPixel(143);
  233. });
  234. it('Should get the correct pixel for a value when horizontal and zoomed', function() {
  235. var chart = window.acquireChart({
  236. type: 'line',
  237. data: {
  238. datasets: [{
  239. xAxisID: 'xScale0',
  240. yAxisID: 'yScale0',
  241. data: [10, 5, 0, 25, 78]
  242. }],
  243. labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick_last']
  244. },
  245. options: {
  246. scales: {
  247. xAxes: [{
  248. id: 'xScale0',
  249. type: 'category',
  250. position: 'bottom',
  251. ticks: {
  252. min: 'tick2',
  253. max: 'tick4'
  254. }
  255. }],
  256. yAxes: [{
  257. id: 'yScale0',
  258. type: 'linear'
  259. }]
  260. }
  261. }
  262. });
  263. var xScale = chart.scales.xScale0;
  264. expect(xScale.getPixelForValue(0, 1, 0)).toBeCloseToPixel(23 + 6); // plus lineHeight
  265. expect(xScale.getPixelForValue(0, 3, 0)).toBeCloseToPixel(496);
  266. xScale.options.offset = true;
  267. chart.update();
  268. expect(xScale.getPixelForValue(0, 1, 0)).toBeCloseToPixel(103 + 6); // plus lineHeight
  269. expect(xScale.getPixelForValue(0, 3, 0)).toBeCloseToPixel(429);
  270. });
  271. it('should get the correct pixel for a value when vertical', function() {
  272. var chart = window.acquireChart({
  273. type: 'line',
  274. data: {
  275. datasets: [{
  276. xAxisID: 'xScale0',
  277. yAxisID: 'yScale0',
  278. data: ['3', '5', '1', '4', '2']
  279. }],
  280. labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5'],
  281. yLabels: ['1', '2', '3', '4', '5']
  282. },
  283. options: {
  284. scales: {
  285. xAxes: [{
  286. id: 'xScale0',
  287. type: 'category',
  288. position: 'bottom',
  289. }],
  290. yAxes: [{
  291. id: 'yScale0',
  292. type: 'category',
  293. position: 'left'
  294. }]
  295. }
  296. }
  297. });
  298. var yScale = chart.scales.yScale0;
  299. expect(yScale.getPixelForValue(0, 0, 0)).toBeCloseToPixel(32);
  300. expect(yScale.getValueForPixel(32)).toBe(0);
  301. expect(yScale.getPixelForValue(0, 4, 0)).toBeCloseToPixel(484);
  302. expect(yScale.getValueForPixel(484)).toBe(4);
  303. yScale.options.offset = true;
  304. chart.update();
  305. expect(yScale.getPixelForValue(0, 0, 0)).toBeCloseToPixel(77);
  306. expect(yScale.getValueForPixel(77)).toBe(0);
  307. expect(yScale.getPixelForValue(0, 4, 0)).toBeCloseToPixel(437);
  308. expect(yScale.getValueForPixel(437)).toBe(4);
  309. });
  310. it('should get the correct pixel for a value when vertical and zoomed', function() {
  311. var chart = window.acquireChart({
  312. type: 'line',
  313. data: {
  314. datasets: [{
  315. xAxisID: 'xScale0',
  316. yAxisID: 'yScale0',
  317. data: ['3', '5', '1', '4', '2']
  318. }],
  319. labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5'],
  320. yLabels: ['1', '2', '3', '4', '5']
  321. },
  322. options: {
  323. scales: {
  324. xAxes: [{
  325. id: 'xScale0',
  326. type: 'category',
  327. position: 'bottom',
  328. }],
  329. yAxes: [{
  330. id: 'yScale0',
  331. type: 'category',
  332. position: 'left',
  333. ticks: {
  334. min: '2',
  335. max: '4'
  336. }
  337. }]
  338. }
  339. }
  340. });
  341. var yScale = chart.scales.yScale0;
  342. expect(yScale.getPixelForValue(0, 1, 0)).toBeCloseToPixel(32);
  343. expect(yScale.getPixelForValue(0, 3, 0)).toBeCloseToPixel(484);
  344. yScale.options.offset = true;
  345. chart.update();
  346. expect(yScale.getPixelForValue(0, 1, 0)).toBeCloseToPixel(107);
  347. expect(yScale.getPixelForValue(0, 3, 0)).toBeCloseToPixel(407);
  348. });
  349. it('Should get the correct pixel for an object value when horizontal', function() {
  350. var chart = window.acquireChart({
  351. type: 'line',
  352. data: {
  353. datasets: [{
  354. xAxisID: 'xScale0',
  355. yAxisID: 'yScale0',
  356. data: [
  357. {x: 0, y: 10},
  358. {x: 1, y: 5},
  359. {x: 2, y: 0},
  360. {x: 3, y: 25},
  361. {x: 0, y: 78}
  362. ]
  363. }],
  364. labels: [0, 1, 2, 3]
  365. },
  366. options: {
  367. scales: {
  368. xAxes: [{
  369. id: 'xScale0',
  370. type: 'category',
  371. position: 'bottom'
  372. }],
  373. yAxes: [{
  374. id: 'yScale0',
  375. type: 'linear'
  376. }]
  377. }
  378. }
  379. });
  380. var xScale = chart.scales.xScale0;
  381. expect(xScale.getPixelForValue({x: 0, y: 10}, 0, 0)).toBeCloseToPixel(29);
  382. expect(xScale.getPixelForValue({x: 3, y: 25}, 3, 0)).toBeCloseToPixel(506);
  383. expect(xScale.getPixelForValue({x: 0, y: 78}, 4, 0)).toBeCloseToPixel(29);
  384. });
  385. it('Should get the correct pixel for an object value when vertical', function() {
  386. var chart = window.acquireChart({
  387. type: 'line',
  388. data: {
  389. datasets: [{
  390. xAxisID: 'xScale0',
  391. yAxisID: 'yScale0',
  392. data: [
  393. {x: 0, y: 2},
  394. {x: 1, y: 4},
  395. {x: 2, y: 0},
  396. {x: 3, y: 3},
  397. {x: 0, y: 1}
  398. ]
  399. }],
  400. labels: [0, 1, 2, 3],
  401. yLabels: [0, 1, 2, 3, 4]
  402. },
  403. options: {
  404. scales: {
  405. xAxes: [{
  406. id: 'xScale0',
  407. type: 'category',
  408. position: 'bottom'
  409. }],
  410. yAxes: [{
  411. id: 'yScale0',
  412. type: 'category',
  413. position: 'left'
  414. }]
  415. }
  416. }
  417. });
  418. var yScale = chart.scales.yScale0;
  419. expect(yScale.getPixelForValue({x: 0, y: 2}, 0, 0)).toBeCloseToPixel(257);
  420. expect(yScale.getPixelForValue({x: 0, y: 1}, 4, 0)).toBeCloseToPixel(144);
  421. });
  422. it('Should get the correct pixel for an object value in a bar chart', function() {
  423. var chart = window.acquireChart({
  424. type: 'bar',
  425. data: {
  426. datasets: [{
  427. xAxisID: 'xScale0',
  428. yAxisID: 'yScale0',
  429. data: [
  430. {x: 0, y: 10},
  431. {x: 1, y: 5},
  432. {x: 2, y: 0},
  433. {x: 3, y: 25},
  434. {x: 0, y: 78}
  435. ]
  436. }],
  437. labels: [0, 1, 2, 3]
  438. },
  439. options: {
  440. scales: {
  441. xAxes: [{
  442. id: 'xScale0',
  443. type: 'category',
  444. position: 'bottom'
  445. }],
  446. yAxes: [{
  447. id: 'yScale0',
  448. type: 'linear'
  449. }]
  450. }
  451. }
  452. });
  453. var xScale = chart.scales.xScale0;
  454. expect(xScale.getPixelForValue(null, 0, 0)).toBeCloseToPixel(89);
  455. expect(xScale.getPixelForValue(null, 3, 0)).toBeCloseToPixel(449);
  456. expect(xScale.getPixelForValue(null, 4, 0)).toBeCloseToPixel(89);
  457. });
  458. it('Should get the correct pixel for an object value in a horizontal bar chart', function() {
  459. var chart = window.acquireChart({
  460. type: 'horizontalBar',
  461. data: {
  462. datasets: [{
  463. xAxisID: 'xScale0',
  464. yAxisID: 'yScale0',
  465. data: [
  466. {x: 10, y: 0},
  467. {x: 5, y: 1},
  468. {x: 0, y: 2},
  469. {x: 25, y: 3},
  470. {x: 78, y: 0}
  471. ]
  472. }],
  473. labels: [0, 1, 2, 3]
  474. },
  475. options: {
  476. scales: {
  477. xAxes: [{
  478. id: 'xScale0',
  479. type: 'linear',
  480. position: 'bottom'
  481. }],
  482. yAxes: [{
  483. id: 'yScale0',
  484. type: 'category'
  485. }]
  486. }
  487. }
  488. });
  489. var yScale = chart.scales.yScale0;
  490. expect(yScale.getPixelForValue(null, 0, 0)).toBeCloseToPixel(88);
  491. expect(yScale.getPixelForValue(null, 3, 0)).toBeCloseToPixel(426);
  492. expect(yScale.getPixelForValue(null, 4, 0)).toBeCloseToPixel(88);
  493. });
  494. });