From d163d93cd05fd9a7669eb3b185f12006f1d36ff9 Mon Sep 17 00:00:00 2001
From: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
Date: Thu, 20 Apr 2017 15:06:17 +0200
Subject: [PATCH] Gauge: restrict updates to value changes, gauge updated
 directly.

---
 src/components/widget-gauge.js | 29 +++++++++++++++++++----------
 src/containers/widget.js       |  2 +-
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/widget-gauge.js b/src/components/widget-gauge.js
index a61c3e8..b4365fe 100644
--- a/src/components/widget-gauge.js
+++ b/src/components/widget-gauge.js
@@ -23,7 +23,7 @@ class WidgetGauge extends Component {
   }
 
   staticLabels(widget_height) {
-    var label_font_size = widget_height * 0.055; // font scaling factor
+    let label_font_size = Math.floor(widget_height * 0.055); // font scaling factor, integer for performance
     return {
           font: label_font_size + 'px "Helvetica Neue"',
           labels: [0.0, 0.1, 0.5, 0.9, 1.0],
@@ -58,17 +58,18 @@ class WidgetGauge extends Component {
     this.gauge.set(this.state.value);
   }
 
-  componentWillUpdate() {
-    // Update labels after possible resize
-    this.gauge.setOptions({ staticLabels: this.staticLabels(this.props.widget.height) });
+  shouldComponentUpdate(nextProps, nextState) {
+
+    // Check if size changed, resize labels if it did (the canvas itself is scaled with css)
+    if (this.props.widget.height !== nextProps.widget.height) {
+      this.updateAfterResize(nextProps.widget.height);
+    }
+
+    // signal component update only if the value changed
+    return this.state.value !== nextState.value;
   }
 
-  componentDidUpdate() {
-    // update gauge's value
-    this.gauge.set(this.state.value);
-  }
-
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps) {    
     // update value
     const simulator = nextProps.widget.simulator;
 
@@ -84,9 +85,17 @@ class WidgetGauge extends Component {
     const new_value = Math.round( signal[signal.length - 1].y * 1e3 ) / 1e3; 
     if (this.state.value !== new_value) {
       this.setState({ value: new_value });
+      
+      // update gauge's value
+      this.gauge.set(new_value);
     }
   }
 
+  updateAfterResize(newHeight) {
+    // Update labels after resize
+    this.gauge.setOptions({ staticLabels: this.staticLabels(newHeight) });
+  }
+
   render() {
     var componentClass = this.props.editing ? "gauge-widget editing" : "gauge-widget";
     var signalType = null;
diff --git a/src/containers/widget.js b/src/containers/widget.js
index 1b55f94..89323b1 100644
--- a/src/containers/widget.js
+++ b/src/containers/widget.js
@@ -77,7 +77,7 @@ class Widget extends Component {
 
   resizeStop(direction, styleSize, clientSize, delta) {
     // update widget
-    var widget = this.props.data;
+    let widget = Object.assign({}, this.props.data);
 
     // resize depends on direction
     if (direction === 'left' || direction === 'topLeft' || direction === 'bottomLeft') {