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

Improve plot legend and y-label

Browse source
This commit is contained in:
Markus Grigull 2017-09-25 13:11:19 +02:00
parent 669108948a
commit 30284bf6b1
3 changed files with 18 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -50,7 +50,7 @@ class WidgetPlot extends React.Component {
// Query the signals that will be displayed in the legend
const legend = model.mapping.reduce( (accum, model_signal, signal_index) => {
if (chosenSignals.includes(signal_index)) {
accum.push({ index: signal_index, name: model_signal.name });
accum.push({ index: signal_index, name: model_signal.name, type: model_signal.type });
}
return accum;

2
src/components/widget-plot/plot-legend.js
View file

@ -17,7 +17,7 @@ class PlotLegend extends React.Component {
return <div className="plot-legend">
{this.props.signals.map(signal =>
<div key={signal.index} className="signal-legend">
<span className="legend-color" style={{ background: colorScale(signal.index) }}>&nbsp;&nbsp;</span>{signal.name}
<span className="legend-color" style={{ background: colorScale(signal.index) }}>&nbsp;&nbsp;</span>{signal.name} [{signal.type}]
</div>
)}
</div>;

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

@ -149,15 +149,26 @@ class Plot extends React.Component {
}
render() {
return <svg width={this.props.width + leftMargin} height={this.props.height + bottomMargin}>
<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)`}} />
const yLabelPos = {
x: 12,
y: this.props.height / 2
}
let labelMargin = 0;
if (this.props.yLabel !== "") {
labelMargin = 20;
}
return <svg width={this.props.width + leftMargin + labelMargin} height={this.props.height + bottomMargin}>
<g ref={node => select(node).call(this.state.xAxis)} style={{ transform: `translateX(${labelMargin}px) translateY(${this.props.height}px)` }} />
<g ref={node => select(node).call(this.state.yAxis)} style={{ transform: `translateX(${leftMargin + labelMargin}px)`}} />
<text strokeWidth="0.01" textAnchor="left" x={10} y={15}>{this.props.yLabel}</text>
<text strokeWidth="0.01" textAnchor="middle" x={yLabelPos.x} y={yLabelPos.y} transform={`rotate(270 ${yLabelPos.x} ${yLabelPos.y})`}>{this.props.yLabel}</text>
<defs>
<clipPath id="lineClipPath">
<rect x={leftMargin} y={bottomMargin} width={this.props.width} height={this.props.height} />
<rect x={leftMargin + labelMargin} y={bottomMargin} width={this.props.width} height={this.props.height} />
</clipPath>
</defs>