mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
work on plot table widget, disable checkboxes as they duplicate edit menu, enable to display input signals, improve plot legend #218
This commit is contained in:
parent
882febc12c
commit
b803a17a66
2 changed files with 38 additions and 36 deletions
|
@ -26,7 +26,7 @@ class PlotLegend extends React.Component {
|
|||
return <div className="plot-legend">
|
||||
<ul>
|
||||
{this.props.signals.map(signal =>
|
||||
<li key={signal.index} className="signal-legend" style={{ color: colorScale(signal.index) }}>
|
||||
<li key={signal.id} className="signal-legend" style={{ color: colorScale(signal.id) }}>
|
||||
<span className="signal-legend-name">{signal.name}</span>
|
||||
<span style={{ marginLeft: '0.3em' }} className="signal-unit">{signal.unit}</span>
|
||||
</li>
|
||||
|
|
|
@ -16,44 +16,36 @@
|
|||
******************************************************************************/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { FormGroup, FormCheck } from 'react-bootstrap';
|
||||
|
||||
import { FormGroup } from 'react-bootstrap';
|
||||
import Plot from '../widget-plot/plot';
|
||||
import PlotLegend from '../widget-plot/plot-legend';
|
||||
|
||||
class WidgetPlotTable extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
signals: []
|
||||
};
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS): void {
|
||||
// Identify if there was a change in the selected signals
|
||||
if (JSON.stringify(prevProps.widget.signalIDs) !== JSON.stringify(this.props.widget.signalIDs)
|
||||
|| this.state.signals.length === 0) {
|
||||
// Update the currently selected signals
|
||||
let intersection = []
|
||||
let signalID, sig;
|
||||
for (signalID of this.props.widget.signalIDs) {
|
||||
for (sig of this.props.signals) {
|
||||
if (signalID === sig.id) {
|
||||
intersection.push(sig);
|
||||
}
|
||||
static getDerivedStateFromProps(props, state){
|
||||
let intersection = []
|
||||
let signalID, sig;
|
||||
for (signalID of props.widget.signalIDs) {
|
||||
for (sig of props.signals) {
|
||||
if (signalID === sig.id) {
|
||||
intersection.push(sig);
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({signals: intersection});
|
||||
}
|
||||
|
||||
return {signals: intersection}
|
||||
}
|
||||
|
||||
updateSignalSelection(signal_index, checked) {
|
||||
updateSignalSelection(signal, checked) {
|
||||
// Update the selected signals and propagate to parent component
|
||||
var new_widget = Object.assign({}, this.props.widget, {
|
||||
signals: checked ? this.state.signals.concat(signal_index) : this.state.signals.filter((idx) => idx !== signal_index)
|
||||
checkedSignals: checked ? this.state.signals.concat(signal) : this.state.signals.filter((idx) => idx !== signal)
|
||||
});
|
||||
this.props.onWidgetChange(new_widget);
|
||||
}
|
||||
|
@ -63,7 +55,6 @@ class WidgetPlotTable extends Component {
|
|||
let checkBoxes = [];
|
||||
let icData = [];
|
||||
let showLegend = false;
|
||||
|
||||
if (this.state.signals.length > 0) {
|
||||
|
||||
showLegend = true;
|
||||
|
@ -75,24 +66,35 @@ class WidgetPlotTable extends Component {
|
|||
// determine ID of infrastructure component related to signal (via config)
|
||||
let icID = this.props.icIDs[signal.id]
|
||||
|
||||
if (this.props.data[icID] != null && this.props.data[icID].output != null && this.props.data[icID].output.values != null) {
|
||||
if (this.props.data[icID].output.values[signal.index] !== undefined){
|
||||
icData.push(this.props.data[icID].output.values[signal.index]);
|
||||
// distinguish between input and output signals
|
||||
if (signal.direction === "out"){
|
||||
if (this.props.data[icID] != null && this.props.data[icID].output != null && this.props.data[icID].output.values != null) {
|
||||
if (this.props.data[icID].output.values[signal.index] !== undefined){
|
||||
icData.push(this.props.data[icID].output.values[signal.index]);
|
||||
}
|
||||
}
|
||||
} else if (signal.direction === "in"){
|
||||
if (this.props.data[icID] != null && this.props.data[icID].input != null && this.props.data[icID].input.values != null) {
|
||||
if (this.props.data[icID].input.values[signal.index] !== undefined){
|
||||
icData.push(this.props.data[icID].input.values[signal.index]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// Create checkboxes using the signal indices from component config
|
||||
checkBoxes = this.state.signals.map((signal) => {
|
||||
let checked = this.state.signals.indexOf(signal.index) > -1;
|
||||
let chkBxClasses = classNames({
|
||||
'btn': true,
|
||||
'btn-default': true,
|
||||
'active': checked
|
||||
});
|
||||
return <FormCheck key={signal.index} className={chkBxClasses} checked={checked} disabled={this.props.editing}
|
||||
onChange={(e) => this.updateSignalSelection(signal.index, e.target.checked)}> {signal.name} </FormCheck>
|
||||
});
|
||||
// checkBoxes = this.state.signals.map((signal) => {
|
||||
// let checked = this.state.signals.indexOf(signal) > -1;
|
||||
// let chkBxClasses = classNames({
|
||||
// 'btn': true,
|
||||
// 'btn-default': true,
|
||||
// 'active': checked
|
||||
// });
|
||||
// return <FormCheck key={signal.index} className={chkBxClasses} checked={checked} disabled={this.props.editing}
|
||||
// onChange={(e) => this.updateSignalSelection(signal, e.target.checked)}> {signal.name} </FormCheck>
|
||||
// });
|
||||
}
|
||||
|
||||
return (
|
||||
|
@ -104,7 +106,7 @@ class WidgetPlotTable extends Component {
|
|||
<FormGroup className="btn-group-vertical">
|
||||
{checkBoxes}
|
||||
</FormGroup>
|
||||
) : (<small>No signal has been pre-selected.</small>)
|
||||
) : (<small>Use edit menu to change selected signals.</small>)
|
||||
}
|
||||
</div>
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue