Skip to content
Snippets Groups Projects
Commit f380b1ea authored by Mattia Mancini's avatar Mattia Mancini
Browse files

OSB-29: fixed padding of the station statistics

parent 03f5a2d9
No related branches found
No related tags found
2 merge requests!89Monitoring maintenance Epic branch merge,!1Resolve OSB-13 "Monitoringmaintenance "
import React, {Component} from 'react'; import React, {Component} from 'react';
import AutoLoadWrapper from '../utils/autoLoader.js' import AutoLoadWrapper from '../utils/autoLoader.js'
import ReactVegaLite from 'react-vega-lite' import ReactVegaLite from 'react-vega-lite'
import {Form, Input} from 'reactstrap'; import {
Navbar,
Nav,
NavItem,
Input,
NavbarBrand
} from 'reactstrap';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {setStationStatisticsTestType, setStationStatisticsAveragingWindow} from '../redux/actions/landingPageActions' import {setStationStatisticsTestType, setStationStatisticsAveragingWindow} from '../redux/actions/landingPageActions'
class ToolBarC extends Component { class ToolBarC extends Component {
constructor(props){
super(props);
this.state = {isNavbarCollapsed: true};
}
setAveragingWindow(e) { setAveragingWindow(e) {
this.props.setStationStatisticsAveragingWindow(e.target.value); this.props.setStationStatisticsAveragingWindow(e.target.value);
} }
...@@ -14,9 +24,17 @@ class ToolBarC extends Component { ...@@ -14,9 +24,17 @@ class ToolBarC extends Component {
setTestType(e) { setTestType(e) {
this.props.setStationStatisticsTestType(e.target.value); this.props.setStationStatisticsTestType(e.target.value);
} }
toggle(){
this.setState({
isNavbarCollapsed: !this.state.isNavbarCollapsed
});
}
render() { render() {
return (<div className="sts-toolbar"> return (
<Form inline> <Nav className="ml-auto" auto>
<NavItem>
<select className="form-control custom-select custom-select-sm" id="selected-group" value={this.props.test_type} onChange={(e) => this.setTestType(e)} style={{ <select className="form-control custom-select custom-select-sm" id="selected-group" value={this.props.test_type} onChange={(e) => this.setTestType(e)} style={{
width: 'auto' width: 'auto'
}}> }}>
...@@ -24,6 +42,8 @@ class ToolBarC extends Component { ...@@ -24,6 +42,8 @@ class ToolBarC extends Component {
<option value="R">RTSM only</option> <option value="R">RTSM only</option>
<option value="S">StationTest only</option> <option value="S">StationTest only</option>
</select> </select>
</NavItem>
<NavItem>
<Input type="select" className="form-control custom-select custom-select-sm" style={{ <Input type="select" className="form-control custom-select custom-select-sm" style={{
top: "0rem !important" top: "0rem !important"
}} onChange={(e) => this.setAveragingWindow(e)} value={this.props.averaging_window}> }} onChange={(e) => this.setAveragingWindow(e)} value={this.props.averaging_window}>
...@@ -31,12 +51,14 @@ class ToolBarC extends Component { ...@@ -31,12 +51,14 @@ class ToolBarC extends Component {
<option value={7}>week</option> <option value={7}>week</option>
<option value={30}>month</option> <option value={30}>month</option>
</Input> </Input>
</NavItem>
<NavItem>
<Input type="select" className="form-control custom-select custom-select-sm" onChange={(e) => this.props.switchHistogramEvent(e)} value={this.props.histogramType}> <Input type="select" className="form-control custom-select custom-select-sm" onChange={(e) => this.props.switchHistogramEvent(e)} value={this.props.histogramType}>
<option value="per_error_type">per error type</option> <option value="per_error_type">per error type</option>
<option value="per_station">per station</option> <option value="per_station">per station</option>
</Input> </Input>
</Form> </NavItem>
</div>); </Nav>);
} }
} }
...@@ -166,10 +188,21 @@ class StationStatisticsC extends Component { ...@@ -166,10 +188,21 @@ class StationStatisticsC extends Component {
} }
return (<React.Fragment> return (<React.Fragment>
<Navbar
className="react-grid-item-header justify-content-between"
style={{
padding: "0"
}}>
<NavbarBrand style={{
padding: "0"
}}>
<h5 className="react-grid-item-header"> <h5 className="react-grid-item-header">
Station statistics Station statistics</h5>
<ToolBar histogramType={this.state.histogramType} switchHistogramEvent={e => this.setState({histogramType: e.target.value})}/> </NavbarBrand>
</h5> <ToolBar style={{
padding: "0"
}} histogramType={this.state.histogramType} switchHistogramEvent={e => this.setState({histogramType: e.target.value})}/>
</Navbar>
<div className="react-grid-item-body" id="plot" ref={this.ref}> <div className="react-grid-item-body" id="plot" ref={this.ref}>
<ReactVegaLite spec={spec} data={data} enableHover={true}/> <ReactVegaLite spec={spec} data={data} enableHover={true}/>
</div> </div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment