1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-16 00:00:03 +01:00

fix plot widget and edit signals control element

This commit is contained in:
Sonja Happ 2020-03-12 14:21:39 +01:00
parent 1de37c4bf1
commit 3d59393a1d
5 changed files with 62 additions and 53 deletions

View file

@ -1,8 +1,4 @@
/**
* File: edit-widget-signals-control.js
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
* 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 {
<FormLabel>No signals available</FormLabel>
) : (
this.props.signals.map((signal, index) => (
<FormCheck key={signal.id} checked={this.state.widget.signalIDs.indexOf(signal.id) !== -1} onChange={(e) => this.handleSignalChange(e.target.checked, signal.id)}>{signal.name}</FormCheck>
<FormCheck
type={'checkbox'}
label={signal.name}
id={signal.id}
key={signal.id}
checked={this.state.checkedSignals.find(id => id === signal.id) !== undefined}
onChange={(e) => this.handleSignalChange(e.target.checked, signal.id)}>
</FormCheck>
))
)
}

View file

@ -1,8 +1,4 @@
/**
* File: edit-widget.js
* Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
* 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(

View file

@ -33,7 +33,7 @@ class PlotLegend extends React.Component {
{this.props.signals.map(signal =>
<li key={signal.index} className="signal-legend" style={{ color: colorScale(signal.index) }}>
<span className="signal-legend-name">{signal.name}</span>
<span style={{ marginLeft: '0.3em' }} className="signal-unit">{signal.type}</span>
<span style={{ marginLeft: '0.3em' }} className="signal-unit">{signal.unit}</span>
</li>
)}
</ul>

View file

@ -77,49 +77,60 @@ class Plot extends React.Component {
this.removeInterval();
}
componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, 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<P>, prevState: Readonly<S>, snapshot: SS): void {
if (prevProps.time !== this.props.time) {
this.createInterval();
}
}
createInterval() {

View file

@ -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;