From 884f59369a7b13d9b32de9f9abc270e9ad26ed36 Mon Sep 17 00:00:00 2001 From: Markus Grigull Date: Fri, 22 Sep 2017 11:00:04 +0200 Subject: [PATCH] Add proper min-max scaling to plots and gauges --- src/components/home.js | 1 - src/components/widget-gauge.js | 30 +++++++--- src/components/widget-plot/plot.js | 59 +++++++++++++++---- src/containers/visualization.js | 2 - .../simulator-data-data-manager.js | 20 +++---- 5 files changed, 81 insertions(+), 31 deletions(-) diff --git a/src/components/home.js b/src/components/home.js index 6fae984..95b20b3 100644 --- a/src/components/home.js +++ b/src/components/home.js @@ -43,7 +43,6 @@ class Home extends React.Component { componentWillMount() { RestAPI.get('/api/v1/counts').then(response => { this.setState({ counts: response }); - console.log(response); }); } diff --git a/src/components/widget-gauge.js b/src/components/widget-gauge.js index 9a5cc4b..9493c6b 100644 --- a/src/components/widget-gauge.js +++ b/src/components/widget-gauge.js @@ -19,19 +19,19 @@ class WidgetGauge extends Component { this.state = { value: 0, - minValue: 0, - maxValue: 1 + minValue: null, + maxValue: null }; } componentDidMount() { this.gauge = new Gauge(this.gaugeCanvas).setOptions(this.computeGaugeOptions(this.props.widget)); - this.gauge.maxValue = this.state.maxValue; - this.gauge.setMinValue(this.state.minValue); + //this.gauge.maxValue = this.state.maxValue; + //this.gauge.setMinValue(this.state.minValue); this.gauge.animationSpeed = 30; - this.gauge.set(this.state.value); + //this.gauge.set(this.state.value); - this.updateLabels(this.state.minValue, this.state.maxValue); + //this.updateLabels(this.state.minValue, this.state.maxValue); } componentWillReceiveProps(nextProps) { @@ -52,7 +52,7 @@ class WidgetGauge extends Component { // Take just 3 decimal positions // Note: Favor this method over Number.toFixed(n) in order to avoid a type conversion, since it returns a String if (signal != null) { - const value = Math.round( signal[signal.length - 1].y * 1e3 ) / 1e3; + const value = Math.round(signal[signal.length - 1].y * 1e3) / 1e3; if (this.state.value !== value && value != null) { this.setState({ value }); @@ -61,6 +61,22 @@ class WidgetGauge extends Component { let minValue = this.state.minValue; let maxValue = this.state.maxValue; + if (minValue == null) { + minValue = value - 0.5; + updateLabels = true; + + this.setState({ minValue }); + this.gauge.setMinValue(minValue); + } + + if (maxValue == null) { + maxValue = value + 0.5; + updateLabels = true; + + this.setState({ maxValue }); + this.gauge.maxValue = maxValue; + } + if (nextProps.widget.valueUseMinMax) { if (this.state.minValue > nextProps.widget.valueMin) { minValue = nextProps.widget.valueMin; diff --git a/src/components/widget-plot/plot.js b/src/components/widget-plot/plot.js index 2f574ab..4caf4c2 100644 --- a/src/components/widget-plot/plot.js +++ b/src/components/widget-plot/plot.js @@ -24,7 +24,13 @@ class Plot extends React.Component { // create dummy axes const xScale = scaleTime().domain([Date.now() - props.time * 1000, Date.now()]).range([leftMargin, props.width]); - const yScale = scaleLinear().domain([0, 10]).range([props.height, bottomMargin]); + let yScale; + + if (props.yUseMinMax) { + yScale = scaleLinear().domain([props.yMin, props.yMax]).range([props.height, bottomMargin]); + } else { + yScale = scaleLinear().domain([0, 10]).range([props.height, bottomMargin]); + } const xAxis = axisBottom().scale(xScale).ticks(5).tickFormat(date => timeFormat("%M:%S")(date)); const yAxis = axisLeft().scale(yScale).ticks(5); @@ -38,19 +44,29 @@ class Plot extends React.Component { } componentDidMount() { - this.interval = setInterval(this.tick, 50); + this.createInterval(); } componentWillUnmount() { - clearInterval(this.interval); + this.removeInterval(); } componentWillReceiveProps(nextProps) { - // check if data is valid + if (nextProps.time !== this.props.time) { + this.createInterval(); + } + + // check if data is invalid if (nextProps.data == null || nextProps.data.length === 0 || nextProps.data[0].length === 0) { // create empty plot axes const xScale = scaleTime().domain([Date.now() - 5 * nextProps.time * 1000, Date.now()]).range([leftMargin, nextProps.width]); - const yScale = scaleLinear().domain([0, 10]).range([nextProps.height, bottomMargin]); + let yScale; + + if (nextProps.yUseMinMax) { + yScale = scaleLinear().domain([nextProps.yMin, nextProps.yMax]).range([nextProps.height, bottomMargin]); + } else { + yScale = scaleLinear().domain([0, 10]).range([nextProps.height, bottomMargin]); + } const xAxis = axisBottom().scale(xScale).ticks(5).tickFormat(date => timeFormat("%M:%S")(date)); const yAxis = axisLeft().scale(yScale).ticks(5); @@ -72,25 +88,46 @@ class Plot extends React.Component { this.setState({ data }); } + createInterval() { + this.removeInterval(); + + if (this.props.time < 30) { + this.interval = setInterval(this.tick, 50); + } else if (this.props.time < 120) { + this.interval = setInterval(this.tick, 100); + } else if (this.props.time < 300) { + this.interval = setInterval(this.tick, 200); + } else { + this.interval = setInterval(this.tick, 1000); + } + } + + removeInterval() { + if (this.interval != null) { + clearInterval(this.interval); + + this.interval = null; + } + } + tick = () => { if (this.state.data == null || this.props.paused === true) { return; } // calculate yRange - let yRange; + let yRange = [0, 0]; if (this.props.yUseMinMax) { yRange = [this.props.yMin, this.props.yMax]; - } else { - yRange = [0, 0]; + } else if (this.props.data.length > 0) { + yRange = [this.props.data[0][0].y, this.props.data[0][0].y]; - this.props.data.map(values => { + this.props.data.forEach(values => { const range = extent(values, p => p.y); + if (range[0] < yRange[0]) yRange[0] = range[0]; if (range[1] > yRange[1]) yRange[1] = range[1]; - - return values; }); } diff --git a/src/containers/visualization.js b/src/containers/visualization.js index 8f6a800..52c2443 100644 --- a/src/containers/visualization.js +++ b/src/containers/visualization.js @@ -127,8 +127,6 @@ class Visualization extends React.Component { } handleKeydown(e) { - console.log(e); - switch (e.key) { case ' ': case 'p': diff --git a/src/data-managers/simulator-data-data-manager.js b/src/data-managers/simulator-data-data-manager.js index c81979d..f74462d 100644 --- a/src/data-managers/simulator-data-data-manager.js +++ b/src/data-managers/simulator-data-data-manager.js @@ -93,13 +93,13 @@ class SimulatorDataDataManager { return null; } - let OFFSET_TYPE = 2; - let OFFSET_VERSION = 4; + const OFFSET_TYPE = 2; + const OFFSET_VERSION = 4; - var id = data.getUint8(1); - var bits = data.getUint8(0); - var length = data.getUint16(0x02, 1); - var bytes = length * 4 + 16; + const id = data.getUint8(1); + const bits = data.getUint8(0); + const length = data.getUint16(0x02, 1); + const bytes = length * 4 + 16; return { version: (bits >> OFFSET_VERSION) & 0xF, @@ -108,19 +108,19 @@ class SimulatorDataDataManager { sequence: data.getUint32(0x04, 1), timestamp: data.getUint32(0x08, 1) * 1e3 + data.getUint32(0x0C, 1) * 1e-6, values: new Float32Array(data.buffer, data.byteOffset + 0x10, length), - blob: new DataView( data.buffer, data.byteOffset + 0x00, bytes), + blob: new DataView(data.buffer, data.byteOffset + 0x00, bytes), id: id }; } bufferToMessageArray(blob) { /* some local variables for parsing */ - var offset = 0; - var msgs = []; + let offset = 0; + const msgs = []; /* for every msg in vector */ while (offset < blob.byteLength) { - var msg = this.bufferToMessage(new DataView(blob, offset)); + const msg = this.bufferToMessage(new DataView(blob, offset)); if (msg !== undefined) { msgs.push(msg);