add showUnit property to customProperties of plot widget #313

src/dashboard/dashboard.js

@@ -186,17 +186,17 @@ class Dashboard extends Component {
   componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS) {
     // open web sockets if ICs are already known and sockets are not opened yet
     if (this.state.ics !== undefined && !Dashboard.webSocketsOpened) {
-    // only open sockets of ICs with configured input or output signals
-    let relevantICs = this.state.ics.filter(ic => {
-      let result = false;
-      this.state.configs.forEach(config => {
-        if(ic.id === config.icID && (config.inputLength !== 0 || config.outputLength !== 0)){
-          result = true;
-        }
+      // only open sockets of ICs with configured input or output signals
+      let relevantICs = this.state.ics.filter(ic => {
+        let result = false;
+        this.state.configs.forEach(config => {
+          if(ic.id === config.icID && (config.inputLength !== 0 || config.outputLength !== 0)){
+            result = true;
+          }
+        })
+        return result;
       })
-      return result;
-    })
-    
+
       if (relevantICs.length > 0) {
         console.log("Starting to open IC websockets:", relevantICs);
         AppDispatcher.dispatch({

src/widget/edit-widget/edit-widget-control-creator.js

@@ -74,7 +74,8 @@ export default function CreateControls(widgetType = null, widget = null, session
                 <EditWidgetSignalsControl key={1} widget={widget} controlId={'signalIDs'}  signals={signals} handleChange={(e) => handleChange(e)} direction={'out'}/>,
                 <EditWidgetPlotColorsControl key={2} widget={widget} controlId={'customProperties.lineColors'} signals={signals} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetTextControl key={3} widget={widget} controlId={'customProperties.ylabel'} label={'Y-Axis name'} placeholder={'Enter a name for the y-axis'}  handleChange={(e) => handleChange(e)} />,
-                <EditWidgetMinMaxControl key={4} widget={widget} controlId="customProperties.y" handleChange={e => handleChange(e)} />
+                <EditWidgetCheckboxControl key={4} widget={widget} controlId={'customProperties.showUnit'} input text="Show unit" handleChange={e => handleChange(e)} />,
+                <EditWidgetMinMaxControl key={5} widget={widget} controlId="customProperties.y" handleChange={e => handleChange(e)} />
             );
             break;
         case 'Table':

src/widget/widget-factory.js

@@ -90,6 +90,7 @@ class WidgetFactory {
                 widget.customProperties.yMax = 10;
                 widget.customProperties.yUseMinMax = false;
                 widget.customProperties.lineColors = [];
+                widget.customProperties.showUnit = false;
                 break;
             case 'Table':
                 widget.minWidth = 200;
@@ -150,7 +151,7 @@ class WidgetFactory {
                 widget.customProperties.rangeMin = 0;
                 widget.customProperties.rangeMax = 200;
                 widget.customProperties.rangeUseMinMax = true;
-                widget.customProperties.showUnit = true;
+                widget.customProperties.showUnit = false;
                 widget.customProperties.continous_update = false;
                 widget.customProperties.default_value = '0';
                 widget.customProperties.value = '';

src/widget/widget-plot/plot-legend.js

@@ -26,22 +26,13 @@ function Legend(props){
 
   let color = typeof props.lineColor === "undefined" ? schemeCategory10[props.index % 10] : props.lineColor;
 
-  if(hasScalingFactor){
-    return (
-      <li key={signal.id} className="signal-legend" style={{ color: color }}>
-      <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: color }}>
-        <span className="signal-legend-name">{signal.name}</span>
-        <span style={{ marginLeft: '0.3em' }} className="signal-unit">{signal.unit}</span>
-      </li>
-    )
-  }
+  return (
+    <li key={signal.id} className="signal-legend" style={{ color: color }}>
+    <span className="signal-legend-name">{signal.name}</span>
+      {props.showUnit ? <span style={{marginLeft: '0.3em'}} className="signal-unit">{signal.unit}</span> : <></> }
+      {hasScalingFactor ? <span style={{ marginLeft: '0.3em' }} className="signal-scale">{signal.scalingFactor}</span> : <></>}
+    </li>
+  )
 }
 
 class PlotLegend extends React.Component {
@@ -51,10 +42,10 @@ class PlotLegend extends React.Component {
       <ul>
         { this.props.lineColors !== undefined && this.props.lineColors != null ? (
           this.props.signals.map( (signal, idx) =>
-             <Legend key={signal.id} sig={signal} index={idx} lineColor={this.props.lineColors[idx]}/>
+             <Legend key={signal.id} sig={signal} showUnit={this.props.showUnit} index={idx} lineColor={this.props.lineColors[idx]}/>
         )) : (
-          this.props.signals.map( signal =>
-            <Legend key={signal.id} sig={signal} index={idx} lineColor={"undefined"}/>
+          this.props.signals.map( (signal, idx) =>
+            <Legend key={signal.id} sig={signal} showUnit={this.props.showUnit} index={idx} lineColor={"undefined"}/>
           ))
         }
       </ul>

src/widget/widgets/plot.js

@@ -107,7 +107,10 @@ class WidgetPlot extends React.Component {
           signalIDs={this.props.widget.signalIDs}
         />
       </div>
-      <PlotLegend signals={this.state.signals} lineColors={this.props.widget.customProperties.lineColors} />
+      <PlotLegend
+        signals={this.state.signals}
+        lineColors={this.props.widget.customProperties.lineColors}
+        showUnit={this.props.widget.customProperties.showUnit} />
     </div>;
   }
 }