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

adds test and horizontal support

Browse Source 
Co-authored-by: pranavm2109 <mishrap@dickinson.edu>
This commit is contained in:
Shahir Ahmed
2025-03-27 23:09:27 -04:00
parent 17fcf43cdb
commit f2f2a1d275
2 changed files with 134 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
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,113 @@ describe('XY Chart', () => {
);
cy.get('svg');
});
it('should render bar labels by default', () => {
imgSnapshotTest(
`
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 when showLabelData is false', () => {
imgSnapshotTest(
`
---
config:
xyChart:
showLabelData: false
---
xychart-beta
title "No Label Chart"
x-axis Categories [A, B, C]
y-axis "Values" 0 --> 100
bar [10, 50, 90]
`,
{}
);
});
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 horizontal bar chart without labels', () => {
imgSnapshotTest(
`
---
config:
xyChart:
showDataLabel: false
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 with labels correctly', () => {
// In this test, we create two bar plots. The default config should render labels for each.
imgSnapshotTest(
`
xychart-beta
title "Multiple Bar Plots"
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', () => {
imgSnapshotTest(
`
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', () => {
imgSnapshotTest(
`
xychart-beta
title "Decimal and Negative Values"
x-axis Categories [A, B, C]
y-axis -10 --> 10
bar [ -2.5, 0.75, 5.1 ]
`,
{}
);
});
});

34
packages/mermaid/src/diagrams/xychart/xychartRenderer.ts
View File

@@ -90,16 +90,30 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram
.attr('stroke-width', (data) => data.strokeWidth);
if (chartConfig.showDataLabel) {
shapeGroup
.selectAll('text')
.data(shape.data)
.enter()
.append('text')
.attr('x', (data) => data.x + data.width / 2) // Center text horizontally
.attr('y', (data) => data.y + 25) // Position text 5 pixels above the rect
.attr('text-anchor', 'middle')
.attr('fill', 'black')
.text((data, index) => labelData[index]);
if (chartConfig.chartOrientation === 'horizontal') {
shapeGroup
.selectAll('text')
.data(shape.data)
.enter()
.append('text')
.attr('x', (data) => data.x + data.width - 50)
.attr('y', (data) => data.y + data.height / 2 + 1)
.attr('text-anchor', 'start')
.attr('dominant-baseline', 'middle')
.attr('fill', 'black')
.text((data, index) => labelData[index]);
} else {
shapeGroup
.selectAll('text')
.data(shape.data)
.enter()
.append('text')
.attr('x', (data) => data.x + data.width / 2)
.attr('y', (data) => data.y + 25)
.attr('text-anchor', 'middle')
.attr('fill', 'black')
.text((data, index) => labelData[index]);
}
}
break;
case 'text':