diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/package.json b/LCU/Maintenance/MDB_WebView/maintenancedb_view/package.json
index e69a536417fa785142d5accef8c580876685b662..5cbbf37a648e393c568814565aadab97ff600087 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 1c9d6e9168e65e72cffab0c42ea6bdbff7bef714..6c846927121772558e4c2ac0c0fbaf02084198b3 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 b97a52296efdfed09ab0e727c4b1214dea577ab3..832714ab35dde5fb7191d1d7b144b389136abaa1 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 88c909058fe5b440de3a8c6c25e8a99252e8e7e0..4ecb2d62a924c93f5ea455de34795301fe2f7bdc 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 0373e87fd4541322cdaab5973556ea6b0ff5e831..10a9c6a84b38eb200c56a2b233b1212969dd3e25 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: