scale.radialLinear.tests.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447
  1. // Tests for the radial linear scale used by the polar area and radar charts
  2. describe('Test the radial linear scale', function() {
  3. it('Should register the constructor with the scale service', function() {
  4. var Constructor = Chart.scaleService.getScaleConstructor('radialLinear');
  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('radialLinear');
  10. expect(defaultConfig).toEqual({
  11. angleLines: {
  12. display: true,
  13. color: 'rgba(0, 0, 0, 0.1)',
  14. lineWidth: 1
  15. },
  16. animate: true,
  17. display: true,
  18. gridLines: {
  19. circular: false,
  20. color: 'rgba(0, 0, 0, 0.1)',
  21. drawBorder: true,
  22. drawOnChartArea: true,
  23. drawTicks: true,
  24. tickMarkLength: 10,
  25. lineWidth: 1,
  26. offsetGridLines: false,
  27. display: true,
  28. zeroLineColor: 'rgba(0,0,0,0.25)',
  29. zeroLineWidth: 1,
  30. zeroLineBorderDash: [],
  31. zeroLineBorderDashOffset: 0.0,
  32. borderDash: [],
  33. borderDashOffset: 0.0
  34. },
  35. pointLabels: {
  36. display: true,
  37. fontSize: 10,
  38. callback: defaultConfig.pointLabels.callback, // make this nicer, then check explicitly below
  39. },
  40. position: 'chartArea',
  41. offset: false,
  42. scaleLabel: Chart.defaults.scale.scaleLabel,
  43. ticks: {
  44. backdropColor: 'rgba(255,255,255,0.75)',
  45. backdropPaddingY: 2,
  46. backdropPaddingX: 2,
  47. beginAtZero: false,
  48. minRotation: 0,
  49. maxRotation: 50,
  50. mirror: false,
  51. padding: 0,
  52. reverse: false,
  53. showLabelBackdrop: true,
  54. display: true,
  55. callback: defaultConfig.ticks.callback, // make this nicer, then check explicitly below
  56. autoSkip: true,
  57. autoSkipPadding: 0,
  58. labelOffset: 0,
  59. minor: {},
  60. major: {},
  61. },
  62. });
  63. // Is this actually a function
  64. expect(defaultConfig.ticks.callback).toEqual(jasmine.any(Function));
  65. expect(defaultConfig.pointLabels.callback).toEqual(jasmine.any(Function));
  66. });
  67. it('Should correctly determine the max & min data values', function() {
  68. var chart = window.acquireChart({
  69. type: 'radar',
  70. data: {
  71. datasets: [{
  72. data: [10, 5, 0, -5, 78, -100]
  73. }, {
  74. data: [150]
  75. }],
  76. labels: ['label1', 'label2', 'label3', 'label4', 'label5', 'label6']
  77. },
  78. options: {
  79. scales: {}
  80. }
  81. });
  82. expect(chart.scale.min).toBe(-100);
  83. expect(chart.scale.max).toBe(150);
  84. });
  85. it('Should correctly determine the max & min of string data values', function() {
  86. var chart = window.acquireChart({
  87. type: 'radar',
  88. data: {
  89. datasets: [{
  90. data: ['10', '5', '0', '-5', '78', '-100']
  91. }, {
  92. data: ['150']
  93. }],
  94. labels: ['label1', 'label2', 'label3', 'label4', 'label5', 'label6']
  95. },
  96. options: {
  97. scales: {}
  98. }
  99. });
  100. expect(chart.scale.min).toBe(-100);
  101. expect(chart.scale.max).toBe(150);
  102. });
  103. it('Should correctly determine the max & min data values when there are hidden datasets', function() {
  104. var chart = window.acquireChart({
  105. type: 'radar',
  106. data: {
  107. datasets: [{
  108. data: ['10', '5', '0', '-5', '78', '-100']
  109. }, {
  110. data: ['150']
  111. }, {
  112. data: [1000],
  113. hidden: true
  114. }],
  115. labels: ['label1', 'label2', 'label3', 'label4', 'label5', 'label6']
  116. },
  117. options: {
  118. scales: {}
  119. }
  120. });
  121. expect(chart.scale.min).toBe(-100);
  122. expect(chart.scale.max).toBe(150);
  123. });
  124. it('Should correctly determine the max & min data values when there is NaN data', function() {
  125. var chart = window.acquireChart({
  126. type: 'radar',
  127. data: {
  128. datasets: [{
  129. data: [50, 60, NaN, 70, null, undefined, Infinity, -Infinity]
  130. }],
  131. labels: ['label1', 'label2', 'label3', 'label4', 'label5', 'label6', 'label7', 'label8']
  132. },
  133. options: {
  134. scales: {}
  135. }
  136. });
  137. expect(chart.scale.min).toBe(50);
  138. expect(chart.scale.max).toBe(70);
  139. });
  140. it('Should ensure that the scale has a max and min that are not equal', function() {
  141. var scaleID = 'myScale';
  142. var mockData = {
  143. datasets: [],
  144. labels: []
  145. };
  146. var mockContext = window.createMockContext();
  147. var Constructor = Chart.scaleService.getScaleConstructor('radialLinear');
  148. var scale = new Constructor({
  149. ctx: mockContext,
  150. options: Chart.scaleService.getScaleDefaults('radialLinear'), // use default config for scale
  151. chart: {
  152. data: mockData
  153. },
  154. id: scaleID,
  155. });
  156. scale.update(200, 300);
  157. expect(scale.min).toBe(-1);
  158. expect(scale.max).toBe(1);
  159. });
  160. it('Should use the suggestedMin and suggestedMax options', function() {
  161. var chart = window.acquireChart({
  162. type: 'radar',
  163. data: {
  164. datasets: [{
  165. data: [1, 1, 1, 2, 1, 0]
  166. }],
  167. labels: ['label1', 'label2', 'label3', 'label4', 'label5', 'label6']
  168. },
  169. options: {
  170. scale: {
  171. ticks: {
  172. suggestedMin: -10,
  173. suggestedMax: 10
  174. }
  175. }
  176. }
  177. });
  178. expect(chart.scale.min).toBe(-10);
  179. expect(chart.scale.max).toBe(10);
  180. });
  181. it('Should use the min and max options', function() {
  182. var chart = window.acquireChart({
  183. type: 'radar',
  184. data: {
  185. datasets: [{
  186. data: [1, 1, 1, 2, 1, 0]
  187. }],
  188. labels: ['label1', 'label2', 'label3', 'label4', 'label5', 'label6']
  189. },
  190. options: {
  191. scale: {
  192. ticks: {
  193. min: -1010,
  194. max: 1010
  195. }
  196. }
  197. }
  198. });
  199. expect(chart.scale.min).toBe(-1010);
  200. expect(chart.scale.max).toBe(1010);
  201. expect(chart.scale.ticks).toEqual(['-1010', '-1000', '-500', '0', '500', '1000', '1010']);
  202. });
  203. it('should forcibly include 0 in the range if the beginAtZero option is used', function() {
  204. var chart = window.acquireChart({
  205. type: 'radar',
  206. data: {
  207. datasets: [{
  208. data: [20, 30, 40, 50]
  209. }],
  210. labels: ['label1', 'label2', 'label3', 'label4']
  211. },
  212. options: {
  213. scale: {
  214. ticks: {
  215. beginAtZero: false
  216. }
  217. }
  218. }
  219. });
  220. expect(chart.scale.ticks).toEqual(['20', '25', '30', '35', '40', '45', '50']);
  221. chart.scale.options.ticks.beginAtZero = true;
  222. chart.update();
  223. expect(chart.scale.ticks).toEqual(['0', '5', '10', '15', '20', '25', '30', '35', '40', '45', '50']);
  224. chart.data.datasets[0].data = [-20, -30, -40, -50];
  225. chart.update();
  226. expect(chart.scale.ticks).toEqual(['-50', '-45', '-40', '-35', '-30', '-25', '-20', '-15', '-10', '-5', '0']);
  227. chart.scale.options.ticks.beginAtZero = false;
  228. chart.update();
  229. expect(chart.scale.ticks).toEqual(['-50', '-45', '-40', '-35', '-30', '-25', '-20']);
  230. });
  231. it('Should generate tick marks in the correct order in reversed mode', function() {
  232. var chart = window.acquireChart({
  233. type: 'radar',
  234. data: {
  235. datasets: [{
  236. data: [10, 5, 0, 25, 78]
  237. }],
  238. labels: ['label1', 'label2', 'label3', 'label4', 'label5']
  239. },
  240. options: {
  241. scale: {
  242. ticks: {
  243. reverse: true
  244. }
  245. }
  246. }
  247. });
  248. expect(chart.scale.ticks).toEqual(['80', '70', '60', '50', '40', '30', '20', '10', '0']);
  249. expect(chart.scale.start).toBe(80);
  250. expect(chart.scale.end).toBe(0);
  251. });
  252. it('Should build labels using the user supplied callback', function() {
  253. var chart = window.acquireChart({
  254. type: 'radar',
  255. data: {
  256. datasets: [{
  257. data: [10, 5, 0, 25, 78]
  258. }],
  259. labels: ['label1', 'label2', 'label3', 'label4', 'label5']
  260. },
  261. options: {
  262. scale: {
  263. ticks: {
  264. callback: function(value, index) {
  265. return index.toString();
  266. }
  267. }
  268. }
  269. }
  270. });
  271. expect(chart.scale.ticks).toEqual(['0', '1', '2', '3', '4', '5', '6', '7', '8']);
  272. expect(chart.scale.pointLabels).toEqual(['label1', 'label2', 'label3', 'label4', 'label5']);
  273. });
  274. it('Should build point labels using the user supplied callback', function() {
  275. var chart = window.acquireChart({
  276. type: 'radar',
  277. data: {
  278. datasets: [{
  279. data: [10, 5, 0, 25, 78]
  280. }],
  281. labels: ['label1', 'label2', 'label3', 'label4', 'label5']
  282. },
  283. options: {
  284. scale: {
  285. pointLabels: {
  286. callback: function(value, index) {
  287. return index.toString();
  288. }
  289. }
  290. }
  291. }
  292. });
  293. expect(chart.scale.pointLabels).toEqual(['0', '1', '2', '3', '4']);
  294. });
  295. it('should correctly set the center point', function() {
  296. var chart = window.acquireChart({
  297. type: 'radar',
  298. data: {
  299. datasets: [{
  300. data: [10, 5, 0, 25, 78]
  301. }],
  302. labels: ['label1', 'label2', 'label3', 'label4', 'label5']
  303. },
  304. options: {
  305. scale: {
  306. pointLabels: {
  307. callback: function(value, index) {
  308. return index.toString();
  309. }
  310. }
  311. }
  312. }
  313. });
  314. expect(chart.scale.drawingArea).toBe(233);
  315. expect(chart.scale.xCenter).toBe(256);
  316. expect(chart.scale.yCenter).toBe(280);
  317. });
  318. it('should correctly get the label for a given data index', function() {
  319. var chart = window.acquireChart({
  320. type: 'radar',
  321. data: {
  322. datasets: [{
  323. data: [10, 5, 0, 25, 78]
  324. }],
  325. labels: ['label1', 'label2', 'label3', 'label4', 'label5']
  326. },
  327. options: {
  328. scale: {
  329. pointLabels: {
  330. callback: function(value, index) {
  331. return index.toString();
  332. }
  333. }
  334. }
  335. }
  336. });
  337. expect(chart.scale.getLabelForIndex(1, 0)).toBe(5);
  338. });
  339. it('should get the correct distance from the center point', function() {
  340. var chart = window.acquireChart({
  341. type: 'radar',
  342. data: {
  343. datasets: [{
  344. data: [10, 5, 0, 25, 78]
  345. }],
  346. labels: ['label1', 'label2', 'label3', 'label4', 'label5']
  347. },
  348. options: {
  349. scale: {
  350. pointLabels: {
  351. callback: function(value, index) {
  352. return index.toString();
  353. }
  354. }
  355. }
  356. }
  357. });
  358. expect(chart.scale.getDistanceFromCenterForValue(chart.scale.min)).toBe(0);
  359. expect(chart.scale.getDistanceFromCenterForValue(chart.scale.max)).toBe(233);
  360. expect(chart.scale.getPointPositionForValue(1, 5)).toEqual({
  361. x: 270,
  362. y: 275,
  363. });
  364. chart.scale.options.ticks.reverse = true;
  365. chart.update();
  366. expect(chart.scale.getDistanceFromCenterForValue(chart.scale.min)).toBe(233);
  367. expect(chart.scale.getDistanceFromCenterForValue(chart.scale.max)).toBe(0);
  368. });
  369. it('should correctly get angles for all points', function() {
  370. var chart = window.acquireChart({
  371. type: 'radar',
  372. data: {
  373. datasets: [{
  374. data: [10, 5, 0, 25, 78]
  375. }],
  376. labels: ['label1', 'label2', 'label3', 'label4', 'label5']
  377. },
  378. options: {
  379. scale: {
  380. pointLabels: {
  381. callback: function(value, index) {
  382. return index.toString();
  383. }
  384. }
  385. },
  386. startAngle: 15
  387. }
  388. });
  389. var radToNearestDegree = function(rad) {
  390. return Math.round((360 * rad) / (2 * Math.PI));
  391. };
  392. var slice = 72; // (360 / 5)
  393. for (var i = 0; i < 5; i++) {
  394. expect(radToNearestDegree(chart.scale.getIndexAngle(i))).toBe(15 + (slice * i));
  395. }
  396. chart.options.startAngle = 0;
  397. chart.update();
  398. for (var x = 0; x < 5; x++) {
  399. expect(radToNearestDegree(chart.scale.getIndexAngle(x))).toBe((slice * x));
  400. }
  401. });
  402. });