marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-08 18:16:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into saurabh/refactor-fontawesome-icon-usage

Browse Source
This commit is contained in:
Sidharth Vinod
2025-04-18 12:39:47 -07:00
committed by GitHub
parent 24f23efdad 59b400652b
commit 53e89d97a0
169 changed files with 4174 additions and 1748 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cypress/integration/rendering/architecture.spec.ts
View File

@@ -19,7 +19,7 @@ describe.skip('architecture diagram', () => {
`
);
});
it('should render a simple architecture diagram with titleAndAccessabilities', () => {
it('should render a simple architecture diagram with titleAndAccessibilities', () => {
imgSnapshotTest(
`architecture-beta
title Simple Architecture Diagram

10
cypress/integration/rendering/block.spec.js
View File

@@ -14,7 +14,7 @@ describe('Block diagram', () => {
);
});
it('BL2: should handle colums statement in sub-blocks', () => {
it('BL2: should handle columns statement in sub-blocks', () => {
imgSnapshotTest(
`block-beta
id1["Hello"]
@@ -30,7 +30,7 @@ describe('Block diagram', () => {
);
});
it('BL3: should align block widths and handle colums statement in sub-blocks', () => {
it('BL3: should align block widths and handle columns statement in sub-blocks', () => {
imgSnapshotTest(
`block-beta
block
@@ -46,7 +46,7 @@ describe('Block diagram', () => {
);
});
it('BL4: should align block widths and handle colums statements in deeper sub-blocks then 1 level', () => {
it('BL4: should align block widths and handle columns statements in deeper sub-blocks then 1 level', () => {
imgSnapshotTest(
`block-beta
columns 1
@@ -66,7 +66,7 @@ describe('Block diagram', () => {
);
});
it('BL5: should align block widths and handle colums statements in deeper sub-blocks then 1 level (alt)', () => {
it('BL5: should align block widths and handle columns statements in deeper sub-blocks then 1 level (alt)', () => {
imgSnapshotTest(
`block-beta
columns 1
@@ -236,7 +236,7 @@ describe('Block diagram', () => {
);
});
it('BL17: width alignment - blocks shold be equal in width', () => {
it('BL17: width alignment - blocks should be equal in width', () => {
imgSnapshotTest(
`block-beta
A("This is the text")

6
cypress/integration/rendering/classDiagram.spec.js
View File

@@ -429,7 +429,7 @@ describe('Class diagram', () => {
classDiagram
class \`This\nTitle\nHas\nMany\nNewlines\` {
+String Also
-Stirng Many
-String Many
#int Members
+And()
-Many()
@@ -443,7 +443,7 @@ describe('Class diagram', () => {
classDiagram
class \`This\nTitle\nHas\nMany\nNewlines\` {
+String Also
-Stirng Many
-String Many
#int Members
+And()
-Many()
@@ -459,7 +459,7 @@ describe('Class diagram', () => {
namespace testingNamespace {
class \`This\nTitle\nHas\nMany\nNewlines\` {
+String Also
-Stirng Many
-String Many
#int Members
+And()
-Many()

10
cypress/integration/rendering/flowchart-elk.spec.js
View File

@@ -208,13 +208,13 @@ describe('Flowchart ELK', () => {
`flowchart-elk TB
internet
nat
routeur
router
lb1
lb2
compute1
compute2
subgraph project
routeur
router
nat
subgraph subnet1
compute1
@@ -225,8 +225,8 @@ describe('Flowchart ELK', () => {
lb2
end
end
internet --> routeur
routeur --> subnet1 & subnet2
internet --> router
router --> subnet1 & subnet2
subnet1 & subnet2 --> nat --> internet
`,
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
@@ -443,7 +443,7 @@ flowchart-elk TD
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('63-elk: title on subgraphs should be themable', () => {
it('63-elk: title on subgraphs should be themeable', () => {
imgSnapshotTest(
`
%%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%

22
cypress/integration/rendering/flowchart-v2.spec.js
View File

@@ -198,13 +198,13 @@ describe('Flowchart v2', () => {
`flowchart TB
internet
nat
routeur
router
lb1
lb2
compute1
compute2
subgraph project
routeur
router
nat
subgraph subnet1
compute1
@@ -215,8 +215,8 @@ describe('Flowchart v2', () => {
lb2
end
end
internet --> routeur
routeur --> subnet1 & subnet2
internet --> router
router --> subnet1 & subnet2
subnet1 & subnet2 --> nat --> internet
`,
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
@@ -433,7 +433,7 @@ flowchart TD
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('63: title on subgraphs should be themable', () => {
it('63: title on subgraphs should be themeable', () => {
imgSnapshotTest(
`
%%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
@@ -699,7 +699,7 @@ A --> B
{ flowchart: { titleTopMargin: 10 } }
);
});
it('3192: It should be possieble to render flowcharts with invisible edges', () => {
it('3192: It should be possible to render flowcharts with invisible edges', () => {
imgSnapshotTest(
`---
title: Simple flowchart with invisible edges
@@ -1076,11 +1076,11 @@ end
);
});
});
describe('New @ sytax for node metadata edge cases', () => {
describe('New @ syntax for node metadata edge cases', () => {
it('should be possible to use @ syntax to add labels on multi nodes', () => {
imgSnapshotTest(
`flowchart TB
n2["label for n2"] & n4@{ label: "labe for n4"} & n5@{ label: "labe for n5"}
n2["label for n2"] & n4@{ label: "label for n4"} & n5@{ label: "label for n5"}
`,
{}
);
@@ -1088,7 +1088,7 @@ end
it('should be possible to use @ syntax to add labels with trail spaces and &', () => {
imgSnapshotTest(
`flowchart TB
n2["label for n2"] & n4@{ label: "labe for n4"} & n5@{ label: "labe for n5"}
n2["label for n2"] & n4@{ label: "label for n4"} & n5@{ label: "label for n5"}
`,
{}
);
@@ -1097,8 +1097,8 @@ end
imgSnapshotTest(
`flowchart TB
n2["label for n2"]
n4@{ label: "labe for n4"}
n5@{ label: "labe for n5"}
n4@{ label: "label for n4"}
n5@{ label: "label for n5"}
`,
{}
);

8
cypress/integration/rendering/gantt.spec.js
View File

@@ -117,7 +117,7 @@ describe('Gantt diagram', () => {
{}
);
});
it('should FAIL redering a gantt chart for issue #1060 with invalid date', () => {
it('should FAIL rendering a gantt chart for issue #1060 with invalid date', () => {
imgSnapshotTest(
`
gantt
@@ -573,7 +573,7 @@ describe('Gantt diagram', () => {
`
);
});
it('should render a gantt diagram exculding friday and saturday', () => {
it('should render a gantt diagram excluding friday and saturday', () => {
imgSnapshotTest(
`gantt
title A Gantt Diagram
@@ -584,7 +584,7 @@ describe('Gantt diagram', () => {
A task :a1, 2024-02-28, 10d`
);
});
it('should render a gantt diagram exculding saturday and sunday', () => {
it('should render a gantt diagram excluding saturday and sunday', () => {
imgSnapshotTest(
`gantt
title A Gantt Diagram
@@ -671,7 +671,7 @@ describe('Gantt diagram', () => {
title Gantt Digram
dateFormat YYYY-MM-DD
section Section
;A task with a semiclon :a1, 2014-01-01, 30d
;A task with a semicolon :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d

14
cypress/integration/rendering/gitGraph.spec.js
View File

@@ -11,7 +11,7 @@ describe('Git Graph diagram', () => {
{}
);
});
it('2: should render a simple gitgraph with commit on main branch with Id', () => {
it('2: should render a simple gitgraph with commit on main branch with id', () => {
imgSnapshotTest(
`gitGraph
commit id: "One"
@@ -253,7 +253,7 @@ describe('Git Graph diagram', () => {
`
gitGraph
checkout main
%% Make sure to manually set the ID of all commits, for consistent visual tests
%% Make sure to manually set the id of all commits, for consistent visual tests
commit id: "1-abcdefg"
checkout main
branch branch1
@@ -343,7 +343,7 @@ gitGraph
{}
);
});
it('16: should render a simple gitgraph with commit on main branch with Id | Vertical Branch', () => {
it('16: should render a simple gitgraph with commit on main branch with id | Vertical Branch', () => {
imgSnapshotTest(
`gitGraph TB:
commit id: "One"
@@ -585,7 +585,7 @@ gitGraph
`
gitGraph TB:
checkout main
%% Make sure to manually set the ID of all commits, for consistent visual tests
%% Make sure to manually set the id of all commits, for consistent visual tests
commit id: "1-abcdefg"
checkout main
branch branch1
@@ -1024,7 +1024,7 @@ gitGraph TB:
{}
);
});
it('51: should render a simple gitgraph with commit on main branch with Id | Vertical Branch - Bottom-to-top', () => {
it('51: should render a simple gitgraph with commit on main branch with id | Vertical Branch - Bottom-to-top', () => {
imgSnapshotTest(
`gitGraph BT:
commit id: "One"
@@ -1266,7 +1266,7 @@ gitGraph TB:
`
gitGraph BT:
checkout main
%% Make sure to manually set the ID of all commits, for consistent visual tests
%% Make sure to manually set the id of all commits, for consistent visual tests
commit id: "1-abcdefg"
checkout main
branch branch1
@@ -1491,7 +1491,7 @@ gitGraph TB:
`
gitGraph
switch main
%% Make sure to manually set the ID of all commits, for consistent visual tests
%% Make sure to manually set the id of all commits, for consistent visual tests
commit id: "1-abcdefg"
switch main
branch branch1

34
cypress/integration/rendering/journey.spec.js
View File

@@ -224,4 +224,38 @@ section Checkout from website
});
});
});
it('should correctly render the user journey diagram title with the specified styling', () => {
renderGraph(
`---
config:
journey:
titleColor: "#2900A5"
titleFontFamily: "Times New Roman"
titleFontSize: "5rem"
---
journey
title User Journey Example
section Onboarding
Sign Up: 5: John, Shahir
Complete Profile: 4: John
section Engagement
Browse Features: 3: John
Use Core Functionality: 4: John
section Retention
Revisit Application: 5: John
Invite Friends: 3: John
size: 2rem
`
);
cy.get('text').contains('User Journey Example').as('title');
cy.get('@title').then(($title) => {
expect($title).to.have.attr('fill', '#2900A5');
expect($title).to.have.attr('font-family', 'Times New Roman');
expect($title).to.have.attr('font-size', '5rem');
});
});
});

4
cypress/integration/rendering/kanban.spec.ts
View File

@@ -62,7 +62,7 @@ describe('Kanban diagram', () => {
{}
);
});
it('6: should handle assigments', () => {
it('6: should handle assignments', () => {
imgSnapshotTest(
`kanban
id1[Todo]
@@ -118,7 +118,7 @@ kanban
docs[Create Documentation]
docs[Create Blog about the new diagram]
id7[In progress]
id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
id8[Design grammar]@{ assigned: 'knsv' }
id9[Ready for deploy]
id10[Ready for test]

2
cypress/integration/rendering/mindmap.spec.ts
View File

@@ -146,7 +146,7 @@ root
shouldHaveRoot
);
});
it('text shouhld wrap with icon', () => {
it('text should wrap with icon', () => {
imgSnapshotTest(
`mindmap
root

2
cypress/integration/rendering/pie.spec.ts
View File

@@ -64,7 +64,7 @@ describe('pie chart', () => {
});
});
it('should render a pie diagram when textPosition is setted', () => {
it('should render a pie diagram when textPosition is set', () => {
imgSnapshotTest(
`pie
"Dogs": 50

6
cypress/integration/rendering/quadrantChart.spec.js
View File

@@ -45,7 +45,7 @@ describe('Quadrant Chart', () => {
{}
);
});
it('should able to render y-axix on right side', () => {
it('should able to render y-axis on right side', () => {
imgSnapshotTest(
`
%%{init: {"quadrantChart": {"yAxisPosition": "right"}}}%%
@@ -61,7 +61,7 @@ describe('Quadrant Chart', () => {
{}
);
});
it('should able to render x-axix on bottom', () => {
it('should able to render x-axis on bottom', () => {
imgSnapshotTest(
`
%%{init: {"quadrantChart": {"xAxisPosition": "bottom"}}}%%
@@ -77,7 +77,7 @@ describe('Quadrant Chart', () => {
{}
);
});
it('should able to render x-axix on bottom and y-axis on right', () => {
it('should able to render x-axis on bottom and y-axis on right', () => {
imgSnapshotTest(
`
%%{init: {"quadrantChart": {"xAxisPosition": "bottom", "yAxisPosition": "right"}}}%%

14
cypress/integration/rendering/stateDiagram-v2.spec.js
View File

@@ -138,8 +138,8 @@ describe('State diagram', () => {
imgSnapshotTest(
`
stateDiagram-v2
State1: This a a single line description
State2: This a a multi line description
State1: This a single line description
State2: This a multi line description
State2: here comes the multi part
[*] --> State1
State1 --> State2
@@ -345,7 +345,7 @@ stateDiagram
}
);
});
it('v2 width of compond state should grow with title if title is wider', () => {
it('v2 width of compound state should grow with title if title is wider', () => {
imgSnapshotTest(
`
stateDiagram-v2
@@ -402,8 +402,8 @@ stateDiagram-v2
`
stateDiagram-v2
MyState
note left of MyState : I am a leftie
note right of MyState : I am a rightie
note left of MyState : I am a lefty
note right of MyState : I am a righty
`,
{
logLevel: 0,
@@ -552,7 +552,7 @@ style AState fill:#636,border:1px solid red,color:white;
{ logLevel: 0, fontFamily: 'courier' }
);
});
it(' should let styles take preceedence over classes', () => {
it(' should let styles take precedence over classes', () => {
imgSnapshotTest(
`
stateDiagram-v2
@@ -565,7 +565,7 @@ style AState fill:#636,border:1px solid red,color:white;
{ logLevel: 0, fontFamily: 'courier' }
);
});
it(' should allow styles to take effect in stubgraphs', () => {
it(' should allow styles to take effect in subgraphs', () => {
imgSnapshotTest(
`
stateDiagram

4
cypress/integration/rendering/stateDiagram.spec.js
View File

@@ -129,8 +129,8 @@ describe('State diagram', () => {
imgSnapshotTest(
`
stateDiagram
State1: This a a single line description
State2: This a a multi line description
State1: This a single line description
State2: This a multi line description
State2: here comes the multi part
[*] --> State1
State1 --> State2

18
cypress/integration/rendering/timeline.spec.ts
View File

@@ -7,7 +7,7 @@ describe('Timeline diagram', () => {
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : Youtube
2005 : YouTube
2006 : Twitter
`,
{}
@@ -35,7 +35,7 @@ describe('Timeline diagram', () => {
section Stone Age
7600 BC : Britain's oldest known house was built in Orkney, Scotland
6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.
section Broze Age
section Bronze Age
2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.
: New styles of pottery and ways of burying the dead appear.
2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.
@@ -51,7 +51,7 @@ describe('Timeline diagram', () => {
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : Youtube
2005 : YouTube
2006 : Twitter
`,
{}
@@ -68,7 +68,7 @@ describe('Timeline diagram', () => {
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : Youtube
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
@@ -84,7 +84,7 @@ describe('Timeline diagram', () => {
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : Youtube
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
@@ -101,7 +101,7 @@ describe('Timeline diagram', () => {
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : Youtube
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
@@ -118,7 +118,7 @@ describe('Timeline diagram', () => {
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : Youtube
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
@@ -135,7 +135,7 @@ describe('Timeline diagram', () => {
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : Youtube
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
@@ -152,7 +152,7 @@ describe('Timeline diagram', () => {
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : Youtube
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram

513
cypress/integration/rendering/xyChart.spec.js
View File

@@ -179,6 +179,7 @@ describe('XY Chart', () => {
axisLineWidth: 5
chartOrientation: horizontal
plotReservedSpacePercent: 60
showDataLabel: true
---
xychart-beta
title "Sales Revenue"
@@ -315,4 +316,516 @@ describe('XY Chart', () => {
);
cy.get('svg');
});
it('should render vertical bar chart with labels', () => {
imgSnapshotTest(
`
---
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]
`,
{}
);
});
it('should render horizontal bar chart with labels', () => {
imgSnapshotTest(
`
---
config:
xyChart:
showDataLabel: true
chartOrientation: horizontal
---
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 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(
`
---
config:
xyChart:
chartOrientation: horizontal
---
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 multiple bar plots vertically with labels correctly', () => {
imgSnapshotTest(
`
---
config:
xyChart:
showDataLabel: true
---
xychart-beta
title "Multiple Bar Plots"
x-axis Categories [A, B, C]
y-axis "Values" 0 --> 100
bar [10, 50, 90]
`,
{}
);
});
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(
`
---
config:
xyChart:
showDataLabel: true
---
xychart-beta
title "Single Bar Chart"
x-axis Categories [A]
y-axis "Value" 0 --> 100
bar [75]
`,
{}
);
});
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(
`
---
config:
xyChart:
showDataLabel: true
---
xychart-beta
title "Decimal and Negative Values"
x-axis Categories [A, B, C]
y-axis -10 --> 10
bar [ -2.5, 0.75, 5.1 ]
`,
{}
);
});
it('should render negative and decimal values with correct labels for horizontal xy-chart', () => {
imgSnapshotTest(
`
---
config:
xyChart:
showDataLabel: true
chartOrientation: horizontal
---
xychart-beta
title "Decimal and Negative Values"
x-axis Categories [A, B, C]
y-axis -10 --> 10
bar [ -2.5, 0.75, 5.1 ]
`,
{}
);
});
it('should render data labels within each bar in the vertical xy-chart', () => {
imgSnapshotTest(
`
---
config:
xyChart:
showDataLabel: true
---
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);
// Check horizontal alignment (within tolerance)
expect(textProps.x + textProps.width / 2).to.be.closeTo(
barProps.x + barProps.width / 2,
5
);
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', () => {
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,
5
);
});
});
});
});
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,
5
);
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(
`
---
config:
xyChart:
showDataLabel: true
chartOrientation: horizontal
---
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);
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,
5
);
});
});
});
});
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,
5
);
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 correctly for a bar in the horizontal xy-chart', () => {
imgSnapshotTest(
`
---
config:
xyChart:
showDataLabel: true
chartOrientation: horizontal
---
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);
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,
5
);
});
});
});
});
});