From 3c32acb406e2b0690d3d4bdaa2b85db66b7d2812 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Thu, 10 Jun 2021 10:30:46 +0200
Subject: [PATCH] StatPanel: Fixes issue with graph look when switching color
 mode (#35460)

---
 .../src/components/Sparkline/Sparkline.tsx    | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/grafana-ui/src/components/Sparkline/Sparkline.tsx b/packages/grafana-ui/src/components/Sparkline/Sparkline.tsx
index 476f58acfee..cfb321c3bf8 100755
--- a/packages/grafana-ui/src/components/Sparkline/Sparkline.tsx
+++ b/packages/grafana-ui/src/components/Sparkline/Sparkline.tsx
@@ -70,20 +70,21 @@ export class Sparkline extends PureComponent<SparklineProps, State> {
 
   componentDidUpdate(prevProps: SparklineProps, prevState: State) {
     const { alignedDataFrame } = this.state;
-    let stateUpdate = {};
+
+    if (!alignedDataFrame) {
+      return;
+    }
+
+    let rebuildConfig = false;
 
     if (prevProps.sparkline !== this.props.sparkline) {
-      if (!alignedDataFrame) {
-        return;
-      }
-      const hasStructureChanged = !compareDataFrameStructures(this.state.alignedDataFrame, prevState.alignedDataFrame);
-      if (hasStructureChanged) {
-        const configBuilder = this.prepareConfig(alignedDataFrame);
-        stateUpdate = { configBuilder };
-      }
+      rebuildConfig = !compareDataFrameStructures(this.state.alignedDataFrame, prevState.alignedDataFrame);
+    } else if (prevProps.config !== this.props.config) {
+      rebuildConfig = true;
     }
-    if (Object.keys(stateUpdate).length > 0) {
-      this.setState(stateUpdate);
+
+    if (rebuildConfig) {
+      this.setState({ configBuilder: this.prepareConfig(alignedDataFrame) });
     }
   }