diff --git a/src/components/widget-plot-table.js b/src/components/widget-plot-table.js index ddca1c0..5305ff8 100644 --- a/src/components/widget-plot-table.js +++ b/src/components/widget-plot-table.js @@ -9,16 +9,15 @@ import React, { Component } from 'react'; import { LineChart } from 'rd3'; -import { Col } from 'react-bootstrap'; -import Table from './table'; -import TableColumn from './table-column'; +import { ButtonGroup, Button } from 'react-bootstrap'; class WidgetPlotTable extends Component { constructor(props) { super(props); this.state = { + size: { w: 0, h: 0 }, signal: 0, firstTimestamp: 0, latestTimestamp: 0, @@ -32,6 +31,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: [] }); @@ -78,32 +80,38 @@ 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) => ( + + )) + } + +
- - {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/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..8cde808 100644 --- a/src/containers/widget.js +++ b/src/containers/widget.js @@ -105,16 +105,18 @@ class Widget extends Component { } else if (widget.type === 'Label') { element = } else if (widget.type === 'PlotTable') { - element = + element = } 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)} diff --git a/src/styles/widgets.css b/src/styles/widgets.css index 3ef8ecd..dd1521c 100644 --- a/src/styles/widgets.css +++ b/src/styles/widgets.css @@ -85,3 +85,36 @@ position: absolute; right: 7px; } + +.plot-table-widget .content { + display: -webkit-flex; + display: flex; +} + +.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; +} \ No newline at end of file