Merge pull request #16077 from grafana/gauge-change-options-render

Re-render gauge / singlestat panels when changing options

public/app/plugins/panel/bargauge/BarGaugePanel.tsx

@@ -32,8 +32,7 @@ export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
   };
 
   render() {
-    const { height, width, options, panelData } = this.props;
-    const { orientation } = options;
+    const { height, width, options, panelData, renderCounter } = this.props;
     return (
       <ProcessedValuesRepeater
         getProcessedValues={this.getProcessedValues}
@@ -41,7 +40,8 @@ export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
         width={width}
         height={height}
         source={panelData}
-        orientation={orientation}
+        renderCounter={renderCounter}
+        orientation={options.orientation}
       />
     );
   }

public/app/plugins/panel/gauge/GaugePanel.tsx

@@ -37,8 +37,7 @@ export class GaugePanel extends PureComponent<PanelProps<GaugeOptions>> {
   };
 
   render() {
-    const { height, width, options, panelData } = this.props;
-    const { orientation } = options;
+    const { height, width, options, panelData, renderCounter } = this.props;
     return (
       <ProcessedValuesRepeater
         getProcessedValues={this.getProcessedValues}
@@ -46,7 +45,8 @@ export class GaugePanel extends PureComponent<PanelProps<GaugeOptions>> {
         width={width}
         height={height}
         source={panelData}
-        orientation={orientation}
+        renderCounter={renderCounter}
+        orientation={options.orientation}
       />
     );
   }

public/app/plugins/panel/singlestat2/ProcessedValuesRepeater.tsx

@@ -7,7 +7,7 @@ export interface Props<T> {
   height: number;
   orientation: VizOrientation;
   source: any; // If this changes, the values will be processed
-  processFlag?: boolean; // change to force processing
+  renderCounter: number; // change to force processing
 
   getProcessedValues: () => T[];
   renderValue: (value: T, width: number, height: number) => JSX.Element;
@@ -30,8 +30,8 @@ export class ProcessedValuesRepeater<T> extends PureComponent<Props<T>, State<T>
   }
 
   componentDidUpdate(prevProps: Props<T>) {
-    const { processFlag, source } = this.props;
-    if (processFlag !== prevProps.processFlag || source !== prevProps.source) {
+    const { renderCounter, source } = this.props;
+    if (renderCounter !== prevProps.renderCounter || source !== prevProps.source) {
       this.setState({ values: this.props.getProcessedValues() });
     }
   }

public/app/plugins/panel/singlestat2/SingleStatPanel.tsx

@@ -50,8 +50,7 @@ export class SingleStatPanel extends PureComponent<PanelProps<SingleStatOptions>
   };
 
   render() {
-    const { height, width, options, panelData } = this.props;
-    const { orientation } = options;
+    const { height, width, options, panelData, renderCounter } = this.props;
     return (
       <ProcessedValuesRepeater
         getProcessedValues={this.getProcessedValues}
@@ -59,7 +58,8 @@ export class SingleStatPanel extends PureComponent<PanelProps<SingleStatOptions>
         width={width}
         height={height}
         source={panelData}
-        orientation={orientation}
+        renderCounter={renderCounter}
+        orientation={options.orientation}
       />
     );
   }