From 326e65c42ce9472ca253fb0ea620e962ccd0b307 Mon Sep 17 00:00:00 2001 From: Ricardo Hernandez-Montoya Date: Fri, 7 Apr 2017 17:06:32 +0200 Subject: [PATCH] contain everything within plot table widget --- src/components/widget-plot-table.js | 42 ++++++++++++++++++----------- src/containers/visualization.js | 4 +-- src/styles/widgets.css | 20 ++++++++++++-- 3 files changed, 46 insertions(+), 20 deletions(-) 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; }