From 3d59393a1d92a0783b0774fe2cb36bf2e58b362f Mon Sep 17 00:00:00 2001 From: Sonja Happ Date: Thu, 12 Mar 2020 14:21:39 +0100 Subject: [PATCH] fix plot widget and edit signals control element --- .../edit-widget-signals-control.js | 32 +++++----- src/widget/edit-widget/edit-widget.js | 20 +++---- src/widget/widget-plot/plot-legend.js | 2 +- src/widget/widget-plot/plot.js | 59 +++++++++++-------- src/widget/widgets/plot.js | 2 +- 5 files changed, 62 insertions(+), 53 deletions(-) diff --git a/src/widget/edit-widget/edit-widget-signals-control.js b/src/widget/edit-widget/edit-widget-signals-control.js index 2f38506..109df2e 100644 --- a/src/widget/edit-widget/edit-widget-signals-control.js +++ b/src/widget/edit-widget/edit-widget-signals-control.js @@ -1,8 +1,4 @@ /** - * File: edit-widget-signals-control.js - * Author: Ricardo Hernandez-Montoya - * Date: 03.04.2017 - * * This file is part of VILLASweb. * * VILLASweb is free software: you can redistribute it and/or modify @@ -27,29 +23,24 @@ class EditWidgetSignalsControl extends Component { super(props); this.state = { - widget: { } - }; - } - - static getDerivedStateFromProps(props, state){ - return { - widget: props.widget + widget: props.widget, + checkedSignals: props.widget[props.controlId] }; } handleSignalChange(checked, signalID) { - var signals = this.state.widget.signalIDs; - var new_signals; + let new_signals = this.state.checkedSignals; if (checked) { // add signal - new_signals = signals.concat(signalID); + new_signals = new_signals.concat(signalID); } else { // remove signal - new_signals = signals.filter( (id) => id !== signalID ); + new_signals = new_signals.filter( (id) => id !== signalID ); } - this.props.handleChange({ target: { id: this.props.controlId, value: new_signals } }); + this.setState({checkedSignals: new_signals}) + this.props.handleChange({ target: { id: this.props.controlId, value: new_signals, type:'checkbox' } }); } render() { @@ -61,7 +52,14 @@ class EditWidgetSignalsControl extends Component { No signals available ) : ( this.props.signals.map((signal, index) => ( - this.handleSignalChange(e.target.checked, signal.id)}>{signal.name} + id === signal.id) !== undefined} + onChange={(e) => this.handleSignalChange(e.target.checked, signal.id)}> + )) ) } diff --git a/src/widget/edit-widget/edit-widget.js b/src/widget/edit-widget/edit-widget.js index 64fefea..e110db3 100644 --- a/src/widget/edit-widget/edit-widget.js +++ b/src/widget/edit-widget/edit-widget.js @@ -1,8 +1,4 @@ /** - * File: edit-widget.js - * Author: Markus Grigull - * Date: 08.03.2017 - * * This file is part of VILLASweb. * * VILLASweb is free software: you can redistribute it and/or modify @@ -81,7 +77,8 @@ class EditWidgetDialog extends React.Component { } if(e.target.type !== 'text'){ - let changeObject = {}; + console.log("edit-widget: e.target.type is not text: ", e.target.type); + let changeObject = this.state.temporal; if (e.target.id === 'lockAspect') { changeObject[e.target.id] = e.target.checked; @@ -97,22 +94,25 @@ class EditWidgetDialog extends React.Component { changeObject = this.assignAspectRatio(changeObject, e.target.value); } } else if (e.target.type === 'checkbox') { - changeObject[e.target.id] = e.target.checked; + changeObject[e.target.id] = e.target.value; } else if (e.target.type === 'number') { changeObject[e.target.id] = Number(e.target.value); } else { changeObject[e.target.id] = e.target.value; } - let finalChange = this.state.temporal; + this.setState({ temporal: changeObject}); - finalChange.customProperties[e.target.id] = changeObject[e.target.id]; - this.setState({ temporal: finalChange}); } else { + console.log("edit-widget: type text"); if(this.state.temporal[e.target.id]){ + + console.log("edit-widget: type: " , e.target.type, " target.id", e.target.id, "target.value", e.target.value) let finalChange = this.state.temporal; finalChange[e.target.id] = e.target.value; + + console.log("edit-widget: finalChange", finalChange); this.setState({ temporal: finalChange}); } } @@ -133,12 +133,12 @@ class EditWidgetDialog extends React.Component { //this.valid = name; this.valid = name; - // return state to control if (target === 'name') return name ? "success" : "error"; } render() { + let controls = null; if (this.props.widget) { controls = CreateControls( diff --git a/src/widget/widget-plot/plot-legend.js b/src/widget/widget-plot/plot-legend.js index 239072c..ad0cb64 100644 --- a/src/widget/widget-plot/plot-legend.js +++ b/src/widget/widget-plot/plot-legend.js @@ -33,7 +33,7 @@ class PlotLegend extends React.Component { {this.props.signals.map(signal =>
  • {signal.name} - {signal.type} + {signal.unit}
    • )} diff --git a/src/widget/widget-plot/plot.js b/src/widget/widget-plot/plot.js index 299b8f9..db86bfd 100644 --- a/src/widget/widget-plot/plot.js +++ b/src/widget/widget-plot/plot.js @@ -77,49 +77,60 @@ class Plot extends React.Component { this.removeInterval(); } - componentDidUpdate(prevProps: Readonly

    , prevState: Readonly, snapshot: SS): void { - if (prevProps.time !== this.props.time) { - this.createInterval(); - } - + static getDerivedStateFromProps(props, state){ let labelMargin = 0; - if (this.props.yLabel !== '') { + if (props.yLabel !== '') { labelMargin = 30; } // check if data is invalid - if (this.props.data == null || this.props.data.length === 0 || this.props.data[0].length === 0) { + if (props.data == null || props.data.length === 0 || props.data[0].length === 0) { // create empty plot axes - const xScale = scaleTime().domain([Date.now() - this.props.time * 1000, Date.now()]).range([0, this.props.width - leftMargin - labelMargin - rightMargin]); + const xScale = scaleTime().domain([Date.now() - props.time * 1000, Date.now()]).range([0, props.width - leftMargin - labelMargin - rightMargin]); let yScale; - if (this.props.yUseMinMax) { - yScale = scaleLinear().domain([this.props.yMin, this.props.yMax]).range([this.props.height + topMargin - bottomMargin, topMargin]); + if (props.yUseMinMax) { + yScale = scaleLinear().domain([props.yMin, props.yMax]).range([props.height + topMargin - bottomMargin, topMargin]); } else { - yScale = scaleLinear().domain([0, 10]).range([this.props.height + topMargin - bottomMargin, topMargin]); + yScale = scaleLinear().domain([0, 10]).range([props.height + topMargin - bottomMargin, topMargin]); } const xAxis = axisBottom().scale(xScale).ticks(5).tickFormat(timeFormat("%M:%S")); const yAxis = axisLeft().scale(yScale).ticks(5).tickFormat(format(".3s")); - this.setState({ data: null, xAxis, yAxis, labelMargin }); - return; + + return{ + data: null, + xAxis, + yAxis, + labelMargin + }; } - // check if requested time frame has changed - if(this.props.time !== prevProps.time) { - // only show data in requested time - let data = this.props.data; - const firstTimestamp = data[0][data[0].length - 1].x - (this.props.time + 1) * 1000; - if (data[0][0].x < firstTimestamp) { - // only show data in range (+100 ms) - const index = data[0].findIndex(value => value.x >= firstTimestamp - 100); - data = data.map(values => values.slice(index)); - } + // only show data in requested time + let data = props.data; - this.setState({data, labelMargin}); + const firstTimestamp = data[0][data[0].length - 1].x - (props.time + 1) * 1000; + if (data[0][0].x < firstTimestamp) { + // only show data in range (+100 ms) + const index = data[0].findIndex(value => value.x >= firstTimestamp - 100); + data = data.map(values => values.slice(index)); } + + return { + data, + labelMargin + }; + + } + + componentDidUpdate(prevProps: Readonly

    , prevState: Readonly, snapshot: SS): void { + if (prevProps.time !== this.props.time) { + this.createInterval(); + } + + } createInterval() { diff --git a/src/widget/widgets/plot.js b/src/widget/widgets/plot.js index 7cda5ed..15961a5 100644 --- a/src/widget/widgets/plot.js +++ b/src/widget/widgets/plot.js @@ -53,7 +53,7 @@ class WidgetPlot extends React.Component { // Query the signals that will be displayed in the legend const legend = props.config.outputMapping.reduce( (accum, signal, signal_index) => { if (chosenSignals.includes(signal_index)) { - accum.push({ index: signal_index, name: signal.name, type: signal.type }); + accum.push({ index: signal_index, name: signal.name, type: signal.unit }); } return accum;