responsive plot table

src/components/widget-plot-table.js

@@ -9,7 +9,6 @@
 
 import React, { Component } from 'react';
 import { LineChart } from 'rd3';
-import { Col } from 'react-bootstrap';
 
 import Table from './table';
 import TableColumn from './table-column';
@@ -19,6 +18,7 @@ class WidgetPlotTable extends Component {
     super(props);
 
     this.state = {
+      size: { w: 0, h: 0 },
       signal: 0,
       firstTimestamp: 0,
       latestTimestamp: 0,
@@ -32,6 +32,9 @@ 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 }});
+
     if (nextProps.simulation == null || nextProps.data == null || nextProps.data[simulator] == null || nextProps.data[simulator].length === 0 || nextProps.data[simulator].values[0].length === 0) {
       // clear values
       this.setState({ values: [], sequence: null, rows: [] });
@@ -81,20 +84,21 @@ class WidgetPlotTable extends Component {
 
   render() {
     return (
-      <div style={{ width: '100%', height: '100%' }} ref="wrapper">
+      <div className="plot-table-widget" style={{ width: '100%', height: '100%' }} ref="wrapper">
         <h4>{this.props.widget.name}</h4>
 
-        <Col xs={3}>
+        <div className="content">
+          <div className="widget-table">
             <Table data={this.state.rows}>
               <TableColumn title="Signal" dataKey="name" clickable onClick={(index) => this.setState({ signal: index }) } />
             </Table>
-        </Col>
+          </div>
 
-        <Col xs={4}>
+          <div className="widget-plot">
             {this.state.sequence &&
               <LineChart
-              width={400}
-              height={this.props.widget.height - 20}
+                width={ this.state.size.w || 100 }
+                height={ this.state.size.h || 100 }
                 data={this.state.values}
                 gridHorizontal={true}
                 xAccessor={(d) => { if (d != null) { return new Date(d.x); } }}
@@ -103,7 +107,8 @@ class WidgetPlotTable extends Component {
                 domain={{ x: [this.state.firstTimestamp, this.state.latestTimestamp] }}
               />
             }
-        </Col>
+          </div>
+        </div>
       </div>
     );
   }

src/styles/widgets.css

@@ -85,3 +85,17 @@
     position: absolute;
     right: 7px;
 }
+
+.plot-table-widget .content {
+  display: -webkit-flex;
+  display: flex;
+}
+
+.plot-table-widget .widget-table {
+  min-width: 100px;
+}
+
+.plot-table-widget .widget-plot {
+  -webkit-flex: 1 0 auto;
+  flex: 1 0 auto;
+}