Add proper min-max scaling to plots and gauges

src/components/home.js

@@ -43,7 +43,6 @@ class Home extends React.Component {
   componentWillMount() {
     RestAPI.get('/api/v1/counts').then(response => {
       this.setState({ counts: response });
-      console.log(response);
     });
   }
 

src/components/widget-gauge.js

@@ -19,19 +19,19 @@ class WidgetGauge extends Component {
 
     this.state = {
       value: 0,
-      minValue: 0,
-      maxValue: 1
+      minValue: null,
+      maxValue: null
     };
   }
 
   componentDidMount() {
     this.gauge = new Gauge(this.gaugeCanvas).setOptions(this.computeGaugeOptions(this.props.widget));
-    this.gauge.maxValue = this.state.maxValue;
-    this.gauge.setMinValue(this.state.minValue);
+    //this.gauge.maxValue = this.state.maxValue;
+    //this.gauge.setMinValue(this.state.minValue);
     this.gauge.animationSpeed = 30;
-    this.gauge.set(this.state.value);
+    //this.gauge.set(this.state.value);
 
-    this.updateLabels(this.state.minValue, this.state.maxValue);
+    //this.updateLabels(this.state.minValue, this.state.maxValue);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -52,7 +52,7 @@ class WidgetGauge extends Component {
     // Take just 3 decimal positions
     // Note: Favor this method over Number.toFixed(n) in order to avoid a type conversion, since it returns a String
     if (signal != null) {
-      const value = Math.round( signal[signal.length - 1].y * 1e3 ) / 1e3;
+      const value = Math.round(signal[signal.length - 1].y * 1e3) / 1e3;
       if (this.state.value !== value && value != null) {
         this.setState({ value });
 
@@ -61,6 +61,22 @@ class WidgetGauge extends Component {
         let minValue = this.state.minValue;
         let maxValue = this.state.maxValue;
 
+        if (minValue == null) {
+          minValue = value - 0.5;
+          updateLabels = true;
+
+          this.setState({ minValue });
+          this.gauge.setMinValue(minValue);
+        }
+
+        if (maxValue == null) {
+          maxValue = value + 0.5;
+          updateLabels = true;
+
+          this.setState({ maxValue });
+          this.gauge.maxValue = maxValue;
+        }
+
         if (nextProps.widget.valueUseMinMax) {
           if (this.state.minValue > nextProps.widget.valueMin) {
             minValue = nextProps.widget.valueMin;

src/components/widget-plot/plot.js

@@ -24,7 +24,13 @@ class Plot extends React.Component {
 
     // create dummy axes
     const xScale = scaleTime().domain([Date.now() - props.time * 1000, Date.now()]).range([leftMargin, props.width]);
-    const yScale = scaleLinear().domain([0, 10]).range([props.height, bottomMargin]);
+    let yScale;
+
+    if (props.yUseMinMax) {
+      yScale = scaleLinear().domain([props.yMin, props.yMax]).range([props.height, bottomMargin]);
+    } else {
+      yScale = scaleLinear().domain([0, 10]).range([props.height, bottomMargin]);
+    }
 
     const xAxis = axisBottom().scale(xScale).ticks(5).tickFormat(date => timeFormat("%M:%S")(date));
     const yAxis = axisLeft().scale(yScale).ticks(5);
@@ -38,19 +44,29 @@ class Plot extends React.Component {
   }
 
   componentDidMount() {
-    this.interval = setInterval(this.tick, 50);
+    this.createInterval();
   }
 
   componentWillUnmount() {
-    clearInterval(this.interval);
+    this.removeInterval();
   }
 
   componentWillReceiveProps(nextProps) {
-    // check if data is valid
+    if (nextProps.time !== this.props.time) {
+      this.createInterval();
+    }
+
+    // check if data is invalid
     if (nextProps.data == null || nextProps.data.length === 0 || nextProps.data[0].length === 0) {
       // create empty plot axes
       const xScale = scaleTime().domain([Date.now() - 5 * nextProps.time * 1000, Date.now()]).range([leftMargin, nextProps.width]);
-      const yScale = scaleLinear().domain([0, 10]).range([nextProps.height, bottomMargin]);
+      let yScale;
+      
+      if (nextProps.yUseMinMax) {
+        yScale = scaleLinear().domain([nextProps.yMin, nextProps.yMax]).range([nextProps.height, bottomMargin]);
+      } else {
+        yScale = scaleLinear().domain([0, 10]).range([nextProps.height, bottomMargin]);
+      }
   
       const xAxis = axisBottom().scale(xScale).ticks(5).tickFormat(date => timeFormat("%M:%S")(date));
       const yAxis = axisLeft().scale(yScale).ticks(5);
@@ -72,25 +88,46 @@ class Plot extends React.Component {
     this.setState({ data });
   }
 
+  createInterval() {
+    this.removeInterval();
+
+    if (this.props.time < 30) {
+      this.interval = setInterval(this.tick, 50);
+    } else if (this.props.time < 120) {
+      this.interval = setInterval(this.tick, 100);
+    } else if (this.props.time < 300) {
+      this.interval = setInterval(this.tick, 200);
+    } else {
+      this.interval = setInterval(this.tick, 1000);
+    }
+  }
+
+  removeInterval() {
+    if (this.interval != null) {
+      clearInterval(this.interval);
+
+      this.interval = null;
+    }
+  }
+
   tick = () => {
     if (this.state.data == null || this.props.paused === true) {
       return;
     }
 
     // calculate yRange
-    let yRange;
+    let yRange = [0, 0];
     
     if (this.props.yUseMinMax) {
       yRange = [this.props.yMin, this.props.yMax];
-    } else {
-      yRange = [0, 0];
+    } else if (this.props.data.length > 0) {
+      yRange = [this.props.data[0][0].y, this.props.data[0][0].y];
 
-      this.props.data.map(values => {
+      this.props.data.forEach(values => {
         const range = extent(values, p => p.y);
+
         if (range[0] < yRange[0]) yRange[0] = range[0];
         if (range[1] > yRange[1]) yRange[1] = range[1];
-
-        return values;
       });
     }
 

src/containers/visualization.js

@@ -127,8 +127,6 @@ class Visualization extends React.Component {
   }
 
   handleKeydown(e) {
-    console.log(e);
-
     switch (e.key) {
       case ' ':
       case 'p':

src/data-managers/simulator-data-data-manager.js

@@ -93,13 +93,13 @@ class SimulatorDataDataManager {
       return null;
     }
 
-    let OFFSET_TYPE = 2;
-    let OFFSET_VERSION = 4;
+    const OFFSET_TYPE = 2;
+    const OFFSET_VERSION = 4;
 
-    var id = data.getUint8(1);
-    var bits = data.getUint8(0);
-    var length = data.getUint16(0x02, 1);
-    var bytes = length * 4 + 16;
+    const id = data.getUint8(1);
+    const bits = data.getUint8(0);
+    const length = data.getUint16(0x02, 1);
+    const bytes = length * 4 + 16;
 
     return {
       version: (bits >> OFFSET_VERSION) & 0xF,
@@ -108,19 +108,19 @@ class SimulatorDataDataManager {
       sequence: data.getUint32(0x04, 1),
       timestamp: data.getUint32(0x08, 1) * 1e3 + data.getUint32(0x0C, 1) * 1e-6,
       values: new Float32Array(data.buffer, data.byteOffset + 0x10, length),
-      blob: new DataView(    data.buffer, data.byteOffset + 0x00, bytes),
+      blob: new DataView(data.buffer, data.byteOffset + 0x00, bytes),
       id: id
     };
   }
 
   bufferToMessageArray(blob) {
     /* some local variables for parsing */
-    var offset = 0;
-    var msgs = [];
+    let offset = 0;
+    const msgs = [];
 
     /* for every msg in vector */
     while (offset < blob.byteLength) {
-      var msg = this.bufferToMessage(new DataView(blob, offset));
+      const msg = this.bufferToMessage(new DataView(blob, offset));
 
       if (msg !== undefined) {
         msgs.push(msg);