From 98909301b964730019a824bc6447bd17bf12789d Mon Sep 17 00:00:00 2001 From: Markus Grigull Date: Mon, 13 Mar 2017 16:39:43 +0100 Subject: [PATCH] Add plot widget Plot edit dialog not created yet --- src/components/dialog/edit-widget-plot.js | 0 src/components/dialog/edit-widget.js | 1 + src/components/widget-plot.js | 66 +++++++++++++++++++++++ src/containers/visualization.js | 5 ++ src/containers/widget.js | 18 +++++-- src/stores/simulator-data-store.js | 11 ++-- src/styles/app.css | 2 + src/styles/widgets.css | 2 + 8 files changed, 97 insertions(+), 8 deletions(-) create mode 100644 src/components/dialog/edit-widget-plot.js create mode 100644 src/components/widget-plot.js diff --git a/src/components/dialog/edit-widget-plot.js b/src/components/dialog/edit-widget-plot.js new file mode 100644 index 0000000..e69de29 diff --git a/src/components/dialog/edit-widget.js b/src/components/dialog/edit-widget.js index c777466..21ba51b 100644 --- a/src/components/dialog/edit-widget.js +++ b/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 = { diff --git a/src/components/widget-plot.js b/src/components/widget-plot.js new file mode 100644 index 0000000..fad5f0c --- /dev/null +++ b/src/components/widget-plot.js @@ -0,0 +1,66 @@ +/** + * File: widget-plot.js + * Author: Markus Grigull + * 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 (
); + } + + if (widget.plotType === 'table') { + return ( +
Table
+ ); + } 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 ( +
+ {return new Date(d.x);}} + hoverAnimation={false} + circleRadius={0} + domain={{ x: [latestTimestamp - 10000, latestTimestamp] }} + /> +
+ ); + } else { + return (
Error
); + } + } +} + +export default WidgetPlot; diff --git a/src/containers/visualization.js b/src/containers/visualization.js index e1fb132..13dea0f 100644 --- a/src/containers/visualization.js +++ b/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 &&
+
} diff --git a/src/containers/widget.js b/src/containers/widget.js index 67e7bd4..d6ac0d8 100644 --- a/src/containers/widget.js +++ b/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 = + } else if (widget.type === 'Plot') { + element = + } + if (this.props.editing) { return ( - + {element} ); } else { return (
- + {element}
); } diff --git a/src/stores/simulator-data-store.js b/src/stores/simulator-data-store.js index c14644f..1fe5816 100644 --- a/src/stores/simulator-data-store.js +++ b/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: diff --git a/src/styles/app.css b/src/styles/app.css index c1aad96..b7d16e3 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -142,6 +142,8 @@ body { padding: 5px 10px; + margin-right: 10px; + border: 1px solid gray; cursor: move; diff --git a/src/styles/widgets.css b/src/styles/widgets.css index 7fe801b..fb9a781 100644 --- a/src/styles/widgets.css +++ b/src/styles/widgets.css @@ -12,6 +12,8 @@ height: 100%; border: 1px solid lightgray; + + padding: 3px 6px; } .react-contextmenu {