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:
parent
1de37c4bf1
commit
3d59393a1d
5 changed files with 62 additions and 53 deletions
|
@ -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>
|
||||
))
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Add table
Reference in a new issue