From 3be7fdcd35a829fb2d331b5952a840c374904166 Mon Sep 17 00:00:00 2001 From: Ricardo Hernandez-Montoya Date: Fri, 21 Apr 2017 11:54:41 +0200 Subject: [PATCH] Initial blank plot and allocate fixed initial height to legend (avoid resizing) --- src/components/widget-plot/plot.js | 59 +++++++++++++++++++++--------- src/styles/widgets.css | 5 +++ 2 files changed, 47 insertions(+), 17 deletions(-) diff --git a/src/components/widget-plot/plot.js b/src/components/widget-plot/plot.js index bb5ff01..cb9aba8 100644 --- a/src/components/widget-plot/plot.js +++ b/src/components/widget-plot/plot.js @@ -17,13 +17,26 @@ class Plot extends Component { this.chartWrapper = null; - this.state = { - size: { w: 0, h: 0 }, - firstTimestamp: 0, - latestTimestamp: 0, - sequence: null, - values: [] - }; + // Initialize plot size and data + this.state = Object.assign( + { size: { w: 0, h: 0 } }, + this.getPlotInitData(true) + ); + } + + // Get an object with 'invisible' init data for the last minute. + // Include start/end timestamps if required. + getPlotInitData(withRangeTimestamps = false) { + + const initSecondTime = Date.now(); + const initFirstTime = initSecondTime - 1000 * 60; // Decrease 1 min + const values = [{ values: [{x: initFirstTime, y: 0}], strokeWidth: 0 }]; + + let output = withRangeTimestamps? + { sequence: 0, values: values, firstTimestamp: initFirstTime, latestTimestamp: initSecondTime, } : + { sequence: 0, values: values }; + + return output; } componentWillReceiveProps(nextProps) { @@ -37,22 +50,34 @@ class Plot extends Component { this.setState({size: { w, h } }); } + // If signals were cleared, clear the plot (triggers a new state) + if (this.signalsWereJustCleared(nextProps)) { this.clearPlot(); return; } + + // If no signals have been selected, just leave + if (nextProps.signals == null || nextProps.signals.length === 0) { return; } + // Identify simulation reset - if (nextData == null || nextData.length === 0 || nextData.values[0].length === 0) { - // clear values - this.setState({ values: [], sequence: null }); - return; - } + if (nextData == null || nextData.length === 0 || nextData.values[0].length === 0) { this.clearPlot(); return; } // check if new data, otherwise skip - if (this.state.sequence >= nextData.sequence) { - return; - } - + if (this.state.sequence >= nextData.sequence) { return; } + this.updatePlotData(nextProps); } + signalsWereJustCleared(nextProps) { + + return this.props.signals && + nextProps.signals && + this.props.signals.length > 0 && + nextProps.signals.length === 0; + } + + clearPlot() { + this.setState( this.getPlotInitData(false) ); + } + updatePlotData(nextProps) { let nextData = nextProps.simulatorData; @@ -91,7 +116,7 @@ class Plot extends Component { return (
this.chartWrapper = domNode }> - {this.state.sequence && + {this.state.sequence != null &&