Add plot widget

Plot edit dialog not created yet

src/components/dialog/edit-widget.js

@@ -13,6 +13,7 @@ import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
 import Dialog from './dialog';
 
 import EditValueWidget from './edit-widget-value';
+import editPlotWidget from './edit-widget-plot';
 
 class EditWidgetDialog extends Component {
   static propTypes = {

src/components/widget-plot.js

@@ -0,0 +1,66 @@
+/**
+ * File: widget-plot.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 08.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 { LineChart } from 'rd3';
+
+class WidgetPlot extends Component {
+  render() {
+    // get selected simulation model
+    const widget = this.props.widget;
+    var simulationModel;
+
+    if (this.props.simulation && this.props.simulation.models && this.props.data[widget.simulator]) {
+      this.props.simulation.models.forEach((model) => {
+        if (model.simulator === widget.simulator) {
+          simulationModel = model;
+        }
+      });
+    } else {
+      return (<div></div>);
+    }
+
+    if (widget.plotType === 'table') {
+      return (
+        <div>Table</div>
+      );
+    } else if (widget.plotType === 'multiple') {
+      // get selected data
+      var lineData = [];
+      const latestTimestamp = this.props.data[widget.simulator].values[0][this.props.data[widget.simulator].values[0].length - 1].x;
+
+      widget.signals.forEach((signal) => {
+        lineData.push({
+          name: simulationModel.mapping[signal].name,
+          values: this.props.data[widget.simulator].values[signal]
+        });
+      });
+
+      return (
+        <div style={{ width: '100%', height: '100%' }} ref="wrapper">
+          <LineChart
+            width={widget.width}
+            height={widget.height - 20}
+            data={lineData}
+            title={widget.name}
+            gridHorizontal={true}
+            xAccessor={(d) => {return new Date(d.x);}}
+            hoverAnimation={false}
+            circleRadius={0}
+            domain={{ x: [latestTimestamp - 10000, latestTimestamp] }}
+          />
+        </div>
+      );
+    } else {
+      return (<div>Error</div>);
+    }
+  }
+}
+
+export default WidgetPlot;

src/containers/visualization.js

@@ -115,6 +115,10 @@ class Visualization extends Component {
     if (item.name === 'Value') {
       widget.simulator = this.state.simulation.models[0].simulator;
       widget.signal = 0;
+    } else if (item.name === 'Plot') {
+      widget.simulator = this.state.simulation.models[0].simulator;
+      widget.plotType = 'multiple';
+      widget.signals = [ 0 ];
     }
 
     var visualization = this.state.visualization;
@@ -197,6 +201,7 @@ class Visualization extends Component {
           {this.state.editing &&
             <div className="toolbox">
               <ToolboxItem name="Value" type="widget" />
+              <ToolboxItem name="Plot" type="widget" />
             </div>
           }
 

src/containers/widget.js

@@ -14,6 +14,7 @@ import Rnd from 'react-rnd';
 
 import SimulatorDataStore from '../stores/simulator-data-store';
 import WidgetValue from '../components/widget-value';
+import WidgetPlot from '../components/widget-plot';
 
 import '../styles/widgets.css';
 
@@ -57,13 +58,22 @@ class Widget extends Component {
   }
 
   render() {
-    const widget = this.props.data;
-
+    // configure grid
     var grid = this.props.grid;
     if (!grid) {
       grid = [ 1, 1 ];
     }
 
+    // get widget element
+    const widget = this.props.data;
+    var element = null;
+
+    if (widget.type === 'Value') {
+      element = <WidgetValue widget={widget} data={this.state.simulatorData} sequence={this.state.sequence} simulation={this.props.simulation} />
+    } else if (widget.type === 'Plot') {
+      element = <WidgetPlot widget={widget} data={this.state.simulatorData} sequence={this.state.sequence} simulation={this.props.simulation} />
+    }
+
     if (this.props.editing) {
       return (
         <Rnd
@@ -77,14 +87,14 @@ class Widget extends Component {
           resizeGrid={grid}
         >
           <ContextMenuTrigger id={'widgetMenu' + this.props.index} attributes={{ style: { width: '100%', height: '100%' } }}>
-            <WidgetValue widget={widget} data={this.state.simulatorData} sequence={this.state.sequence} simulation={this.props.simulation} />
+            {element}
           </ContextMenuTrigger>
         </Rnd>
       );
     } else {
       return (
         <div className="widget" style={{ width: Number(widget.width), height: Number(widget.height), left: Number(widget.x), top: Number(widget.y), position: 'absolute' }}>
-          <WidgetValue widget={widget} data={this.state.simulatorData} sequence={this.state.sequence} simulation={this.props.simulation} />
+          {element}
         </div>
       );
     }

src/stores/simulator-data-store.js

@@ -12,7 +12,7 @@ import { ReduceStore } from 'flux/utils';
 import AppDispatcher from '../app-dispatcher';
 import SimulatorDataDataManager from '../data-managers/simulator-data-data-manager';
 
-const MAX_VALUES = 10000;
+const MAX_VALUES = 100;
 
 class SimulationDataStore extends ReduceStore {
   constructor() {
@@ -64,10 +64,13 @@ class SimulationDataStore extends ReduceStore {
 
       case 'simulatorData/closed':
         // close and delete socket
-        state[action.identifier].close();
-        state[action.identifier] = null;
+        if (state[action.identifier]) {
+          state[action.identifier].close();
+          state[action.identifier] = null;
+
+          this.__emitChange();
+        }
 
-        this.__emitChange();
         return state;
 
       default:

src/styles/app.css

@@ -142,6 +142,8 @@ body {
 
   padding: 5px 10px;
 
+  margin-right: 10px;
+
   border: 1px solid gray;
 
   cursor: move;

src/styles/widgets.css

@@ -12,6 +12,8 @@
   height: 100%;
 
   border: 1px solid lightgray;
+
+  padding: 3px 6px;
 }
 
 .react-contextmenu {