24.0 KB841 lines
Blame
1import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
2
3describe('XY Chart', () => {
4 it('should render the simplest possible xy-beta chart', () => {
5 imgSnapshotTest(
6 `
7 xychart-beta
8 line [10, 30, 20]
9 `,
10 {}
11 );
12 });
13 it('should render the simplest possible xy chart', () => {
14 imgSnapshotTest(
15 `
16 xychart
17 line [10, 30, 20]
18 `,
19 {}
20 );
21 });
22 it('Should render a complete chart', () => {
23 imgSnapshotTest(
24 `
25 xychart
26 title "Sales Revenue"
27 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
28 y-axis "Revenue (in $)" 4000 --> 11000
29 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
30 line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
31 `,
32 {}
33 );
34 });
35 it('Should render a chart without title', () => {
36 imgSnapshotTest(
37 `
38 xychart
39 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
40 y-axis "Revenue (in $)" 4000 --> 11000
41 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
42 line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
43 `,
44 {}
45 );
46 });
47 it('y-axis title not required', () => {
48 imgSnapshotTest(
49 `
50 xychart
51 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
52 y-axis 4000 --> 11000
53 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
54 line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
55 `,
56 {}
57 );
58 });
59 it('Should render a chart without y-axis with different range', () => {
60 imgSnapshotTest(
61 `
62 xychart
63 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
64 bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
65 line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
66 `,
67 {}
68 );
69 });
70 it('x axis title not required', () => {
71 imgSnapshotTest(
72 `
73 xychart
74 x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
75 bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
76 line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
77 `,
78 {}
79 );
80 });
81 it('Multiple plots can be rendered', () => {
82 imgSnapshotTest(
83 `
84 xychart
85 line [23, 46, 77, 34]
86 line [45, 32, 33, 12]
87 bar [87, 54, 99, 85]
88 line [78, 88, 22, 4]
89 line [22, 29, 75, 33]
90 bar [52, 96, 35, 10]
91 `,
92 {}
93 );
94 });
95 it('Decimals and negative numbers are supported', () => {
96 imgSnapshotTest(
97 `
98 xychart
99 y-axis -2.4 --> 3.5
100 line [+1.3, .6, 2.4, -.34]
101 `,
102 {}
103 );
104 });
105 it('Render spark line with "plotReservedSpacePercent"', () => {
106 imgSnapshotTest(
107 `
108 ---
109 config:
110 theme: dark
111 xyChart:
112 width: 200
113 height: 20
114 plotReservedSpacePercent: 100
115 ---
116 xychart
117 line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
118 `,
119 {}
120 );
121 });
122 it('Render spark bar without displaying other property', () => {
123 imgSnapshotTest(
124 `
125 ---
126 config:
127 theme: dark
128 xyChart:
129 width: 200
130 height: 20
131 xAxis:
132 showLabel: false
133 showTitle: false
134 showTick: false
135 showAxisLine: false
136 yAxis:
137 showLabel: false
138 showTitle: false
139 showTick: false
140 showAxisLine: false
141 ---
142 xychart
143 bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
144 `,
145 {}
146 );
147 });
148 it('Should use all the config from directive', () => {
149 imgSnapshotTest(
150 `
151 %%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60 }}}%%
152 xychart
153 title "Sales Revenue"
154 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
155 y-axis "Revenue (in $)" 4000 --> 11000
156 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
157 line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
158 `,
159 {}
160 );
161 });
162 it('Should use all the config from yaml', () => {
163 imgSnapshotTest(
164 `
165 ---
166 config:
167 theme: forest
168 xyChart:
169 width: 1000
170 height: 600
171 titlePadding: 5
172 titleFontSize: 10
173 xAxis:
174 labelFontSize: 20
175 labelPadding: 10
176 titleFontSize: 30
177 titlePadding: 20
178 tickLength: 10
179 tickWidth: 5
180 axisLineWidth: 5
181 yAxis:
182 labelFontSize: 20
183 labelPadding: 10
184 titleFontSize: 30
185 titlePadding: 20
186 tickLength: 10
187 tickWidth: 5
188 axisLineWidth: 5
189 chartOrientation: horizontal
190 plotReservedSpacePercent: 60
191 showDataLabel: true
192 ---
193 xychart
194 title "Sales Revenue"
195 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
196 y-axis "Revenue (in $)" 4000 --> 11000
197 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
198 line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
199 `,
200 {}
201 );
202 });
203 it('Render with show axis title false', () => {
204 imgSnapshotTest(
205 `
206 ---
207 config:
208 xyChart:
209 xAxis:
210 showTitle: false
211 yAxis:
212 showTitle: false
213 ---
214 xychart
215 title "Sales Revenue"
216 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
217 y-axis "Revenue (in $)" 4000 --> 11000
218 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
219 line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
220 `,
221 {}
222 );
223 });
224 it('Render with show axis label false', () => {
225 imgSnapshotTest(
226 `
227 ---
228 config:
229 xyChart:
230 xAxis:
231 showLabel: false
232 yAxis:
233 showLabel: false
234 ---
235 xychart
236 title "Sales Revenue"
237 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
238 y-axis "Revenue (in $)" 4000 --> 11000
239 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
240 line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
241 `,
242 {}
243 );
244 });
245 it('Render with show axis tick false', () => {
246 imgSnapshotTest(
247 `
248 ---
249 config:
250 xyChart:
251 xAxis:
252 showTick: false
253 yAxis:
254 showTick: false
255 ---
256 xychart
257 title "Sales Revenue"
258 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
259 y-axis "Revenue (in $)" 4000 --> 11000
260 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
261 line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
262 `,
263 {}
264 );
265 });
266 it('Render with show axis line false', () => {
267 imgSnapshotTest(
268 `
269 ---
270 config:
271 xyChart:
272 xAxis:
273 showAxisLine: false
274 yAxis:
275 showAxisLine: false
276 ---
277 xychart
278 title "Sales Revenue"
279 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
280 y-axis "Revenue (in $)" 4000 --> 11000
281 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
282 line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
283 `,
284 {}
285 );
286 });
287 it('Render all the theme color', () => {
288 imgSnapshotTest(
289 `
290 ---
291 config:
292 themeVariables:
293 xyChart:
294 titleColor: "#ff0000"
295 backgroundColor: "#f0f8ff"
296 yAxisLabelColor: "#ee82ee"
297 yAxisTitleColor: "#7fffd4"
298 yAxisTickColor: "#87ceeb"
299 yAxisLineColor: "#ff6347"
300 xAxisLabelColor: "#7fffd4"
301 xAxisTitleColor: "#ee82ee"
302 xAxisTickColor: "#ff6347"
303 xAxisLineColor: "#87ceeb"
304 plotColorPalette: "#008000, #faba63"
305 ---
306 xychart
307 title "Sales Revenue"
308 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
309 y-axis "Revenue (in $)" 4000 --> 11000
310 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
311 line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
312 `,
313 {}
314 );
315 });
316 it('should use the correct distances between data points', () => {
317 imgSnapshotTest(
318 `
319 xychart
320 x-axis 0 --> 2
321 line [0, 1, 0, 1]
322 bar [1, 0, 1, 0]
323 `,
324 {}
325 );
326 cy.get('svg');
327 });
328
329 it('should render vertical bar chart with labels', () => {
330 imgSnapshotTest(
331 `
332 ---
333 config:
334 xyChart:
335 showDataLabel: true
336 ---
337 xychart
338 title "Sales Revenue"
339 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
340 y-axis "Revenue (in $)" 4000 --> 11000
341 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
342 `,
343 {}
344 );
345 });
346
347 it('should render horizontal bar chart with labels', () => {
348 imgSnapshotTest(
349 `
350 ---
351 config:
352 xyChart:
353 showDataLabel: true
354 chartOrientation: horizontal
355 ---
356 xychart
357 title "Sales Revenue"
358 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
359 y-axis "Revenue (in $)" 4000 --> 11000
360 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
361 `,
362 {}
363 );
364 });
365
366 it('should render vertical bar chart without labels by default', () => {
367 imgSnapshotTest(
368 `
369 xychart
370 title "Sales Revenue"
371 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
372 y-axis "Revenue (in $)" 4000 --> 11000
373 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
374 `,
375 {}
376 );
377 });
378
379 it('should render horizontal bar chart without labels by default', () => {
380 imgSnapshotTest(
381 `
382 ---
383 config:
384 xyChart:
385 chartOrientation: horizontal
386 ---
387 xychart
388 title "Sales Revenue"
389 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
390 y-axis "Revenue (in $)" 4000 --> 11000
391 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
392 `,
393 {}
394 );
395 });
396
397 it('should render multiple bar plots vertically with labels correctly', () => {
398 imgSnapshotTest(
399 `
400 ---
401 config:
402 xyChart:
403 showDataLabel: true
404 ---
405 xychart
406 title "Multiple Bar Plots"
407 x-axis Categories [A, B, C]
408 y-axis "Values" 0 --> 100
409 bar [10, 50, 90]
410 `,
411 {}
412 );
413 });
414
415 it('should render multiple bar plots horizontally with labels correctly', () => {
416 imgSnapshotTest(
417 `
418 ---
419 config:
420 xyChart:
421 showDataLabel: true
422 chartOrientation: horizontal
423 ---
424 xychart
425 title "Multiple Bar Plots"
426 x-axis Categories [A, B, C]
427 y-axis "Values" 0 --> 100
428 bar [10, 50, 90]
429 `,
430 {}
431 );
432 });
433
434 it('should render a single bar with label for a vertical xy-chart', () => {
435 imgSnapshotTest(
436 `
437 ---
438 config:
439 xyChart:
440 showDataLabel: true
441 ---
442 xychart
443 title "Single Bar Chart"
444 x-axis Categories [A]
445 y-axis "Value" 0 --> 100
446 bar [75]
447 `,
448 {}
449 );
450 });
451
452 it('should render a single bar with label for a horizontal xy-chart', () => {
453 imgSnapshotTest(
454 `
455 ---
456 config:
457 xyChart:
458 showDataLabel: true
459 chartOrientation: horizontal
460 ---
461 xychart
462 title "Single Bar Chart"
463 x-axis Categories [A]
464 y-axis "Value" 0 --> 100
465 bar [75]
466 `,
467 {}
468 );
469 });
470
471 it('should render negative and decimal values with correct labels for vertical xy-chart', () => {
472 imgSnapshotTest(
473 `
474 ---
475 config:
476 xyChart:
477 showDataLabel: true
478 ---
479 xychart
480 title "Decimal and Negative Values"
481 x-axis Categories [A, B, C]
482 y-axis -10 --> 10
483 bar [ -2.5, 0.75, 5.1 ]
484 `,
485 {}
486 );
487 });
488
489 it('should render negative and decimal values with correct labels for horizontal xy-chart', () => {
490 imgSnapshotTest(
491 `
492 ---
493 config:
494 xyChart:
495 showDataLabel: true
496 chartOrientation: horizontal
497 ---
498 xychart
499 title "Decimal and Negative Values"
500 x-axis Categories [A, B, C]
501 y-axis -10 --> 10
502 bar [ -2.5, 0.75, 5.1 ]
503 `,
504 {}
505 );
506 });
507
508 it('should render data labels within each bar in the vertical xy-chart', () => {
509 imgSnapshotTest(
510 `
511 ---
512 config:
513 xyChart:
514 showDataLabel: true
515 ---
516 xychart
517 title "Sales Revenue"
518 x-axis Months [jan,b,c]
519 y-axis "Revenue (in $)" 4000 --> 12000
520 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 3000, 2000, 500, 2000, 3000, 11000, 5000, 6000]
521 `,
522 {}
523 );
524
525 cy.get('g.bar-plot-0').within(() => {
526 cy.get('rect').each(($rect, index) => {
527 // Extract bar properties
528 const barProps = {
529 x: parseFloat($rect.attr('x')),
530 y: parseFloat($rect.attr('y')),
531 width: parseFloat($rect.attr('width')),
532 height: parseFloat($rect.attr('height')),
533 };
534
535 // Get the text element corresponding to this bar by index.
536 cy.get('text')
537 .eq(index)
538 .then(($text) => {
539 const bbox = $text[0].getBBox();
540 const textProps = {
541 x: bbox.x,
542 y: bbox.y,
543 width: bbox.width,
544 height: bbox.height,
545 };
546
547 // Verify that the text label is positioned within the boundaries of the bar.
548 expect(textProps.x).to.be.greaterThan(barProps.x);
549 expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
550
551 // Check horizontal alignment (within tolerance)
552 expect(textProps.x + textProps.width / 2).to.be.closeTo(
553 barProps.x + barProps.width / 2,
554 5
555 );
556
557 expect(textProps.y).to.be.greaterThan(barProps.y);
558 expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
559 });
560 });
561 });
562 });
563
564 it('should render data labels within each bar in the horizontal xy-chart', () => {
565 imgSnapshotTest(
566 `
567 ---
568 config:
569 xyChart:
570 showDataLabel: true
571 chartOrientation: horizontal
572 ---
573 xychart
574 title "Sales Revenue"
575 x-axis Months [jan,b,c]
576 y-axis "Revenue (in $)" 4000 --> 12000
577 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 3000, 2000, 500, 2000, 3000, 11000, 5000, 6000]
578 `,
579 {}
580 );
581
582 cy.get('g.bar-plot-0').within(() => {
583 cy.get('rect').each(($rect, index) => {
584 // Extract bar properties
585 const barProps = {
586 x: parseFloat($rect.attr('x')),
587 y: parseFloat($rect.attr('y')),
588 width: parseFloat($rect.attr('width')),
589 height: parseFloat($rect.attr('height')),
590 };
591
592 // Get the text element corresponding to this bar by index.
593 cy.get('text')
594 .eq(index)
595 .then(($text) => {
596 const bbox = $text[0].getBBox();
597 const textProps = {
598 x: bbox.x,
599 y: bbox.y,
600 width: bbox.width,
601 height: bbox.height,
602 };
603
604 // Verify that the text label is positioned within the boundaries of the bar.
605 expect(textProps.x).to.be.greaterThan(barProps.x);
606 expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
607
608 expect(textProps.y).to.be.greaterThan(barProps.y);
609 expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
610 expect(textProps.y + textProps.height / 2).to.be.closeTo(
611 barProps.y + barProps.height / 2,
612 5
613 );
614 });
615 });
616 });
617 });
618
619 it('should render data labels within each bar in the vertical xy-chart with a lot of bars of different sizes', () => {
620 imgSnapshotTest(
621 `
622 ---
623 config:
624 xyChart:
625 showDataLabel: true
626 ---
627 xychart
628 title "Sales Revenue"
629 x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
630 y-axis "Revenue (in $)" 4000 --> 12000
631 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 8000, 10000, 5000, 7600, 4999,11000 ,5000,6000]
632 `,
633 {}
634 );
635
636 cy.get('g.bar-plot-0').within(() => {
637 cy.get('rect').each(($rect, index) => {
638 // Extract bar properties
639 const barProps = {
640 x: parseFloat($rect.attr('x')),
641 y: parseFloat($rect.attr('y')),
642 width: parseFloat($rect.attr('width')),
643 height: parseFloat($rect.attr('height')),
644 };
645
646 // Get the text element corresponding to this bar by index.
647 cy.get('text')
648 .eq(index)
649 .then(($text) => {
650 const bbox = $text[0].getBBox();
651 const textProps = {
652 x: bbox.x,
653 y: bbox.y,
654 width: bbox.width,
655 height: bbox.height,
656 };
657
658 // Verify that the text label is positioned within the boundaries of the bar.
659 expect(textProps.x).to.be.greaterThan(barProps.x);
660 expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
661
662 // Check horizontal alignment (within tolerance)
663 expect(textProps.x + textProps.width / 2).to.be.closeTo(
664 barProps.x + barProps.width / 2,
665 5
666 );
667
668 expect(textProps.y).to.be.greaterThan(barProps.y);
669 expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
670 });
671 });
672 });
673 });
674
675 it('should render data labels within each bar in the horizontal xy-chart with a lot of bars of different sizes', () => {
676 imgSnapshotTest(
677 `
678 ---
679 config:
680 xyChart:
681 showDataLabel: true
682 chartOrientation: horizontal
683 ---
684 xychart
685 title "Sales Revenue"
686 x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
687 y-axis "Revenue (in $)" 4000 --> 12000
688 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 8000, 10000, 5000, 7600, 4999,11000 ,5000,6000]
689 `,
690 {}
691 );
692
693 cy.get('g.bar-plot-0').within(() => {
694 cy.get('rect').each(($rect, index) => {
695 // Extract bar properties
696 const barProps = {
697 x: parseFloat($rect.attr('x')),
698 y: parseFloat($rect.attr('y')),
699 width: parseFloat($rect.attr('width')),
700 height: parseFloat($rect.attr('height')),
701 };
702
703 // Get the text element corresponding to this bar by index.
704 cy.get('text')
705 .eq(index)
706 .then(($text) => {
707 const bbox = $text[0].getBBox();
708 const textProps = {
709 x: bbox.x,
710 y: bbox.y,
711 width: bbox.width,
712 height: bbox.height,
713 };
714
715 // Verify that the text label is positioned within the boundaries of the bar.
716 expect(textProps.x).to.be.greaterThan(barProps.x);
717 expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
718
719 expect(textProps.y).to.be.greaterThan(barProps.y);
720 expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
721 expect(textProps.y + textProps.height / 2).to.be.closeTo(
722 barProps.y + barProps.height / 2,
723 5
724 );
725 });
726 });
727 });
728 });
729
730 it('should render data labels correctly for a bar in the vertical xy-chart', () => {
731 imgSnapshotTest(
732 `
733 ---
734 config:
735 xyChart:
736 showDataLabel: true
737 ---
738 xychart
739 title "Sales Revenue"
740 x-axis Months [jan]
741 y-axis "Revenue (in $)" 3000 --> 12000
742 bar [4000]
743 `,
744 {}
745 );
746
747 cy.get('g.bar-plot-0').within(() => {
748 cy.get('rect').each(($rect, index) => {
749 // Extract bar properties
750 const barProps = {
751 x: parseFloat($rect.attr('x')),
752 y: parseFloat($rect.attr('y')),
753 width: parseFloat($rect.attr('width')),
754 height: parseFloat($rect.attr('height')),
755 };
756
757 // Get the text element corresponding to this bar by index.
758 cy.get('text')
759 .eq(index)
760 .then(($text) => {
761 const bbox = $text[0].getBBox();
762 const textProps = {
763 x: bbox.x,
764 y: bbox.y,
765 width: bbox.width,
766 height: bbox.height,
767 };
768
769 // Verify that the text label is positioned within the boundaries of the bar.
770 expect(textProps.x).to.be.greaterThan(barProps.x);
771 expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
772
773 // Check horizontal alignment (within tolerance)
774 expect(textProps.x + textProps.width / 2).to.be.closeTo(
775 barProps.x + barProps.width / 2,
776 5
777 );
778
779 expect(textProps.y).to.be.greaterThan(barProps.y);
780 expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
781 });
782 });
783 });
784 });
785
786 it('should render data labels correctly for a bar in the horizontal xy-chart', () => {
787 imgSnapshotTest(
788 `
789 ---
790 config:
791 xyChart:
792 showDataLabel: true
793 chartOrientation: horizontal
794 ---
795 xychart
796 title "Sales Revenue"
797 x-axis Months [jan]
798 y-axis "Revenue (in $)" 3000 --> 12000
799 bar [4000]
800 `,
801 {}
802 );
803
804 cy.get('g.bar-plot-0').within(() => {
805 cy.get('rect').each(($rect, index) => {
806 // Extract bar properties
807 const barProps = {
808 x: parseFloat($rect.attr('x')),
809 y: parseFloat($rect.attr('y')),
810 width: parseFloat($rect.attr('width')),
811 height: parseFloat($rect.attr('height')),
812 };
813
814 // Get the text element corresponding to this bar by index.
815 cy.get('text')
816 .eq(index)
817 .then(($text) => {
818 const bbox = $text[0].getBBox();
819 const textProps = {
820 x: bbox.x,
821 y: bbox.y,
822 width: bbox.width,
823 height: bbox.height,
824 };
825
826 // Verify that the text label is positioned within the boundaries of the bar.
827 expect(textProps.x).to.be.greaterThan(barProps.x);
828 expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
829
830 expect(textProps.y).to.be.greaterThan(barProps.y);
831 expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
832 expect(textProps.y + textProps.height / 2).to.be.closeTo(
833 barProps.y + barProps.height / 2,
834 5
835 );
836 });
837 });
838 });
839 });
840});
841