api.region-spec.ts 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. import { d3, initChart } from './c3-helper'
  2. describe('c3 api region', function() {
  3. 'use strict'
  4. var chart, args
  5. beforeEach(function(done) {
  6. chart = initChart(chart, args, done)
  7. })
  8. describe('api.region', function() {
  9. beforeAll(function() {
  10. args = {
  11. data: {
  12. columns: [['data1', 30, 200, 100, 400, 150, 250]]
  13. },
  14. regions: [
  15. {
  16. axis: 'y',
  17. start: 300,
  18. end: 400,
  19. class: 'green',
  20. label: 'Region 1'
  21. },
  22. {
  23. axis: 'y',
  24. start: 0,
  25. end: 100,
  26. class: 'green'
  27. }
  28. ]
  29. }
  30. })
  31. it('updates regions', function(done) {
  32. var main = chart.internal.main,
  33. expectedRegions = [
  34. {
  35. axis: 'y',
  36. start: 250,
  37. end: 350,
  38. class: 'red',
  39. label: 'Region 1'
  40. },
  41. {
  42. axis: 'y',
  43. start: 25,
  44. end: 75,
  45. class: 'red',
  46. label: ''
  47. }
  48. ],
  49. regions
  50. // Call regions API
  51. chart.regions(expectedRegions)
  52. setTimeout(function() {
  53. regions = main.selectAll('.c3-region')
  54. expect(regions.size()).toBe(expectedRegions.length)
  55. regions.each(function(d, i) {
  56. var region = d3.select(this),
  57. label = region.select('text'),
  58. y = +region.attr('y'),
  59. height = +region.attr('height'),
  60. expectedClass = 'red',
  61. expectedLabel = expectedRegions[i].label,
  62. unexpectedClass = 'green',
  63. expectedStart = Math.round(
  64. chart.internal.y(expectedRegions[i].start)
  65. ),
  66. expectedEnd = Math.round(chart.internal.y(expectedRegions[i].end)),
  67. expectedY = expectedEnd,
  68. expectedHeight = expectedStart - expectedEnd
  69. expect(y).toBeCloseTo(expectedY, -1)
  70. expect(height).toBeCloseTo(expectedHeight, -1)
  71. expect(region.classed(expectedClass)).toBeTruthy()
  72. expect(region.classed(unexpectedClass)).toBeFalsy()
  73. expect(label.text()).toBe(expectedLabel)
  74. })
  75. }, 500)
  76. setTimeout(function() {
  77. done()
  78. }, 1000)
  79. })
  80. })
  81. describe('api.region.add', function() {
  82. beforeAll(function() {
  83. args = {
  84. data: {
  85. columns: [['data1', 30, 200, 100, 400, 150, 250]]
  86. },
  87. regions: [
  88. {
  89. axis: 'y',
  90. start: 300,
  91. end: 400,
  92. class: 'green'
  93. },
  94. {
  95. axis: 'y',
  96. start: 0,
  97. end: 100,
  98. class: 'green'
  99. }
  100. ]
  101. }
  102. })
  103. it('should add regions', function(done) {
  104. var main = chart.internal.main,
  105. expectedRegions = [
  106. {
  107. axis: 'y',
  108. start: 300,
  109. end: 400,
  110. class: 'green'
  111. },
  112. {
  113. axis: 'y',
  114. start: 0,
  115. end: 100,
  116. class: 'green'
  117. },
  118. {
  119. axis: 'y',
  120. start: 250,
  121. end: 350,
  122. class: 'red'
  123. },
  124. {
  125. axis: 'y',
  126. start: 25,
  127. end: 75,
  128. class: 'red'
  129. }
  130. ],
  131. expectedClasses = ['green', 'green', 'red', 'red'],
  132. regions
  133. // Call regions API
  134. chart.regions(expectedRegions)
  135. setTimeout(function() {
  136. regions = main.selectAll('.c3-region')
  137. expect(regions.size()).toBe(expectedRegions.length)
  138. regions.each(function(d, i) {
  139. var region = d3.select(this),
  140. y = +region.attr('y'),
  141. height = +region.attr('height'),
  142. expectedClass = expectedClasses[i],
  143. expectedStart = Math.round(
  144. chart.internal.y(expectedRegions[i].start)
  145. ),
  146. expectedEnd = Math.round(chart.internal.y(expectedRegions[i].end)),
  147. expectedY = expectedEnd,
  148. expectedHeight = expectedStart - expectedEnd
  149. expect(y).toBeCloseTo(expectedY, -1)
  150. expect(height).toBeCloseTo(expectedHeight, -1)
  151. expect(region.classed(expectedClass)).toBeTruthy()
  152. })
  153. }, 500)
  154. setTimeout(function() {
  155. done()
  156. }, 1000)
  157. })
  158. })
  159. describe('api.region.remove', function() {
  160. beforeAll(function() {
  161. args = {
  162. data: {
  163. columns: [['data1', 30, 200, 100, 400, 150, 250]]
  164. },
  165. regions: [
  166. {
  167. axis: 'y',
  168. start: 300,
  169. end: 400,
  170. class: 'green'
  171. },
  172. {
  173. axis: 'y',
  174. start: 0,
  175. end: 100,
  176. class: 'green'
  177. },
  178. {
  179. axis: 'y',
  180. start: 250,
  181. end: 350,
  182. class: 'red'
  183. }
  184. ]
  185. }
  186. })
  187. it('should remove regions', function(done) {
  188. var main = chart.internal.main,
  189. expectedRegions = [
  190. {
  191. axis: 'y',
  192. start: 250,
  193. end: 350,
  194. class: 'red'
  195. }
  196. ],
  197. expectedClasses = ['red'],
  198. regions
  199. // Call regions API
  200. chart.regions(expectedRegions)
  201. setTimeout(function() {
  202. regions = main.selectAll('.c3-region')
  203. expect(regions.size()).toBe(expectedRegions.length)
  204. regions.each(function(d, i) {
  205. var region = d3.select(this),
  206. y = +region.attr('y'),
  207. height = +region.attr('height'),
  208. expectedClass = expectedClasses[i],
  209. expectedStart = Math.round(
  210. chart.internal.y(expectedRegions[i].start)
  211. ),
  212. expectedEnd = Math.round(chart.internal.y(expectedRegions[i].end)),
  213. expectedY = expectedEnd,
  214. expectedHeight = expectedStart - expectedEnd
  215. expect(y).toBeCloseTo(expectedY, -1)
  216. expect(height).toBeCloseTo(expectedHeight, -1)
  217. expect(region.classed(expectedClass)).toBeTruthy()
  218. })
  219. }, 500)
  220. setTimeout(function() {
  221. done()
  222. }, 1000)
  223. })
  224. })
  225. })