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.

462 line
11KB

  1. // Test the rectangle element
  2. describe('tooltip tests', function() {
  3. beforeEach(function() {
  4. window.addDefaultMatchers(jasmine);
  5. });
  6. afterEach(function() {
  7. window.releaseAllCharts();
  8. });
  9. it('Should display in label mode', function() {
  10. var chartInstance = window.acquireChart({
  11. type: 'line',
  12. data: {
  13. datasets: [{
  14. label: 'Dataset 1',
  15. data: [10, 20, 30],
  16. pointHoverBorderColor: 'rgb(255, 0, 0)',
  17. pointHoverBackgroundColor: 'rgb(0, 255, 0)'
  18. }, {
  19. label: 'Dataset 2',
  20. data: [40, 40, 40],
  21. pointHoverBorderColor: 'rgb(0, 0, 255)',
  22. pointHoverBackgroundColor: 'rgb(0, 255, 255)'
  23. }],
  24. labels: ['Point 1', 'Point 2', 'Point 3']
  25. },
  26. options: {
  27. tooltips: {
  28. mode: 'label'
  29. }
  30. }
  31. });
  32. // Trigger an event over top of the
  33. var meta = chartInstance.getDatasetMeta(0);
  34. var point = meta.data[1];
  35. var node = chartInstance.chart.canvas;
  36. var rect = node.getBoundingClientRect();
  37. var evt = new MouseEvent('mousemove', {
  38. view: window,
  39. bubbles: true,
  40. cancelable: true,
  41. clientX: rect.left + point._model.x,
  42. clientY: rect.top + point._model.y
  43. });
  44. // Manully trigger rather than having an async test
  45. node.dispatchEvent(evt);
  46. // Check and see if tooltip was displayed
  47. var tooltip = chartInstance.tooltip;
  48. var globalDefaults = Chart.defaults.global;
  49. expect(tooltip._view).toEqual(jasmine.objectContaining({
  50. // Positioning
  51. xPadding: 6,
  52. yPadding: 6,
  53. xAlign: 'left',
  54. yAlign: 'center',
  55. // Body
  56. bodyFontColor: '#fff',
  57. _bodyFontFamily: globalDefaults.defaultFontFamily,
  58. _bodyFontStyle: globalDefaults.defaultFontStyle,
  59. _bodyAlign: 'left',
  60. bodyFontSize: globalDefaults.defaultFontSize,
  61. bodySpacing: 2,
  62. // Title
  63. titleFontColor: '#fff',
  64. _titleFontFamily: globalDefaults.defaultFontFamily,
  65. _titleFontStyle: 'bold',
  66. titleFontSize: globalDefaults.defaultFontSize,
  67. _titleAlign: 'left',
  68. titleSpacing: 2,
  69. titleMarginBottom: 6,
  70. // Footer
  71. footerFontColor: '#fff',
  72. _footerFontFamily: globalDefaults.defaultFontFamily,
  73. _footerFontStyle: 'bold',
  74. footerFontSize: globalDefaults.defaultFontSize,
  75. _footerAlign: 'left',
  76. footerSpacing: 2,
  77. footerMarginTop: 6,
  78. // Appearance
  79. caretSize: 5,
  80. cornerRadius: 6,
  81. backgroundColor: 'rgba(0,0,0,0.8)',
  82. opacity: 1,
  83. legendColorBackground: '#fff',
  84. // Text
  85. title: ['Point 2'],
  86. beforeBody: [],
  87. body: [{
  88. before: [],
  89. lines: ['Dataset 1: 20'],
  90. after: []
  91. }, {
  92. before: [],
  93. lines: ['Dataset 2: 40'],
  94. after: []
  95. }],
  96. afterBody: [],
  97. footer: [],
  98. caretPadding: 2,
  99. labelColors: [{
  100. borderColor: 'rgb(255, 0, 0)',
  101. backgroundColor: 'rgb(0, 255, 0)'
  102. }, {
  103. borderColor: 'rgb(0, 0, 255)',
  104. backgroundColor: 'rgb(0, 255, 255)'
  105. }]
  106. }));
  107. expect(tooltip._view.x).toBeCloseToPixel(269);
  108. expect(tooltip._view.y).toBeCloseToPixel(155);
  109. });
  110. it('Should display in single mode', function() {
  111. var chartInstance = window.acquireChart({
  112. type: 'line',
  113. data: {
  114. datasets: [{
  115. label: 'Dataset 1',
  116. data: [10, 20, 30],
  117. pointHoverBorderColor: 'rgb(255, 0, 0)',
  118. pointHoverBackgroundColor: 'rgb(0, 255, 0)'
  119. }, {
  120. label: 'Dataset 2',
  121. data: [40, 40, 40],
  122. pointHoverBorderColor: 'rgb(0, 0, 255)',
  123. pointHoverBackgroundColor: 'rgb(0, 255, 255)'
  124. }],
  125. labels: ['Point 1', 'Point 2', 'Point 3']
  126. },
  127. options: {
  128. tooltips: {
  129. mode: 'single'
  130. }
  131. }
  132. });
  133. // Trigger an event over top of the
  134. var meta = chartInstance.getDatasetMeta(0);
  135. var point = meta.data[1];
  136. var node = chartInstance.chart.canvas;
  137. var rect = node.getBoundingClientRect();
  138. var evt = new MouseEvent('mousemove', {
  139. view: window,
  140. bubbles: true,
  141. cancelable: true,
  142. clientX: rect.left + point._model.x,
  143. clientY: rect.top + point._model.y
  144. });
  145. // Manully trigger rather than having an async test
  146. node.dispatchEvent(evt);
  147. // Check and see if tooltip was displayed
  148. var tooltip = chartInstance.tooltip;
  149. var globalDefaults = Chart.defaults.global;
  150. expect(tooltip._view).toEqual(jasmine.objectContaining({
  151. // Positioning
  152. xPadding: 6,
  153. yPadding: 6,
  154. xAlign: 'left',
  155. yAlign: 'center',
  156. // Body
  157. bodyFontColor: '#fff',
  158. _bodyFontFamily: globalDefaults.defaultFontFamily,
  159. _bodyFontStyle: globalDefaults.defaultFontStyle,
  160. _bodyAlign: 'left',
  161. bodyFontSize: globalDefaults.defaultFontSize,
  162. bodySpacing: 2,
  163. // Title
  164. titleFontColor: '#fff',
  165. _titleFontFamily: globalDefaults.defaultFontFamily,
  166. _titleFontStyle: 'bold',
  167. titleFontSize: globalDefaults.defaultFontSize,
  168. _titleAlign: 'left',
  169. titleSpacing: 2,
  170. titleMarginBottom: 6,
  171. // Footer
  172. footerFontColor: '#fff',
  173. _footerFontFamily: globalDefaults.defaultFontFamily,
  174. _footerFontStyle: 'bold',
  175. footerFontSize: globalDefaults.defaultFontSize,
  176. _footerAlign: 'left',
  177. footerSpacing: 2,
  178. footerMarginTop: 6,
  179. // Appearance
  180. caretSize: 5,
  181. cornerRadius: 6,
  182. backgroundColor: 'rgba(0,0,0,0.8)',
  183. opacity: 1,
  184. legendColorBackground: '#fff',
  185. // Text
  186. title: ['Point 2'],
  187. beforeBody: [],
  188. body: [{
  189. before: [],
  190. lines: ['Dataset 1: 20'],
  191. after: []
  192. }],
  193. afterBody: [],
  194. footer: [],
  195. caretPadding: 2,
  196. labelColors: []
  197. }));
  198. expect(tooltip._view.x).toBeCloseToPixel(269);
  199. expect(tooltip._view.y).toBeCloseToPixel(312);
  200. });
  201. it('Should display information from user callbacks', function() {
  202. var chartInstance = window.acquireChart({
  203. type: 'line',
  204. data: {
  205. datasets: [{
  206. label: 'Dataset 1',
  207. data: [10, 20, 30],
  208. pointHoverBorderColor: 'rgb(255, 0, 0)',
  209. pointHoverBackgroundColor: 'rgb(0, 255, 0)'
  210. }, {
  211. label: 'Dataset 2',
  212. data: [40, 40, 40],
  213. pointHoverBorderColor: 'rgb(0, 0, 255)',
  214. pointHoverBackgroundColor: 'rgb(0, 255, 255)'
  215. }],
  216. labels: ['Point 1', 'Point 2', 'Point 3']
  217. },
  218. options: {
  219. tooltips: {
  220. mode: 'label',
  221. callbacks: {
  222. beforeTitle: function() {
  223. return 'beforeTitle';
  224. },
  225. title: function() {
  226. return 'title';
  227. },
  228. afterTitle: function() {
  229. return 'afterTitle'
  230. },
  231. beforeBody: function() {
  232. return 'beforeBody';
  233. },
  234. beforeLabel: function() {
  235. return 'beforeLabel';
  236. },
  237. label: function() {
  238. return 'label';
  239. },
  240. afterLabel: function() {
  241. return 'afterLabel';
  242. },
  243. afterBody: function() {
  244. return 'afterBody';
  245. },
  246. beforeFooter: function() {
  247. return 'beforeFooter';
  248. },
  249. footer: function() {
  250. return 'footer';
  251. },
  252. afterFooter: function() {
  253. return 'afterFooter'
  254. }
  255. }
  256. }
  257. }
  258. });
  259. // Trigger an event over top of the
  260. var meta = chartInstance.getDatasetMeta(0);
  261. var point = meta.data[1];
  262. var node = chartInstance.chart.canvas;
  263. var rect = node.getBoundingClientRect();
  264. var evt = new MouseEvent('mousemove', {
  265. view: window,
  266. bubbles: true,
  267. cancelable: true,
  268. clientX: rect.left + point._model.x,
  269. clientY: rect.top + point._model.y
  270. });
  271. // Manully trigger rather than having an async test
  272. node.dispatchEvent(evt);
  273. // Check and see if tooltip was displayed
  274. var tooltip = chartInstance.tooltip;
  275. var globalDefaults = Chart.defaults.global;
  276. expect(tooltip._view).toEqual(jasmine.objectContaining({
  277. // Positioning
  278. xPadding: 6,
  279. yPadding: 6,
  280. xAlign: 'center',
  281. yAlign: 'top',
  282. // Body
  283. bodyFontColor: '#fff',
  284. _bodyFontFamily: globalDefaults.defaultFontFamily,
  285. _bodyFontStyle: globalDefaults.defaultFontStyle,
  286. _bodyAlign: 'left',
  287. bodyFontSize: globalDefaults.defaultFontSize,
  288. bodySpacing: 2,
  289. // Title
  290. titleFontColor: '#fff',
  291. _titleFontFamily: globalDefaults.defaultFontFamily,
  292. _titleFontStyle: 'bold',
  293. titleFontSize: globalDefaults.defaultFontSize,
  294. _titleAlign: 'left',
  295. titleSpacing: 2,
  296. titleMarginBottom: 6,
  297. // Footer
  298. footerFontColor: '#fff',
  299. _footerFontFamily: globalDefaults.defaultFontFamily,
  300. _footerFontStyle: 'bold',
  301. footerFontSize: globalDefaults.defaultFontSize,
  302. _footerAlign: 'left',
  303. footerSpacing: 2,
  304. footerMarginTop: 6,
  305. // Appearance
  306. caretSize: 5,
  307. cornerRadius: 6,
  308. backgroundColor: 'rgba(0,0,0,0.8)',
  309. opacity: 1,
  310. legendColorBackground: '#fff',
  311. // Text
  312. title: ['beforeTitle', 'title', 'afterTitle'],
  313. beforeBody: ['beforeBody'],
  314. body: [{
  315. before: ['beforeLabel'],
  316. lines: ['label'],
  317. after: ['afterLabel']
  318. }, {
  319. before: ['beforeLabel'],
  320. lines: ['label'],
  321. after: ['afterLabel']
  322. }],
  323. afterBody: ['afterBody'],
  324. footer: ['beforeFooter', 'footer', 'afterFooter'],
  325. caretPadding: 2,
  326. labelColors: [{
  327. borderColor: 'rgb(255, 0, 0)',
  328. backgroundColor: 'rgb(0, 255, 0)'
  329. }, {
  330. borderColor: 'rgb(0, 0, 255)',
  331. backgroundColor: 'rgb(0, 255, 255)'
  332. }]
  333. }));
  334. expect(tooltip._view.x).toBeCloseToPixel(216);
  335. expect(tooltip._view.y).toBeCloseToPixel(190);
  336. });
  337. it('Should display information from user callbacks', function() {
  338. var chartInstance = window.acquireChart({
  339. type: 'line',
  340. data: {
  341. datasets: [{
  342. label: 'Dataset 1',
  343. data: [10, 20, 30],
  344. pointHoverBorderColor: 'rgb(255, 0, 0)',
  345. pointHoverBackgroundColor: 'rgb(0, 255, 0)'
  346. }, {
  347. label: 'Dataset 2',
  348. data: [40, 40, 40],
  349. pointHoverBorderColor: 'rgb(0, 0, 255)',
  350. pointHoverBackgroundColor: 'rgb(0, 255, 255)'
  351. }],
  352. labels: ['Point 1', 'Point 2', 'Point 3']
  353. },
  354. options: {
  355. tooltips: {
  356. mode: 'label',
  357. itemSort: function(a, b) {
  358. return a.datasetIndex > b.datasetIndex ? -1 : 1;
  359. }
  360. }
  361. }
  362. });
  363. // Trigger an event over top of the
  364. var meta0 = chartInstance.getDatasetMeta(0);
  365. var point0 = meta0.data[1];
  366. var meta1 = chartInstance.getDatasetMeta(1);
  367. var point1 = meta1.data[1];
  368. var node = chartInstance.chart.canvas;
  369. var rect = node.getBoundingClientRect();
  370. var evt = new MouseEvent('mousemove', {
  371. view: window,
  372. bubbles: true,
  373. cancelable: true,
  374. clientX: rect.left + point0._model.x,
  375. clientY: rect.top + point0._model.y
  376. });
  377. // Manully trigger rather than having an async test
  378. node.dispatchEvent(evt);
  379. // Check and see if tooltip was displayed
  380. var tooltip = chartInstance.tooltip;
  381. expect(tooltip._view).toEqual(jasmine.objectContaining({
  382. // Positioning
  383. xAlign: 'left',
  384. yAlign: 'center',
  385. // Text
  386. title: ['Point 2'],
  387. beforeBody: [],
  388. body: [{
  389. before: [],
  390. lines: ['Dataset 2: 40'],
  391. after: []
  392. }, {
  393. before: [],
  394. lines: ['Dataset 1: 20'],
  395. after: []
  396. }],
  397. afterBody: [],
  398. footer: [],
  399. labelColors: [{
  400. borderColor: 'rgb(0, 0, 255)',
  401. backgroundColor: 'rgb(0, 255, 255)'
  402. }, {
  403. borderColor: 'rgb(255, 0, 0)',
  404. backgroundColor: 'rgb(0, 255, 0)'
  405. }]
  406. }));
  407. expect(tooltip._view.x).toBeCloseToPixel(269);
  408. expect(tooltip._view.y).toBeCloseToPixel(155);
  409. });
  410. });