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 signal legend. Add time format.

Browse source
This commit is contained in:
Markus Grigull 2017-07-27 01:54:34 +02:00
parent 9119f6380d
commit 3265838c39
3 changed files with 20 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -10,6 +10,7 @@
"d3-scale": "^1.0.6",
"d3-selection": "^1.1.0",
"d3-shape": "^1.2.0",
"d3-time-format": "^2.0.5",
"es6-promise": "^4.0.5",
"flux": "^3.1.2",
"gaugeJS": "^1.3.2",

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

@ -22,32 +22,32 @@
import React from 'react';
import Plot from './widget-plot/plot';
//import PlotLegend from './widget-plot/plot-legend';
import PlotLegend from './widget-plot/plot-legend';
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.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) => {
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 (
@ -57,11 +57,13 @@ class WidgetPlot extends React.Component {
<div className="widget-plot">
<Plot
data={simulatorData}
height={this.props.widget.height - 80}
height={this.props.widget.height - 100}
width={this.props.widget.width - 20}
time={this.props.widget.time}
/>
</div>
<PlotLegend signals={legendSignals} />
</div>
);
}

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

@ -8,11 +8,12 @@
**********************************************************************************/
import React from 'react';
import { scaleLinear, scaleTime } from 'd3-scale';
import { scaleLinear, scaleTime, scaleOrdinal, schemeCategory10 } from 'd3-scale';
import { extent } from 'd3-array';
import { line } from 'd3-shape';
import { axisBottom, axisLeft } from 'd3-axis';
import { select } from 'd3-selection';
import { timeFormat } from 'd3-time-format';
const leftMargin = 30;
const bottomMargin = 20;
@ -59,16 +60,18 @@ class Plot extends React.Component {
return values;
});
// create scale functions for both axes
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 xAxis = axisBottom().scale(xScale).ticks(5).tickFormat(date => timeFormat("%M:%S")(date));
const yAxis = axisLeft().scale(yScale).ticks(5);
const sparkLine = line().x(p => xScale(p.x)).y(p => yScale(p.y));
// generate paths from data
const lines = data.map((values, index) => <path d={sparkLine(values)} key={index} />);
const sparkLine = line().x(p => xScale(p.x)).y(p => yScale(p.y));
const lineColor = scaleOrdinal(schemeCategory10);
const lines = data.map((values, index) => <path d={sparkLine(values)} key={index} style={{ fill: 'none', stroke: lineColor(index) }} />);
this.setState({ data: lines, xAxis, yAxis });
}
@ -81,7 +84,7 @@ class Plot extends React.Component {
<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' }}>
<g>
{this.state.data}
</g>
</svg>