fix: Adjust piechart viewbox for mobile devices with small width

packages/mermaid/src/diagrams/pie/pieRenderer.js

@@ -4,6 +4,7 @@ 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();
 
@@ -70,6 +71,17 @@ export const draw = (txt, id, _version, diagObj) => {
       sum += data[key];
     });
 
+    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]}]`;
+    })
+    const longestTextWidth = Math.max(...(legendTexts.map(v => getTextWidth(v))));
+    const newWidth = width + margin + legendRectSize + legendSpacing + longestTextWidth;
+    elem.setAttribute("viewBox", "0 0 " + newWidth + " " + height);
+
     const themeVariables = conf.themeVariables;
     var myGeneratedColors = [
       themeVariables.pie1,

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 };