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

fix for value widget: more elegant solution for display issues #192

Browse source
This commit is contained in:
Laura Fuentes Grau 2020-05-07 22:01:15 +02:00
parent 5d8b0e00ed
commit f23bdcffb1
2 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/styles/widgets.css
View file

@ -249,7 +249,7 @@ span.signal-unit::after {
width: 100%;
height: 100%;
display: flex;
flex: none;
justify-content: center;
word-wrap: break-word;
}

10
src/widget/widgets/value.js
View file

@ -69,14 +69,14 @@ class WidgetValue extends Component {
render() {
let value_to_render = Number(this.state.value);
let value_width = this.props.widget.customProperties.textSize*0.55* (this.state.value.length +2);
let unit_width = this.props.widget.customProperties.textSize*2;
let value_width = this.props.widget.customProperties.textSize*(value_to_render < 1000 ? (2):(3));
let unit_width = this.props.widget.customProperties.textSize*(this.state.unit.length + 0.7);
return (
<div className="single-value-widget">
<strong style={{ fontSize: this.props.widget.customProperties.textSize + 'px'}}>{this.props.widget.name}</strong>
<span style={{ fontSize: this.props.widget.customProperties.textSize + 'px',width: value_width }}>{Number.isNaN(value_to_render) ? NaN : format('.3s')(value_to_render)}</span>
<strong style={{ fontSize: this.props.widget.customProperties.textSize + 'px', flex: '1 1 auto'}}>{this.props.widget.name}</strong>
<span style={{ fontSize: this.props.widget.customProperties.textSize + 'px', flex: 'none', width: value_width }}>{Number.isNaN(value_to_render) ? NaN : format('.3s')(value_to_render)}</span>
{this.props.widget.customProperties.showUnit &&
<span style={{ fontSize: this.props.widget.customProperties.textSize + 'px', width: unit_width}}>[{this.state.unit}]</span>
<span style={{ fontSize: this.props.widget.customProperties.textSize + 'px', flex: 'none', width: unit_width}}>[{this.state.unit}]</span>
}
</div>
);