fix: adjust piechart viewbox for mobile devices with small width

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

@@ -6,6 +6,12 @@ import * as configApi from '../../config';
 import { parseFontSize } from '../../utils';
 
 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.
@@ -72,6 +78,14 @@ export const draw = (txt, id, _version, diagObj) => {
     Object.keys(data).forEach(function (key) {
       sum += data[key];
     });
+    const legendShowData = diagObj.db.getShowData() || conf.showData || conf.pie.showData;
+    const longestLegendText = Object.keys(data).map(key => {
+      if (!legendShowData) return key;
+      return key + ' [' + data[key] + ']';
+    }).sort((a, b) => a.length - b.length).pop();
+    const maxLegendTextWidth = getTextWidth(longestLegendText);
+    const newWidth = width + margin + legendRectSize + legendSpacing + maxLegendTextWidth;
+    elem.setAttribute("viewBox", "0 0 " + newWidth + " " + height);
 
     const themeVariables = conf.themeVariables;
     var myGeneratedColors = [