From 002a4cb1b593e04e819c68ed8cc5dbaeab6b15e0 Mon Sep 17 00:00:00 2001 From: Ricardo Hernandez-Montoya Date: Mon, 27 Mar 2017 18:06:47 +0200 Subject: [PATCH] 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