From 0449c33dd6237ecd50f64bdd38d15c106b4a6784 Mon Sep 17 00:00:00 2001
From: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
Date: Fri, 7 Apr 2017 16:02:31 +0200
Subject: [PATCH] show signals legend in plot table widget

---
 src/components/widget-plot-table.js | 16 ++++++++++------
 src/styles/widgets.css              | 24 ++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/components/widget-plot-table.js b/src/components/widget-plot-table.js
index 734b051..0905ba9 100644
--- a/src/components/widget-plot-table.js
+++ b/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>
diff --git a/src/styles/widgets.css b/src/styles/widgets.css
index e43c7ef..90bee10 100644
--- a/src/styles/widgets.css
+++ b/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 */