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

use SI prefixes and add unit column to table

Browse source
This commit is contained in:
Steffen Vogel 2018-06-17 21:13:14 +02:00
parent a8d4d23c97
commit 6ce61f4726
3 changed files with 24 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -56,7 +56,7 @@ class Plot extends React.Component {
}
const xAxis = axisBottom().scale(xScale).ticks(5).tickFormat(timeFormat("%M:%S"));
const yAxis = axisLeft().scale(yScale).ticks(5).tickFormat(format(".1g"));
const yAxis = axisLeft().scale(yScale).ticks(5).tickFormat(format(".3s"));
this.state = {
data: null,
@ -99,7 +99,7 @@ class Plot extends React.Component {
}
const xAxis = axisBottom().scale(xScale).ticks(5).tickFormat(timeFormat("%M:%S"));
const yAxis = axisLeft().scale(yScale).ticks(5).tickFormat(format(".1g"));
const yAxis = axisLeft().scale(yScale).ticks(5).tickFormat(format(".3s"));
this.setState({ data: null, xAxis, yAxis, labelMargin });
return;
@ -171,7 +171,7 @@ class Plot extends React.Component {
const yScale = scaleLinear().domain(yRange).range([this.props.height + topMargin - bottomMargin, topMargin]);
const xAxis = axisBottom().scale(xScale).ticks(5).tickFormat(timeFormat("%M:%S"));
const yAxis = axisLeft().scale(yScale).ticks(5).tickFormat(format(".1g"));
const yAxis = axisLeft().scale(yScale).ticks(5).tickFormat(format(".3s"));
// generate paths from data
const sparkLine = line().x(p => xScale(p.x)).y(p => yScale(p.y));

5
src/components/widgets/slider.js
View file

@ -21,6 +21,7 @@
******************************************************************************/
import React, { Component } from 'react';
import { format } from 'd3';
import classNames from 'classnames';
import Slider from 'rc-slider';
import 'rc-slider/assets/index.css';
@ -64,6 +65,7 @@ class WidgetSlider extends Component {
// Check if the orientation changed, update the size if it did
if (this.props.widget.orientation !== nextProps.widget.orientation) {
let baseWidget = nextProps.widget;
// Exchange dimensions and constraints
let newWidget = Object.assign({}, baseWidget, {
width: baseWidget.height,
@ -73,6 +75,7 @@ class WidgetSlider extends Component {
maxWidth: baseWidget.maxHeight,
maxHeight: baseWidget.maxWidth
});
nextProps.onWidgetChange(newWidget);
}
}
@ -96,7 +99,7 @@ class WidgetSlider extends Component {
let fields = {
name: this.props.widget.name,
control: <Slider min={ this.props.widget.rangeMin } max={ this.props.widget.rangeMax } step={ this.props.widget.step } value={ this.state.value } disabled={ this.props.editing } vertical={ isVertical } onChange={ (v) => this.valueIsChanging(v) } onAfterChange={ (v) => this.valueChanged(v) }/>,
value: <span>{ Number.parseFloat(this.state.value).toPrecision(3) }</span>,
value: <span>{ format('.3s')(Number.parseFloat(this.state.value)) }</span>,
unit: <span className="signal-unit">{ this.state.unit }</span>
}

23
src/components/widgets/table.js
View file

@ -20,6 +20,7 @@
******************************************************************************/
import React, { Component } from 'react';
import { format } from 'd3';
import Table from '../table';
import TableColumn from '../table-column';
@ -30,7 +31,8 @@ class WidgetTable extends Component {
this.state = {
rows: [],
sequence: null
sequence: null,
showUnit: false
};
}
@ -48,8 +50,9 @@ class WidgetTable extends Component {
|| nextProps.data[simulator].output == null
|| nextProps.data[simulator].output.values.length === 0
|| nextProps.data[simulator].output.values[0].length === 0) {
// clear values
this.setState({ rows: [], sequence: null });
this.setState({ rows: [], sequence: null, showUnit: false });
return;
}
@ -65,20 +68,28 @@ class WidgetTable extends Component {
if (index < nextProps.simulationModel.outputMapping.length) {
rows.push({
name: nextProps.simulationModel.outputMapping[index].name,
value: signal[signal.length - 1].y.toFixed(3)
unit: nextProps.simulationModel.outputMapping[index].type,
value: signal[signal.length - 1].y
});
}
});
this.setState({ rows: rows, sequence: nextProps.data[simulator].output.sequence });
this.setState({ showUnit: nextProps.showUnit, rows: rows, sequence: nextProps.data[simulator].output.sequence });
}
render() {
var columns = [
<TableColumn title="Signal" dataKey="name" width={120} />,
<TableColumn title="Value" dataKey="value" modifier={format('.4s')} />
];
if (this.props.widget.showUnit)
columns.push(<TableColumn title="Unit" dataKey="unit" />)
return (
<div className="table-widget">
<Table data={this.state.rows}>
<TableColumn title="Signal" dataKey="name" width={120} />
<TableColumn title="Value" dataKey="value" />
{ columns }
</Table>
</div>
);