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

adds dynamic text adjustment

Browse Source 
Co-authored-by: pranavm2109 <mishrap@dickinson.edu>
This commit is contained in:
Shahir Ahmed
2025-03-28 16:04:51 -04:00
parent f2f2a1d275
commit ad6f855f5e
1 changed files with 36 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -91,18 +91,52 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram
if (chartConfig.showDataLabel) {
if (chartConfig.chartOrientation === 'horizontal') {
// Append a temporary group to measure the widths of the texts
const tempGroup = svg.append('g').attr('class', 'temp-label-group');
// Append texts temporarily to measure their widths
const tempTexts = tempGroup
.selectAll('text')
.data(labelData)
.enter()
.append('text')
.attr('font-size', (data, i) => shape.data[i].height * 0.7)
.text((d) => d);
// Measure widths and determine the font size & actual widths
const measured = tempTexts.nodes().map((node, i) => {
const bbox = node.getBBox();
return {
width: bbox.width,
height: bbox.height,
fontSize: shape.data[i].height * 0.7,
};
});
const uniformFontSize = Math.floor(Math.min(...measured.map((m) => m.fontSize)));
const longestTextWidth = Math.max(...measured.map((m) => m.width));
// Clean up temp texts
tempGroup.remove();
shapeGroup
.selectAll('text')
.data(shape.data)
.enter()
.append('text')
.attr('x', (data) => data.x + data.width - 50)
.attr('x', (data) => data.x + data.width - longestTextWidth - 5)
.attr('y', (data) => data.y + data.height / 2 + 1)
.attr('text-anchor', 'start')
.attr('dominant-baseline', 'middle')
.attr('fill', 'black')
.attr('font-size', `${uniformFontSize}px`)
.text((data, index) => labelData[index]);
} else {
// Compute candidate font sizes for each bar using width only.
const candidateFontSizes = shape.data.map((data, index) => {
const label = labelData[index].toString();
return data.width / (label.length * 0.6);
});
// Use the smallest font size for uniformity.
const uniformFontSize = Math.floor(Math.min(...candidateFontSizes));
shapeGroup
.selectAll('text')
.data(shape.data)
@@ -112,6 +146,7 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram
.attr('y', (data) => data.y + 25)
.attr('text-anchor', 'middle')
.attr('fill', 'black')
.attr('font-size', `${uniformFontSize}px`)
.text((data, index) => labelData[index]);
}
}