diff --git a/cypress/integration/rendering/xyChart.spec.js b/cypress/integration/rendering/xyChart.spec.js index 418420e4f..ebe9c7906 100644 --- a/cypress/integration/rendering/xyChart.spec.js +++ b/cypress/integration/rendering/xyChart.spec.js @@ -316,34 +316,21 @@ describe('XY Chart', () => { ); cy.get('svg'); }); - it('should render bar labels when showDataLabel is set to true', () => { - imgSnapshotTest( - ` - --- - config: - themeVariables: - xyChart: - showDataLabel: true - --- - xychart-beta - title "Default Label Chart" - x-axis Categories [A, B, C] - y-axis "Values" 0 --> 100 - bar [10, 50, 90] - `, - {} - ); - }); - it('should not render bar labels by default', () => { + it('should render vertical bar chart with labels', () => { imgSnapshotTest( ` - xychart-beta - title "No Label Chart" - x-axis Categories [A, B, C] - y-axis "Values" 0 --> 100 - bar [10, 50, 90] - `, + --- + config: + xyChart: + showDataLabel: true + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + `, {} ); }); @@ -367,7 +354,20 @@ describe('XY Chart', () => { ); }); - it('should render horizontal bar chart without labels', () => { + it('should render vertical bar chart without labels by default', () => { + imgSnapshotTest( + ` + xychart-beta + title "Sales Revenue" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + `, + {} + ); + }); + + it('should render horizontal bar chart without labels by default', () => { imgSnapshotTest( ` --- @@ -385,8 +385,7 @@ describe('XY Chart', () => { ); }); - it('should render multiple bar plots with labels correctly', () => { - // In this test, we create two bar plots. The default config should render labels for each. + it('should render multiple bar plots vertically with labels correctly', () => { imgSnapshotTest( ` --- @@ -399,13 +398,31 @@ describe('XY Chart', () => { x-axis Categories [A, B, C] y-axis "Values" 0 --> 100 bar [10, 50, 90] - bar [20, 60, 80] `, {} ); }); - it('should render a single bar with label', () => { + it('should render multiple bar plots horizontally with labels correctly', () => { + imgSnapshotTest( + ` + --- + config: + xyChart: + showDataLabel: true + chartOrientation: horizontal + --- + xychart-beta + title "Multiple Bar Plots" + x-axis Categories [A, B, C] + y-axis "Values" 0 --> 100 + bar [10, 50, 90] + `, + {} + ); + }); + + it('should render a single bar with label for a vertical xy-chart', () => { imgSnapshotTest( ` --- @@ -423,7 +440,26 @@ describe('XY Chart', () => { ); }); - it('should render negative and decimal values with correct labels', () => { + it('should render a single bar with label for a horizontal xy-chart', () => { + imgSnapshotTest( + ` + --- + config: + xyChart: + showDataLabel: true + chartOrientation: horizontal + --- + xychart-beta + title "Single Bar Chart" + x-axis Categories [A] + y-axis "Value" 0 --> 100 + bar [75] + `, + {} + ); + }); + + it('should render negative and decimal values with correct labels for vertical xy-chart', () => { imgSnapshotTest( ` --- @@ -441,7 +477,7 @@ describe('XY Chart', () => { ); }); - it('should render data labels within each bar in the horizontal xy-chart', () => { + it('should render negative and decimal values with correct labels for horizontal xy-chart', () => { imgSnapshotTest( ` --- @@ -450,50 +486,14 @@ describe('XY Chart', () => { showDataLabel: true chartOrientation: horizontal --- - xychart-beta - title "Sales Revenue" - x-axis Months [jan,b,c] - y-axis "Revenue (in $)" 4000 --> 12000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 3000, 2000, 500, 2000, 3000, 11000, 5000, 6000] - `, + xychart-beta + title "Decimal and Negative Values" + x-axis Categories [A, B, C] + y-axis -10 --> 10 + bar [ -2.5, 0.75, 5.1 ] + `, {} ); - - cy.get('g.bar-plot-0').within(() => { - cy.get('rect').each(($rect, index) => { - // Extract bar properties - const barProps = { - x: parseFloat($rect.attr('x')), - y: parseFloat($rect.attr('y')), - width: parseFloat($rect.attr('width')), - height: parseFloat($rect.attr('height')), - }; - - // Get the text element corresponding to this bar by index. - cy.get('text') - .eq(index) - .then(($text) => { - const bbox = $text[0].getBBox(); - const textProps = { - x: bbox.x, - y: bbox.y, - width: bbox.width, - height: bbox.height, - }; - - // Verify that the text label is positioned within the boundaries of the bar. - expect(textProps.x).to.be.greaterThan(barProps.x); - expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width); - - expect(textProps.y).to.be.greaterThan(barProps.y); - expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height); - expect(textProps.y + textProps.height / 2).to.be.closeTo( - barProps.y + barProps.height / 2, - 1 - ); - }); - }); - }); }); it('should render data labels within each bar in the vertical xy-chart', () => { @@ -552,7 +552,118 @@ describe('XY Chart', () => { }); }); - it('should render data labels within each bar in the horizontal xy-chart with multiple bars of different sizes', () => { + it('should render data labels within each bar in the horizontal xy-chart', () => { + imgSnapshotTest( + ` + --- + config: + xyChart: + showDataLabel: true + chartOrientation: horizontal + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan,b,c] + y-axis "Revenue (in $)" 4000 --> 12000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 3000, 2000, 500, 2000, 3000, 11000, 5000, 6000] + `, + {} + ); + + cy.get('g.bar-plot-0').within(() => { + cy.get('rect').each(($rect, index) => { + // Extract bar properties + const barProps = { + x: parseFloat($rect.attr('x')), + y: parseFloat($rect.attr('y')), + width: parseFloat($rect.attr('width')), + height: parseFloat($rect.attr('height')), + }; + + // Get the text element corresponding to this bar by index. + cy.get('text') + .eq(index) + .then(($text) => { + const bbox = $text[0].getBBox(); + const textProps = { + x: bbox.x, + y: bbox.y, + width: bbox.width, + height: bbox.height, + }; + + // Verify that the text label is positioned within the boundaries of the bar. + expect(textProps.x).to.be.greaterThan(barProps.x); + expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width); + + expect(textProps.y).to.be.greaterThan(barProps.y); + expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height); + expect(textProps.y + textProps.height / 2).to.be.closeTo( + barProps.y + barProps.height / 2, + 1 + ); + }); + }); + }); + }); + + it('should render data labels within each bar in the vertical xy-chart with a lot of bars of different sizes', () => { + imgSnapshotTest( + ` + --- + config: + xyChart: + showDataLabel: true + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s] + y-axis "Revenue (in $)" 4000 --> 12000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 8000, 10000, 5000, 7600, 4999,11000 ,5000,6000] + `, + {} + ); + + cy.get('g.bar-plot-0').within(() => { + cy.get('rect').each(($rect, index) => { + // Extract bar properties + const barProps = { + x: parseFloat($rect.attr('x')), + y: parseFloat($rect.attr('y')), + width: parseFloat($rect.attr('width')), + height: parseFloat($rect.attr('height')), + }; + + // Get the text element corresponding to this bar by index. + cy.get('text') + .eq(index) + .then(($text) => { + const bbox = $text[0].getBBox(); + const textProps = { + x: bbox.x, + y: bbox.y, + width: bbox.width, + height: bbox.height, + }; + + // Verify that the text label is positioned within the boundaries of the bar. + expect(textProps.x).to.be.greaterThan(barProps.x); + expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width); + + // Check horizontal alignment (within tolerance) + expect(textProps.x + textProps.width / 2).to.be.closeTo( + barProps.x + barProps.width / 2, + 1 + ); + + expect(textProps.y).to.be.greaterThan(barProps.y); + expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height); + }); + }); + }); + }); + + it('should render data labels within each bar in the horizontal xy-chart with a lot of bars of different sizes', () => { imgSnapshotTest( ` --- @@ -607,19 +718,19 @@ describe('XY Chart', () => { }); }); - it('should render data labels within each bar in the vertical xy-chart', () => { + it('should render data labels correctly for a bar in the vertical xy-chart', () => { imgSnapshotTest( ` - --- - config: - xyChart: - showDataLabel: true - --- - xychart-beta - title "Sales Revenue" - x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s] - y-axis "Revenue (in $)" 4000 --> 12000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 8000, 10000, 5000, 7600, 4999,11000 ,5000,6000] + --- + config: + xyChart: + showDataLabel: true + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan] + y-axis "Revenue (in $)" 3000 --> 12000 + bar [4000] `, {} ); @@ -717,60 +828,4 @@ describe('XY Chart', () => { }); }); }); - - it('should render data labels correctly for a bar in the vertical xy-chart', () => { - imgSnapshotTest( - ` - --- - config: - xyChart: - showDataLabel: true - --- - xychart-beta - title "Sales Revenue" - x-axis Months [jan] - y-axis "Revenue (in $)" 3000 --> 12000 - bar [4000] - `, - {} - ); - - cy.get('g.bar-plot-0').within(() => { - cy.get('rect').each(($rect, index) => { - // Extract bar properties - const barProps = { - x: parseFloat($rect.attr('x')), - y: parseFloat($rect.attr('y')), - width: parseFloat($rect.attr('width')), - height: parseFloat($rect.attr('height')), - }; - - // Get the text element corresponding to this bar by index. - cy.get('text') - .eq(index) - .then(($text) => { - const bbox = $text[0].getBBox(); - const textProps = { - x: bbox.x, - y: bbox.y, - width: bbox.width, - height: bbox.height, - }; - - // Verify that the text label is positioned within the boundaries of the bar. - expect(textProps.x).to.be.greaterThan(barProps.x); - expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width); - - // Check horizontal alignment (within tolerance) - expect(textProps.x + textProps.width / 2).to.be.closeTo( - barProps.x + barProps.width / 2, - 1 - ); - - expect(textProps.y).to.be.greaterThan(barProps.y); - expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height); - }); - }); - }); - }); });