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 multiple lines to plot

Browse source
This commit is contained in:
Markus Grigull 2017-07-27 01:11:20 +02:00
parent 15fd134f9e
commit 9119f6380d
2 changed files with 56 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -37,7 +37,9 @@ class WidgetPlot extends React.Component {
//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];
simulatorData = this.props.data[simulator.node][simulator.simulator].values.filter((values, index) => (
this.props.widget.signals.findIndex(value => value === index) !== -1
));
// Query the signals that will be displayed in the legend
/*legendSignals = model.mapping.reduce( (accum, model_signal, signal_index) => {

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

@ -14,47 +14,75 @@ import { line } from 'd3-shape';
import { axisBottom, axisLeft } from 'd3-axis';
import { select } from 'd3-selection';
class Plot extends React.Component {
render() {
// 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;
const leftMargin = 30;
const bottomMargin = 20;
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);
}
class Plot extends React.Component {
constructor(props) {
super(props);
this.state = {
data: null
};
}
componentWillReceiveProps(nextProps) {
// check if data is valid
if (nextProps.data == null || nextProps.data.length === 0 || nextProps.data[0].length === 0) {
this.setState({ data: null });
return;
}
// only show data in requested time
let data = nextProps.data;
const firstTimestamp = data[0][data[0].length - 1].x - this.props.time * 1000;
if (data[0][0].x < firstTimestamp) {
// only show data in range (+100 ms)
const index = data[0].findIndex(value => value.x >= firstTimestamp - 100);
data = data.map(values => values.slice(index));
}
// 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;
let xRange = extent(data[0], p => new Date(p.x));
if (xRange[1] - xRange[0] < nextProps.time * 1000) {
xRange[0] = xRange[1] - nextProps.time * 1000;
}
let yRange = [0, 0];
data.map(values => {
const range = extent(values, p => p.y);
if (range[0] < yRange[0]) yRange[0] = range[0];
if (range[1] > yRange[1]) yRange[1] = range[1];
return values;
});
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 xScale = scaleTime().domain(xRange).range([leftMargin, nextProps.width]);
const yScale = scaleLinear().domain(yRange).range([nextProps.height, bottomMargin]);
const xAxis = axisBottom().scale(xScale).ticks(5);
const yAxis = axisLeft().scale(yScale).ticks(5);
const sparkLine = line().x(p => xScale(p.x)).y(p => yScale(p.y));
const linePath = sparkLine(data);
// generate paths from data
const lines = data.map((values, index) => <path d={sparkLine(values)} key={index} />);
this.setState({ data: lines, xAxis, yAxis });
}
render() {
if (this.state.data == null) return false;
return(
<svg width={this.props.width + leftMargin} height={this.props.height + bottomMargin}>
<g ref={node => select(node).call(xAxis)} style={{ transform: `translateY(${this.props.height}px)` }} />
<g ref={node => select(node).call(yAxis)} style={{ transform: `translateX(${leftMargin}px)`}} />
<g ref={node => select(node).call(this.state.xAxis)} style={{ transform: `translateY(${this.props.height}px)` }} />
<g ref={node => select(node).call(this.state.yAxis)} style={{ transform: `translateX(${leftMargin}px)`}} />
<g style={{ fill: 'none', stroke: 'blue' }}>
<path d={linePath} />
{this.state.data}
</g>
</svg>
);