diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.js b/packages/mermaid/src/diagrams/pie/pieRenderer.js index 5c420d331..06ed54174 100644 --- a/packages/mermaid/src/diagrams/pie/pieRenderer.js +++ b/packages/mermaid/src/diagrams/pie/pieRenderer.js @@ -4,14 +4,9 @@ import { log } from '../../logger.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import * as configApi from '../../config.js'; import { parseFontSize } from '../../utils.js'; +import { getTextWidth } from '../../rendering-util/getTextWidth.js'; let conf = configApi.getConfig(); -// https://stackoverflow.com/a/35373030/3469145 -const getTextWidth = (function () { - const canvas = document.createElement('canvas') - const context = canvas.getContext('2d') - return text => context.measureText(text).width * window.devicePixelRatio -})(); /** * Draws a Pie Chart with the data given in text. @@ -79,15 +74,14 @@ export const draw = (txt, id, _version, diagObj) => { sum += data[key]; }); - const legendShowData = diagObj.db.getShowData() || conf.showData || conf.pie.showData; + const legendShowData = diagObj.db.getShowData() || conf.showData || conf.pie.showData || false; const legendTexts = Object.keys(data).map(key => { if (!legendShowData) { return key; } - return key + ' [' + data[key] + ']'; + return `${key} [${data[key]}]`; }) - const legendTextWidths = legendTexts.map(v => getTextWidth(v)).sort((a, b) => a - b); - const longestTextWidth = parseInt(legendTextWidths.pop()); + const longestTextWidth = Math.max(...(legendTexts.map(v => getTextWidth(v)))); const newWidth = width + margin + legendRectSize + legendSpacing + longestTextWidth; elem.setAttribute("viewBox", "0 0 " + newWidth + " " + height); diff --git a/packages/mermaid/src/rendering-util/getTextWidth.js b/packages/mermaid/src/rendering-util/getTextWidth.js new file mode 100644 index 000000000..f2976a852 --- /dev/null +++ b/packages/mermaid/src/rendering-util/getTextWidth.js @@ -0,0 +1,7 @@ +// https://stackoverflow.com/a/35373030/3469145 +const canvas = document.createElement('canvas'); +const context = canvas.getContext('2d'); + +const getTextWidth = (text) => context.measureText(text).width * window.devicePixelRatio; + +export { getTextWidth };