show signals legend in plot table widget

src/components/widget-plot-table.js

@@ -160,7 +160,8 @@ class WidgetPlotTable extends Component {
 
     // Make tick count proportional to the plot width using a rough scale ratio
     var tickCount = Math.round(this.state.size.w / 80);
-    
+    var colorScale = scaleOrdinal(schemeCategory10);
+
     return (
       <div className="plot-table-widget" ref="wrapper">
         <h4>{this.props.widget.name}</h4>
@@ -190,11 +191,14 @@ class WidgetPlotTable extends Component {
                 domain={{ x: [this.state.firstTimestamp, this.state.latestTimestamp] }}
               />
             }
-            <div>
-              { 
-                this.state.signals.map((signal) => 
-                  ({signal} + ',')
-                )
+            <div className="plot-legend">
+              {
+                this.state.preselectedSignals.reduce( (accum, signal, i) => {
+                    if (this.state.signals.includes(signal.index)) {
+                      accum.push(<div key={signal.index} className="signal-legend"><span className="legend-color" style={{ background: colorScale(signal.index) }}>&nbsp;&nbsp;</span> {signal.name} </div>)
+                    }
+                    return accum;
+                  }, [])
               }
             </div>
           </div>

src/styles/widgets.css

@@ -119,12 +119,36 @@
 }
 
 .plot-table-widget .checkbox label {
+    height: 100%;
+    width: 100%;
+    padding: 6px 12px;
+}
+
+.plot-table-widget .btn {
     padding: 0px;
 }
 
 .plot-table-widget input[type="checkbox"] {
     display: none;
 }
+
+.plot-table-widget .plot-legend {
+  display: -webkit-flex;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.plot-table-widget .signal-legend {
+    font-size: 0.8em;
+    font-weight: 700;
+}
+
+.plot-table-widget .legend-color {
+    height: 50%;
+    display: inline-block;
+    vertical-align: middle;
+} 
 /* End PlotTable Widget */
 
 /* Reset Bootstrap styles to "disable" while editing */