From dd068b919d08d89a68f29b33803360d0d6541b2e Mon Sep 17 00:00:00 2001 From: Ricardo Hernandez-Montoya Date: Fri, 21 Apr 2017 16:13:07 +0200 Subject: [PATCH] Plots' Y-axis label can be edited --- .../dialog/edit-widget-text-control.js | 39 +++++++++++++++++++ src/components/dialog/edit-widget.js | 7 +++- src/components/widget-factory.js | 2 + src/components/widget-plot-table.js | 2 +- src/components/widget-plot.js | 2 +- src/components/widget-plot/plot.js | 1 + src/styles/widgets.css | 1 + 7 files changed, 50 insertions(+), 4 deletions(-) create mode 100644 src/components/dialog/edit-widget-text-control.js diff --git a/src/components/dialog/edit-widget-text-control.js b/src/components/dialog/edit-widget-text-control.js new file mode 100644 index 0000000..d4196b4 --- /dev/null +++ b/src/components/dialog/edit-widget-text-control.js @@ -0,0 +1,39 @@ +/** + * File: edit-widget-text-control.js + * Author: Ricardo Hernandez-Montoya + * 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 ( + + { this.props.label } + this.props.handleChange(e)} /> + + + ); + } +} + +export default EditWidgetTextControl; \ No newline at end of file diff --git a/src/components/dialog/edit-widget.js b/src/components/dialog/edit-widget.js index b90e75c..a7fc542 100644 --- a/src/components/dialog/edit-widget.js +++ b/src/components/dialog/edit-widget.js @@ -12,6 +12,7 @@ import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap'; import Dialog from './dialog'; +import EditWidgetTextControl from './edit-widget-text-control'; import EditWidgetTimeControl from './edit-widget-time-control'; import EditImageWidgetControl from './edit-widget-image-control'; import EditWidgetSimulatorControl from './edit-widget-simulator-control'; @@ -86,7 +87,8 @@ class EditWidgetDialog extends Component { dialogControls.push( this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />, this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />, - this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} /> + this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />, + this.handleChange(e)} /> ) } else if (this.props.widget.type === 'Table') { dialogControls.push( @@ -104,7 +106,8 @@ class EditWidgetDialog extends Component { } else if (this.props.widget.type === 'PlotTable') { dialogControls.push( this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />, - this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} /> + this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />, + this.handleChange(e)} /> ) } else if (this.props.widget.type === 'Slider') { dialogControls.push( diff --git a/src/components/widget-factory.js b/src/components/widget-factory.js index 0f45052..b22faa3 100644 --- a/src/components/widget-factory.js +++ b/src/components/widget-factory.js @@ -37,6 +37,7 @@ class WidgetFactory { case 'Plot': widget.simulator = defaultSimulator; widget.signals = [ 0 ]; + widget.ylabel = ''; widget.time = 60; widget.minWidth = 400; widget.minHeight = 200; @@ -58,6 +59,7 @@ class WidgetFactory { widget.simulator = defaultSimulator; widget.preselectedSignals = []; widget.signals = []; // initialize selected signals + widget.ylabel = ''; widget.minWidth = 400; widget.minHeight = 300; widget.width = 500; diff --git a/src/components/widget-plot-table.js b/src/components/widget-plot-table.js index 4041c8f..43eaf03 100644 --- a/src/components/widget-plot-table.js +++ b/src/components/widget-plot-table.js @@ -136,7 +136,7 @@ class WidgetPlotTable extends Component {
- +
diff --git a/src/components/widget-plot.js b/src/components/widget-plot.js index e0c2662..1c05d58 100644 --- a/src/components/widget-plot.js +++ b/src/components/widget-plot.js @@ -43,7 +43,7 @@ class WidgetPlot extends Component {

{this.props.widget.name}

- +
diff --git a/src/components/widget-plot/plot.js b/src/components/widget-plot/plot.js index cb9aba8..6bae9d0 100644 --- a/src/components/widget-plot/plot.js +++ b/src/components/widget-plot/plot.js @@ -126,6 +126,7 @@ class Plot extends Component { 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] }} diff --git a/src/styles/widgets.css b/src/styles/widgets.css index b031497..93c40e4 100644 --- a/src/styles/widgets.css +++ b/src/styles/widgets.css @@ -221,6 +221,7 @@ div[class*="-widget"] .btn[disabled], .btn.disabled, div[class*="-widget"] input .chart-wrapper { width: 100%; + padding-left: 10px; } .plot-legend {