From 6ced9552218614baa0418d34d3daa511fa11685f Mon Sep 17 00:00:00 2001
From: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
Date: Fri, 7 Apr 2017 18:27:35 +0200
Subject: [PATCH] issue #49 scale signal table with names

---
 src/components/widget-plot-table.js | 70 +++++++++++++++--------------
 src/styles/widgets.css              | 30 ++++++++-----
 2 files changed, 56 insertions(+), 44 deletions(-)

diff --git a/src/components/widget-plot-table.js b/src/components/widget-plot-table.js
index 13a6119..3f67bc6 100644
--- a/src/components/widget-plot-table.js
+++ b/src/components/widget-plot-table.js
@@ -175,43 +175,45 @@ class WidgetPlotTable extends Component {
         <h4>{this.props.widget.name}</h4>
 
         <div className="content">
-          <div className="widget-table">
-            { checkBoxes.length > 0 ? (
-              <FormGroup className="btn-group-vertical">
-                { checkBoxes }
-              </FormGroup>
-              ) : ( <small>No signal found, select a different signal type.</small> )
-            }
-          </div>
+          <div className="table-plot-row">
+            <div className="widget-table">
+              { checkBoxes.length > 0 ? (
+                <FormGroup className="btn-group-vertical">
+                  { checkBoxes }
+                </FormGroup>
+                ) : ( <small>No signal found, select a different signal type.</small> )
+              }
+            </div>
 
-          <div className="widget-plot">
-            <div className="chart-wrapper" ref={ (domNode) => this.chartWrapper = domNode }>
-              {this.state.sequence &&
-                <LineChart
-                  width={ this.state.size.w || 100 }
-                  height={ this.state.size.h || 100 }
-                  data={this.state.values }
-                  colors={ scaleOrdinal(schemeCategory10) }
-                  gridHorizontal={true}
-                  xAccessor={(d) => { if (d != null) { return new Date(d.x); } }}
-                  xAxisTickCount={ tickCount }
-                  hoverAnimation={false}
-                  circleRadius={0}
-                  domain={{ x: [this.state.firstTimestamp, this.state.latestTimestamp] }}
-                />
-              }
-            </div>
-            <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 className="widget-plot">
+              <div className="chart-wrapper" ref={ (domNode) => this.chartWrapper = domNode }>
+                {this.state.sequence &&
+                  <LineChart
+                    width={ this.state.size.w || 100 }
+                    height={ this.state.size.h || 100 }
+                    data={this.state.values }
+                    colors={ scaleOrdinal(schemeCategory10) }
+                    gridHorizontal={true}
+                    xAccessor={(d) => { if (d != null) { return new Date(d.x); } }}
+                    xAxisTickCount={ tickCount }
+                    hoverAnimation={false}
+                    circleRadius={0}
+                    domain={{ x: [this.state.firstTimestamp, this.state.latestTimestamp] }}
+                  />
+                }
+              </div>
             </div>
           </div>
+          <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>
       </div>
     );
diff --git a/src/styles/widgets.css b/src/styles/widgets.css
index 14e554d..c4958f0 100644
--- a/src/styles/widgets.css
+++ b/src/styles/widgets.css
@@ -144,14 +144,25 @@ div[class*="-widget"] .btn[disabled], .btn.disabled, div[class*="-widget"] input
 }
 
 .plot-table-widget .content {
-  display: -webkit-flex;
-  display: flex;
   -webkit-flex: 1 0 auto;
   flex: 1 0 auto;
+  display: -webkit-flex;
+  display: flex;
+  flex-direction: column;
+}
+
+.table-plot-row {
+  -webkit-flex: 1 0 auto;
+  flex: 1 0 auto;
+  display: -webkit-flex;
+  display: flex;
 }
 
 .plot-table-widget .widget-table {
-  width: 100px;
+  /*width: 100px;*/
+  -webkit-flex: 1 0 auto;
+  flex: 1 0 auto;
+  max-width: 50%;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -165,6 +176,7 @@ div[class*="-widget"] .btn[disabled], .btn.disabled, div[class*="-widget"] input
     height: 100%;
     width: 100%;
     padding: 6px 12px;
+    overflow-x: hidden;
 }
 
 .plot-table-widget .btn {
@@ -186,6 +198,7 @@ div[class*="-widget"] .btn[disabled], .btn.disabled, div[class*="-widget"] input
 .plot-table-widget .signal-legend {
     font-size: 0.8em;
     font-weight: 700;
+    overflow-x: hidden;
 }
 
 .plot-table-widget .legend-color {
@@ -195,16 +208,13 @@ div[class*="-widget"] .btn[disabled], .btn.disabled, div[class*="-widget"] input
 } 
  
 .plot-table-widget .widget-plot {
-  display: -webkit-flex;
-  display: flex;
-  flex-direction: column;
-  -webkit-flex: 1 0 auto;
-  flex: 1 0 auto;
+  -webkit-flex: 1 1 auto;
+  flex: 1 1 auto;
 }
 
 .plot-table-widget .chart-wrapper {
-  -webkit-flex: 1 0 auto;
-  flex: 1 0 auto;
+  height: 100%;
+  width: 100%;
 }
 /* End PlotTable Widget */