Mirrors/VILLASweb
1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00
Code Issues Releases Wiki Activity

Merge branch 'additional-widgets' into 'develop'

Browse source 
Additional widgets

See merge request !8
This commit is contained in:
Ricardo Hernandez 2017-05-05 09:10:45 +02:00
commit 71f3f1a007
36 changed files with 1827 additions and 276 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
package.json
View file

@ -20,7 +20,10 @@
"react-notification-system": "^0.2.13",
"react-rnd": "^4.2.2",
"react-router": "^3.0.2",
"superagent": "^3.5.0"
"superagent": "^3.5.0",
"gaugeJS": "^1.3.2",
"d3-scale": "^1.0.5",
"rc-slider": "^7.0.1"
},
"devDependencies": {
"react-scripts": "0.9.3"

70
src/components/dialog/edit-widget-color-control.js Normal file
View file

@ -0,0 +1,70 @@
/**
* File: edit-widget-color-control.js
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
* Date: 24.04.2017
* Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
**********************************************************************************/
import React, { Component } from 'react';
import { FormGroup, Col, Row, Radio, ControlLabel } from 'react-bootstrap';
import classNames from 'classnames';
import { scaleOrdinal, schemeCategory20 } from 'd3-scale';
class EditWidgetColorControl extends Component {
static get ColorPalette() {
let colorCount = 0;
const colors = [];
const colorScale = scaleOrdinal(schemeCategory20);
while (colorCount < 20) { colors.push(colorScale(colorCount)); colorCount++; }
colors.unshift('#000', '#FFF'); // include black and white
return colors;
}
constructor(props) {
super(props);
this.state = {
widget: {}
};
}
componentWillReceiveProps(nextProps) {
// Update state's widget with props
this.setState({ widget: nextProps.widget });
}
render() {
return (
<FormGroup bsClass="color-control">
<Row>
<Col componentClass={ControlLabel} style={{whiteSpace: 'nowrap' }} sm={2}>
{ this.props.label }
</Col>
<Col sm={10} bsClass='colors-column'>
{
EditWidgetColorControl.ColorPalette.map( (color, idx ) => {
let colorStyle = {
background: color,
borderColor: color
};
let checkedClass = classNames({
'checked': idx === this.state.widget[this.props.controlId]
});
return (<Radio key={idx} name={this.props.controlId} style={colorStyle} className={checkedClass} value={idx} inline onChange={(e) => this.props.handleChange({target: { id: this.props.controlId, value: idx}})} />)
}
)
}
</Col>
</Row>
</FormGroup> )
}
}
export default EditWidgetColorControl;

6
src/components/dialog/edit-widget-image.js → src/components/dialog/edit-widget-image-control.js
View file

@ -1,5 +1,5 @@
/**
* File: edit-widget-value.js
* File: edit-widget-image-control.js
* Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
* Date: 04.03.2017
*
@ -24,7 +24,7 @@ import { FormGroup, FormControl, ControlLabel, Button } from 'react-bootstrap';
import AppDispatcher from '../../app-dispatcher';
class EditImageWidget extends Component {
class EditImageWidgetControl extends Component {
constructor(props) {
super(props);
@ -80,4 +80,4 @@ class EditImageWidget extends Component {
}
}
export default EditImageWidget;
export default EditImageWidgetControl;

61
src/components/dialog/edit-widget-orientation.js Normal file
View file

@ -0,0 +1,61 @@
/**
* File: edit-widget-orientation.js
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
* Date: 10.04.2017
* Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
**********************************************************************************/
import React, { Component } from 'react';
import { FormGroup, Col, Row, Radio, ControlLabel } from 'react-bootstrap';
import WidgetSlider from '../widget-slider';
class EditWidgetOrientation extends Component {
constructor(props) {
super(props);
this.state = {
widget: {}
};
}
componentWillReceiveProps(nextProps) {
// Update state's widget with props
this.setState({ widget: nextProps.widget });
}
handleOrientationChange(orientation) {
this.props.handleChange({ target: { id: 'orientation', value: orientation } });
}
render() {
// The <Row> tag shouldn't be necessary, but it gives height to the row while combining horizontal and vertical forms
return (
<FormGroup controlId="orientation">
<Row>
<Col componentClass={ControlLabel} sm={2}>
Orientation
</Col>
<Col sm={10}>
{
Object.keys(WidgetSlider.OrientationTypes).map( (type) => {
let value = WidgetSlider.OrientationTypes[type].value;
let name = WidgetSlider.OrientationTypes[type].name;
return (
<Radio inline key={value} name='orientation' checked={ value === this.state.widget.orientation } onChange={(e) => this.handleOrientationChange(value)}>
{ name }
</Radio>)
})
}
</Col>
</Row>
</FormGroup>
);
}
}
export default EditWidgetOrientation;

59
src/components/dialog/edit-widget-signal-control.js Normal file
View file

@ -0,0 +1,59 @@
/**
* File: edit-widget-signal-control.js
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
* Date: 03.04.2017
* Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
**********************************************************************************/
import React, { Component } from 'react';
import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
class EditWidgetSignalControl extends Component {
constructor(props) {
super(props);
this.state = {
widget: {
simulator: ''
}
};
}
componentWillReceiveProps(nextProps) {
// Update state's widget with props
this.setState({ widget: nextProps.widget });
}
render() {
let signalsToRender = [];
if (this.props.simulation) {
// get selected simulation model
const simulationModel = this.props.simulation.models.find( model => model.simulation === this.state.widget.simulation );
// If simulation model update the signals to render
signalsToRender = simulationModel? simulationModel.mapping : [];
}
return (
<FormGroup controlId="signal">
<ControlLabel>Signal</ControlLabel>
<FormControl componentClass="select" placeholder="Select signal" value={this.state.widget.signal} onChange={(e) => this.props.handleChange(e)}>
{
signalsToRender.length === 0 ? (
<option disabled value style={{ display: 'none' }}>No signals available.</option>
) : (
signalsToRender.map((signal, index) => (
<option key={index} value={index}>{signal.name}</option>
))
)
}
</FormControl>
</FormGroup>
);
}
}
export default EditWidgetSignalControl;

64
src/components/dialog/edit-widget-signal-type-control.js Normal file
View file

@ -0,0 +1,64 @@
/**
* File: edit-widget-signal-type-control.js
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
* Date: 03.04.2017
* Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
**********************************************************************************/
import React, { Component } from 'react';
import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
class EditWidgetSignalTypeControl extends Component {
constructor(props) {
super(props);
this.state = {
widget: {}
};
}
componentWillReceiveProps(nextProps) {
// Update state's widget with props
this.setState({ widget: nextProps.widget });
}
render() {
// get selected simulation model
var simulationModel = {};
if (this.props.simulation) {
this.props.simulation.models.forEach((model) => {
if (model.simulation === this.state.widget.simulation) {
simulationModel = model;
}
});
}
// Obtain unique signal types with the help of dictionary keys
var signalTypes = Object.keys(simulationModel.mapping.reduce( (collection, signal) => {
var lower = signal.type.toLowerCase();
collection[lower] = '';
return collection;
}, {}));
var capitalize = (str) => { return str.charAt(0).toUpperCase() + str.slice(1); }
var selectedValue = signalTypes.includes(this.state.widget.signalType) ? this.state.widget.signalType : '';
return (
<FormGroup controlId="signalType">
<ControlLabel>Signal type</ControlLabel>
<FormControl componentClass="select" placeholder="Select signal type" value={ selectedValue } onChange={(e) => this.props.handleChange(e)}>
<option disabled value style={{ display: 'none' }}> Select signal type </option>
{signalTypes.map((type, index) => (
<option key={type} value={type}>{ capitalize(type) }</option>
))}
</FormControl>
</FormGroup>
);
}
}
export default EditWidgetSignalTypeControl;

72
src/components/dialog/edit-widget-signals-control.js Normal file
View file

@ -0,0 +1,72 @@
/**
* File: edit-widget-signals-control.js
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
* Date: 03.04.2017
* Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
**********************************************************************************/
import React, { Component } from 'react';
import { FormGroup, Checkbox, ControlLabel, FormControl } from 'react-bootstrap';
class EditWidgetSignalsControl extends Component {
constructor(props) {
super(props);
this.state = {
widget: {
simulator: ''
}
};
}
componentWillReceiveProps(nextProps) {
// Update state's widget with props
this.setState({ widget: nextProps.widget });
}
handleSignalChange(checked, index) {
var signals = this.state.widget[this.props.controlId];
var new_signals;
if (checked) {
// add signal
new_signals = signals.concat(index);
} else {
// remove signal
new_signals = signals.filter( (idx) => idx !== index );
}
this.props.handleChange({ target: { id: this.props.controlId, value: new_signals } });
}
render() {
let signalsToRender = [];
if (this.props.simulation) {
// get selected simulation model
const simulationModel = this.props.simulation.models.find( model => model.simulation === this.state.widget.simulation );
// If simulation model update the signals to render
signalsToRender = simulationModel? simulationModel.mapping : [];
}
return (
<FormGroup>
<ControlLabel>Signals</ControlLabel>
{
signalsToRender.length === 0 || !this.state.widget.hasOwnProperty(this.props.controlId)? (
<FormControl.Static>No signals available.</FormControl.Static>
) : (
signalsToRender.map((signal, index) => (
<Checkbox key={index} checked={this.state.widget[this.props.controlId].indexOf(index) !== -1} onChange={(e) => this.handleSignalChange(e.target.checked, index)}>{signal.name}</Checkbox>
))
)
}
</FormGroup>
);
}
}
export default EditWidgetSignalsControl;

49
src/components/dialog/edit-widget-simulator-control.js Normal file
View file

@ -0,0 +1,49 @@
/**
* File: edit-widget-simulator-control.js
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
* Date: 03.04.2017
* Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
**********************************************************************************/
import React, { Component } from 'react';
import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
class EditWidgetSimulatorControl extends Component {
constructor(props) {
super(props);
this.state = {
widget: {
simulator: ''
}
};
}
componentWillReceiveProps(nextProps) {
// Update state's widget with props
this.setState({ widget: nextProps.widget });
}
render() {
return (
<FormGroup controlId="simulator">
<ControlLabel>Simulator</ControlLabel>
<FormControl componentClass="select" placeholder="Select simulator" value={this.state.widget.simulator || '' } onChange={(e) => this.props.handleChange(e)}>
{
this.props.simulation.models.length === 0? (
<option disabled value style={{ display: 'none' }}> No simulators available. </option>
) : (
this.props.simulation.models.map((model, index) => (
<option key={index} value={model.simulator}>{model.name}</option>
)))
}
</FormControl>
</FormGroup>
);
}
}
export default EditWidgetSimulatorControl;

39
src/components/dialog/edit-widget-text-control.js Normal file
View file

@ -0,0 +1,39 @@
/**
* File: edit-widget-text-control.js
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
* Date: 21.04.2017
* Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
**********************************************************************************/
import React, { Component } from 'react';
import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
class EditWidgetTextControl extends Component {
constructor(props) {
super(props);
this.state = {
widget: {}
};
}
componentWillReceiveProps(nextProps) {
// Update state's widget with props
this.setState({ widget: nextProps.widget });
}
render() {
return (
<FormGroup controlId={ this.props.controlId }>
<ControlLabel> { this.props.label } </ControlLabel>
<FormControl type="text" placeholder={ this.props.placeholder } value={ this.state.widget[this.props.controlId] || '' } onChange={(e) => this.props.handleChange(e)} />
<FormControl.Feedback />
</FormGroup>
);
}
}
export default EditWidgetTextControl;

40
src/components/dialog/edit-widget-time-control.js Normal file
View file

@ -0,0 +1,40 @@
/**
* File: edit-widget-time-control.js
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
* Date: 13.04.2017
* Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
**********************************************************************************/
import React, { Component } from 'react';
import { FormGroup, FormControl, ControlLabel, HelpBlock } from 'react-bootstrap';
class EditWidgetTimeControl extends Component {
constructor(props) {
super(props);
this.state = {
widget: {
time: 0
}
};
}
componentWillReceiveProps(nextProps) {
this.setState({ widget: nextProps.widget });
}
render() {
return (
<FormGroup controlId="time">
<ControlLabel>Time</ControlLabel>
<FormControl type="number" min="1" max="300" placeholder="Enter time" value={this.state.widget.time} onChange={(e) => this.props.handleChange(e)} />
<HelpBlock>Time in seconds</HelpBlock>
</FormGroup>
);
}
}
export default EditWidgetTimeControl;

65
src/components/dialog/edit-widget.js
View file

@ -24,10 +24,14 @@ import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
import Dialog from './dialog';
import EditValueWidget from './edit-widget-value';
import EditPlotWidget from './edit-widget-plot';
import EditTableWidget from './edit-widget-table';
import EditImageWidget from './edit-widget-image';
import EditWidgetTextControl from './edit-widget-text-control';
import EditWidgetColorControl from './edit-widget-color-control';
import EditWidgetTimeControl from './edit-widget-time-control';
import EditImageWidgetControl from './edit-widget-image-control';
import EditWidgetSimulatorControl from './edit-widget-simulator-control';
import EditWidgetSignalControl from './edit-widget-signal-control';
import EditWidgetSignalsControl from './edit-widget-signals-control';
import EditWidgetOrientation from './edit-widget-orientation';
class EditWidgetDialog extends Component {
static propTypes = {
@ -61,8 +65,6 @@ class EditWidgetDialog extends Component {
var update = this.state.temporal;
update[e.target.id] = e.target.value;
this.setState({ temporal: update });
//console.log(this.state.widget);
}
resetState() {
@ -85,18 +87,54 @@ class EditWidgetDialog extends Component {
}
render() {
// get widget part
var widgetDialog = null;
// Use a list to concatenate the controls according to the widget type
var dialogControls = [];
if (this.props.widget) {
if (this.props.widget.type === 'Value') {
widgetDialog = <EditValueWidget widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />;
dialogControls.push(
<EditWidgetSimulatorControl key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
<EditWidgetSignalsControl key={2} controlId={'signals'} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />
)
} else if (this.props.widget.type === 'Plot') {
widgetDialog = <EditPlotWidget widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />;
dialogControls.push(
<EditWidgetTimeControl key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />,
<EditWidgetSimulatorControl key={2} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
<EditWidgetSignalsControl key={3} controlId={'signals'} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
<EditWidgetTextControl key={4} controlId={'ylabel'} label={'Y-Axis name'} placeholder={'Enter a name for the y-axis'} widget={this.state.temporal} handleChange={(e) => this.handleChange(e)} />
)
} else if (this.props.widget.type === 'Table') {
widgetDialog = <EditTableWidget widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />;
dialogControls.push(
<EditWidgetSimulatorControl key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />
)
} else if (this.props.widget.type === 'Image') {
widgetDialog = <EditImageWidget widget={this.state.temporal} files={this.props.files} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />;
dialogControls.push(
<EditImageWidgetControl key={1} widget={this.state.temporal} files={this.props.files} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />
)
} else if (this.props.widget.type === 'Gauge') {
dialogControls.push(
<EditWidgetSimulatorControl key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
<EditWidgetSignalControl key={2} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />
)
} else if (this.props.widget.type === 'PlotTable') {
dialogControls.push(
<EditWidgetSimulatorControl key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
<EditWidgetSignalsControl key={2} controlId={'preselectedSignals'} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
<EditWidgetTextControl key={3} controlId={'ylabel'} label={'Y-Axis'} placeholder={'Enter a name for the Y-axis'} widget={this.state.temporal} handleChange={(e) => this.handleChange(e)} />
)
} else if (this.props.widget.type === 'Slider') {
dialogControls.push(
<EditWidgetOrientation key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
)
} else if (this.props.widget.type === 'Button') {
dialogControls.push(
<EditWidgetColorControl key={1} widget={this.state.temporal} controlId={'background_color'} label={'Background'} validate={(id) => this.validateForm(id)} handleChange={(e, index) => this.handleChange(e, index)} />,
<EditWidgetColorControl key={2} widget={this.state.temporal} controlId={'font_color'} label={'Font color'} validate={(id) => this.validateForm(id)} handleChange={(e, index) => this.handleChange(e, index)} />
)
} else if (this.props.widget.type === 'Box') {
dialogControls.push(
<EditWidgetColorControl key={1} widget={this.state.temporal} controlId={'border_color'} label={'Border color'} validate={(id) => this.validateForm(id)} handleChange={(e, index) => this.handleChange(e, index)} />
)
}
}
@ -108,8 +146,7 @@ class EditWidgetDialog extends Component {
<FormControl type="text" placeholder="Enter name" value={this.state.temporal.name} onChange={(e) => this.handleChange(e)} />
<FormControl.Feedback />
</FormGroup>
{widgetDialog}
{ dialogControls }
</form>
</Dialog>
);

13
src/components/dropzone.js
View file

@ -31,6 +31,19 @@ const dropzoneTarget = {
position.x -= dropzoneRect.left;
position.y -= dropzoneRect.top;
// Z-Index is one more the top most children
let foundZ = props.children.reduce( (maxZ, currentChildren) => {
// Is there a simpler way? Is not easy to expose a getter in a Container.create(Component)
let widget = currentChildren.props.data;
if (widget && widget.z) {
if (widget.z > maxZ) {
return widget.z;
}
}
return maxZ;
}, 0);
position.z = foundZ >= 100? foundZ : ++foundZ;
props.onDrop(monitor.getItem(), position);
}
};

33
src/components/widget-box.js Normal file
View file

@ -0,0 +1,33 @@
/**
* File: widget-box.js
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
* Date: 25.04.2017
* Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
**********************************************************************************/
import React, { Component } from 'react';
import EditWidgetColorControl from './dialog/edit-widget-color-control';
class WidgetBox extends Component {
render() {
let colors = EditWidgetColorControl.ColorPalette;
let colorStyle = {
borderColor: colors[this.props.widget.border_color]
}
return (
<div className="box-widget full">
<div className="border" style={colorStyle}>
{ }
</div>
</div>
);
}
}
export default WidgetBox;

44
src/components/widget-button.js Normal file
View file

@ -0,0 +1,44 @@
/**
* File: widget-button.js
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
* Date: 29.03.2017
* Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
**********************************************************************************/
import React, { Component } from 'react';
import EditWidgetColorControl from './dialog/edit-widget-color-control';
class WidgetButton extends Component {
action(e) {
e.target.blur(); // Remove focus
console.log('Button widget action');
}
render() {
let colors = EditWidgetColorControl.ColorPalette;
let colorStyle = {
background: colors[this.props.widget.background_color],
color: colors[this.props.widget.font_color],
borderColor: colors[this.props.widget.font_color]
}
return (
<div className="button-widget full">
{ this.props.editing ? (
<button className="full btn btn-default" type="button" disabled onClick={ this.action } style={colorStyle}>{this.props.widget.name}</button>
) : (
<button className="full btn btn-default" type="button" onClick={ this.action } style={colorStyle}>{this.props.widget.name}</button>
)
}
</div>
);
}
}
export default WidgetButton;

120
src/components/widget-factory.js Normal file
View file

@ -0,0 +1,120 @@
/**
* File: widget-factory.js
* Description: A factory to create and pre-configure widgets
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
* Date: 02.03.2017
* Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
**********************************************************************************/
import WidgetSlider from './widget-slider';
class WidgetFactory {
static createWidgetOfType(type, position, defaultSimulator = null) {
let widget = {
name: 'Name',
type: type,
width: 100,
height: 100,
x: position.x,
y: position.y,
z: position.z
};
// set type specific properties
switch(type) {
case 'Value':
widget.simulator = defaultSimulator;
widget.signal = 0;
widget.minWidth = 70;
widget.minHeight = 20;
widget.width = 120;
widget.height = 70;
break;
case 'Plot':
widget.simulator = defaultSimulator;
widget.signals = [ 0 ];
widget.ylabel = '';
widget.time = 60;
widget.minWidth = 400;
widget.minHeight = 200;
widget.width = 400;
widget.height = 200;
break;
case 'Table':
widget.simulator = defaultSimulator;
widget.minWidth = 300;
widget.minHeight = 200;
widget.width = 400;
widget.height = 200;
break;
case 'Label':
widget.minWidth = 70;
widget.minHeight = 20;
break;
case 'PlotTable':
widget.simulator = defaultSimulator;
widget.preselectedSignals = [];
widget.signals = []; // initialize selected signals
widget.ylabel = '';
widget.minWidth = 400;
widget.minHeight = 300;
widget.width = 500;
widget.height = 500;
widget.time = 60;
break;
case 'Image':
widget.minWidth = 100;
widget.minHeight = 100;
widget.width = 200;
widget.height = 200;
break;
case 'Button':
widget.minWidth = 100;
widget.minHeight = 50;
widget.width = 100;
widget.height = 100;
widget.background_color = 1;
widget.font_color = 0;
break;
case 'NumberInput':
widget.minWidth = 200;
widget.minHeight = 50;
widget.width = 200;
widget.height = 50;
break;
case 'Slider':
widget.minWidth = 380;
widget.minHeight = 30;
widget.width = 400;
widget.height = 50;
widget.orientation = WidgetSlider.OrientationTypes.HORIZONTAL.value; // Assign default orientation
break;
case 'Gauge':
widget.simulator = defaultSimulator;
widget.signal = 0;
widget.minWidth = 200;
widget.minHeight = 150;
widget.width = 200;
widget.height = 150;
break;
case 'Box':
widget.minWidth = 50;
widget.minHeight = 50;
widget.width = 100;
widget.height = 100;
widget.border_color = 0;
widget.z = 0;
break;
default:
widget.width = 100;
widget.height = 100;
}
return widget;
}
}
export default WidgetFactory;

119
src/components/widget-gauge.js Normal file
View file

@ -0,0 +1,119 @@
/**
* File: widget-gauge.js
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
* Date: 31.03.2017
* Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
**********************************************************************************/
import React, { Component } from 'react';
import { Gauge } from 'gaugeJS';
class WidgetGauge extends Component {
constructor(props) {
super(props);
this.gaugeCanvas = null;
this.gauge = null;
this.state = {
value: 0
};
}
staticLabels(widget_height) {
let label_font_size = Math.floor(widget_height * 0.055); // font scaling factor, integer for performance
return {
font: label_font_size + 'px "Helvetica Neue"',
labels: [0.0, 0.1, 0.5, 0.9, 1.0],
color: "#000000",
fractionDigits: 1
}
}
computeGaugeOptions(widget_height) {
return {
angle: -0.25,
lineWidth: 0.2,
pointer: {
length: 0.6,
strokeWidth: 0.035
},
radiusScale: 0.9,
colorStart: '#6EA2B0',
colorStop: '#6EA2B0',
strokeColor: '#E0E0E0',
highDpiSupport: true,
staticLabels: this.staticLabels(widget_height)
};
}
componentDidMount() {
const opts = this.computeGaugeOptions(this.props.widget.height);
this.gauge = new Gauge(this.gaugeCanvas).setOptions(opts);
this.gauge.maxValue = 1;
this.gauge.setMinValue(0);
this.gauge.animationSpeed = 30;
this.gauge.set(this.state.value);
}
shouldComponentUpdate(nextProps, nextState) {
// Check if size changed, resize labels if it did (the canvas itself is scaled with css)
if (this.props.widget.height !== nextProps.widget.height) {
this.updateAfterResize(nextProps.widget.height);
}
// signal component update only if the value changed
return this.state.value !== nextState.value;
}
componentWillReceiveProps(nextProps) {
// update value
const simulator = nextProps.widget.simulator;
if (nextProps.data == null || nextProps.data[simulator] == null || nextProps.data[simulator].values == null) {
this.setState({ value: 0 });
return;
}
// check if value has changed
const signal = nextProps.data[simulator].values[nextProps.widget.signal];
// 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
const new_value = Math.round( signal[signal.length - 1].y * 1e3 ) / 1e3;
if (this.state.value !== new_value) {
this.setState({ value: new_value });
// update gauge's value
this.gauge.set(new_value);
}
}
updateAfterResize(newHeight) {
// Update labels after resize
this.gauge.setOptions({ staticLabels: this.staticLabels(newHeight) });
}
render() {
var componentClass = this.props.editing ? "gauge-widget editing" : "gauge-widget";
var signalType = null;
if (this.props.simulation) {
var simulationModel = this.props.simulation.models.filter((model) => model.simulator === this.props.widget.simulator)[0];
signalType = simulationModel && simulationModel.length > 0? simulationModel.mapping[this.props.widget.signal].type : '';
}
return (
<div className={ componentClass }>
<div className="gauge-name">{ this.props.widget.name }</div>
<canvas ref={ (node) => this.gaugeCanvas = node } />
<div className="gauge-unit">{ signalType }</div>
<div className="gauge-value">{ this.state.value }</div>
</div>
);
}
}
export default WidgetGauge;

4
src/components/widget-label.js
View file

@ -24,7 +24,9 @@ import React, { Component } from 'react';
class WidgetLabel extends Component {
render() {
return (
<h4>{this.props.widget.name}</h4>
<div className="label-widget">
<h4>{this.props.widget.name}</h4>
</div>
);
}
}

69
src/components/widget-number-input.js Normal file
View file

@ -0,0 +1,69 @@
/**
* File: widget-number-input.js
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
* Date: 29.03.2017
* Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
**********************************************************************************/
import React, { Component } from 'react';
import { Form, FormGroup, Col, ControlLabel, FormControl } from 'react-bootstrap';
class WidgetNumberInput extends Component {
static whichValidationStateIs( condition ) {
switch(condition) {
case 'ok': return null;
case 'error': return 'error';
default: return 'error';
}
}
constructor(props) {
super(props);
this.state = {
value: '',
validationState: WidgetNumberInput.whichValidationStateIs('ok')
};
}
validateInput(e) {
if (e.target.value === '' || e.target.value.endsWith('.')) {
this.setState({
validationState: WidgetNumberInput.whichValidationStateIs('ok'),
value: e.target.value });
} else {
var num = Number(e.target.value);
if (Number.isNaN(num)) {
this.setState({ validationState: WidgetNumberInput.whichValidationStateIs('error'),
value: e.target.value });
} else {
this.setState({
validationState: WidgetNumberInput.whichValidationStateIs('ok'),
value: num });
}
}
}
render() {
return (
<div className="number-input-widget full">
<Form componentClass="fieldset" horizontal>
<FormGroup controlId="formValidationError3" validationState={ this.state.validationState} >
<Col componentClass={ControlLabel} xs={3}>
{this.props.widget.name}
</Col>
<Col xs={9}>
<FormControl type="text" disabled={ this.props.editing } onInput={ (e) => this.validateInput(e) } placeholder="Enter value" value={ this.state.value } />
<FormControl.Feedback />
</Col>
</FormGroup>
</Form>
</div>
);
}
}
export default WidgetNumberInput;

175
src/components/widget-plot-table.js
View file

@ -20,109 +20,138 @@
******************************************************************************/
import React, { Component } from 'react';
import { LineChart } from 'rd3';
import classNames from 'classnames';
import { FormGroup, Checkbox } from 'react-bootstrap';
import { ButtonGroup, Button } 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 = {
size: { w: 0, h: 0 },
signal: 0,
firstTimestamp: 0,
latestTimestamp: 0,
sequence: null,
rows: [],
values: []
preselectedSignals: [],
signals: []
};
}
componentWillReceiveProps(nextProps) {
// check data
// Update internal selected signals state with props (different array objects)
if (this.props.widget.signals !== nextProps.widget.signals) {
this.setState( {signals: nextProps.widget.signals});
}
// Identify if there was a change in the preselected signals
if (nextProps.simulation && (JSON.stringify(nextProps.widget.preselectedSignals) !== JSON.stringify(this.props.widget.preselectedSignals) || this.state.preselectedSignals.length === 0)) {
// Update the currently selected signals by intersecting with the preselected signals
// Do the same with the plot values
var intersection = this.computeIntersection(nextProps.widget.preselectedSignals, nextProps.widget.signals);
this.setState({ signals: intersection });
this.updatePreselectedSignalsState(nextProps);
return;
}
}
// Perform the intersection of the lists, alternatively could be done with Sets ensuring unique values
computeIntersection(preselectedSignals, selectedSignals) {
return preselectedSignals.filter( s => selectedSignals.includes(s));
}
updatePreselectedSignalsState(nextProps) {
const simulator = nextProps.widget.simulator;
// plot size
this.setState({ size: { w: this.props.widget.width - 100, h: this.props.widget.height - 20 }});
if (nextProps.simulation == null || nextProps.data == null || nextProps.data[simulator] == null || nextProps.data[simulator].length === 0 || nextProps.data[simulator].values[0].length === 0) {
// clear values
this.setState({ values: [], sequence: null, rows: [] });
return;
}
// check if new data, otherwise skip
if (this.state.sequence >= nextProps.data[simulator].sequence) {
return;
}
// get simulation model
const simulationModel = nextProps.simulation.models.find((model) => {
return (model.simulator === simulator);
});
// get rows
var rows = [];
simulationModel.mapping.forEach((signal) => {
rows.push({ name: signal.name })
});
// get timestamps
var latestTimestamp = nextProps.data[simulator].values[0][nextProps.data[simulator].values[0].length - 1].x;
var firstTimestamp = latestTimestamp - nextProps.widget.time * 1000;
var firstIndex;
if (nextProps.data[simulator].values[0][0].x < firstTimestamp) {
// find element index representing firstTimestamp
firstIndex = nextProps.data[simulator].values[0].findIndex((value) => {
return value.x >= firstTimestamp;
});
} else {
firstIndex = 0;
firstTimestamp = nextProps.data[simulator].values[0][0].x;
latestTimestamp = firstTimestamp + nextProps.widget.time * 1000;
let preselectedSignals = [];
// Proceed if a simulation model is available
if (simulationModel) {
// Create checkboxes using the signal indices from simulation model
preselectedSignals = simulationModel.mapping.reduce(
// Loop through simulation model signals
(accum, model_signal, signal_index) => {
// Append them if they belong to the current selected type
if (nextProps.widget.preselectedSignals.indexOf(signal_index) > -1) {
accum.push(
{
index: signal_index,
name: model_signal.name
}
)
}
return accum;
}, []);
}
this.setState({ preselectedSignals: preselectedSignals });
}
// copy all values for each signal in time region
var values = [{
values: nextProps.data[simulator].values[this.state.signal].slice(firstIndex, nextProps.data[simulator].values[this.state.signal].length - 1)
}];
this.setState({ values: values, firstTimestamp: firstTimestamp, latestTimestamp: latestTimestamp, sequence: nextProps.data[simulator].sequence, rows: rows });
updateSignalSelection(signal_index, 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 )
});
this.props.onWidgetChange(new_widget);
}
render() {
console.log("Signal: " + this.state.signal);
var checkBoxes = [];
// Data passed to plot
let simulator = this.props.widget.simulator;
let simulatorData = this.props.data[simulator];
if (this.state.preselectedSignals && this.state.preselectedSignals.length > 0) {
// Create checkboxes using the signal indices from simulation model
checkBoxes = this.state.preselectedSignals.map( (signal) => {
var checked = this.state.signals.indexOf(signal.index) > -1;
var chkBxClasses = classNames({
'btn': true,
'btn-default': true,
'active': checked
});
return <Checkbox key={signal.index} className={chkBxClasses} checked={checked} disabled={ this.props.editing } onChange={(e) => this.updateSignalSelection(signal.index, e.target.checked) } > { signal.name } </Checkbox>
});
}
// Prepare an array with the signals to show in the legend
var legendSignals = this.state.preselectedSignals.reduce( (accum, signal, i) => {
if (this.state.signals.includes(signal.index)) {
accum.push({
index: signal.index,
name: signal.name
})
}
return accum;
}, []);
return (
<div className="plot-table-widget" style={{ width: '100%', height: '100%' }} ref="wrapper">
<div className="plot-table-widget" ref="wrapper">
<h4>{this.props.widget.name}</h4>
<div className="content">
<div className="widget-table">
<ButtonGroup vertical>
{ this.state.rows.map( (row, index) => (
<Button key={index} active={ index === this.state.signal } disabled={ this.props.editing } onClick={() => this.setState({ signal: Number(index) }) } > { row.name } </Button>
))
<div className="table-plot-row">
<div className="widget-table">
{ checkBoxes.length > 0 ? (
<FormGroup className="btn-group-vertical">
{ checkBoxes }
</FormGroup>
) : ( <small>No signal has been pre-selected.</small> )
}
</ButtonGroup>
</div>
</div>
<div className="widget-plot">
{this.state.sequence &&
<LineChart
width={ this.state.size.w || 100 }
height={ this.state.size.h || 100 }
data={this.state.values}
gridHorizontal={true}
xAccessor={(d) => { if (d != null) { return new Date(d.x); } }}
hoverAnimation={false}
circleRadius={0}
domain={{ x: [this.state.firstTimestamp, this.state.latestTimestamp] }}
/>
}
<div className="widget-plot">
<Plot signals={ this.state.signals } time={ this.props.widget.time } simulatorData={ simulatorData } yAxisLabel={ this.props.widget.ylabel } />
</div>
</div>
<PlotLegend signals={legendSignals} />
</div>
</div>
);

99
src/components/widget-plot.js
View file

@ -20,81 +20,44 @@
******************************************************************************/
import React, { Component } from 'react';
import { LineChart } from 'rd3';
import Plot from './widget-plot/plot';
import PlotLegend from './widget-plot/plot-legend';
class WidgetPlot extends Component {
constructor(props) {
super(props);
this.state = {
values: [],
firstTimestamp: 0,
latestTimestamp: 0,
sequence: null
};
}
componentWillReceiveProps(nextProps) {
// check data
const simulator = nextProps.widget.simulator;
if (nextProps.simulation == null || nextProps.data == null || nextProps.data[simulator] == null || nextProps.data[simulator].length === 0 || nextProps.data[simulator].values[0].length === 0) {
// clear values
this.setState({ values: [], sequence: null });
return;
}
// check if new data, otherwise skip
if (this.state.sequence >= nextProps.data[simulator].sequence) {
return;
}
// get timestamps
var latestTimestamp = nextProps.data[simulator].values[0][nextProps.data[simulator].values[0].length - 1].x;
var firstTimestamp = latestTimestamp - nextProps.widget.time * 1000;
var firstIndex;
if (nextProps.data[simulator].values[0][0].x < firstTimestamp) {
// find element index representing firstTimestamp
firstIndex = nextProps.data[simulator].values[0].findIndex((value) => {
return value.x >= firstTimestamp;
});
} else {
firstIndex = 0;
firstTimestamp = nextProps.data[simulator].values[0][0].x;
latestTimestamp = firstTimestamp + nextProps.widget.time * 1000;
}
// copy all values for each signal in time region
var values = [];
nextProps.widget.signals.forEach((signal) => {
values.push({
values: nextProps.data[simulator].values[signal].slice(firstIndex, nextProps.data[simulator].values[signal].length - 1)
});
});
this.setState({ values: values, firstTimestamp: firstTimestamp, latestTimestamp: latestTimestamp, sequence: nextProps.data[simulator].sequence });
}
render() {
if (this.state.sequence == null) {
return (<div>Empty</div>);
const simulator = this.props.widget.simulator;
const simulation = this.props.simulation;
let legendSignals = [];
let simulatorData = [];
// Proceed if a simulation with models and a simulator are available
if (simulator && simulation && simulation.models.length > 0) {
const model = simulation.models.find( (model) => model.simulator === simulator );
const chosenSignals = this.props.widget.signals;
simulatorData = this.props.data[simulator];
// Query the signals that will be displayed in the legend
legendSignals = model.mapping.reduce( (accum, model_signal, signal_index) => {
if (chosenSignals.includes(signal_index)) {
accum.push({ index: signal_index, name: model_signal.name });
}
return accum;
}, []);
}
return (
<div style={{ width: '100%', height: '100%' }} ref="wrapper">
<LineChart
width={this.props.widget.width}
height={this.props.widget.height - 20}
data={this.state.values}
title={this.props.widget.name}
gridHorizontal={true}
xAccessor={(d) => { if (d != null) { return new Date(d.x); } }}
hoverAnimation={false}
circleRadius={0}
domain={{ x: [this.state.firstTimestamp, this.state.latestTimestamp] }}
/>
<div className="plot-widget" ref="wrapper">
<h4>{this.props.widget.name}</h4>
<div className="widget-plot">
<Plot signals={ this.props.widget.signals } time={ this.props.widget.time } simulatorData={ simulatorData } yAxisLabel={ this.props.widget.ylabel } />
</div>
<PlotLegend signals={legendSignals} />
</div>
);
}

31
src/components/widget-plot/plot-legend.js Normal file
View file

@ -0,0 +1,31 @@
/**
* File: plot-legend.js
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
* Date: 10.04.2017
* Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
**********************************************************************************/
import React, { Component } from 'react';
import { scaleOrdinal, schemeCategory10 } from 'd3-scale';
class PlotLegend extends Component {
// constructor(props) {
// super(props);
// }
render() {
var colorScale = scaleOrdinal(schemeCategory10);
return (
<div className="plot-legend">
{ this.props.signals.map( (signal) =>
<div key={signal.index} className="signal-legend"><span className="legend-color" style={{ background: colorScale(signal.index) }}>&nbsp;&nbsp;</span> {signal.name} </div>)
}
</div>
);
}
}
export default PlotLegend;

141
src/components/widget-plot/plot.js Normal file
View file

@ -0,0 +1,141 @@
/**
* File: plot.js
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
* Date: 10.04.2017
* Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
**********************************************************************************/
import React, { Component } from 'react';
import { LineChart } from 'rd3';
import { scaleOrdinal, schemeCategory10 } from 'd3-scale';
class Plot extends Component {
constructor(props) {
super(props);
this.chartWrapper = null;
// Initialize plot size and data
this.state = Object.assign(
{ size: { w: 0, h: 0 } },
this.getPlotInitData(true)
);
}
// Get an object with 'invisible' init data for the last minute.
// Include start/end timestamps if required.
getPlotInitData(withRangeTimestamps = false) {
const initSecondTime = Date.now();
const initFirstTime = initSecondTime - 1000 * 60; // Decrease 1 min
const values = [{ values: [{x: initFirstTime, y: 0}], strokeWidth: 0 }];
let output = withRangeTimestamps?
{ sequence: 0, values: values, firstTimestamp: initFirstTime, latestTimestamp: initSecondTime, } :
{ sequence: 0, values: values };
return output;
}
componentWillReceiveProps(nextProps) {
let nextData = nextProps.simulatorData;
// handle plot size
const w = this.chartWrapper.offsetWidth - 20;
const h = this.chartWrapper.offsetHeight - 20;
const currentSize = this.state.size;
if (w !== currentSize.w || h !== currentSize.h) {
this.setState({size: { w, h } });
}
// If signals were cleared, clear the plot (triggers a new state)
if (this.signalsWereJustCleared(nextProps)) { this.clearPlot(); return; }
// If no signals have been selected, just leave
if (nextProps.signals == null || nextProps.signals.length === 0) { return; }
// Identify simulation reset
if (nextData == null || nextData.length === 0 || nextData.values[0].length === 0) { this.clearPlot(); return; }
// check if new data, otherwise skip
if (this.state.sequence >= nextData.sequence) { return; }
this.updatePlotData(nextProps);
}
signalsWereJustCleared(nextProps) {
return this.props.signals &&
nextProps.signals &&
this.props.signals.length > 0 &&
nextProps.signals.length === 0;
}
clearPlot() {
this.setState( this.getPlotInitData(false) );
}
updatePlotData(nextProps) {
let nextData = nextProps.simulatorData;
// get timestamps
var latestTimestamp = nextData.values[0][nextData.values[0].length - 1].x;
var firstTimestamp = latestTimestamp - nextProps.time * 1000;
var firstIndex;
if (nextData.values[0][0].x < firstTimestamp) {
// find element index representing firstTimestamp
firstIndex = nextData.values[0].findIndex((value) => {
return value.x >= firstTimestamp;
});
} else {
firstIndex = 0;
firstTimestamp = nextData.values[0][0].x;
latestTimestamp = firstTimestamp + nextProps.time * 1000;
}
// copy all values for each signal in time region
var values = [];
nextProps.signals.forEach((signal_index, i, arr) => (
// Include signal index, useful to relate them to the signal selection
values.push(
{
index: signal_index,
values: nextData.values[signal_index].slice(firstIndex, nextData.values[signal_index].length - 1)})
));
this.setState({ values: values, firstTimestamp: firstTimestamp, latestTimestamp: latestTimestamp, sequence: nextData.sequence });
}
render() {
// Make tick count proportional to the plot width using a rough scale ratio
var tickCount = Math.round(this.state.size.w / 80);
return (
<div className="chart-wrapper" ref={ (domNode) => this.chartWrapper = domNode }>
{this.state.sequence != null &&
<LineChart
width={ this.state.size.w || 100 }
height={ this.state.size.h || 100 }
margins={{top: 10, right: 0, bottom: 20, left: 45 }}
data={this.state.values }
colors={ scaleOrdinal(schemeCategory10) }
gridHorizontal={true}
xAccessor={(d) => { if (d != null) { return new Date(d.x); } }}
xAxisTickCount={ tickCount }
yAxisLabel={ this.props.yAxisLabel }
hoverAnimation={false}
circleRadius={0}
domain={{ x: [this.state.firstTimestamp, this.state.latestTimestamp] }}
/>
}
</div>
);
}
}
export default Plot;

100
src/components/widget-slider.js Normal file
View file

@ -0,0 +1,100 @@
/**
* File: widget-slider.js
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
* Date: 30.03.2017
* Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
**********************************************************************************/
import React, { Component } from 'react';
import classNames from 'classnames';
import Slider from 'rc-slider';
import 'rc-slider/assets/index.css';
class WidgetSlider extends Component {
static get OrientationTypes() {
return ({
HORIZONTAL: {value: 0, name: 'Horizontal'},
VERTICAL: {value: 1, name: 'Vertical'}
})
}
constructor(props) {
super(props);
this.state = {
value: 50
};
}
componentWillReceiveProps(nextProps) {
// Update value
if (nextProps.widget.value && this.state.value !== nextProps.widget.value) {
this.setState({ value: nextProps.widget.value })
}
// Check if the orientation changed, update the size if it did
if (this.props.widget.orientation !== nextProps.widget.orientation) {
let baseWidget = nextProps.widget;
// Exchange dimensions and constraints
let newWidget = Object.assign({}, baseWidget, {
width: baseWidget.height,
height: baseWidget.width,
minWidth: baseWidget.minHeight,
minHeight: baseWidget.minWidth,
maxWidth: baseWidget.maxHeight,
maxHeight: baseWidget.maxWidth
});
nextProps.onWidgetChange(newWidget);
}
}
valueIsChanging(newValue) {
this.setState({ value: newValue });
}
valueChanged(newValue) {
// Enable to propagate action
// let newWidget = Object.assign({}, this.props.widget, {
// value: newValue
// });
// this.props.onWidgetChange(newWidget);
}
render() {
let isVertical = this.props.widget.orientation === WidgetSlider.OrientationTypes.VERTICAL.value;
let fields = {
'name': this.props.widget.name,
'control': <Slider min={0} max={100} value={ this.state.value } step={ 0.1 } disabled={ this.props.editing } vertical={ isVertical } onChange={ (v) => this.valueIsChanging(v) } onAfterChange={ (v) => this.valueChanged(v) }/>,
'value': this.state.value
}
var widgetClasses = classNames({
'slider-widget': true,
'full': true,
'vertical': isVertical,
'horizontal': !isVertical
});
return (
this.props.widget.orientation === WidgetSlider.OrientationTypes.HORIZONTAL.value? (
<div className={widgetClasses}>
<label>{ fields.name }</label>
<div className='slider'>{ fields.control }</div>
<span>{ fields.value }</span>
</div>
) : (
<div className={widgetClasses}>
<label>{ fields.name }</label>
{ fields.control }
<span>{ fields.value }</span>
</div>
)
);
}
}
export default WidgetSlider;

4
src/components/widget-table.js
View file

@ -60,7 +60,7 @@ class WidgetTable extends Component {
nextProps.data[simulator].values.forEach((signal, index) => {
rows.push({
name: simulationModel.mapping[index].name,
value: signal[signal.length - 1].y
value: signal[signal.length - 1].y.toFixed(3)
})
});
@ -69,7 +69,7 @@ class WidgetTable extends Component {
render() {
return (
<div style={{ width: '100%', height: '100%' }}>
<div className="table-widget">
<h4>{this.props.widget.name}</h4>
<Table data={this.state.rows}>

5
src/components/widget-value.js
View file

@ -47,9 +47,10 @@ class WidgetValue extends Component {
}
render() {
var value_to_render = Number(this.state.value);
return (
<div>
{this.props.widget.name}: {this.state.value}
<div className="single-value-widget">
<strong>{this.props.widget.name}</strong> <span>{ Number.isNaN(value_to_render)? NaN : value_to_render.toFixed(3) } </span>
</div>
);
}

2
src/containers/project.js
View file

@ -156,7 +156,7 @@ class Visualizations extends Component {
}
return (
<div>
<div className='section'>
<h1>{this.state.project.name}</h1>
<CustomTable data={visualizations}>

2
src/containers/projects.js
View file

@ -102,7 +102,7 @@ class Projects extends Component {
render() {
return (
<div>
<div className='section'>
<h1>Projects</h1>
<Table data={this.state.projects}>

2
src/containers/simulation.js
View file

@ -131,7 +131,7 @@ class Simulation extends Component {
render() {
return (
<div>
<div className='section'>
<h1>{this.state.simulation.name}</h1>
<Table data={this.state.simulation.models}>

2
src/containers/simulations.js
View file

@ -112,7 +112,7 @@ class Simulations extends Component {
render() {
return (
<div>
<div className='section'>
<h1>Simulations</h1>
<Table data={this.state.simulations}>

2
src/containers/simulators.js
View file

@ -96,7 +96,7 @@ class Simulators extends Component {
render() {
return (
<div>
<div className='section'>
<h1>Simulators</h1>
<Table data={this.state.simulators}>

150
src/containers/visualization.js
View file

@ -24,6 +24,7 @@ import { Container } from 'flux/utils';
import { Button } from 'react-bootstrap';
import { ContextMenu, MenuItem } from 'react-contextmenu';
import WidgetFactory from '../components/widget-factory';
import ToolboxItem from '../components/toolbox-item';
import Dropzone from '../components/dropzone';
import Widget from './widget';
@ -34,6 +35,8 @@ import ProjectStore from '../stores/project-store';
import SimulationStore from '../stores/simulation-store';
import FileStore from '../stores/file-store';
import AppDispatcher from '../app-dispatcher';
import NotificationsDataManager from '../data-managers/notifications-data-manager';
import NotificationsFactory from '../data-managers/notifications-factory';
class Visualization extends Component {
static getStores() {
@ -60,11 +63,13 @@ class Visualization extends Component {
editModal: prevState.editModal || false,
modalData: prevState.modalData || null,
modalIndex: prevState.modalIndex || null,
maxWidgetHeight: prevState.maxWidgetHeight || 0,
dropZoneHeight: prevState.dropZoneHeight || 0,
last_widget_key: prevState.last_widget_key || 0
};
}
componentWillMount() {
AppDispatcher.dispatch({
type: 'visualizations/start-load'
@ -126,6 +131,8 @@ class Visualization extends Component {
widgets: tempVisualization.widgets? this.transformToWidgetsDict(tempVisualization.widgets) : {}
});
this.computeHeightWithWidgets(visualization.widgets);
this.setState({ visualization: visualization, project: null });
AppDispatcher.dispatch({
@ -137,54 +144,19 @@ class Visualization extends Component {
}
handleDrop(item, position) {
// add new widget
var widget = {
name: 'Name',
type: item.name,
width: 100,
height: 100,
x: position.x,
y: position.y,
z: 0
};
// set type specific properties
if (item.name === 'Value') {
widget.simulator = this.state.simulation.models[0].simulator;
widget.signal = 0;
widget.minWidth = 70;
widget.minHeight = 20;
} else if (item.name === 'Plot') {
widget.simulator = this.state.simulation.models[0].simulator;
widget.signals = [ 0 ];
widget.time = 60;
widget.minWidth = 400;
widget.minHeight = 200;
widget.width = 400;
widget.height = 200;
} else if (item.name === 'Table') {
widget.simulator = this.state.simulation.models[0].simulator;
widget.minWidth = 300;
widget.minHeight = 200;
widget.width = 400;
widget.height = 200;
} else if (item.name === 'Label') {
widget.minWidth = 70;
widget.minHeight = 20;
} else if (item.name === 'PlotTable') {
widget.simulator = this.state.simulation.models[0].simulator;
widget.minWidth = 400;
widget.minHeight = 200;
widget.width = 500;
widget.height = 400;
widget.time = 60
} else if (item.name === 'Image') {
widget.minWidth = 100;
widget.minHeight = 100;
widget.width = 200;
widget.height = 200;
let widget = null;
let defaultSimulator = null;
if (this.state.simulation.models && this.state.simulation.models.length === 0) {
NotificationsDataManager.addNotification(NotificationsFactory.NO_SIM_MODEL_AVAILABLE);
} else {
defaultSimulator = this.state.simulation.models[0].simulator;
}
// create new widget
widget = WidgetFactory.createWidgetOfType(item.name, position, defaultSimulator);
var new_widgets = this.state.visualization.widgets;
var widget_key = this.getNewWidgetKey();
@ -193,11 +165,17 @@ class Visualization extends Component {
var visualization = Object.assign({}, this.state.visualization, {
widgets: new_widgets
});
this.increaseHeightWithWidget(widget);
this.setState({ visualization: visualization });
}
widgetChange(updated_widget, key) {
widgetStatusChange(updated_widget, key) {
// Widget changed internally, make changes effective then save them
this.widgetChange(updated_widget, key, this.saveChanges);
}
widgetChange(updated_widget, key, callback = null) {
var widgets_update = {};
widgets_update[key] = updated_widget;
var new_widgets = Object.assign({}, this.state.visualization.widgets, widgets_update);
@ -205,7 +183,46 @@ class Visualization extends Component {
var visualization = Object.assign({}, this.state.visualization, {
widgets: new_widgets
});
this.setState({ visualization: visualization });
// Check if the height needs to be increased, the section may have shrunk if not
if (!this.increaseHeightWithWidget(updated_widget)) {
this.computeHeightWithWidgets(visualization.widgets);
}
this.setState({ visualization: visualization }, callback);
}
/*
* Set the initial height state based on the existing widgets
*/
computeHeightWithWidgets(widgets) {
// Compute max height from widgets
let maxHeight = Object.keys(widgets).reduce( (maxHeightSoFar, widgetKey) => {
let thisWidget = widgets[widgetKey];
let thisWidgetHeight = thisWidget.y + thisWidget.height;
return thisWidgetHeight > maxHeightSoFar? thisWidgetHeight : maxHeightSoFar;
}, 0);
this.setState({
maxWidgetHeight: maxHeight,
dropZoneHeight: maxHeight + 40
});
}
/*
* Adapt the area's height with the position of the new widget.
* Return true if the height increased, otherwise false.
*/
increaseHeightWithWidget(widget) {
let increased = false;
let thisWidgetHeight = widget.y + widget.height;
if (thisWidgetHeight > this.state.maxWidgetHeight) {
increased = true;
this.setState({
maxWidgetHeight: thisWidgetHeight,
dropZoneHeight: thisWidgetHeight + 40
});
}
return increased;
}
editWidget(e, data) {
@ -238,6 +255,11 @@ class Visualization extends Component {
this.setState({ visualization: visualization });
}
stopEditing() {
// Provide the callback so it can be called when state change is applied
this.setState({ editing: false }, this.saveChanges );
}
saveChanges() {
// Transform to a list
var visualization = Object.assign({}, this.state.visualization, {
@ -248,8 +270,6 @@ class Visualization extends Component {
type: 'visualizations/start-edit',
data: visualization
});
this.setState({ editing: false });
}
discardChanges() {
@ -299,25 +319,10 @@ class Visualization extends Component {
}
render() {
// calculate widget area height
var height = 0;
var current_widgets = this.state.visualization.widgets;
if (current_widgets) {
Object.keys(current_widgets).forEach( (widget_key) => {
var widget = current_widgets[widget_key];
if (widget.y + widget.height > height) {
height = widget.y + widget.height;
}
});
// add padding
height += 40;
}
return (
<div className='section box'>
<div className='section box' >
<div className='section-header box-header'>
<div className="section-title">
<span>
@ -326,7 +331,7 @@ class Visualization extends Component {
</div>
{this.state.editing ? (
<div className='section-buttons-group'>
<Button bsStyle="link" onClick={() => this.saveChanges()}>
<Button bsStyle="link" onClick={() => this.stopEditing()}>
<span className="glyphicon glyphicon-floppy-disk"></span> Save
</Button>
<Button bsStyle="link" onClick={() => this.discardChanges()}>
@ -351,13 +356,18 @@ class Visualization extends Component {
<ToolboxItem name="Label" type="widget" />
<ToolboxItem name="Image" type="widget" />
<ToolboxItem name="PlotTable" type="widget" />
<ToolboxItem name="Button" type="widget" />
<ToolboxItem name="NumberInput" type="widget" />
<ToolboxItem name="Slider" type="widget" />
<ToolboxItem name="Gauge" type="widget" />
<ToolboxItem name="Box" type="widget" />
</div>
}
<Dropzone height={height} onDrop={(item, position) => this.handleDrop(item, position)} editing={this.state.editing}>
<Dropzone height={this.state.dropZoneHeight} onDrop={(item, position) => this.handleDrop(item, position)} editing={this.state.editing}>
{current_widgets != null &&
Object.keys(current_widgets).map( (widget_key) => (
<Widget key={widget_key} data={current_widgets[widget_key]} simulation={this.state.simulation} onWidgetChange={(w, k) => this.widgetChange(w, k)} editing={this.state.editing} index={widget_key} grid={this.state.grid} />
<Widget key={widget_key} data={current_widgets[widget_key]} simulation={this.state.simulation} onWidgetChange={(w, k) => this.widgetChange(w, k)} onWidgetStatusChange={(w, k) => this.widgetStatusChange(w, k)} editing={this.state.editing} index={widget_key} grid={this.state.grid} />
))}
</Dropzone>

38
src/containers/widget.js
View file

@ -23,6 +23,7 @@ import React, { Component } from 'react';
import { Container } from 'flux/utils';
import { ContextMenuTrigger } from 'react-contextmenu';
import Rnd from 'react-rnd';
import classNames from 'classnames';
import AppDispatcher from '../app-dispatcher';
import SimulatorDataStore from '../stores/simulator-data-store';
@ -34,6 +35,11 @@ import WidgetTable from '../components/widget-table';
import WidgetLabel from '../components/widget-label';
import WidgetPlotTable from '../components/widget-plot-table';
import WidgetImage from '../components/widget-image';
import WidgetButton from '../components/widget-button';
import WidgetNumberInput from '../components/widget-number-input';
import WidgetSlider from '../components/widget-slider';
import WidgetGauge from '../components/widget-gauge';
import WidgetBox from '../components/widget-box';
import '../styles/widgets.css';
@ -84,7 +90,7 @@ class Widget extends Component {
resizeStop(direction, styleSize, clientSize, delta) {
// update widget
var widget = this.props.data;
let widget = Object.assign({}, this.props.data);
// resize depends on direction
if (direction === 'left' || direction === 'topLeft' || direction === 'bottomLeft') {
@ -125,6 +131,7 @@ class Widget extends Component {
// get widget element
const widget = this.props.data;
var borderedWidget = false;
var element = null;
// dummy is passed to widgets to keep updating them while in edit mode
@ -132,15 +139,35 @@ class Widget extends Component {
element = <WidgetValue widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulation={this.props.simulation} />
} else if (widget.type === 'Plot') {
element = <WidgetPlot widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulation={this.props.simulation} />
borderedWidget = true;
} else if (widget.type === 'Table') {
element = <WidgetTable widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulation={this.props.simulation} />
} else if (widget.type === 'Label') {
element = <WidgetLabel widget={widget} />
borderedWidget = true;
} else if (widget.type === 'PlotTable') {
element = <WidgetPlotTable widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulation={this.props.simulation} editing={this.props.editing} />
element = <WidgetPlotTable widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulation={this.props.simulation} editing={this.props.editing} onWidgetChange={(w) => this.props.onWidgetStatusChange(w, this.props.index) } />
borderedWidget = true;
} else if (widget.type === 'Image') {
element = <WidgetImage widget={widget} files={this.state.files} />
borderedWidget = true;
} else if (widget.type === 'Button') {
element = <WidgetButton widget={widget} editing={this.props.editing} />
} else if (widget.type === 'NumberInput') {
element = <WidgetNumberInput widget={widget} editing={this.props.editing} />
} else if (widget.type === 'Slider') {
element = <WidgetSlider widget={widget} editing={this.props.editing} onWidgetChange={(w) => this.props.onWidgetStatusChange(w, this.props.index) } />
} else if (widget.type === 'Gauge') {
element = <WidgetGauge widget={widget} data={this.state.simulatorData} editing={this.props.editing} simulation={this.props.simulation} />
} else if (widget.type === 'Box') {
element = <WidgetBox widget={widget} editing={this.props.editing} />
}
let widgetClasses = classNames({
'widget': !this.props.editing,
'editing-widget': this.props.editing,
'border': borderedWidget
});
if (this.props.editing) {
return (
@ -149,9 +176,10 @@ class Widget extends Component {
initial={{ x: Number(widget.x), y: Number(widget.y), width: widget.width, height: widget.height }}
minWidth={ widget.minWidth }
minHeight={ widget.minHeight }
lockAspectRatio={ widget.lockedAspectRatio }
bounds={'parent'}
className="editing-widget"
onResizeStart={ (direction, styleSize, clientSize, event) => this.borderWasClicked(event) }
className={ widgetClasses }
onResizeStart={ (direction, styleSize, clientSize, event) => this.borderWasClicked(event) }
onResizeStop={(direction, styleSize, clientSize, delta) => this.resizeStop(direction, styleSize, clientSize, delta)}
onDragStop={(event, ui) => this.dragStop(event, ui)}
moveGrid={grid}
@ -165,7 +193,7 @@ class Widget extends Component {
);
} else {
return (
<div className="widget" style={{ width: Number(widget.width), height: Number(widget.height), left: Number(widget.x), top: Number(widget.y), 'zIndex': Number(widget.z), position: 'absolute' }}>
<div className={ widgetClasses } style={{ width: Number(widget.width), height: Number(widget.height), left: Number(widget.x), top: Number(widget.y), 'zIndex': Number(widget.z), position: 'absolute' }}>
{element}
</div>
);

24
src/data-managers/notifications-factory.js Normal file
View file

@ -0,0 +1,24 @@
/**
* File: notifications-factory.js
* Description: An unique source of pre-defined notifications that are displayed
* throughout the application.
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
* Date: 13.04.2017
* Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
**********************************************************************************/
class NotificationsFactory {
static get NO_SIM_MODEL_AVAILABLE() {
return {
title: 'No simulation model available',
message: 'Consider defining a simulation model in the simulators section.',
level: 'warning'
};
}
}
export default NotificationsFactory;

2
src/data-managers/simulators-data-manager.js
View file

@ -39,7 +39,7 @@ function isRunning(simulator) {
// check if simulator is running
simulator.running = false;
if (response.id == body.id) {
if (response.id === body.id) {
response.response.forEach(sim => {
if (sim.name === name) {
simulator.running = true;

21
src/styles/app.css
View file

@ -57,8 +57,8 @@ body {
.app-footer {
width: 100%;
height: 60px;
position: absolute;
bottom: 0px;
/* Float below body */
float: right;
padding-top: 20px;
text-align: center;
@ -69,24 +69,21 @@ body {
.app-body {
/* Let sidebar grow and content occupy rest of the space */
display: flex;
position: absolute;
top: 60px;
bottom: 60px;
right: 0px;
left: 0px;
float: right;
width: 100%;
/* Fit between header and footer */
min-height: calc(100vh - 140px);
padding: 15px 5px 0px 5px;
}
.app-body div {
.app-body > div {
margin-left: 7px;
margin-right: 7px;
}
.app-content {
flex: 1 1 auto;
min-height: 400px;
height: 100%;
padding: 15px 20px;
background-color: #fff;
@ -117,7 +114,6 @@ body {
.active {
font-weight: bold;
/*text-decoration:none;*/
}
.menu-sidebar ul {
@ -242,7 +238,8 @@ body {
}
.section {
height: 100%;
min-height: 100%;
width: 100%;
}
.section-header div {

371
src/styles/widgets.css
View file

@ -20,14 +20,27 @@
******************************************************************************/
.widget {
border: 1px solid lightgray;
padding: 3px 6px;
background-color: #fff;
background-color: #fff;
overflow: auto;
}
.border {
border: 1px solid lightgray;
}
.editing-widget {
border: 1px solid lightgray;
background-color: #fff;
background-color: #fff;
}
/* Firefox-specific rules */
@-moz-document url-prefix() {
.editing-widget:not(.border):hover {
outline-offset: -10px;
}
}
.editing-widget:not(.border):hover {
outline: 1px solid lightgray;
}
/* Area to trigger the context menu */
@ -37,7 +50,7 @@
position: absolute;
top: 0px;
left: 0px;
padding: 3px 6px;
overflow: auto;
}
.react-contextmenu {
@ -108,21 +121,15 @@
right: 7px;
}
.plot-table-widget .content {
display: -webkit-flex;
display: flex;
}
.plot-table-widget .widget-table {
min-width: 100px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Reset Bootstrap styles to "disable" while editing */
.plot-table-widget .widget-table .btn[disabled] {
div[class*="-widget"] .btn[disabled], .btn.disabled, div[class*="-widget"] input[disabled], .form-control[disabled], .checkbox.disabled label {
cursor: inherit;
pointer-events: none;
}
.editing-widget .btn-default.active {
background-color: #abcfd8;
border-color: #ccc;
}
.btn-default[disabled]:hover {
@ -136,6 +143,332 @@
}
/* End reset */
/* Match Bootstrap's them to VILLAS */
.widget .btn-default.active {
background-color: #abcfd8;
}
.widget .btn-default.active:hover, .widget .btn-default.active:hover {
background-color: #89b3bd;
}
.widget .btn-default:hover {
background-color: #abcfd8;
}
/* End match */
/* Begin edit menu: Colors */
.color-control input[type="radio"] {
display: none;
}
.color-control .radio-inline.checked {
border-color: #000 !important;
}
.color-control .radio-inline {
height: 24px;
flex: 1 1 auto;
border: 2px solid;
/* Reset bootstrap padding */
padding-left: 0px;
}
.color-control .radio-inline + .radio-inline {
/* Reset bootstrap margin */
margin-left: 0px;
}
.color-control .radio-inline:hover {
border-color: #444 !important;
}
.color-control div[class*="colors-column-"] {
display: flex;
padding: 2px 20px;
}
/* End edit menu: Colors */
/* PlotTable widget */
.plot-table-widget, .plot-widget, .value-widget, .image-widget, .label-widget {
width: 100%;
height: 100%;
padding: 3px 6px;
}
.plot-table-widget {
display: -webkit-flex;
display: flex;
flex-direction: column;
}
.plot-table-widget .content {
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
display: -webkit-flex;
display: flex;
flex-direction: column;
}
.table-plot-row {
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
display: -webkit-flex;
display: flex;
}
.plot-table-widget .widget-table {
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
flex-basis: 90px;
max-width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
}
.plot-table-widget small {
text-align: center;
}
.plot-table-widget .checkbox label {
height: 100%;
width: 100%;
padding: 6px 12px;
overflow-x: hidden;
}
.plot-table-widget .btn {
padding: 0px;
}
.plot-table-widget input[type="checkbox"] {
display: none;
}
/* End PlotTable Widget */
/* Plot Widget */
.plot-widget {
display: -webkit-flex;
display: flex;
flex-direction: column;
}
/* End Plot Widget */
/* Plots */
/* The plot container, in order to avoid 100% height/width */
.widget-plot {
display: flex;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
.chart-wrapper {
width: 100%;
padding-left: 10px;
}
.plot-legend {
display: -webkit-flex;
display: flex;
flex-basis: 20px; /* Enough to allocate one row */
max-height: 40px; /* Allocate up to two rows */
flex-shrink: 0;
flex-wrap: wrap;
justify-content: space-around;
margin-bottom: 5px;
}
.signal-legend {
font-size: 0.8em;
font-weight: 700;
padding-left: 5px;
padding-right: 5px;
overflow: hidden;
}
.legend-color {
height: 50%;
display: inline-block;
vertical-align: middle;
}
/* End Plots */
.single-value-widget {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.single-value-widget > * {
width: 50%;
float: left;
margin: 5px;
font-size: 1vw;
}
/* Button widget styling */
.button-widget button {
border-radius: 25px;
border-style: double;
border-width: 4px;
overflow-x: hidden;
font-weight: 500;
font-size: 1.2em;
}
.button-widget button:hover {
border-style: double;
}
/* End button widget styling */
.full {
width: 100%;
height: 100%;
}
/* Number input widget */
div[class*="-widget"] label {
cursor: inherit;
}
.number-input-widget {
display: flex;
flex-direction: column;
justify-content: center;
}
.number-input-widget .form-horizontal .form-group {
margin: 0px;
}
/* End number input widget */
/* Begin Slider widget */
.slider-widget {
display: flex;
align-items: center;
justify-content: space-around;
}
.slider-widget label {
flex: 0 0 auto;
text-align: center;
}
.slider-widget span {
text-align: center;
font-size: 1.5em;
font-weight: 600;
}
.slider-widget.horizontal .slider {
flex: 1 1 auto;
}
.slider-widget.horizontal span {
flex: 0 0 50pt;
}
.slider-widget.horizontal label {
padding-right: 10px;
}
.slider-widget.vertical {
flex-direction: column;
}
.slider-widget.vertical span {
padding-top: 10px;
}
.slider-widget.vertical label {
padding-bottom: 10px;
}
/* Begin Slider customization */
.rc-slider-track {
background-color: #6EA2B0;
}
.rc-slider-handle, .rc-slider-handle:hover {
border-color: #6EA2B0;
}
.rc-slider-disabled {
background-color: inherit;
}
.rc-slider-disabled .rc-slider-handle {
cursor: inherit;
}
.rc-slider-disabled .rc-slider-handle:hover {
border-color:#ccc;
}
/* End Slider customization */
/* End slider widget */
/* Gauge widget */
.gauge-widget {
width: 100%;
height: 100%;
}
.gauge-widget canvas {
width: 100%;
height: 87%;
}
.gauge-name {
height: 10%;
width: 100%;
text-align: center;
font-weight: bold;
}
.gauge-unit {
position: absolute;
width: 100%;
font-size: 1.0em;
bottom: 25%;
text-align: center;
}
.gauge-value {
position: absolute;
width: 100%;
font-weight: bold;
font-size: 1.5em;
bottom: 10%;
text-align: center;
}
/* End gauge widget */
/* Begin label widget */
.label-widget {
text-align: center;
}
/* End label widget */
/* Begin table widget */
.table-widget td, .table-widget th {
text-align: center;
}
/* End table widget*/
/* Begin box widget */
.box-widget .border {
width: 100%;
height: 100%;
border: 2px solid;
}
/* End box widget */
.plot-table-widget .widget-plot {
-webkit-flex: 1 0 auto;
flex: 1 0 auto;