From ce402018570d058d8ef62d2b92c3fdd075578d9a Mon Sep 17 00:00:00 2001 From: Ricardo Hernandez-Montoya Date: Mon, 27 Mar 2017 18:05:19 +0200 Subject: [PATCH 1/4] widgets minimum widths and heights --- src/containers/visualization.js | 13 ++++++++++++- src/containers/widget.js | 4 +++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/containers/visualization.js b/src/containers/visualization.js index cd3bc67..fbc1589 100644 --- a/src/containers/visualization.js +++ b/src/containers/visualization.js @@ -140,24 +140,35 @@ class Visualization extends Component { if (item.name === 'Value') { widget.simulator = this.state.simulation.models[0].simulator; widget.signal = 0; + widget.minWidth = 70; + widget.minHeight = 20; } else if (item.name === 'Plot') { widget.simulator = this.state.simulation.models[0].simulator; widget.signals = [ 0 ]; widget.time = 60; + widget.minWidth = 400; + widget.minHeight = 200; widget.width = 400; widget.height = 200; } else if (item.name === 'Table') { widget.simulator = this.state.simulation.models[0].simulator; + widget.minWidth = 300; + widget.minHeight = 200; widget.width = 400; widget.height = 200; } else if (item.name === 'Label') { - + widget.minWidth = 70; + widget.minHeight = 20; } else if (item.name === 'PlotTable') { widget.simulator = this.state.simulation.models[0].simulator; + widget.minWidth = 400; + widget.minHeight = 200; widget.width = 500; widget.height = 400; widget.time = 60 } else if (item.name === 'Image') { + widget.minWidth = 100; + widget.minHeight = 100; widget.width = 200; widget.height = 200; } diff --git a/src/containers/widget.js b/src/containers/widget.js index f145d28..3e914d5 100644 --- a/src/containers/widget.js +++ b/src/containers/widget.js @@ -109,12 +109,14 @@ class Widget extends Component { } else if (widget.type === 'Image') { element = } - + if (this.props.editing) { return ( { this.rnd = c; }} initial={{ x: Number(widget.x), y: Number(widget.y), width: widget.width, height: widget.height }} + minWidth={ widget.minWidth } + minHeight={ widget.minHeight } bounds={'parent'} className="widget" onResizeStop={(direction, styleSize, clientSize, delta) => this.resizeStop(direction, styleSize, clientSize, delta)} From 002a4cb1b593e04e819c68ed8cc5dbaeab6b15e0 Mon Sep 17 00:00:00 2001 From: Ricardo Hernandez-Montoya Date: Mon, 27 Mar 2017 18:06:47 +0200 Subject: [PATCH 2/4] responsive plot table --- src/components/widget-plot-table.js | 47 ++++++++++++++++------------- src/styles/widgets.css | 14 +++++++++ 2 files changed, 40 insertions(+), 21 deletions(-) diff --git a/src/components/widget-plot-table.js b/src/components/widget-plot-table.js index ddca1c0..dd34c1e 100644 --- a/src/components/widget-plot-table.js +++ b/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,29 +84,31 @@ class WidgetPlotTable extends Component { render() { return ( -
+

{this.props.widget.name}

- - - this.setState({ signal: index }) } /> -
- +
+
+ + this.setState({ signal: index }) } /> +
+
- - {this.state.sequence && - { if (d != null) { return new Date(d.x); } }} - hoverAnimation={false} - circleRadius={0} - domain={{ x: [this.state.firstTimestamp, this.state.latestTimestamp] }} - /> - } - +
+ {this.state.sequence && + { if (d != null) { return new Date(d.x); } }} + hoverAnimation={false} + circleRadius={0} + domain={{ x: [this.state.firstTimestamp, this.state.latestTimestamp] }} + /> + } +
+
); } diff --git a/src/styles/widgets.css b/src/styles/widgets.css index 3ef8ecd..cb5b745 100644 --- a/src/styles/widgets.css +++ b/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; +} \ No newline at end of file From fb34f809f808b83e6883ca021ecf8fd1d5f15136 Mon Sep 17 00:00:00 2001 From: Ricardo Hernandez-Montoya Date: Tue, 28 Mar 2017 11:55:29 +0200 Subject: [PATCH 3/4] replaced table with signal list to bootstrap buttons --- src/components/widget-plot-table.js | 15 +++++++++------ src/containers/widget.js | 2 +- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/components/widget-plot-table.js b/src/components/widget-plot-table.js index dd34c1e..5305ff8 100644 --- a/src/components/widget-plot-table.js +++ b/src/components/widget-plot-table.js @@ -10,8 +10,7 @@ import React, { Component } from 'react'; import { LineChart } from 'rd3'; -import Table from './table'; -import TableColumn from './table-column'; +import { ButtonGroup, Button } from 'react-bootstrap'; class WidgetPlotTable extends Component { constructor(props) { @@ -81,17 +80,21 @@ class WidgetPlotTable extends Component { this.setState({ values: values, firstTimestamp: firstTimestamp, latestTimestamp: latestTimestamp, sequence: nextProps.data[simulator].sequence, rows: rows }); } - + render() { + console.log("Signal: " + this.state.signal); return (

{this.props.widget.name}

- - this.setState({ signal: index }) } /> -
+ + { this.state.rows.map( (row, index) => ( + + )) + } +
diff --git a/src/containers/widget.js b/src/containers/widget.js index 3e914d5..8cde808 100644 --- a/src/containers/widget.js +++ b/src/containers/widget.js @@ -105,7 +105,7 @@ class Widget extends Component { } else if (widget.type === 'Label') { element = } else if (widget.type === 'PlotTable') { - element = + element = } else if (widget.type === 'Image') { element = } From 1c5f42a4f100e91e912ba35cef19a94a63ed8c24 Mon Sep 17 00:00:00 2001 From: Ricardo Hernandez-Montoya Date: Tue, 28 Mar 2017 11:56:09 +0200 Subject: [PATCH 4/4] disabled buttons while editing the visualization --- src/styles/widgets.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/styles/widgets.css b/src/styles/widgets.css index cb5b745..dd1521c 100644 --- a/src/styles/widgets.css +++ b/src/styles/widgets.css @@ -93,8 +93,27 @@ .plot-table-widget .widget-table { min-width: 100px; + display: flex; + flex-direction: column; + justify-content: center; } +/* Reset Bootstrap styles to "disable" while editing */ +.plot-table-widget .widget-table .btn[disabled] { + cursor: inherit; +} + +.btn-default[disabled]:hover { + background-color: #fff; + border-color: #ccc; +} + +.btn-default.active[disabled]:hover { + background-color: #e6e6e6; + border-color: #adadad; +} + /* End reset */ + .plot-table-widget .widget-plot { -webkit-flex: 1 0 auto; flex: 1 0 auto;