contain everything within plot table widget

src/components/widget-plot-table.js

@@ -17,6 +17,8 @@ import { FormGroup, Checkbox } from 'react-bootstrap';
 class WidgetPlotTable extends Component {
   constructor(props) {
     super(props);
+    
+    this.chartWrapper = null;
 
     this.state = {
       size: { w: 0, h: 0 },
@@ -33,8 +35,14 @@ class WidgetPlotTable extends Component {
     // check data
     const simulator = nextProps.widget.simulator;
 
-    // plot size
-    this.setState({ size: { w: this.props.widget.width - 100, h: this.props.widget.height - 20 }});
+    // handle plot size
+    const w = this.chartWrapper.offsetWidth - 20;
+    const h = this.chartWrapper.offsetHeight - 20;
+    const currentSize = this.state.size;
+    if (w !== currentSize.w || h !== currentSize.h) {
+        this.setState({size: { w, h } });
+    }
+    // this.setState({ size: { w: this.props.widget.width - 100, h: this.props.widget.height - 77 }});
 
     // Update internal selected signals state with props (different array objects)
     if (this.props.widget.signals !== nextProps.widget.signals) {
@@ -177,20 +185,22 @@ class WidgetPlotTable extends Component {
           </div>
 
           <div className="widget-plot">
-            {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 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) => {

src/containers/visualization.js

@@ -166,9 +166,9 @@ class Visualization extends Component {
       widget.preselectedSignals = [];
       widget.signals = []; // initialize selected signals
       widget.minWidth = 400;
-      widget.minHeight = 200;
+      widget.minHeight = 300;
       widget.width = 500;
-      widget.height = 400;
+      widget.height = 500;
       widget.time = 60
     } else if (item.name === 'Image') {
       widget.minWidth = 100;

src/styles/widgets.css

@@ -101,14 +101,21 @@
     border: 1px solid lightgray;
 }
 
+.plot-table-widget {
+  display: -webkit-flex;
+  display: flex;
+  flex-direction: column;
+}
+
 .plot-table-widget .content {
   display: -webkit-flex;
   display: flex;
-  height: 100%;
+  -webkit-flex: 1 0 auto;
+  flex: 1 0 auto;
 }
 
 .plot-table-widget .widget-table {
-  min-width: 100px;
+  width: 100px;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -137,6 +144,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
+  margin-bottom: 5px;
 }
 
 .plot-table-widget .signal-legend {
@@ -169,6 +177,14 @@ div[class*="-widget"] .btn[disabled], .btn.disabled, div[class*="-widget"] input
  /* End reset */
  
 .plot-table-widget .widget-plot {
+  display: -webkit-flex;
+  display: flex;
+  flex-direction: column;
+  -webkit-flex: 1 0 auto;
+  flex: 1 0 auto;
+}
+
+.plot-table-widget .chart-wrapper {
   -webkit-flex: 1 0 auto;
   flex: 1 0 auto;
 }