Add max size to pie chart + toggle off raw data when switching viz (#10509)

* Add max size to pie chart, toggle isShowingRawTable = false when switching viz

* reduce pie max size to 550

frontend/src/metabase/query_builder/components/view/sidebars/ChartTypeSidebar.jsx

@@ -23,6 +23,7 @@ const ChartTypeSidebar = ({
   onOpenChartSettings,
   onCloseChartType,
   isShowingChartTypeSidebar,
+  setUIControls,
   ...props
 }) => {
   const other = Array.from(visualizations)
@@ -61,6 +62,7 @@ const ChartTypeSidebar = ({
                   onClick={() => {
                     question.setDisplay(type).update(null, { reload: false });
                     onOpenChartSettings({ section: t`Data` });
+                    setUIControls({ isShowingRawTable: false });
                   }}
                 />
               )

frontend/src/metabase/visualizations/visualizations/PieChart.jsx

@@ -30,6 +30,8 @@ import cx from "classnames";
 import d3 from "d3";
 import _ from "underscore";
 
+const MAX_PIE_SIZE = 550;
+
 const OUTER_RADIUS = 50; // within 100px canvas
 const INNER_RADIUS_RATIO = 3 / 5;
 
@@ -411,8 +413,12 @@ export default class PieChart extends Component {
             </div>
             <div className={styles.Title}>{title}</div>
           </div>
-          <div className={styles.Chart}>
-            <svg className={styles.Donut + " m1"} viewBox="0 0 100 100">
+          <div className={cx(styles.Chart, "layout-centered")}>
+            <svg
+              className={cx(styles.Donut, "m1")}
+              viewBox="0 0 100 100"
+              style={{ maxWidth: MAX_PIE_SIZE, maxHeight: MAX_PIE_SIZE }}
+            >
               <g ref="group" transform={`translate(50,50)`}>
                 {pie(slices).map((slice, index) => (
                   <path