collab/mermaid/cypress/integration/rendering/xyChart.spec.jsblame
View source
6dd74de1import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
6dd74de2
6dd74de3describe('XY Chart', () => {
6dd74de4 it('should render the simplest possible xy-beta chart', () => {
6dd74de5 imgSnapshotTest(
6dd74de6 `
6dd74de7 xychart-beta
6dd74de8 line [10, 30, 20]
6dd74de9 `,
6dd74de10 {}
6dd74de11 );
6dd74de12 });
6dd74de13 it('should render the simplest possible xy chart', () => {
6dd74de14 imgSnapshotTest(
6dd74de15 `
6dd74de16 xychart
6dd74de17 line [10, 30, 20]
6dd74de18 `,
6dd74de19 {}
6dd74de20 );
6dd74de21 });
6dd74de22 it('Should render a complete chart', () => {
6dd74de23 imgSnapshotTest(
6dd74de24 `
6dd74de25 xychart
6dd74de26 title "Sales Revenue"
6dd74de27 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
6dd74de28 y-axis "Revenue (in $)" 4000 --> 11000
6dd74de29 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de30 line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de31 `,
6dd74de32 {}
6dd74de33 );
6dd74de34 });
6dd74de35 it('Should render a chart without title', () => {
6dd74de36 imgSnapshotTest(
6dd74de37 `
6dd74de38 xychart
6dd74de39 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
6dd74de40 y-axis "Revenue (in $)" 4000 --> 11000
6dd74de41 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de42 line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de43 `,
6dd74de44 {}
6dd74de45 );
6dd74de46 });
6dd74de47 it('y-axis title not required', () => {
6dd74de48 imgSnapshotTest(
6dd74de49 `
6dd74de50 xychart
6dd74de51 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
6dd74de52 y-axis 4000 --> 11000
6dd74de53 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de54 line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de55 `,
6dd74de56 {}
6dd74de57 );
6dd74de58 });
6dd74de59 it('Should render a chart without y-axis with different range', () => {
6dd74de60 imgSnapshotTest(
6dd74de61 `
6dd74de62 xychart
6dd74de63 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
6dd74de64 bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
6dd74de65 line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
6dd74de66 `,
6dd74de67 {}
6dd74de68 );
6dd74de69 });
6dd74de70 it('x axis title not required', () => {
6dd74de71 imgSnapshotTest(
6dd74de72 `
6dd74de73 xychart
6dd74de74 x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
6dd74de75 bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
6dd74de76 line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
6dd74de77 `,
6dd74de78 {}
6dd74de79 );
6dd74de80 });
6dd74de81 it('Multiple plots can be rendered', () => {
6dd74de82 imgSnapshotTest(
6dd74de83 `
6dd74de84 xychart
6dd74de85 line [23, 46, 77, 34]
6dd74de86 line [45, 32, 33, 12]
6dd74de87 bar [87, 54, 99, 85]
6dd74de88 line [78, 88, 22, 4]
6dd74de89 line [22, 29, 75, 33]
6dd74de90 bar [52, 96, 35, 10]
6dd74de91 `,
6dd74de92 {}
6dd74de93 );
6dd74de94 });
6dd74de95 it('Decimals and negative numbers are supported', () => {
6dd74de96 imgSnapshotTest(
6dd74de97 `
6dd74de98 xychart
6dd74de99 y-axis -2.4 --> 3.5
6dd74de100 line [+1.3, .6, 2.4, -.34]
6dd74de101 `,
6dd74de102 {}
6dd74de103 );
6dd74de104 });
6dd74de105 it('Render spark line with "plotReservedSpacePercent"', () => {
6dd74de106 imgSnapshotTest(
6dd74de107 `
6dd74de108 ---
6dd74de109 config:
6dd74de110 theme: dark
6dd74de111 xyChart:
6dd74de112 width: 200
6dd74de113 height: 20
6dd74de114 plotReservedSpacePercent: 100
6dd74de115 ---
6dd74de116 xychart
6dd74de117 line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
6dd74de118 `,
6dd74de119 {}
6dd74de120 );
6dd74de121 });
6dd74de122 it('Render spark bar without displaying other property', () => {
6dd74de123 imgSnapshotTest(
6dd74de124 `
6dd74de125 ---
6dd74de126 config:
6dd74de127 theme: dark
6dd74de128 xyChart:
6dd74de129 width: 200
6dd74de130 height: 20
6dd74de131 xAxis:
6dd74de132 showLabel: false
6dd74de133 showTitle: false
6dd74de134 showTick: false
6dd74de135 showAxisLine: false
6dd74de136 yAxis:
6dd74de137 showLabel: false
6dd74de138 showTitle: false
6dd74de139 showTick: false
6dd74de140 showAxisLine: false
6dd74de141 ---
6dd74de142 xychart
6dd74de143 bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
6dd74de144 `,
6dd74de145 {}
6dd74de146 );
6dd74de147 });
6dd74de148 it('Should use all the config from directive', () => {
6dd74de149 imgSnapshotTest(
6dd74de150 `
6dd74de151 %%{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 }}}%%
6dd74de152 xychart
6dd74de153 title "Sales Revenue"
6dd74de154 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
6dd74de155 y-axis "Revenue (in $)" 4000 --> 11000
6dd74de156 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de157 line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de158 `,
6dd74de159 {}
6dd74de160 );
6dd74de161 });
6dd74de162 it('Should use all the config from yaml', () => {
6dd74de163 imgSnapshotTest(
6dd74de164 `
6dd74de165 ---
6dd74de166 config:
6dd74de167 theme: forest
6dd74de168 xyChart:
6dd74de169 width: 1000
6dd74de170 height: 600
6dd74de171 titlePadding: 5
6dd74de172 titleFontSize: 10
6dd74de173 xAxis:
6dd74de174 labelFontSize: 20
6dd74de175 labelPadding: 10
6dd74de176 titleFontSize: 30
6dd74de177 titlePadding: 20
6dd74de178 tickLength: 10
6dd74de179 tickWidth: 5
6dd74de180 axisLineWidth: 5
6dd74de181 yAxis:
6dd74de182 labelFontSize: 20
6dd74de183 labelPadding: 10
6dd74de184 titleFontSize: 30
6dd74de185 titlePadding: 20
6dd74de186 tickLength: 10
6dd74de187 tickWidth: 5
6dd74de188 axisLineWidth: 5
6dd74de189 chartOrientation: horizontal
6dd74de190 plotReservedSpacePercent: 60
6dd74de191 showDataLabel: true
6dd74de192 ---
6dd74de193 xychart
6dd74de194 title "Sales Revenue"
6dd74de195 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
6dd74de196 y-axis "Revenue (in $)" 4000 --> 11000
6dd74de197 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de198 line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de199 `,
6dd74de200 {}
6dd74de201 );
6dd74de202 });
6dd74de203 it('Render with show axis title false', () => {
6dd74de204 imgSnapshotTest(
6dd74de205 `
6dd74de206 ---
6dd74de207 config:
6dd74de208 xyChart:
6dd74de209 xAxis:
6dd74de210 showTitle: false
6dd74de211 yAxis:
6dd74de212 showTitle: false
6dd74de213 ---
6dd74de214 xychart
6dd74de215 title "Sales Revenue"
6dd74de216 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
6dd74de217 y-axis "Revenue (in $)" 4000 --> 11000
6dd74de218 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de219 line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de220 `,
6dd74de221 {}
6dd74de222 );
6dd74de223 });
6dd74de224 it('Render with show axis label false', () => {
6dd74de225 imgSnapshotTest(
6dd74de226 `
6dd74de227 ---
6dd74de228 config:
6dd74de229 xyChart:
6dd74de230 xAxis:
6dd74de231 showLabel: false
6dd74de232 yAxis:
6dd74de233 showLabel: false
6dd74de234 ---
6dd74de235 xychart
6dd74de236 title "Sales Revenue"
6dd74de237 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
6dd74de238 y-axis "Revenue (in $)" 4000 --> 11000
6dd74de239 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de240 line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de241 `,
6dd74de242 {}
6dd74de243 );
6dd74de244 });
6dd74de245 it('Render with show axis tick false', () => {
6dd74de246 imgSnapshotTest(
6dd74de247 `
6dd74de248 ---
6dd74de249 config:
6dd74de250 xyChart:
6dd74de251 xAxis:
6dd74de252 showTick: false
6dd74de253 yAxis:
6dd74de254 showTick: false
6dd74de255 ---
6dd74de256 xychart
6dd74de257 title "Sales Revenue"
6dd74de258 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
6dd74de259 y-axis "Revenue (in $)" 4000 --> 11000
6dd74de260 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de261 line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de262 `,
6dd74de263 {}
6dd74de264 );
6dd74de265 });
6dd74de266 it('Render with show axis line false', () => {
6dd74de267 imgSnapshotTest(
6dd74de268 `
6dd74de269 ---
6dd74de270 config:
6dd74de271 xyChart:
6dd74de272 xAxis:
6dd74de273 showAxisLine: false
6dd74de274 yAxis:
6dd74de275 showAxisLine: false
6dd74de276 ---
6dd74de277 xychart
6dd74de278 title "Sales Revenue"
6dd74de279 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
6dd74de280 y-axis "Revenue (in $)" 4000 --> 11000
6dd74de281 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de282 line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de283 `,
6dd74de284 {}
6dd74de285 );
6dd74de286 });
6dd74de287 it('Render all the theme color', () => {
6dd74de288 imgSnapshotTest(
6dd74de289 `
6dd74de290 ---
6dd74de291 config:
6dd74de292 themeVariables:
6dd74de293 xyChart:
6dd74de294 titleColor: "#ff0000"
6dd74de295 backgroundColor: "#f0f8ff"
6dd74de296 yAxisLabelColor: "#ee82ee"
6dd74de297 yAxisTitleColor: "#7fffd4"
6dd74de298 yAxisTickColor: "#87ceeb"
6dd74de299 yAxisLineColor: "#ff6347"
6dd74de300 xAxisLabelColor: "#7fffd4"
6dd74de301 xAxisTitleColor: "#ee82ee"
6dd74de302 xAxisTickColor: "#ff6347"
6dd74de303 xAxisLineColor: "#87ceeb"
6dd74de304 plotColorPalette: "#008000, #faba63"
6dd74de305 ---
6dd74de306 xychart
6dd74de307 title "Sales Revenue"
6dd74de308 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
6dd74de309 y-axis "Revenue (in $)" 4000 --> 11000
6dd74de310 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de311 line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de312 `,
6dd74de313 {}
6dd74de314 );
6dd74de315 });
6dd74de316 it('should use the correct distances between data points', () => {
6dd74de317 imgSnapshotTest(
6dd74de318 `
6dd74de319 xychart
6dd74de320 x-axis 0 --> 2
6dd74de321 line [0, 1, 0, 1]
6dd74de322 bar [1, 0, 1, 0]
6dd74de323 `,
6dd74de324 {}
6dd74de325 );
6dd74de326 cy.get('svg');
6dd74de327 });
6dd74de328
6dd74de329 it('should render vertical bar chart with labels', () => {
6dd74de330 imgSnapshotTest(
6dd74de331 `
6dd74de332 ---
6dd74de333 config:
6dd74de334 xyChart:
6dd74de335 showDataLabel: true
6dd74de336 ---
6dd74de337 xychart
6dd74de338 title "Sales Revenue"
6dd74de339 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
6dd74de340 y-axis "Revenue (in $)" 4000 --> 11000
6dd74de341 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de342 `,
6dd74de343 {}
6dd74de344 );
6dd74de345 });
6dd74de346
6dd74de347 it('should render horizontal bar chart with labels', () => {
6dd74de348 imgSnapshotTest(
6dd74de349 `
6dd74de350 ---
6dd74de351 config:
6dd74de352 xyChart:
6dd74de353 showDataLabel: true
6dd74de354 chartOrientation: horizontal
6dd74de355 ---
6dd74de356 xychart
6dd74de357 title "Sales Revenue"
6dd74de358 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
6dd74de359 y-axis "Revenue (in $)" 4000 --> 11000
6dd74de360 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de361 `,
6dd74de362 {}
6dd74de363 );
6dd74de364 });
6dd74de365
6dd74de366 it('should render vertical bar chart without labels by default', () => {
6dd74de367 imgSnapshotTest(
6dd74de368 `
6dd74de369 xychart
6dd74de370 title "Sales Revenue"
6dd74de371 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
6dd74de372 y-axis "Revenue (in $)" 4000 --> 11000
6dd74de373 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de374 `,
6dd74de375 {}
6dd74de376 );
6dd74de377 });
6dd74de378
6dd74de379 it('should render horizontal bar chart without labels by default', () => {
6dd74de380 imgSnapshotTest(
6dd74de381 `
6dd74de382 ---
6dd74de383 config:
6dd74de384 xyChart:
6dd74de385 chartOrientation: horizontal
6dd74de386 ---
6dd74de387 xychart
6dd74de388 title "Sales Revenue"
6dd74de389 x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
6dd74de390 y-axis "Revenue (in $)" 4000 --> 11000
6dd74de391 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de392 `,
6dd74de393 {}
6dd74de394 );
6dd74de395 });
6dd74de396
6dd74de397 it('should render multiple bar plots vertically with labels correctly', () => {
6dd74de398 imgSnapshotTest(
6dd74de399 `
6dd74de400 ---
6dd74de401 config:
6dd74de402 xyChart:
6dd74de403 showDataLabel: true
6dd74de404 ---
6dd74de405 xychart
6dd74de406 title "Multiple Bar Plots"
6dd74de407 x-axis Categories [A, B, C]
6dd74de408 y-axis "Values" 0 --> 100
6dd74de409 bar [10, 50, 90]
6dd74de410 `,
6dd74de411 {}
6dd74de412 );
6dd74de413 });
6dd74de414
6dd74de415 it('should render multiple bar plots horizontally with labels correctly', () => {
6dd74de416 imgSnapshotTest(
6dd74de417 `
6dd74de418 ---
6dd74de419 config:
6dd74de420 xyChart:
6dd74de421 showDataLabel: true
6dd74de422 chartOrientation: horizontal
6dd74de423 ---
6dd74de424 xychart
6dd74de425 title "Multiple Bar Plots"
6dd74de426 x-axis Categories [A, B, C]
6dd74de427 y-axis "Values" 0 --> 100
6dd74de428 bar [10, 50, 90]
6dd74de429 `,
6dd74de430 {}
6dd74de431 );
6dd74de432 });
6dd74de433
6dd74de434 it('should render a single bar with label for a vertical xy-chart', () => {
6dd74de435 imgSnapshotTest(
6dd74de436 `
6dd74de437 ---
6dd74de438 config:
6dd74de439 xyChart:
6dd74de440 showDataLabel: true
6dd74de441 ---
6dd74de442 xychart
6dd74de443 title "Single Bar Chart"
6dd74de444 x-axis Categories [A]
6dd74de445 y-axis "Value" 0 --> 100
6dd74de446 bar [75]
6dd74de447 `,
6dd74de448 {}
6dd74de449 );
6dd74de450 });
6dd74de451
6dd74de452 it('should render a single bar with label for a horizontal xy-chart', () => {
6dd74de453 imgSnapshotTest(
6dd74de454 `
6dd74de455 ---
6dd74de456 config:
6dd74de457 xyChart:
6dd74de458 showDataLabel: true
6dd74de459 chartOrientation: horizontal
6dd74de460 ---
6dd74de461 xychart
6dd74de462 title "Single Bar Chart"
6dd74de463 x-axis Categories [A]
6dd74de464 y-axis "Value" 0 --> 100
6dd74de465 bar [75]
6dd74de466 `,
6dd74de467 {}
6dd74de468 );
6dd74de469 });
6dd74de470
6dd74de471 it('should render negative and decimal values with correct labels for vertical xy-chart', () => {
6dd74de472 imgSnapshotTest(
6dd74de473 `
6dd74de474 ---
6dd74de475 config:
6dd74de476 xyChart:
6dd74de477 showDataLabel: true
6dd74de478 ---
6dd74de479 xychart
6dd74de480 title "Decimal and Negative Values"
6dd74de481 x-axis Categories [A, B, C]
6dd74de482 y-axis -10 --> 10
6dd74de483 bar [ -2.5, 0.75, 5.1 ]
6dd74de484 `,
6dd74de485 {}
6dd74de486 );
6dd74de487 });
6dd74de488
6dd74de489 it('should render negative and decimal values with correct labels for horizontal xy-chart', () => {
6dd74de490 imgSnapshotTest(
6dd74de491 `
6dd74de492 ---
6dd74de493 config:
6dd74de494 xyChart:
6dd74de495 showDataLabel: true
6dd74de496 chartOrientation: horizontal
6dd74de497 ---
6dd74de498 xychart
6dd74de499 title "Decimal and Negative Values"
6dd74de500 x-axis Categories [A, B, C]
6dd74de501 y-axis -10 --> 10
6dd74de502 bar [ -2.5, 0.75, 5.1 ]
6dd74de503 `,
6dd74de504 {}
6dd74de505 );
6dd74de506 });
6dd74de507
6dd74de508 it('should render data labels within each bar in the vertical xy-chart', () => {
6dd74de509 imgSnapshotTest(
6dd74de510 `
6dd74de511 ---
6dd74de512 config:
6dd74de513 xyChart:
6dd74de514 showDataLabel: true
6dd74de515 ---
6dd74de516 xychart
6dd74de517 title "Sales Revenue"
6dd74de518 x-axis Months [jan,b,c]
6dd74de519 y-axis "Revenue (in $)" 4000 --> 12000
6dd74de520 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 3000, 2000, 500, 2000, 3000, 11000, 5000, 6000]
6dd74de521 `,
6dd74de522 {}
6dd74de523 );
6dd74de524
6dd74de525 cy.get('g.bar-plot-0').within(() => {
6dd74de526 cy.get('rect').each(($rect, index) => {
6dd74de527 // Extract bar properties
6dd74de528 const barProps = {
6dd74de529 x: parseFloat($rect.attr('x')),
6dd74de530 y: parseFloat($rect.attr('y')),
6dd74de531 width: parseFloat($rect.attr('width')),
6dd74de532 height: parseFloat($rect.attr('height')),
6dd74de533 };
6dd74de534
6dd74de535 // Get the text element corresponding to this bar by index.
6dd74de536 cy.get('text')
6dd74de537 .eq(index)
6dd74de538 .then(($text) => {
6dd74de539 const bbox = $text[0].getBBox();
6dd74de540 const textProps = {
6dd74de541 x: bbox.x,
6dd74de542 y: bbox.y,
6dd74de543 width: bbox.width,
6dd74de544 height: bbox.height,
6dd74de545 };
6dd74de546
6dd74de547 // Verify that the text label is positioned within the boundaries of the bar.
6dd74de548 expect(textProps.x).to.be.greaterThan(barProps.x);
6dd74de549 expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
6dd74de550
6dd74de551 // Check horizontal alignment (within tolerance)
6dd74de552 expect(textProps.x + textProps.width / 2).to.be.closeTo(
6dd74de553 barProps.x + barProps.width / 2,
6dd74de554 5
6dd74de555 );
6dd74de556
6dd74de557 expect(textProps.y).to.be.greaterThan(barProps.y);
6dd74de558 expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
6dd74de559 });
6dd74de560 });
6dd74de561 });
6dd74de562 });
6dd74de563
6dd74de564 it('should render data labels within each bar in the horizontal xy-chart', () => {
6dd74de565 imgSnapshotTest(
6dd74de566 `
6dd74de567 ---
6dd74de568 config:
6dd74de569 xyChart:
6dd74de570 showDataLabel: true
6dd74de571 chartOrientation: horizontal
6dd74de572 ---
6dd74de573 xychart
6dd74de574 title "Sales Revenue"
6dd74de575 x-axis Months [jan,b,c]
6dd74de576 y-axis "Revenue (in $)" 4000 --> 12000
6dd74de577 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 3000, 2000, 500, 2000, 3000, 11000, 5000, 6000]
6dd74de578 `,
6dd74de579 {}
6dd74de580 );
6dd74de581
6dd74de582 cy.get('g.bar-plot-0').within(() => {
6dd74de583 cy.get('rect').each(($rect, index) => {
6dd74de584 // Extract bar properties
6dd74de585 const barProps = {
6dd74de586 x: parseFloat($rect.attr('x')),
6dd74de587 y: parseFloat($rect.attr('y')),
6dd74de588 width: parseFloat($rect.attr('width')),
6dd74de589 height: parseFloat($rect.attr('height')),
6dd74de590 };
6dd74de591
6dd74de592 // Get the text element corresponding to this bar by index.
6dd74de593 cy.get('text')
6dd74de594 .eq(index)
6dd74de595 .then(($text) => {
6dd74de596 const bbox = $text[0].getBBox();
6dd74de597 const textProps = {
6dd74de598 x: bbox.x,
6dd74de599 y: bbox.y,
6dd74de600 width: bbox.width,
6dd74de601 height: bbox.height,
6dd74de602 };
6dd74de603
6dd74de604 // Verify that the text label is positioned within the boundaries of the bar.
6dd74de605 expect(textProps.x).to.be.greaterThan(barProps.x);
6dd74de606 expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
6dd74de607
6dd74de608 expect(textProps.y).to.be.greaterThan(barProps.y);
6dd74de609 expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
6dd74de610 expect(textProps.y + textProps.height / 2).to.be.closeTo(
6dd74de611 barProps.y + barProps.height / 2,
6dd74de612 5
6dd74de613 );
6dd74de614 });
6dd74de615 });
6dd74de616 });
6dd74de617 });
6dd74de618
6dd74de619 it('should render data labels within each bar in the vertical xy-chart with a lot of bars of different sizes', () => {
6dd74de620 imgSnapshotTest(
6dd74de621 `
6dd74de622 ---
6dd74de623 config:
6dd74de624 xyChart:
6dd74de625 showDataLabel: true
6dd74de626 ---
6dd74de627 xychart
6dd74de628 title "Sales Revenue"
6dd74de629 x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
6dd74de630 y-axis "Revenue (in $)" 4000 --> 12000
6dd74de631 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 8000, 10000, 5000, 7600, 4999,11000 ,5000,6000]
6dd74de632 `,
6dd74de633 {}
6dd74de634 );
6dd74de635
6dd74de636 cy.get('g.bar-plot-0').within(() => {
6dd74de637 cy.get('rect').each(($rect, index) => {
6dd74de638 // Extract bar properties
6dd74de639 const barProps = {
6dd74de640 x: parseFloat($rect.attr('x')),
6dd74de641 y: parseFloat($rect.attr('y')),
6dd74de642 width: parseFloat($rect.attr('width')),
6dd74de643 height: parseFloat($rect.attr('height')),
6dd74de644 };
6dd74de645
6dd74de646 // Get the text element corresponding to this bar by index.
6dd74de647 cy.get('text')
6dd74de648 .eq(index)
6dd74de649 .then(($text) => {
6dd74de650 const bbox = $text[0].getBBox();
6dd74de651 const textProps = {
6dd74de652 x: bbox.x,
6dd74de653 y: bbox.y,
6dd74de654 width: bbox.width,
6dd74de655 height: bbox.height,
6dd74de656 };
6dd74de657
6dd74de658 // Verify that the text label is positioned within the boundaries of the bar.
6dd74de659 expect(textProps.x).to.be.greaterThan(barProps.x);
6dd74de660 expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
6dd74de661
6dd74de662 // Check horizontal alignment (within tolerance)
6dd74de663 expect(textProps.x + textProps.width / 2).to.be.closeTo(
6dd74de664 barProps.x + barProps.width / 2,
6dd74de665 5
6dd74de666 );
6dd74de667
6dd74de668 expect(textProps.y).to.be.greaterThan(barProps.y);
6dd74de669 expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
6dd74de670 });
6dd74de671 });
6dd74de672 });
6dd74de673 });
6dd74de674
6dd74de675 it('should render data labels within each bar in the horizontal xy-chart with a lot of bars of different sizes', () => {
6dd74de676 imgSnapshotTest(
6dd74de677 `
6dd74de678 ---
6dd74de679 config:
6dd74de680 xyChart:
6dd74de681 showDataLabel: true
6dd74de682 chartOrientation: horizontal
6dd74de683 ---
6dd74de684 xychart
6dd74de685 title "Sales Revenue"
6dd74de686 x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
6dd74de687 y-axis "Revenue (in $)" 4000 --> 12000
6dd74de688 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 8000, 10000, 5000, 7600, 4999,11000 ,5000,6000]
6dd74de689 `,
6dd74de690 {}
6dd74de691 );
6dd74de692
6dd74de693 cy.get('g.bar-plot-0').within(() => {
6dd74de694 cy.get('rect').each(($rect, index) => {
6dd74de695 // Extract bar properties
6dd74de696 const barProps = {
6dd74de697 x: parseFloat($rect.attr('x')),
6dd74de698 y: parseFloat($rect.attr('y')),
6dd74de699 width: parseFloat($rect.attr('width')),
6dd74de700 height: parseFloat($rect.attr('height')),
6dd74de701 };
6dd74de702
6dd74de703 // Get the text element corresponding to this bar by index.
6dd74de704 cy.get('text')
6dd74de705 .eq(index)
6dd74de706 .then(($text) => {
6dd74de707 const bbox = $text[0].getBBox();
6dd74de708 const textProps = {
6dd74de709 x: bbox.x,
6dd74de710 y: bbox.y,
6dd74de711 width: bbox.width,
6dd74de712 height: bbox.height,
6dd74de713 };
6dd74de714
6dd74de715 // Verify that the text label is positioned within the boundaries of the bar.
6dd74de716 expect(textProps.x).to.be.greaterThan(barProps.x);
6dd74de717 expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
6dd74de718
6dd74de719 expect(textProps.y).to.be.greaterThan(barProps.y);
6dd74de720 expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
6dd74de721 expect(textProps.y + textProps.height / 2).to.be.closeTo(
6dd74de722 barProps.y + barProps.height / 2,
6dd74de723 5
6dd74de724 );
6dd74de725 });
6dd74de726 });
6dd74de727 });
6dd74de728 });
6dd74de729
6dd74de730 it('should render data labels correctly for a bar in the vertical xy-chart', () => {
6dd74de731 imgSnapshotTest(
6dd74de732 `
6dd74de733 ---
6dd74de734 config:
6dd74de735 xyChart:
6dd74de736 showDataLabel: true
6dd74de737 ---
6dd74de738 xychart
6dd74de739 title "Sales Revenue"
6dd74de740 x-axis Months [jan]
6dd74de741 y-axis "Revenue (in $)" 3000 --> 12000
6dd74de742 bar [4000]
6dd74de743 `,
6dd74de744 {}
6dd74de745 );
6dd74de746
6dd74de747 cy.get('g.bar-plot-0').within(() => {
6dd74de748 cy.get('rect').each(($rect, index) => {
6dd74de749 // Extract bar properties
6dd74de750 const barProps = {
6dd74de751 x: parseFloat($rect.attr('x')),
6dd74de752 y: parseFloat($rect.attr('y')),
6dd74de753 width: parseFloat($rect.attr('width')),
6dd74de754 height: parseFloat($rect.attr('height')),
6dd74de755 };
6dd74de756
6dd74de757 // Get the text element corresponding to this bar by index.
6dd74de758 cy.get('text')
6dd74de759 .eq(index)
6dd74de760 .then(($text) => {
6dd74de761 const bbox = $text[0].getBBox();
6dd74de762 const textProps = {
6dd74de763 x: bbox.x,
6dd74de764 y: bbox.y,
6dd74de765 width: bbox.width,
6dd74de766 height: bbox.height,
6dd74de767 };
6dd74de768
6dd74de769 // Verify that the text label is positioned within the boundaries of the bar.
6dd74de770 expect(textProps.x).to.be.greaterThan(barProps.x);
6dd74de771 expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
6dd74de772
6dd74de773 // Check horizontal alignment (within tolerance)
6dd74de774 expect(textProps.x + textProps.width / 2).to.be.closeTo(
6dd74de775 barProps.x + barProps.width / 2,
6dd74de776 5
6dd74de777 );
6dd74de778
6dd74de779 expect(textProps.y).to.be.greaterThan(barProps.y);
6dd74de780 expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
6dd74de781 });
6dd74de782 });
6dd74de783 });
6dd74de784 });
6dd74de785
6dd74de786 it('should render data labels correctly for a bar in the horizontal xy-chart', () => {
6dd74de787 imgSnapshotTest(
6dd74de788 `
6dd74de789 ---
6dd74de790 config:
6dd74de791 xyChart:
6dd74de792 showDataLabel: true
6dd74de793 chartOrientation: horizontal
6dd74de794 ---
6dd74de795 xychart
6dd74de796 title "Sales Revenue"
6dd74de797 x-axis Months [jan]
6dd74de798 y-axis "Revenue (in $)" 3000 --> 12000
6dd74de799 bar [4000]
6dd74de800 `,
6dd74de801 {}
6dd74de802 );
6dd74de803
6dd74de804 cy.get('g.bar-plot-0').within(() => {
6dd74de805 cy.get('rect').each(($rect, index) => {
6dd74de806 // Extract bar properties
6dd74de807 const barProps = {
6dd74de808 x: parseFloat($rect.attr('x')),
6dd74de809 y: parseFloat($rect.attr('y')),
6dd74de810 width: parseFloat($rect.attr('width')),
6dd74de811 height: parseFloat($rect.attr('height')),
6dd74de812 };
6dd74de813
6dd74de814 // Get the text element corresponding to this bar by index.
6dd74de815 cy.get('text')
6dd74de816 .eq(index)
6dd74de817 .then(($text) => {
6dd74de818 const bbox = $text[0].getBBox();
6dd74de819 const textProps = {
6dd74de820 x: bbox.x,
6dd74de821 y: bbox.y,
6dd74de822 width: bbox.width,
6dd74de823 height: bbox.height,
6dd74de824 };
6dd74de825
6dd74de826 // Verify that the text label is positioned within the boundaries of the bar.
6dd74de827 expect(textProps.x).to.be.greaterThan(barProps.x);
6dd74de828 expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
6dd74de829
6dd74de830 expect(textProps.y).to.be.greaterThan(barProps.y);
6dd74de831 expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
6dd74de832 expect(textProps.y + textProps.height / 2).to.be.closeTo(
6dd74de833 barProps.y + barProps.height / 2,
6dd74de834 5
6dd74de835 );
6dd74de836 });
6dd74de837 });
6dd74de838 });
6dd74de839 });
6dd74de840});