Gauge: don't animate on chart settings

frontend/src/metabase/meta/types/Visualization.js

@@ -84,6 +84,7 @@ export type VisualizationProps = {
   showTitle: boolean,
   isDashboard: boolean,
   isEditing: boolean,
+  isSettings: boolean,
   actionButtons: Node,
 
   onRender: ({

frontend/src/metabase/visualizations/components/ChartSettings.jsx

@@ -174,9 +174,10 @@ class ChartSettings extends Component {
                 <Visualization
                   className="spread"
                   rawSeries={series}
-                  isEditing
                   showTitle
+                  isEditing
                   isDashboard
+                  isSettings
                   showWarnings
                   onUpdateVisualizationSettings={this.handleChangeSettings}
                   onUpdateWarnings={warnings => this.setState({ warnings })}

frontend/src/metabase/visualizations/components/Visualization.jsx

@@ -57,6 +57,7 @@ type Props = {
   showTitle: boolean,
   isDashboard: boolean,
   isEditing: boolean,
+  isSettings: boolean,
 
   actionButtons: Element<any>,
 
@@ -136,6 +137,7 @@ export default class Visualization extends Component {
     showTitle: false,
     isDashboard: false,
     isEditing: false,
+    isSettings: false,
     onUpdateVisualizationSettings: (...args) =>
       console.warn("onUpdateVisualizationSettings", args),
   };

frontend/src/metabase/visualizations/visualizations/Gauge.jsx

@@ -150,6 +150,7 @@ export default class Gauge extends Component {
       series: [{ data: { rows, cols } }],
       settings,
       className,
+      isSettings,
     } = this.props;
 
     const width = this.props.width;
@@ -252,7 +253,10 @@ export default class Gauge extends Component {
                 />
               ))}
               {/* NEEDLE */}
-              <GaugeNeedle angle={angle(this.state.mounted ? value : 0)} />
+              <GaugeNeedle
+                angle={angle(this.state.mounted ? value : 0)}
+                isAnimated={!isSettings}
+              />
               {/* NUMBER LABELS */}
               {showLabels &&
                 numberLabels.map((value, index) => (
@@ -337,13 +341,13 @@ const GaugeArc = ({ start, end, fill, segment, onHoverChange }) => {
   );
 };
 
-const GaugeNeedle = ({ angle }) => (
+const GaugeNeedle = ({ angle, isAnimated = true }) => (
   <path
     d={`M-${ARROW_BASE} 0 L0 -${ARROW_HEIGHT} L${ARROW_BASE} 0 Z`}
     transform={`translate(0,-${INNER_RADIUS}) rotate(${degrees(
       angle,
     )}, 0, ${INNER_RADIUS})`}
-    style={{ transition: "transform 1.5s ease-in-out" }}
+    style={isAnimated ? { transition: "transform 1.5s ease-in-out" } : null}
     stroke={ARROW_STROKE_COLOR}
     strokeWidth={ARROW_STROKE_THICKNESS}
     fill={ARROW_FILL_COLOR}