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

issue #49 scale signal table with names

Browse source
This commit is contained in:
Ricardo Hernandez-Montoya 2017-04-07 18:27:35 +02:00
parent cd7d624f88
commit 6ced955221
2 changed files with 56 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
src/components/widget-plot-table.js
View file

@ -175,43 +175,45 @@ class WidgetPlotTable extends Component {
<h4>{this.props.widget.name}</h4>
<div className="content">
<div className="widget-table">
{ checkBoxes.length > 0 ? (
<FormGroup className="btn-group-vertical">
{ checkBoxes }
</FormGroup>
) : ( <small>No signal found, select a different signal type.</small> )
}
</div>
<div className="table-plot-row">
<div className="widget-table">
{ checkBoxes.length > 0 ? (
<FormGroup className="btn-group-vertical">
{ checkBoxes }
</FormGroup>
) : ( <small>No signal found, select a different signal type.</small> )
}
</div>
<div className="widget-plot">
<div className="chart-wrapper" ref={ (domNode) => this.chartWrapper = domNode }>
{this.state.sequence &&
<LineChart
width={ this.state.size.w || 100 }
height={ this.state.size.h || 100 }
data={this.state.values }
colors={ scaleOrdinal(schemeCategory10) }
gridHorizontal={true}
xAccessor={(d) => { if (d != null) { return new Date(d.x); } }}
xAxisTickCount={ tickCount }
hoverAnimation={false}
circleRadius={0}
domain={{ x: [this.state.firstTimestamp, this.state.latestTimestamp] }}
/>
}
</div>
<div className="plot-legend">
{
this.state.preselectedSignals.reduce( (accum, signal, i) => {
if (this.state.signals.includes(signal.index)) {
accum.push(<div key={signal.index} className="signal-legend"><span className="legend-color" style={{ background: colorScale(signal.index) }}>&nbsp;&nbsp;</span> {signal.name} </div>)
}
return accum;
}, [])
}
<div className="widget-plot">
<div className="chart-wrapper" ref={ (domNode) => this.chartWrapper = domNode }>
{this.state.sequence &&
<LineChart
width={ this.state.size.w || 100 }
height={ this.state.size.h || 100 }
data={this.state.values }
colors={ scaleOrdinal(schemeCategory10) }
gridHorizontal={true}
xAccessor={(d) => { if (d != null) { return new Date(d.x); } }}
xAxisTickCount={ tickCount }
hoverAnimation={false}
circleRadius={0}
domain={{ x: [this.state.firstTimestamp, this.state.latestTimestamp] }}
/>
}
</div>
</div>
</div>
<div className="plot-legend">
{
this.state.preselectedSignals.reduce( (accum, signal, i) => {
if (this.state.signals.includes(signal.index)) {
accum.push(<div key={signal.index} className="signal-legend"><span className="legend-color" style={{ background: colorScale(signal.index) }}>&nbsp;&nbsp;</span> {signal.name} </div>)
}
return accum;
}, [])
}
</div>
</div>
</div>
);

30
src/styles/widgets.css
View file

@ -144,14 +144,25 @@ div[class*="-widget"] .btn[disabled], .btn.disabled, div[class*="-widget"] input
}
.plot-table-widget .content {
display: -webkit-flex;
display: flex;
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
display: -webkit-flex;
display: flex;
flex-direction: column;
}
.table-plot-row {
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
display: -webkit-flex;
display: flex;
}
.plot-table-widget .widget-table {
width: 100px;
/*width: 100px;*/
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
max-width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
@ -165,6 +176,7 @@ div[class*="-widget"] .btn[disabled], .btn.disabled, div[class*="-widget"] input
height: 100%;
width: 100%;
padding: 6px 12px;
overflow-x: hidden;
}
.plot-table-widget .btn {
@ -186,6 +198,7 @@ div[class*="-widget"] .btn[disabled], .btn.disabled, div[class*="-widget"] input
.plot-table-widget .signal-legend {
font-size: 0.8em;
font-weight: 700;
overflow-x: hidden;
}
.plot-table-widget .legend-color {
@ -195,16 +208,13 @@ div[class*="-widget"] .btn[disabled], .btn.disabled, div[class*="-widget"] input
}
.plot-table-widget .widget-plot {
display: -webkit-flex;
display: flex;
flex-direction: column;
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
.plot-table-widget .chart-wrapper {
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
height: 100%;
width: 100%;
}
/* End PlotTable Widget */