From 38e9ff87b24edd220c17cf2ebe6acdc1de3671ea Mon Sep 17 00:00:00 2001
From: Mattia Mancini <mancini@astron.nl>
Date: Tue, 23 Oct 2018 12:22:39 +0000
Subject: [PATCH] OSB-29: changed station statistics and automatic layout
---
.../maintenancedb_view/package.json | 3 ++-
.../src/components/StationStatistics.js | 21 ++++++++++-----
.../src/pages/LandingPage.js | 3 +--
.../src/redux/actions/actions.js | 16 ++++++++----
.../src/redux/reducers/layout.js | 26 +++++++++++++++++--
5 files changed, 52 insertions(+), 17 deletions(-)
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/package.json b/LCU/Maintenance/MDB_WebView/maintenancedb_view/package.json
index e69a536417f..5cbbf37a648 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/package.json
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/package.json
@@ -34,7 +34,8 @@
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"vega": "^4.3.0",
- "vega-lite": "^2.6.0"
+ "vega-lite": "^2.6.0",
+ "vega-tooltip": "^0.13.0"
},
"private": true
}
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationStatistics.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationStatistics.js
index 1c9d6e9168e..6c846927121 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationStatistics.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationStatistics.js
@@ -45,7 +45,7 @@ class ToolBarC extends Component {
}
const mapStateToPropsToolBar = state => {
- return { ...state.landing_page.station_statistics, ...state.layout};
+ return { ...state.landing_page.station_statistics };
};
const mapDispatchToPropsToolBar = {
@@ -79,7 +79,7 @@ class StationStatisticsC extends Component {
getBaseSpec(){
return {"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
- "mark": "bar",
+ "mark": {"type":"bar"},
"autosize": {
"type": "fit",
"resize": true,
@@ -110,7 +110,10 @@ class StationStatisticsC extends Component {
"field": "error_type",
"type": "nominal"
}
-
+ schema.encoding["tooltip"] = [
+ {field: "n_errors", type: "quantitative"},
+ {field: "error_type", type: "nominal"}
+ ]
return schema;
}
@@ -118,8 +121,12 @@ class StationStatisticsC extends Component {
let schema = this.getBaseSpec();
schema.encoding["color"] = { "field": "station_name",
"type": "nominal"}
+ schema.encoding["tooltip"] = [
+ {field: "n_errors", type: "quantitative"},
+ {field: "station_name", type: "nominal"}
+ ]
schema.config.legend.columns = 3
- return schema;
+ return schema;
}
@@ -137,8 +144,8 @@ class StationStatisticsC extends Component {
render() {
const {spec, data} = this.getSpecData(this.state.histogramType);
if (this.ref.current !== null){
- const width = this.ref.current.parentElement.clientWidth
- const height = this.ref.current.parentElement.clientHeight
+ const width = this.ref.current.clientWidth
+ const height = this.ref.current.clientHeight
spec.width = width
spec.height = height
@@ -153,7 +160,7 @@ class StationStatisticsC extends Component {
</h5>
<div className="react-grid-item-body" id="plot" ref={this.ref} >
<ReactVegaLite spec={spec}
- data={data} />
+ data={data} enableHover={true}/>
</div>
</React.Fragment>
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js
index b97a52296ef..832714ab35d 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js
@@ -110,7 +110,6 @@ const ToolBar = connect(mapStateToPropsToolBar, mapDispatchToPropsToolBar)(ToolB
Looks like a React component but is ordinary function! */
function createGridPanel(props) {
let body = props.body;
- console.log("props on create grid", props)
if (props.renderHeader) {
body = <React.Fragment>
<h5 className="react-grid-item-header">{props.title}</h5>
@@ -150,7 +149,7 @@ class LandingPageC extends Component {
return (<div>
<Header active_page={this.props.location}/>
<ToolBar />
- <ResponsiveGridLayout className="layout" layouts={layout.panels} measureBeforeMount={true} breakpoints={layout.breakpoints} cols={layout.cols} onResizeStop={e=>this.props.setNewLayout(e)}>
+ <ResponsiveGridLayout className="layout" layouts={this.props.panels} measureBeforeMount={true} breakpoints={this.props.breakpoints} cols={this.props.cols} onResizeStop={e=>this.props.setNewLayout(e)}>
{createGridPanel({
key: "ul", renderHeader: true, title: "Station overview",
body: <StationOverview url={this.getStationOverviewURL()}/>
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/actions.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/actions.js
index 88c909058fe..4ecb2d62a92 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/actions.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/actions.js
@@ -21,11 +21,17 @@ export const setPeriod = period => ({
payload: { period }
});
-
-export const setNewLayout = newLayout => ({
- type: SET_COMPONENT_SIZES,
- payload: { newLayout }
-});
+export const setNewLayout = function(newLayout) {
+ var payload = {};
+ for(const i in newLayout){
+ const item = newLayout[i];
+ payload[item['i']] = item;
+ }
+ return {
+ type: SET_COMPONENT_SIZES,
+ payload: payload
+ }
+};
export const setStationStatisticsAveragingWindow = averagingWindow => ({
type: SET_AVERAGING_WINDOW,
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/layout.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/layout.js
index 0373e87fd45..10a9c6a84b3 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/layout.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/layout.js
@@ -1,7 +1,29 @@
import { SET_COMPONENT_SIZES } from '../actions/actionTypes.js'
const initialState = {
- layout:[]
+ breakpoints: {
+ md: 996,
+ xxs: 0
+ },
+ cols: {
+ md: 12,
+ xxs: 1
+ },
+ panels: {
+ md: [
+ {i: 'ul', x: 0, y: 0, w: 8, h: 3 },
+ {i: 'ur', x: 9, y: 0, w: 4, h: 3 },
+ {i: 'bl', x: 0, y: 0, w: 8, h: 2 },
+ {i: 'br', x: 9, y: 0, w: 4, h: 2 }
+ ],
+ xxs: [
+ {i: 'ul', x: 0, y: 0, w: 1, h: 3 },
+ {i: 'ur', x: 0, y: 0, w: 1, h: 3 },
+ {i: 'bl', x: 0, y: 0, w: 1, h: 2 },
+ {i: 'br', x: 0, y: 0, w: 1, h: 2 }
+ ]
+ },
+ current_layout: {}
};
export default function(state = initialState, action) {
@@ -9,7 +31,7 @@ export default function(state = initialState, action) {
case SET_COMPONENT_SIZES: {
return {
...state,
- layout: action.payload.newLayout
+ current_layout: action.payload
};
}
default:
--
GitLab