diff --git a/src/components/widget-plot-table.js b/src/components/widget-plot-table.js
index 0905ba9..13a6119 100644
--- a/src/components/widget-plot-table.js
+++ b/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 {
- {this.state.sequence &&
-
{ if (d != null) { return new Date(d.x); } }}
- xAxisTickCount={ tickCount }
- hoverAnimation={false}
- circleRadius={0}
- domain={{ x: [this.state.firstTimestamp, this.state.latestTimestamp] }}
- />
- }
+ this.chartWrapper = domNode }>
+ {this.state.sequence &&
+ { if (d != null) { return new Date(d.x); } }}
+ xAxisTickCount={ tickCount }
+ hoverAnimation={false}
+ circleRadius={0}
+ domain={{ x: [this.state.firstTimestamp, this.state.latestTimestamp] }}
+ />
+ }
+
{
this.state.preselectedSignals.reduce( (accum, signal, i) => {
diff --git a/src/containers/visualization.js b/src/containers/visualization.js
index cf81c40..d6acda6 100644
--- a/src/containers/visualization.js
+++ b/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;
diff --git a/src/styles/widgets.css b/src/styles/widgets.css
index 90bee10..da925f1 100644
--- a/src/styles/widgets.css
+++ b/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;
}