controller.bar.tests.js 42 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725
  1. describe('Chart.controllers.bar', function() {
  2. describe('auto', jasmine.fixture.specs('controller.bar'));
  3. it('should be registered as dataset controller', function() {
  4. expect(typeof Chart.controllers.bar).toBe('function');
  5. expect(typeof Chart.controllers.horizontalBar).toBe('function');
  6. });
  7. it('should be constructed', function() {
  8. var chart = window.acquireChart({
  9. type: 'bar',
  10. data: {
  11. datasets: [
  12. {data: []},
  13. {data: []}
  14. ],
  15. labels: []
  16. }
  17. });
  18. var meta = chart.getDatasetMeta(1);
  19. expect(meta.type).toEqual('bar');
  20. expect(meta.data).toEqual([]);
  21. expect(meta.hidden).toBe(null);
  22. expect(meta.controller).not.toBe(undefined);
  23. expect(meta.controller.index).toBe(1);
  24. expect(meta.xAxisID).not.toBe(null);
  25. expect(meta.yAxisID).not.toBe(null);
  26. meta.controller.updateIndex(0);
  27. expect(meta.controller.index).toBe(0);
  28. });
  29. it('should use the first scale IDs if the dataset does not specify them', function() {
  30. var chart = window.acquireChart({
  31. type: 'bar',
  32. data: {
  33. datasets: [
  34. {data: []},
  35. {data: []}
  36. ],
  37. labels: []
  38. },
  39. options: {
  40. scales: {
  41. xAxes: [{
  42. id: 'firstXScaleID'
  43. }],
  44. yAxes: [{
  45. id: 'firstYScaleID'
  46. }]
  47. }
  48. }
  49. });
  50. var meta = chart.getDatasetMeta(1);
  51. expect(meta.xAxisID).toBe('firstXScaleID');
  52. expect(meta.yAxisID).toBe('firstYScaleID');
  53. });
  54. it('should correctly count the number of stacks ignoring datasets of other types and hidden datasets', function() {
  55. [
  56. 'bar',
  57. 'horizontalBar'
  58. ].forEach(function(barType) {
  59. var chart = window.acquireChart({
  60. type: barType,
  61. data: {
  62. datasets: [
  63. {data: [], type: 'line'},
  64. {data: [], hidden: true},
  65. {data: []},
  66. {data: []}
  67. ],
  68. labels: []
  69. }
  70. });
  71. var meta = chart.getDatasetMeta(1);
  72. expect(meta.controller.getStackCount()).toBe(2);
  73. });
  74. });
  75. it('should correctly count the number of stacks when a group is not specified', function() {
  76. [
  77. 'bar',
  78. 'horizontalBar'
  79. ].forEach(function(barType) {
  80. var chart = window.acquireChart({
  81. type: barType,
  82. data: {
  83. datasets: [
  84. {data: []},
  85. {data: []},
  86. {data: []},
  87. {data: []}
  88. ],
  89. labels: []
  90. }
  91. });
  92. var meta = chart.getDatasetMeta(1);
  93. expect(meta.controller.getStackCount()).toBe(4);
  94. });
  95. });
  96. it('should correctly count the number of stacks when a group is not specified and the scale is stacked', function() {
  97. [
  98. 'bar',
  99. 'horizontalBar'
  100. ].forEach(function(barType) {
  101. var chart = window.acquireChart({
  102. type: barType,
  103. data: {
  104. datasets: [
  105. {data: []},
  106. {data: []},
  107. {data: []},
  108. {data: []}
  109. ],
  110. labels: []
  111. },
  112. options: {
  113. scales: {
  114. xAxes: [{
  115. stacked: true
  116. }],
  117. yAxes: [{
  118. stacked: true
  119. }]
  120. }
  121. }
  122. });
  123. var meta = chart.getDatasetMeta(1);
  124. expect(meta.controller.getStackCount()).toBe(1);
  125. });
  126. });
  127. it('should correctly count the number of stacks when a group is not specified and the scale is not stacked', function() {
  128. [
  129. 'bar',
  130. 'horizontalBar'
  131. ].forEach(function(barType) {
  132. var chart = window.acquireChart({
  133. type: barType,
  134. data: {
  135. datasets: [
  136. {data: []},
  137. {data: []},
  138. {data: []},
  139. {data: []}
  140. ],
  141. labels: []
  142. },
  143. options: {
  144. scales: {
  145. xAxes: [{
  146. stacked: false
  147. }],
  148. yAxes: [{
  149. stacked: false
  150. }]
  151. }
  152. }
  153. });
  154. var meta = chart.getDatasetMeta(1);
  155. expect(meta.controller.getStackCount()).toBe(4);
  156. });
  157. });
  158. it('should correctly count the number of stacks when a group is specified for some', function() {
  159. [
  160. 'bar',
  161. 'horizontalBar'
  162. ].forEach(function(barType) {
  163. var chart = window.acquireChart({
  164. type: barType,
  165. data: {
  166. datasets: [
  167. {data: [], stack: 'stack1'},
  168. {data: [], stack: 'stack1'},
  169. {data: []},
  170. {data: []}
  171. ],
  172. labels: []
  173. }
  174. });
  175. var meta = chart.getDatasetMeta(3);
  176. expect(meta.controller.getStackCount()).toBe(3);
  177. });
  178. });
  179. it('should correctly count the number of stacks when a group is specified for some and the scale is stacked', function() {
  180. [
  181. 'bar',
  182. 'horizontalBar'
  183. ].forEach(function(barType) {
  184. var chart = window.acquireChart({
  185. type: barType,
  186. data: {
  187. datasets: [
  188. {data: [], stack: 'stack1'},
  189. {data: [], stack: 'stack1'},
  190. {data: []},
  191. {data: []}
  192. ],
  193. labels: []
  194. },
  195. options: {
  196. scales: {
  197. xAxes: [{
  198. stacked: true
  199. }],
  200. yAxes: [{
  201. stacked: true
  202. }]
  203. }
  204. }
  205. });
  206. var meta = chart.getDatasetMeta(3);
  207. expect(meta.controller.getStackCount()).toBe(2);
  208. });
  209. });
  210. it('should correctly count the number of stacks when a group is specified for some and the scale is not stacked', function() {
  211. [
  212. 'bar',
  213. 'horizontalBar'
  214. ].forEach(function(barType) {
  215. var chart = window.acquireChart({
  216. type: barType,
  217. data: {
  218. datasets: [
  219. {data: [], stack: 'stack1'},
  220. {data: [], stack: 'stack1'},
  221. {data: []},
  222. {data: []}
  223. ],
  224. labels: []
  225. },
  226. options: {
  227. scales: {
  228. xAxes: [{
  229. stacked: false
  230. }],
  231. yAxes: [{
  232. stacked: false
  233. }]
  234. }
  235. }
  236. });
  237. var meta = chart.getDatasetMeta(3);
  238. expect(meta.controller.getStackCount()).toBe(4);
  239. });
  240. });
  241. it('should correctly count the number of stacks when a group is specified for all', function() {
  242. [
  243. 'bar',
  244. 'horizontalBar'
  245. ].forEach(function(barType) {
  246. var chart = window.acquireChart({
  247. type: barType,
  248. data: {
  249. datasets: [
  250. {data: [], stack: 'stack1'},
  251. {data: [], stack: 'stack1'},
  252. {data: [], stack: 'stack2'},
  253. {data: [], stack: 'stack2'}
  254. ],
  255. labels: []
  256. }
  257. });
  258. var meta = chart.getDatasetMeta(3);
  259. expect(meta.controller.getStackCount()).toBe(2);
  260. });
  261. });
  262. it('should correctly count the number of stacks when a group is specified for all and the scale is stacked', function() {
  263. [
  264. 'bar',
  265. 'horizontalBar'
  266. ].forEach(function(barType) {
  267. var chart = window.acquireChart({
  268. type: barType,
  269. data: {
  270. datasets: [
  271. {data: [], stack: 'stack1'},
  272. {data: [], stack: 'stack1'},
  273. {data: [], stack: 'stack2'},
  274. {data: [], stack: 'stack2'}
  275. ],
  276. labels: []
  277. },
  278. options: {
  279. scales: {
  280. xAxes: [{
  281. stacked: true
  282. }],
  283. yAxes: [{
  284. stacked: true
  285. }]
  286. }
  287. }
  288. });
  289. var meta = chart.getDatasetMeta(3);
  290. expect(meta.controller.getStackCount()).toBe(2);
  291. });
  292. });
  293. it('should correctly count the number of stacks when a group is specified for all and the scale is not stacked', function() {
  294. [
  295. 'bar',
  296. 'horizontalBar'
  297. ].forEach(function(barType) {
  298. var chart = window.acquireChart({
  299. type: barType,
  300. data: {
  301. datasets: [
  302. {data: [], stack: 'stack1'},
  303. {data: [], stack: 'stack1'},
  304. {data: [], stack: 'stack2'},
  305. {data: [], stack: 'stack2'}
  306. ],
  307. labels: []
  308. },
  309. options: {
  310. scales: {
  311. xAxes: [{
  312. stacked: false
  313. }],
  314. yAxes: [{
  315. stacked: false
  316. }]
  317. }
  318. }
  319. });
  320. var meta = chart.getDatasetMeta(3);
  321. expect(meta.controller.getStackCount()).toBe(4);
  322. });
  323. });
  324. it('should correctly get the stack index accounting for datasets of other types and hidden datasets', function() {
  325. [
  326. 'bar',
  327. 'horizontalBar'
  328. ].forEach(function(barType) {
  329. var chart = window.acquireChart({
  330. type: barType,
  331. data: {
  332. datasets: [
  333. {data: []},
  334. {data: [], hidden: true},
  335. {data: [], type: 'line'},
  336. {data: []}
  337. ],
  338. labels: []
  339. }
  340. });
  341. var meta = chart.getDatasetMeta(1);
  342. expect(meta.controller.getStackIndex(0)).toBe(0);
  343. expect(meta.controller.getStackIndex(3)).toBe(1);
  344. });
  345. });
  346. it('should correctly get the stack index when a group is not specified', function() {
  347. [
  348. 'bar',
  349. 'horizontalBar'
  350. ].forEach(function(barType) {
  351. var chart = window.acquireChart({
  352. type: barType,
  353. data: {
  354. datasets: [
  355. {data: []},
  356. {data: []},
  357. {data: []},
  358. {data: []}
  359. ],
  360. labels: []
  361. }
  362. });
  363. var meta = chart.getDatasetMeta(1);
  364. expect(meta.controller.getStackIndex(0)).toBe(0);
  365. expect(meta.controller.getStackIndex(1)).toBe(1);
  366. expect(meta.controller.getStackIndex(2)).toBe(2);
  367. expect(meta.controller.getStackIndex(3)).toBe(3);
  368. });
  369. });
  370. it('should correctly get the stack index when a group is not specified and the scale is stacked', function() {
  371. [
  372. 'bar',
  373. 'horizontalBar'
  374. ].forEach(function(barType) {
  375. var chart = window.acquireChart({
  376. type: barType,
  377. data: {
  378. datasets: [
  379. {data: []},
  380. {data: []},
  381. {data: []},
  382. {data: []}
  383. ],
  384. labels: []
  385. },
  386. options: {
  387. scales: {
  388. xAxes: [{
  389. stacked: true
  390. }],
  391. yAxes: [{
  392. stacked: true
  393. }]
  394. }
  395. }
  396. });
  397. var meta = chart.getDatasetMeta(1);
  398. expect(meta.controller.getStackIndex(0)).toBe(0);
  399. expect(meta.controller.getStackIndex(1)).toBe(0);
  400. expect(meta.controller.getStackIndex(2)).toBe(0);
  401. expect(meta.controller.getStackIndex(3)).toBe(0);
  402. });
  403. });
  404. it('should correctly get the stack index when a group is not specified and the scale is not stacked', function() {
  405. [
  406. 'bar',
  407. 'horizontalBar'
  408. ].forEach(function(barType) {
  409. var chart = window.acquireChart({
  410. type: barType,
  411. data: {
  412. datasets: [
  413. {data: []},
  414. {data: []},
  415. {data: []},
  416. {data: []}
  417. ],
  418. labels: []
  419. },
  420. options: {
  421. scales: {
  422. xAxes: [{
  423. stacked: false
  424. }],
  425. yAxes: [{
  426. stacked: false
  427. }]
  428. }
  429. }
  430. });
  431. var meta = chart.getDatasetMeta(1);
  432. expect(meta.controller.getStackIndex(0)).toBe(0);
  433. expect(meta.controller.getStackIndex(1)).toBe(1);
  434. expect(meta.controller.getStackIndex(2)).toBe(2);
  435. expect(meta.controller.getStackIndex(3)).toBe(3);
  436. });
  437. });
  438. it('should correctly get the stack index when a group is specified for some', function() {
  439. [
  440. 'bar',
  441. 'horizontalBar'
  442. ].forEach(function(barType) {
  443. var chart = window.acquireChart({
  444. type: barType,
  445. data: {
  446. datasets: [
  447. {data: [], stack: 'stack1'},
  448. {data: [], stack: 'stack1'},
  449. {data: []},
  450. {data: []}
  451. ],
  452. labels: []
  453. }
  454. });
  455. var meta = chart.getDatasetMeta(1);
  456. expect(meta.controller.getStackIndex(0)).toBe(0);
  457. expect(meta.controller.getStackIndex(1)).toBe(0);
  458. expect(meta.controller.getStackIndex(2)).toBe(1);
  459. expect(meta.controller.getStackIndex(3)).toBe(2);
  460. });
  461. });
  462. it('should correctly get the stack index when a group is specified for some and the scale is stacked', function() {
  463. [
  464. 'bar',
  465. 'horizontalBar'
  466. ].forEach(function(barType) {
  467. var chart = window.acquireChart({
  468. type: barType,
  469. data: {
  470. datasets: [
  471. {data: [], stack: 'stack1'},
  472. {data: [], stack: 'stack1'},
  473. {data: []},
  474. {data: []}
  475. ],
  476. labels: []
  477. },
  478. options: {
  479. scales: {
  480. xAxes: [{
  481. stacked: true
  482. }],
  483. yAxes: [{
  484. stacked: true
  485. }]
  486. }
  487. }
  488. });
  489. var meta = chart.getDatasetMeta(1);
  490. expect(meta.controller.getStackIndex(0)).toBe(0);
  491. expect(meta.controller.getStackIndex(1)).toBe(0);
  492. expect(meta.controller.getStackIndex(2)).toBe(1);
  493. expect(meta.controller.getStackIndex(3)).toBe(1);
  494. });
  495. });
  496. it('should correctly get the stack index when a group is specified for some and the scale is not stacked', function() {
  497. [
  498. 'bar',
  499. 'horizontalBar'
  500. ].forEach(function(barType) {
  501. var chart = window.acquireChart({
  502. type: barType,
  503. data: {
  504. datasets: [
  505. {data: [], stack: 'stack1'},
  506. {data: [], stack: 'stack1'},
  507. {data: []},
  508. {data: []}
  509. ],
  510. labels: []
  511. },
  512. options: {
  513. scales: {
  514. xAxes: [{
  515. stacked: false
  516. }],
  517. yAxes: [{
  518. stacked: false
  519. }]
  520. }
  521. }
  522. });
  523. var meta = chart.getDatasetMeta(1);
  524. expect(meta.controller.getStackIndex(0)).toBe(0);
  525. expect(meta.controller.getStackIndex(1)).toBe(1);
  526. expect(meta.controller.getStackIndex(2)).toBe(2);
  527. expect(meta.controller.getStackIndex(3)).toBe(3);
  528. });
  529. });
  530. it('should correctly get the stack index when a group is specified for all', function() {
  531. [
  532. 'bar',
  533. 'horizontalBar'
  534. ].forEach(function(barType) {
  535. var chart = window.acquireChart({
  536. type: barType,
  537. data: {
  538. datasets: [
  539. {data: [], stack: 'stack1'},
  540. {data: [], stack: 'stack1'},
  541. {data: [], stack: 'stack2'},
  542. {data: [], stack: 'stack2'}
  543. ],
  544. labels: []
  545. }
  546. });
  547. var meta = chart.getDatasetMeta(1);
  548. expect(meta.controller.getStackIndex(0)).toBe(0);
  549. expect(meta.controller.getStackIndex(1)).toBe(0);
  550. expect(meta.controller.getStackIndex(2)).toBe(1);
  551. expect(meta.controller.getStackIndex(3)).toBe(1);
  552. });
  553. });
  554. it('should correctly get the stack index when a group is specified for all and the scale is stacked', function() {
  555. [
  556. 'bar',
  557. 'horizontalBar'
  558. ].forEach(function(barType) {
  559. var chart = window.acquireChart({
  560. type: barType,
  561. data: {
  562. datasets: [
  563. {data: [], stack: 'stack1'},
  564. {data: [], stack: 'stack1'},
  565. {data: [], stack: 'stack2'},
  566. {data: [], stack: 'stack2'}
  567. ],
  568. labels: []
  569. },
  570. options: {
  571. scales: {
  572. xAxes: [{
  573. stacked: true
  574. }],
  575. yAxes: [{
  576. stacked: true
  577. }]
  578. }
  579. }
  580. });
  581. var meta = chart.getDatasetMeta(1);
  582. expect(meta.controller.getStackIndex(0)).toBe(0);
  583. expect(meta.controller.getStackIndex(1)).toBe(0);
  584. expect(meta.controller.getStackIndex(2)).toBe(1);
  585. expect(meta.controller.getStackIndex(3)).toBe(1);
  586. });
  587. });
  588. it('should correctly get the stack index when a group is specified for all and the scale is not stacked', function() {
  589. [
  590. 'bar',
  591. 'horizontalBar'
  592. ].forEach(function(barType) {
  593. var chart = window.acquireChart({
  594. type: barType,
  595. data: {
  596. datasets: [
  597. {data: [], stack: 'stack1'},
  598. {data: [], stack: 'stack1'},
  599. {data: [], stack: 'stack2'},
  600. {data: [], stack: 'stack2'}
  601. ],
  602. labels: []
  603. },
  604. options: {
  605. scales: {
  606. xAxes: [{
  607. stacked: false
  608. }],
  609. yAxes: [{
  610. stacked: false
  611. }]
  612. }
  613. }
  614. });
  615. var meta = chart.getDatasetMeta(1);
  616. expect(meta.controller.getStackIndex(0)).toBe(0);
  617. expect(meta.controller.getStackIndex(1)).toBe(1);
  618. expect(meta.controller.getStackIndex(2)).toBe(2);
  619. expect(meta.controller.getStackIndex(3)).toBe(3);
  620. });
  621. });
  622. it('should create rectangle elements for each data item during initialization', function() {
  623. var chart = window.acquireChart({
  624. type: 'bar',
  625. data: {
  626. datasets: [
  627. {data: []},
  628. {data: [10, 15, 0, -4]}
  629. ],
  630. labels: []
  631. }
  632. });
  633. var meta = chart.getDatasetMeta(1);
  634. expect(meta.data.length).toBe(4); // 4 rectangles created
  635. expect(meta.data[0] instanceof Chart.elements.Rectangle).toBe(true);
  636. expect(meta.data[1] instanceof Chart.elements.Rectangle).toBe(true);
  637. expect(meta.data[2] instanceof Chart.elements.Rectangle).toBe(true);
  638. expect(meta.data[3] instanceof Chart.elements.Rectangle).toBe(true);
  639. });
  640. it('should update elements when modifying data', function() {
  641. var chart = window.acquireChart({
  642. type: 'bar',
  643. data: {
  644. datasets: [{
  645. data: [1, 2],
  646. label: 'dataset1'
  647. }, {
  648. data: [10, 15, 0, -4],
  649. label: 'dataset2',
  650. borderColor: 'blue'
  651. }],
  652. labels: ['label1', 'label2', 'label3', 'label4']
  653. },
  654. options: {
  655. legend: false,
  656. title: false,
  657. elements: {
  658. rectangle: {
  659. backgroundColor: 'red',
  660. borderSkipped: 'top',
  661. borderColor: 'green',
  662. borderWidth: 2,
  663. }
  664. },
  665. scales: {
  666. xAxes: [{
  667. id: 'firstXScaleID',
  668. type: 'category',
  669. display: false
  670. }],
  671. yAxes: [{
  672. id: 'firstYScaleID',
  673. type: 'linear',
  674. display: false
  675. }]
  676. }
  677. }
  678. });
  679. var meta = chart.getDatasetMeta(1);
  680. expect(meta.data.length).toBe(4);
  681. chart.data.datasets[1].data = [1, 2]; // remove 2 items
  682. chart.data.datasets[1].borderWidth = 1;
  683. chart.update();
  684. expect(meta.data.length).toBe(2);
  685. [
  686. {x: 89, y: 512},
  687. {x: 217, y: 0}
  688. ].forEach(function(expected, i) {
  689. expect(meta.data[i]._datasetIndex).toBe(1);
  690. expect(meta.data[i]._index).toBe(i);
  691. expect(meta.data[i]._xScale).toBe(chart.scales.firstXScaleID);
  692. expect(meta.data[i]._yScale).toBe(chart.scales.firstYScaleID);
  693. expect(meta.data[i]._model.x).toBeCloseToPixel(expected.x);
  694. expect(meta.data[i]._model.y).toBeCloseToPixel(expected.y);
  695. expect(meta.data[i]._model.base).toBeCloseToPixel(1024);
  696. expect(meta.data[i]._model.width).toBeCloseToPixel(46);
  697. expect(meta.data[i]._model).toEqual(jasmine.objectContaining({
  698. datasetLabel: chart.data.datasets[1].label,
  699. label: chart.data.labels[i],
  700. backgroundColor: 'red',
  701. borderSkipped: 'top',
  702. borderColor: 'blue',
  703. borderWidth: 1
  704. }));
  705. });
  706. chart.data.datasets[1].data = [1, 2, 3]; // add 1 items
  707. chart.update();
  708. expect(meta.data.length).toBe(3); // should add a new meta data item
  709. });
  710. it('should get the correct bar points when datasets of different types exist', function() {
  711. var chart = window.acquireChart({
  712. type: 'bar',
  713. data: {
  714. datasets: [{
  715. data: [1, 2],
  716. label: 'dataset1'
  717. }, {
  718. type: 'line',
  719. data: [4, 6],
  720. label: 'dataset2'
  721. }, {
  722. data: [8, 10],
  723. label: 'dataset3'
  724. }],
  725. labels: ['label1', 'label2']
  726. },
  727. options: {
  728. legend: false,
  729. title: false,
  730. scales: {
  731. xAxes: [{
  732. type: 'category',
  733. display: false
  734. }],
  735. yAxes: [{
  736. type: 'linear',
  737. display: false
  738. }]
  739. }
  740. }
  741. });
  742. var meta = chart.getDatasetMeta(2);
  743. expect(meta.data.length).toBe(2);
  744. var bar1 = meta.data[0];
  745. var bar2 = meta.data[1];
  746. expect(bar1._model.x).toBeCloseToPixel(179);
  747. expect(bar1._model.y).toBeCloseToPixel(114);
  748. expect(bar2._model.x).toBeCloseToPixel(435);
  749. expect(bar2._model.y).toBeCloseToPixel(0);
  750. });
  751. it('should update elements when the scales are stacked', function() {
  752. var chart = window.acquireChart({
  753. type: 'bar',
  754. data: {
  755. datasets: [{
  756. data: [10, -10, 10, -10],
  757. label: 'dataset1'
  758. }, {
  759. data: [10, 15, 0, -4],
  760. label: 'dataset2'
  761. }],
  762. labels: ['label1', 'label2', 'label3', 'label4']
  763. },
  764. options: {
  765. legend: false,
  766. title: false,
  767. scales: {
  768. xAxes: [{
  769. type: 'category',
  770. display: false
  771. }],
  772. yAxes: [{
  773. type: 'linear',
  774. display: false,
  775. stacked: true
  776. }]
  777. }
  778. }
  779. });
  780. var meta0 = chart.getDatasetMeta(0);
  781. [
  782. {b: 293, w: 92 / 2, x: 38, y: 146},
  783. {b: 293, w: 92 / 2, x: 166, y: 439},
  784. {b: 293, w: 92 / 2, x: 295, y: 146},
  785. {b: 293, w: 92 / 2, x: 422, y: 439}
  786. ].forEach(function(values, i) {
  787. expect(meta0.data[i]._model.base).toBeCloseToPixel(values.b);
  788. expect(meta0.data[i]._model.width).toBeCloseToPixel(values.w);
  789. expect(meta0.data[i]._model.x).toBeCloseToPixel(values.x);
  790. expect(meta0.data[i]._model.y).toBeCloseToPixel(values.y);
  791. });
  792. var meta1 = chart.getDatasetMeta(1);
  793. [
  794. {b: 146, w: 92 / 2, x: 89, y: 0},
  795. {b: 293, w: 92 / 2, x: 217, y: 73},
  796. {b: 146, w: 92 / 2, x: 345, y: 146},
  797. {b: 439, w: 92 / 2, x: 473, y: 497}
  798. ].forEach(function(values, i) {
  799. expect(meta1.data[i]._model.base).toBeCloseToPixel(values.b);
  800. expect(meta1.data[i]._model.width).toBeCloseToPixel(values.w);
  801. expect(meta1.data[i]._model.x).toBeCloseToPixel(values.x);
  802. expect(meta1.data[i]._model.y).toBeCloseToPixel(values.y);
  803. });
  804. });
  805. it('should update elements when the scales are stacked and the y axis has a user defined minimum', function() {
  806. var chart = window.acquireChart({
  807. type: 'bar',
  808. data: {
  809. datasets: [{
  810. data: [50, 20, 10, 100],
  811. label: 'dataset1'
  812. }, {
  813. data: [50, 80, 90, 0],
  814. label: 'dataset2'
  815. }],
  816. labels: ['label1', 'label2', 'label3', 'label4']
  817. },
  818. options: {
  819. legend: false,
  820. title: false,
  821. scales: {
  822. xAxes: [{
  823. type: 'category',
  824. display: false
  825. }],
  826. yAxes: [{
  827. type: 'linear',
  828. display: false,
  829. stacked: true,
  830. ticks: {
  831. min: 50,
  832. max: 100
  833. }
  834. }]
  835. }
  836. }
  837. });
  838. var meta0 = chart.getDatasetMeta(0);
  839. [
  840. {b: 1024, w: 92 / 2, x: 38, y: 512},
  841. {b: 1024, w: 92 / 2, x: 166, y: 819},
  842. {b: 1024, w: 92 / 2, x: 294, y: 922},
  843. {b: 1024, w: 92 / 2, x: 422.5, y: 0}
  844. ].forEach(function(values, i) {
  845. expect(meta0.data[i]._model.base).toBeCloseToPixel(values.b);
  846. expect(meta0.data[i]._model.width).toBeCloseToPixel(values.w);
  847. expect(meta0.data[i]._model.x).toBeCloseToPixel(values.x);
  848. expect(meta0.data[i]._model.y).toBeCloseToPixel(values.y);
  849. });
  850. var meta1 = chart.getDatasetMeta(1);
  851. [
  852. {b: 512, w: 92 / 2, x: 89, y: 0},
  853. {b: 819, w: 92 / 2, x: 217, y: 0},
  854. {b: 922, w: 92 / 2, x: 345, y: 0},
  855. {b: 0, w: 92 / 2, x: 473.5, y: 0}
  856. ].forEach(function(values, i) {
  857. expect(meta1.data[i]._model.base).toBeCloseToPixel(values.b);
  858. expect(meta1.data[i]._model.width).toBeCloseToPixel(values.w);
  859. expect(meta1.data[i]._model.x).toBeCloseToPixel(values.x);
  860. expect(meta1.data[i]._model.y).toBeCloseToPixel(values.y);
  861. });
  862. });
  863. it('should update elements when only the category scale is stacked', function() {
  864. var chart = window.acquireChart({
  865. type: 'bar',
  866. data: {
  867. datasets: [{
  868. data: [20, -10, 10, -10],
  869. label: 'dataset1'
  870. }, {
  871. data: [10, 15, 0, -14],
  872. label: 'dataset2'
  873. }],
  874. labels: ['label1', 'label2', 'label3', 'label4']
  875. },
  876. options: {
  877. legend: false,
  878. title: false,
  879. scales: {
  880. xAxes: [{
  881. type: 'category',
  882. display: false,
  883. stacked: true
  884. }],
  885. yAxes: [{
  886. type: 'linear',
  887. display: false
  888. }]
  889. }
  890. }
  891. });
  892. var meta0 = chart.getDatasetMeta(0);
  893. [
  894. {b: 293, w: 92, x: 64, y: 0},
  895. {b: 293, w: 92, x: 192, y: 439},
  896. {b: 293, w: 92, x: 320, y: 146},
  897. {b: 293, w: 92, x: 448, y: 439}
  898. ].forEach(function(values, i) {
  899. expect(meta0.data[i]._model.base).toBeCloseToPixel(values.b);
  900. expect(meta0.data[i]._model.width).toBeCloseToPixel(values.w);
  901. expect(meta0.data[i]._model.x).toBeCloseToPixel(values.x);
  902. expect(meta0.data[i]._model.y).toBeCloseToPixel(values.y);
  903. });
  904. var meta1 = chart.getDatasetMeta(1);
  905. [
  906. {b: 293, w: 92, x: 64, y: 146},
  907. {b: 293, w: 92, x: 192, y: 73},
  908. {b: 293, w: 92, x: 320, y: 293},
  909. {b: 293, w: 92, x: 448, y: 497}
  910. ].forEach(function(values, i) {
  911. expect(meta1.data[i]._model.base).toBeCloseToPixel(values.b);
  912. expect(meta1.data[i]._model.width).toBeCloseToPixel(values.w);
  913. expect(meta1.data[i]._model.x).toBeCloseToPixel(values.x);
  914. expect(meta1.data[i]._model.y).toBeCloseToPixel(values.y);
  915. });
  916. });
  917. it('should update elements when the scales are stacked and data is strings', function() {
  918. var chart = window.acquireChart({
  919. type: 'bar',
  920. data: {
  921. datasets: [{
  922. data: ['10', '-10', '10', '-10'],
  923. label: 'dataset1'
  924. }, {
  925. data: ['10', '15', '0', '-4'],
  926. label: 'dataset2'
  927. }],
  928. labels: ['label1', 'label2', 'label3', 'label4']
  929. },
  930. options: {
  931. legend: false,
  932. title: false,
  933. scales: {
  934. xAxes: [{
  935. type: 'category',
  936. display: false
  937. }],
  938. yAxes: [{
  939. type: 'linear',
  940. display: false,
  941. stacked: true
  942. }]
  943. }
  944. }
  945. });
  946. var meta0 = chart.getDatasetMeta(0);
  947. [
  948. {b: 293, w: 92 / 2, x: 38, y: 146},
  949. {b: 293, w: 92 / 2, x: 166, y: 439},
  950. {b: 293, w: 92 / 2, x: 295, y: 146},
  951. {b: 293, w: 92 / 2, x: 422, y: 439}
  952. ].forEach(function(values, i) {
  953. expect(meta0.data[i]._model.base).toBeCloseToPixel(values.b);
  954. expect(meta0.data[i]._model.width).toBeCloseToPixel(values.w);
  955. expect(meta0.data[i]._model.x).toBeCloseToPixel(values.x);
  956. expect(meta0.data[i]._model.y).toBeCloseToPixel(values.y);
  957. });
  958. var meta1 = chart.getDatasetMeta(1);
  959. [
  960. {b: 146, w: 92 / 2, x: 89, y: 0},
  961. {b: 293, w: 92 / 2, x: 217, y: 73},
  962. {b: 146, w: 92 / 2, x: 345, y: 146},
  963. {b: 439, w: 92 / 2, x: 473, y: 497}
  964. ].forEach(function(values, i) {
  965. expect(meta1.data[i]._model.base).toBeCloseToPixel(values.b);
  966. expect(meta1.data[i]._model.width).toBeCloseToPixel(values.w);
  967. expect(meta1.data[i]._model.x).toBeCloseToPixel(values.x);
  968. expect(meta1.data[i]._model.y).toBeCloseToPixel(values.y);
  969. });
  970. });
  971. it('should get the correct bar points for grouped stacked chart if the group name is same', function() {
  972. var chart = window.acquireChart({
  973. type: 'bar',
  974. data: {
  975. datasets: [{
  976. data: [10, -10, 10, -10],
  977. label: 'dataset1',
  978. stack: 'stack1'
  979. }, {
  980. data: [10, 15, 0, -4],
  981. label: 'dataset2',
  982. stack: 'stack1'
  983. }],
  984. labels: ['label1', 'label2', 'label3', 'label4']
  985. },
  986. options: {
  987. legend: false,
  988. title: false,
  989. scales: {
  990. xAxes: [{
  991. type: 'category',
  992. display: false
  993. }],
  994. yAxes: [{
  995. type: 'linear',
  996. display: false,
  997. stacked: true
  998. }]
  999. }
  1000. }
  1001. });
  1002. var meta0 = chart.getDatasetMeta(0);
  1003. [
  1004. {b: 293, w: 92, x: 64, y: 146},
  1005. {b: 293, w: 92, x: 192, y: 439},
  1006. {b: 293, w: 92, x: 320, y: 146},
  1007. {b: 293, w: 92, x: 448, y: 439}
  1008. ].forEach(function(values, i) {
  1009. expect(meta0.data[i]._model.base).toBeCloseToPixel(values.b);
  1010. expect(meta0.data[i]._model.width).toBeCloseToPixel(values.w);
  1011. expect(meta0.data[i]._model.x).toBeCloseToPixel(values.x);
  1012. expect(meta0.data[i]._model.y).toBeCloseToPixel(values.y);
  1013. });
  1014. var meta = chart.getDatasetMeta(1);
  1015. [
  1016. {b: 146, w: 92, x: 64, y: 0},
  1017. {b: 293, w: 92, x: 192, y: 73},
  1018. {b: 146, w: 92, x: 320, y: 146},
  1019. {b: 439, w: 92, x: 448, y: 497}
  1020. ].forEach(function(values, i) {
  1021. expect(meta.data[i]._model.base).toBeCloseToPixel(values.b);
  1022. expect(meta.data[i]._model.width).toBeCloseToPixel(values.w);
  1023. expect(meta.data[i]._model.x).toBeCloseToPixel(values.x);
  1024. expect(meta.data[i]._model.y).toBeCloseToPixel(values.y);
  1025. });
  1026. });
  1027. it('should get the correct bar points for grouped stacked chart if the group name is different', function() {
  1028. var chart = window.acquireChart({
  1029. type: 'bar',
  1030. data: {
  1031. datasets: [{
  1032. data: [1, 2],
  1033. stack: 'stack1'
  1034. }, {
  1035. data: [1, 2],
  1036. stack: 'stack2'
  1037. }],
  1038. labels: ['label1', 'label2', 'label3', 'label4']
  1039. },
  1040. options: {
  1041. legend: false,
  1042. title: false,
  1043. scales: {
  1044. xAxes: [{
  1045. type: 'category',
  1046. display: false
  1047. }],
  1048. yAxes: [{
  1049. type: 'linear',
  1050. display: false,
  1051. stacked: true,
  1052. }]
  1053. }
  1054. }
  1055. });
  1056. var meta = chart.getDatasetMeta(1);
  1057. [
  1058. {x: 89, y: 256},
  1059. {x: 217, y: 0}
  1060. ].forEach(function(values, i) {
  1061. expect(meta.data[i]._model.base).toBeCloseToPixel(512);
  1062. expect(meta.data[i]._model.width).toBeCloseToPixel(46);
  1063. expect(meta.data[i]._model.x).toBeCloseToPixel(values.x);
  1064. expect(meta.data[i]._model.y).toBeCloseToPixel(values.y);
  1065. });
  1066. });
  1067. it('should get the correct bar points for grouped stacked chart', function() {
  1068. var chart = window.acquireChart({
  1069. type: 'bar',
  1070. data: {
  1071. datasets: [{
  1072. data: [1, 2],
  1073. stack: 'stack1'
  1074. }, {
  1075. data: [0.5, 1],
  1076. stack: 'stack2'
  1077. }, {
  1078. data: [0.5, 1],
  1079. stack: 'stack2'
  1080. }],
  1081. labels: ['label1', 'label2', 'label3', 'label4']
  1082. },
  1083. options: {
  1084. legend: false,
  1085. title: false,
  1086. scales: {
  1087. xAxes: [{
  1088. type: 'category',
  1089. display: false
  1090. }],
  1091. yAxes: [{
  1092. type: 'linear',
  1093. display: false,
  1094. stacked: true
  1095. }]
  1096. }
  1097. }
  1098. });
  1099. var meta = chart.getDatasetMeta(2);
  1100. [
  1101. {b: 384, x: 89, y: 256},
  1102. {b: 256, x: 217, y: 0}
  1103. ].forEach(function(values, i) {
  1104. expect(meta.data[i]._model.base).toBeCloseToPixel(values.b);
  1105. expect(meta.data[i]._model.width).toBeCloseToPixel(46);
  1106. expect(meta.data[i]._model.x).toBeCloseToPixel(values.x);
  1107. expect(meta.data[i]._model.y).toBeCloseToPixel(values.y);
  1108. });
  1109. });
  1110. it('should update elements when the scales are stacked and the y axis is logarithmic', function() {
  1111. var chart = window.acquireChart({
  1112. type: 'bar',
  1113. data: {
  1114. datasets: [{
  1115. data: [10, 100, 10, 100],
  1116. label: 'dataset1'
  1117. }, {
  1118. data: [100, 10, 0, 100],
  1119. label: 'dataset2'
  1120. }],
  1121. labels: ['label1', 'label2', 'label3', 'label4']
  1122. },
  1123. options: {
  1124. legend: false,
  1125. title: false,
  1126. scales: {
  1127. xAxes: [{
  1128. type: 'category',
  1129. display: false,
  1130. stacked: true,
  1131. barPercentage: 1,
  1132. }],
  1133. yAxes: [{
  1134. type: 'logarithmic',
  1135. display: false,
  1136. stacked: true
  1137. }]
  1138. }
  1139. }
  1140. });
  1141. var meta0 = chart.getDatasetMeta(0);
  1142. [
  1143. {b: 512, w: 102, x: 64, y: 512},
  1144. {b: 512, w: 102, x: 192, y: 118},
  1145. {b: 512, w: 102, x: 320, y: 512},
  1146. {b: 512, w: 102, x: 449, y: 118}
  1147. ].forEach(function(values, i) {
  1148. expect(meta0.data[i]._model.base).toBeCloseToPixel(values.b);
  1149. expect(meta0.data[i]._model.width).toBeCloseToPixel(values.w);
  1150. expect(meta0.data[i]._model.x).toBeCloseToPixel(values.x);
  1151. expect(meta0.data[i]._model.y).toBeCloseToPixel(values.y);
  1152. });
  1153. var meta1 = chart.getDatasetMeta(1);
  1154. [
  1155. {b: 512, w: 102, x: 64, y: 102},
  1156. {b: 118, w: 102, x: 192, y: 102},
  1157. {b: 512, w: 102, x: 320, y: 512},
  1158. {b: 118, w: 102, x: 449, y: 0}
  1159. ].forEach(function(values, i) {
  1160. expect(meta1.data[i]._model.base).toBeCloseToPixel(values.b);
  1161. expect(meta1.data[i]._model.width).toBeCloseToPixel(values.w);
  1162. expect(meta1.data[i]._model.x).toBeCloseToPixel(values.x);
  1163. expect(meta1.data[i]._model.y).toBeCloseToPixel(values.y);
  1164. });
  1165. });
  1166. it('should update elements when the scales are stacked and the y axis is logarithmic and data is strings', function() {
  1167. var chart = window.acquireChart({
  1168. type: 'bar',
  1169. data: {
  1170. datasets: [{
  1171. data: ['10', '100', '10', '100'],
  1172. label: 'dataset1'
  1173. }, {
  1174. data: ['100', '10', '0', '100'],
  1175. label: 'dataset2'
  1176. }],
  1177. labels: ['label1', 'label2', 'label3', 'label4']
  1178. },
  1179. options: {
  1180. legend: false,
  1181. title: false,
  1182. scales: {
  1183. xAxes: [{
  1184. type: 'category',
  1185. display: false,
  1186. stacked: true,
  1187. barPercentage: 1,
  1188. }],
  1189. yAxes: [{
  1190. type: 'logarithmic',
  1191. display: false,
  1192. stacked: true
  1193. }]
  1194. }
  1195. }
  1196. });
  1197. var meta0 = chart.getDatasetMeta(0);
  1198. [
  1199. {b: 512, w: 102, x: 64, y: 512},
  1200. {b: 512, w: 102, x: 192, y: 118},
  1201. {b: 512, w: 102, x: 320, y: 512},
  1202. {b: 512, w: 102, x: 449, y: 118}
  1203. ].forEach(function(values, i) {
  1204. expect(meta0.data[i]._model.base).toBeCloseToPixel(values.b);
  1205. expect(meta0.data[i]._model.width).toBeCloseToPixel(values.w);
  1206. expect(meta0.data[i]._model.x).toBeCloseToPixel(values.x);
  1207. expect(meta0.data[i]._model.y).toBeCloseToPixel(values.y);
  1208. });
  1209. var meta1 = chart.getDatasetMeta(1);
  1210. [
  1211. {b: 512, w: 102, x: 64, y: 102},
  1212. {b: 118, w: 102, x: 192, y: 102},
  1213. {b: 512, w: 102, x: 320, y: 512},
  1214. {b: 118, w: 102, x: 449, y: 0}
  1215. ].forEach(function(values, i) {
  1216. expect(meta1.data[i]._model.base).toBeCloseToPixel(values.b);
  1217. expect(meta1.data[i]._model.width).toBeCloseToPixel(values.w);
  1218. expect(meta1.data[i]._model.x).toBeCloseToPixel(values.x);
  1219. expect(meta1.data[i]._model.y).toBeCloseToPixel(values.y);
  1220. });
  1221. });
  1222. it('should draw all bars', function() {
  1223. var chart = window.acquireChart({
  1224. type: 'bar',
  1225. data: {
  1226. datasets: [{
  1227. data: [],
  1228. }, {
  1229. data: [10, 15, 0, -4],
  1230. label: 'dataset2'
  1231. }],
  1232. labels: ['label1', 'label2', 'label3', 'label4']
  1233. }
  1234. });
  1235. var meta = chart.getDatasetMeta(1);
  1236. spyOn(meta.data[0], 'draw');
  1237. spyOn(meta.data[1], 'draw');
  1238. spyOn(meta.data[2], 'draw');
  1239. spyOn(meta.data[3], 'draw');
  1240. chart.update();
  1241. expect(meta.data[0].draw.calls.count()).toBe(1);
  1242. expect(meta.data[1].draw.calls.count()).toBe(1);
  1243. expect(meta.data[2].draw.calls.count()).toBe(1);
  1244. expect(meta.data[3].draw.calls.count()).toBe(1);
  1245. });
  1246. it('should set hover styles on rectangles', function() {
  1247. var chart = window.acquireChart({
  1248. type: 'bar',
  1249. data: {
  1250. datasets: [{
  1251. data: [],
  1252. }, {
  1253. data: [10, 15, 0, -4],
  1254. label: 'dataset2'
  1255. }],
  1256. labels: ['label1', 'label2', 'label3', 'label4']
  1257. },
  1258. options: {
  1259. elements: {
  1260. rectangle: {
  1261. backgroundColor: 'rgb(255, 0, 0)',
  1262. borderColor: 'rgb(0, 0, 255)',
  1263. borderWidth: 2,
  1264. }
  1265. }
  1266. }
  1267. });
  1268. var meta = chart.getDatasetMeta(1);
  1269. var bar = meta.data[0];
  1270. meta.controller.setHoverStyle(bar);
  1271. expect(bar._model.backgroundColor).toBe('rgb(230, 0, 0)');
  1272. expect(bar._model.borderColor).toBe('rgb(0, 0, 230)');
  1273. expect(bar._model.borderWidth).toBe(2);
  1274. // Set a dataset style
  1275. chart.data.datasets[1].hoverBackgroundColor = 'rgb(128, 128, 128)';
  1276. chart.data.datasets[1].hoverBorderColor = 'rgb(0, 0, 0)';
  1277. chart.data.datasets[1].hoverBorderWidth = 5;
  1278. meta.controller.setHoverStyle(bar);
  1279. expect(bar._model.backgroundColor).toBe('rgb(128, 128, 128)');
  1280. expect(bar._model.borderColor).toBe('rgb(0, 0, 0)');
  1281. expect(bar._model.borderWidth).toBe(5);
  1282. // Should work with array styles so that we can set per bar
  1283. chart.data.datasets[1].hoverBackgroundColor = ['rgb(255, 255, 255)', 'rgb(128, 128, 128)'];
  1284. chart.data.datasets[1].hoverBorderColor = ['rgb(9, 9, 9)', 'rgb(0, 0, 0)'];
  1285. chart.data.datasets[1].hoverBorderWidth = [2.5, 5];
  1286. meta.controller.setHoverStyle(bar);
  1287. expect(bar._model.backgroundColor).toBe('rgb(255, 255, 255)');
  1288. expect(bar._model.borderColor).toBe('rgb(9, 9, 9)');
  1289. expect(bar._model.borderWidth).toBe(2.5);
  1290. // Should allow a custom style
  1291. bar.custom = {
  1292. hoverBackgroundColor: 'rgb(255, 0, 0)',
  1293. hoverBorderColor: 'rgb(0, 255, 0)',
  1294. hoverBorderWidth: 1.5
  1295. };
  1296. meta.controller.setHoverStyle(bar);
  1297. expect(bar._model.backgroundColor).toBe('rgb(255, 0, 0)');
  1298. expect(bar._model.borderColor).toBe('rgb(0, 255, 0)');
  1299. expect(bar._model.borderWidth).toBe(1.5);
  1300. });
  1301. it('should remove a hover style from a bar', function() {
  1302. var chart = window.acquireChart({
  1303. type: 'bar',
  1304. data: {
  1305. datasets: [{
  1306. data: [],
  1307. }, {
  1308. data: [10, 15, 0, -4],
  1309. label: 'dataset2'
  1310. }],
  1311. labels: ['label1', 'label2', 'label3', 'label4']
  1312. },
  1313. options: {
  1314. elements: {
  1315. rectangle: {
  1316. backgroundColor: 'rgb(255, 0, 0)',
  1317. borderColor: 'rgb(0, 0, 255)',
  1318. borderWidth: 2,
  1319. }
  1320. }
  1321. }
  1322. });
  1323. var meta = chart.getDatasetMeta(1);
  1324. var bar = meta.data[0];
  1325. var helpers = window.Chart.helpers;
  1326. // Change default
  1327. chart.options.elements.rectangle.backgroundColor = 'rgb(128, 128, 128)';
  1328. chart.options.elements.rectangle.borderColor = 'rgb(15, 15, 15)';
  1329. chart.options.elements.rectangle.borderWidth = 3.14;
  1330. chart.update();
  1331. expect(bar._model.backgroundColor).toBe('rgb(128, 128, 128)');
  1332. expect(bar._model.borderColor).toBe('rgb(15, 15, 15)');
  1333. expect(bar._model.borderWidth).toBe(3.14);
  1334. meta.controller.setHoverStyle(bar);
  1335. expect(bar._model.backgroundColor).toBe(helpers.getHoverColor('rgb(128, 128, 128)'));
  1336. expect(bar._model.borderColor).toBe(helpers.getHoverColor('rgb(15, 15, 15)'));
  1337. expect(bar._model.borderWidth).toBe(3.14);
  1338. meta.controller.removeHoverStyle(bar);
  1339. expect(bar._model.backgroundColor).toBe('rgb(128, 128, 128)');
  1340. expect(bar._model.borderColor).toBe('rgb(15, 15, 15)');
  1341. expect(bar._model.borderWidth).toBe(3.14);
  1342. // Should work with array styles so that we can set per bar
  1343. chart.data.datasets[1].backgroundColor = ['rgb(255, 255, 255)', 'rgb(128, 128, 128)'];
  1344. chart.data.datasets[1].borderColor = ['rgb(9, 9, 9)', 'rgb(0, 0, 0)'];
  1345. chart.data.datasets[1].borderWidth = [2.5, 5];
  1346. chart.update();
  1347. expect(bar._model.backgroundColor).toBe('rgb(255, 255, 255)');
  1348. expect(bar._model.borderColor).toBe('rgb(9, 9, 9)');
  1349. expect(bar._model.borderWidth).toBe(2.5);
  1350. meta.controller.setHoverStyle(bar);
  1351. expect(bar._model.backgroundColor).toBe(helpers.getHoverColor('rgb(255, 255, 255)'));
  1352. expect(bar._model.borderColor).toBe(helpers.getHoverColor('rgb(9, 9, 9)'));
  1353. expect(bar._model.borderWidth).toBe(2.5);
  1354. meta.controller.removeHoverStyle(bar);
  1355. expect(bar._model.backgroundColor).toBe('rgb(255, 255, 255)');
  1356. expect(bar._model.borderColor).toBe('rgb(9, 9, 9)');
  1357. expect(bar._model.borderWidth).toBe(2.5);
  1358. // Should allow a custom style
  1359. bar.custom = {
  1360. backgroundColor: 'rgb(255, 0, 0)',
  1361. borderColor: 'rgb(0, 255, 0)',
  1362. borderWidth: 1.5
  1363. };
  1364. chart.update();
  1365. expect(bar._model.backgroundColor).toBe('rgb(255, 0, 0)');
  1366. expect(bar._model.borderColor).toBe('rgb(0, 255, 0)');
  1367. expect(bar._model.borderWidth).toBe(1.5);
  1368. meta.controller.setHoverStyle(bar);
  1369. expect(bar._model.backgroundColor).toBe(helpers.getHoverColor('rgb(255, 0, 0)'));
  1370. expect(bar._model.borderColor).toBe(helpers.getHoverColor('rgb(0, 255, 0)'));
  1371. expect(bar._model.borderWidth).toBe(1.5);
  1372. meta.controller.removeHoverStyle(bar);
  1373. expect(bar._model.backgroundColor).toBe('rgb(255, 0, 0)');
  1374. expect(bar._model.borderColor).toBe('rgb(0, 255, 0)');
  1375. expect(bar._model.borderWidth).toBe(1.5);
  1376. });
  1377. describe('Bar width', function() {
  1378. beforeEach(function() {
  1379. // 2 datasets
  1380. this.data = {
  1381. labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  1382. datasets: [{
  1383. data: [10, 20, 30, 40, 50, 60, 70],
  1384. }, {
  1385. data: [10, 20, 30, 40, 50, 60, 70],
  1386. }]
  1387. };
  1388. });
  1389. afterEach(function() {
  1390. var chart = window.acquireChart(this.config);
  1391. var meta = chart.getDatasetMeta(0);
  1392. var xScale = chart.scales[meta.xAxisID];
  1393. var categoryPercentage = xScale.options.categoryPercentage;
  1394. var barPercentage = xScale.options.barPercentage;
  1395. var stacked = xScale.options.stacked;
  1396. var totalBarWidth = 0;
  1397. for (var i = 0; i < chart.data.datasets.length; i++) {
  1398. var bars = chart.getDatasetMeta(i).data;
  1399. for (var j = xScale.minIndex; j <= xScale.maxIndex; j++) {
  1400. totalBarWidth += bars[j]._model.width;
  1401. }
  1402. if (stacked) {
  1403. break;
  1404. }
  1405. }
  1406. var actualValue = totalBarWidth;
  1407. var expectedValue = xScale.width * categoryPercentage * barPercentage;
  1408. expect(actualValue).toBeCloseToPixel(expectedValue);
  1409. });
  1410. it('should correctly set bar width when min and max option is set.', function() {
  1411. this.config = {
  1412. type: 'bar',
  1413. data: this.data,
  1414. options: {
  1415. scales: {
  1416. xAxes: [{
  1417. ticks: {
  1418. min: 'March',
  1419. max: 'May',
  1420. },
  1421. }]
  1422. }
  1423. }
  1424. };
  1425. });
  1426. it('should correctly set bar width when scale are stacked with min and max options.', function() {
  1427. this.config = {
  1428. type: 'bar',
  1429. data: this.data,
  1430. options: {
  1431. scales: {
  1432. xAxes: [{
  1433. ticks: {
  1434. min: 'March',
  1435. max: 'May',
  1436. }
  1437. }],
  1438. yAxes: [{
  1439. stacked: true
  1440. }]
  1441. }
  1442. }
  1443. };
  1444. });
  1445. });
  1446. describe('Bar height (horizontalBar type)', function() {
  1447. beforeEach(function() {
  1448. // 2 datasets
  1449. this.data = {
  1450. labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  1451. datasets: [{
  1452. data: [10, 20, 30, 40, 50, 60, 70],
  1453. }, {
  1454. data: [10, 20, 30, 40, 50, 60, 70],
  1455. }]
  1456. };
  1457. });
  1458. afterEach(function() {
  1459. var chart = window.acquireChart(this.config);
  1460. var meta = chart.getDatasetMeta(0);
  1461. var yScale = chart.scales[meta.yAxisID];
  1462. var categoryPercentage = yScale.options.categoryPercentage;
  1463. var barPercentage = yScale.options.barPercentage;
  1464. var stacked = yScale.options.stacked;
  1465. var totalBarHeight = 0;
  1466. for (var i = 0; i < chart.data.datasets.length; i++) {
  1467. var bars = chart.getDatasetMeta(i).data;
  1468. for (var j = yScale.minIndex; j <= yScale.maxIndex; j++) {
  1469. totalBarHeight += bars[j]._model.height;
  1470. }
  1471. if (stacked) {
  1472. break;
  1473. }
  1474. }
  1475. var actualValue = totalBarHeight;
  1476. var expectedValue = yScale.height * categoryPercentage * barPercentage;
  1477. expect(actualValue).toBeCloseToPixel(expectedValue);
  1478. });
  1479. it('should correctly set bar height when min and max option is set.', function() {
  1480. this.config = {
  1481. type: 'horizontalBar',
  1482. data: this.data,
  1483. options: {
  1484. scales: {
  1485. yAxes: [{
  1486. ticks: {
  1487. min: 'March',
  1488. max: 'May',
  1489. },
  1490. }]
  1491. }
  1492. }
  1493. };
  1494. });
  1495. it('should correctly set bar height when scale are stacked with min and max options.', function() {
  1496. this.config = {
  1497. type: 'horizontalBar',
  1498. data: this.data,
  1499. options: {
  1500. scales: {
  1501. xAxes: [{
  1502. stacked: true
  1503. }],
  1504. yAxes: [{
  1505. ticks: {
  1506. min: 'March',
  1507. max: 'May',
  1508. }
  1509. }]
  1510. }
  1511. }
  1512. };
  1513. });
  1514. });
  1515. describe('Bar thickness with a category scale', function() {
  1516. [undefined, 20].forEach(function(barThickness) {
  1517. describe('When barThickness is ' + barThickness, function() {
  1518. beforeEach(function() {
  1519. this.chart = window.acquireChart({
  1520. type: 'bar',
  1521. data: {
  1522. datasets: [{
  1523. data: [1, 2]
  1524. }, {
  1525. data: [1, 2]
  1526. }],
  1527. labels: ['label1', 'label2', 'label3']
  1528. },
  1529. options: {
  1530. legend: false,
  1531. title: false,
  1532. scales: {
  1533. xAxes: [{
  1534. id: 'x',
  1535. type: 'category',
  1536. barThickness: barThickness
  1537. }],
  1538. yAxes: [{
  1539. type: 'linear',
  1540. }]
  1541. }
  1542. }
  1543. });
  1544. });
  1545. it('should correctly set bar width', function() {
  1546. var chart = this.chart;
  1547. var expected, i, ilen, meta;
  1548. if (barThickness) {
  1549. expected = barThickness;
  1550. } else {
  1551. var scale = chart.scales.x;
  1552. var options = chart.options.scales.xAxes[0];
  1553. var categoryPercentage = options.categoryPercentage;
  1554. var barPercentage = options.barPercentage;
  1555. var tickInterval = scale.getPixelForTick(1) - scale.getPixelForTick(0);
  1556. expected = tickInterval * categoryPercentage / 2 * barPercentage;
  1557. }
  1558. for (i = 0, ilen = chart.data.datasets.length; i < ilen; ++i) {
  1559. meta = chart.getDatasetMeta(i);
  1560. expect(meta.data[0]._model.width).toBeCloseToPixel(expected);
  1561. expect(meta.data[1]._model.width).toBeCloseToPixel(expected);
  1562. }
  1563. });
  1564. it('should correctly set bar width if maxBarThickness is specified', function() {
  1565. var chart = this.chart;
  1566. var options = chart.options.scales.xAxes[0];
  1567. var i, ilen, meta;
  1568. options.maxBarThickness = 10;
  1569. chart.update();
  1570. for (i = 0, ilen = chart.data.datasets.length; i < ilen; ++i) {
  1571. meta = chart.getDatasetMeta(i);
  1572. expect(meta.data[0]._model.width).toBeCloseToPixel(10);
  1573. expect(meta.data[1]._model.width).toBeCloseToPixel(10);
  1574. }
  1575. });
  1576. });
  1577. });
  1578. });
  1579. });