Plots' Y-axis label can be edited

src/components/dialog/edit-widget-text-control.js

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

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(
           <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)} />
+          <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') {
         dialogControls.push(
@@ -104,7 +106,8 @@ class EditWidgetDialog extends Component {
       } 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)} />
+          <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(

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;

src/components/widget-plot-table.js

@@ -136,7 +136,7 @@ class WidgetPlotTable extends Component {
             </div>
 
             <div className="widget-plot">
-              <Plot signals={ this.state.signals } time={ this.props.widget.time } simulatorData={ simulatorData } />
+              <Plot signals={ this.state.signals } time={ this.props.widget.time } simulatorData={ simulatorData } yAxisLabel={ this.props.widget.ylabel } />
             </div>
           </div>
           <PlotLegend signals={legendSignals} />

src/components/widget-plot.js

@@ -43,7 +43,7 @@ class WidgetPlot extends Component {
         <h4>{this.props.widget.name}</h4>
         
         <div className="widget-plot">
-          <Plot signals={ this.props.widget.signals } time={ this.props.widget.time } simulatorData={ simulatorData } />
+          <Plot signals={ this.props.widget.signals } time={ this.props.widget.time } simulatorData={ simulatorData } yAxisLabel={ this.props.widget.ylabel } />
         </div>
         <PlotLegend signals={legendSignals} />
       </div>

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] }}

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 {