From 13359db606036f4a648f74f0e9d74c975fde6646 Mon Sep 17 00:00:00 2001
From: Sonja Happ <sonja.happ@eonerc.rwth-aachen.de>
Date: Mon, 20 Jul 2020 15:00:09 +0200
Subject: [PATCH] Improve displaying of signal scalingFactor for Plot, Table,
 Value and Gauge widgets; closes #248

---
 src/styles/widgets.css                | 16 ++++++++++++
 src/widget/widget-plot/plot-legend.js | 32 +++++++++++++++++++----
 src/widget/widgets/gauge.js           | 28 +++++++++++++++-----
 src/widget/widgets/table.js           | 37 +++++++++++++++++++--------
 src/widget/widgets/value.js           | 11 +++++++-
 5 files changed, 100 insertions(+), 24 deletions(-)

diff --git a/src/styles/widgets.css b/src/styles/widgets.css
index 102a311..78996ab 100644
--- a/src/styles/widgets.css
+++ b/src/styles/widgets.css
@@ -181,6 +181,22 @@ span.signal-unit::after {
     font-style: normal;
 }
 
+span.signal-scale {
+    color: grey;
+    font-style: italic;
+    font-weight: 200;
+}
+
+span.signal-scale::before {
+    content: '(x';
+    font-style: italic;
+}
+
+span.signal-scale::after {
+    content: ')';
+    font-style: italic;
+}
+
 /* End Plots */
 
 .single-value-widget {
diff --git a/src/widget/widget-plot/plot-legend.js b/src/widget/widget-plot/plot-legend.js
index 5ac618c..75add6d 100644
--- a/src/widget/widget-plot/plot-legend.js
+++ b/src/widget/widget-plot/plot-legend.js
@@ -19,17 +19,39 @@ import React from 'react';
 import { scaleOrdinal} from 'd3-scale';
 import {schemeCategory10} from 'd3-scale-chromatic'
 
+function Legend(props){
+  const signal = props.sig;
+  const hasScalingFactor = (signal.scalingFactor !== 1);
+
+
+  if(hasScalingFactor){
+    return (
+      <li key={signal.id} className="signal-legend" style={{ color: props.colorScale(signal.id) }}>
+      <span className="signal-legend-name">{signal.name}</span>
+      <span style={{ marginLeft: '0.3em' }} className="signal-unit">{signal.unit}</span>
+      <span style={{ marginLeft: '0.3em' }} className="signal-scale">{signal.scalingFactor}</span>
+      </li>
+    )
+  } else {
+    return (
+      <li key={signal.id} className="signal-legend" style={{ color: props.colorScale(signal.id) }}>
+        <span className="signal-legend-name">{signal.name}</span>
+        <span style={{ marginLeft: '0.3em' }} className="signal-unit">{signal.unit}</span>
+      </li>
+    )
+  }
+
+}
+
 class PlotLegend extends React.Component {
   render() {
     const colorScale = scaleOrdinal(schemeCategory10);
 
     return <div className="plot-legend">
       <ul>
-        {this.props.signals.map(signal =>
-          <li key={signal.id} className="signal-legend" style={{ color: colorScale(signal.id) }}>
-            <span className="signal-legend-name">{signal.name + "(x" + signal.scalingFactor + ")"}</span>
-            <span style={{ marginLeft: '0.3em' }} className="signal-unit">{signal.unit}</span>
-          </li>
+        {
+          this.props.signals.map( signal =>
+             <Legend key={signal.id} sig={signal} colorScale={colorScale}/>
         )}
       </ul>
     </div>;
diff --git a/src/widget/widgets/gauge.js b/src/widget/widgets/gauge.js
index 629784e..e1f8bfc 100644
--- a/src/widget/widgets/gauge.js
+++ b/src/widget/widgets/gauge.js
@@ -29,6 +29,7 @@ class WidgetGauge extends Component {
     this.state = {
       value: 0,
       unit: '',
+      scalingFactor: 1.0,
       signalID: '',
       minValue: null,
       maxValue: null,
@@ -96,6 +97,7 @@ class WidgetGauge extends Component {
       // Update unit (assuming there is exactly one signal for this widget)
       if (signal !== undefined) {
         returnState["unit"] = signal[0].unit;
+        returnState["scalingFactor"] = signal[0].scalingFactor;
       }
 
       // update value
@@ -105,7 +107,11 @@ class WidgetGauge extends Component {
         || props.data[icID] == null
         || props.data[icID].output == null
         || props.data[icID].output.values == null) {
-        return {value: 0, minValue: 0, maxValue: 10};
+
+        returnState["value"] = 0;
+        returnState["minValue"] = 0;
+        returnState["maxValue"] = 10;
+        return returnState;
       }
 
       // memorize if min or max value is updated
@@ -183,12 +189,14 @@ class WidgetGauge extends Component {
           returnState["maxValue"] = maxValue;
         }
 
-        if (returnState !== {}) {
-          return returnState;
-        } else {
-          return null;
-        }
+
       } // if there is signal data
+
+      if (JSON.stringify(returnState) !== JSON.stringify({})) {
+        return returnState;
+      } else {
+        return null;
+      }
     }
     return null;
 
@@ -248,13 +256,19 @@ class WidgetGauge extends Component {
 
   render() {
     const componentClass = this.props.editing ? "gauge-widget editing" : "gauge-widget";
+    let scaleText = "";
+    if(this.state.scalingFactor !== 1){
+      scaleText = " (x" + this.state.scalingFactor + ")"
+    }
 
     return (
       <div className={componentClass}>
           <div className="gauge-name">{this.props.widget.name}</div>
           <canvas ref={node => this.gaugeCanvas = node} />
-          <div className="gauge-unit">{this.state.unit}</div>
+          <div className="gauge-unit">{this.state.unit + scaleText}</div>
           <div className="gauge-value">{this.state.value}</div>
+
+
       </div>
     );
   }
diff --git a/src/widget/widgets/table.js b/src/widget/widgets/table.js
index 3ecc59a..2a31cc8 100644
--- a/src/widget/widgets/table.js
+++ b/src/widget/widgets/table.js
@@ -41,22 +41,27 @@ class WidgetTable extends Component {
           // determine ID of infrastructure component related to signal (via config)
           let icID = props.icIDs[sig.id]
 
-          let signalName = sig.name;
-          if(sig.scalingFactor !== 1.0){
-            signalName = signalName + "(x" + String(sig.scalingFactor) + ")";
-          }
-
           // distinguish between input and output signals
           if (sig.direction === "out") {
             if (props.data[icID] != null && props.data[icID].output != null && props.data[icID].output.values != null) {
               if (props.data[icID].output.values[sig.index-1] !== undefined) {
+                console.log("Table: sig", sig)
                 let data = props.data[icID].output.values[sig.index-1];
                 rows.push({
-                  name: signalName,
+                  name: sig.name,
                   unit: sig.unit,
-                  value: data[data.length - 1].y * sig.scalingFactor
+                  value: data[data.length - 1].y * sig.scalingFactor,
+                  scalingFactor: sig.scalingFactor
                 });
 
+              } else {
+                // no data available
+                rows.push({
+                  name: sig.name,
+                  unit: sig.unit,
+                  value: NaN,
+                  scalingFactor: sig.scalingFactor
+                })
               }
             }
           } else if (sig.direction === "in") {
@@ -64,10 +69,19 @@ class WidgetTable extends Component {
               if (props.data[icID].input.values[sig.index-1] !== undefined) {
                 let data = props.data[icID].input.values[sig.index-1];
                 rows.push({
-                  name: signalName,
+                  name: sig.name,
                   unit: sig.unit,
-                  value: data[data.length - 1].y * sig.scalingFactor
+                  value: data[data.length - 1].y * sig.scalingFactor,
+                  scalingFactor: sig.scalingFactor
                 });
+              } else {
+                // no data available
+                rows.push({
+                  name: sig.name,
+                  unit: sig.unit,
+                  value: NaN,
+                  scalingFactor: sig.scalingFactor
+                })
               }
             }
           }
@@ -91,11 +105,12 @@ class WidgetTable extends Component {
 
     var columns = [
       <TableColumn key={1} title="Signal" dataKey="name" width={120} />,
-      <TableColumn key={2} title="Value" dataKey="value" modifier={format('.4f')} />
+      <TableColumn key={2} title="Value" dataKey="value" modifier={format('.4f')} />,
+      <TableColumn key={3} title="Scale" dataKey="scalingFactor" modifier={format('.2f')} />
     ];
 
     if (this.props.widget.customProperties.showUnit)
-      columns.push(<TableColumn key={3} title="Unit" dataKey="unit" />)
+      columns.push(<TableColumn key={4} title="Unit" dataKey="unit" />)
 
     return (
       <div className="table-widget" style={{width: this.props.widget.width, height: this.props.widget.height, overflowY: 'auto'}}>
diff --git a/src/widget/widgets/value.js b/src/widget/widgets/value.js
index 482a94f..22a1629 100644
--- a/src/widget/widgets/value.js
+++ b/src/widget/widgets/value.js
@@ -24,7 +24,8 @@ class WidgetValue extends Component {
 
     this.state = {
       value: '',
-      unit: ''
+      unit: '',
+      scalingFactor: 1.0
     };
   }
 
@@ -54,13 +55,16 @@ class WidgetValue extends Component {
 
       // Update unit (assuming there is exactly one signal for this widget)
       let unit = '';
+      let scalingFactor = ''
       if (signal !== undefined) {
         unit = signal[0].unit;
+        scalingFactor = signal[0].scalingFactor
       }
 
       return {
         value: value,
         unit: unit,
+        scalingFactor: scalingFactor
       };
     }
 
@@ -72,6 +76,7 @@ class WidgetValue extends Component {
     let value_to_render = Number(this.state.value);
     let value_width = this.props.widget.customProperties.textSize*(Math.abs(value_to_render) < 1000 ? (5):(8));
     let unit_width = this.props.widget.customProperties.textSize*(this.state.unit.length + 0.7);
+    const showScalingFactor = (this.state.scalingFactor !== 1);
     return (
       <div className="single-value-widget">
         <strong style={{ fontSize: this.props.widget.customProperties.textSize + 'px', flex: '1 1 auto'}}>{this.props.widget.name}</strong>
@@ -79,6 +84,10 @@ class WidgetValue extends Component {
         {this.props.widget.customProperties.showUnit &&
           <span style={{ fontSize: this.props.widget.customProperties.textSize + 'px', flex: 'none',  width: unit_width}}>[{this.state.unit}]</span>
         }
+        {showScalingFactor &&
+          <span style={{ fontSize: this.props.widget.customProperties.textSize + 'px', flex: 'none', marginLeft: '0.2em' }} className="signal-scale">{this.state.scalingFactor}</ span>
+        }
+
       </div>
     );
   }