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

Add time scaling

Browse source
This commit is contained in:
Markus Grigull 2017-07-27 00:28:19 +02:00
parent 37af4f5151
commit 15fd134f9e
2 changed files with 31 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -28,24 +28,24 @@ class WidgetPlot extends React.Component {
render() {
const simulator = this.props.widget.simulator;
const simulation = this.props.simulation;
let legendSignals = [];
//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.node === simulator.node && model.simulator.simulator === simulator.simulator );
const chosenSignals = this.props.widget.signals;
//const model = simulation.models.find( model => model.simulator.node === simulator.node && model.simulator.simulator === simulator.simulator );
//const chosenSignals = this.props.widget.signals;
simulatorData = this.props.data[simulator.node][simulator.simulator].values[0];
// Query the signals that will be displayed in the legend
legendSignals = model.mapping.reduce( (accum, model_signal, signal_index) => {
/*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 (
@ -53,10 +53,11 @@ class WidgetPlot extends React.Component {
<h4>{this.props.widget.name}</h4>
<div className="widget-plot">
<Plot
data={simulatorData}
height={this.props.widget.height - 80}
width={this.props.widget.width - 20}
<Plot
data={simulatorData}
height={this.props.widget.height - 80}
width={this.props.widget.width - 20}
time={this.props.widget.time}
/>
</div>
</div>

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

@ -9,24 +9,37 @@
import React from 'react';
import { scaleLinear, scaleTime } from 'd3-scale';
import { extent, max } from 'd3-array';
import { extent } from 'd3-array';
import { line } from 'd3-shape';
import { axisBottom, axisLeft } from 'd3-axis';
import { select } from 'd3-selection';
class Plot extends React.Component {
render() {
const leftMargin = 30;
const bottomMargin = 20;
const values = 100;
// check if data is valid
if (this.props.data == null || this.props.data.length === 0) return false;
// only show data in requested time
let data = this.props.data;
if (data.length > values) {
data = data.slice(data.length - values);
const firstTimestamp = data[data.length - 1].x - this.props.time * 1000;
if (data[0].x < firstTimestamp) {
const index = data.findIndex(value => value.x >= firstTimestamp - 100);
if (index > 0) {
data = data.slice(index - 1);
}
}
const xScale = scaleTime().domain(extent(data, p => new Date(p.x))).range([leftMargin, this.props.width]);
// calculate paths for data
const leftMargin = 30;
const bottomMargin = 20;
let xRange = extent(data, p => new Date(p.x));
if (xRange[1] - xRange[0] < this.props.time * 1000) {
xRange[0] = xRange[1] - this.props.time * 1000;
}
const xScale = scaleTime().domain(xRange).range([leftMargin, this.props.width]);
const yScale = scaleLinear().domain(extent(data, p => p.y)).range([this.props.height, bottomMargin]);
const xAxis = axisBottom().scale(xScale).ticks(5);