Present Maps and Data Dashboard side-by-side in one page (#90)

* window error

* Adjusted window size for line charts

---------

Co-authored-by: Daniel Kim <[email protected]>

pages/index.tsx

@@ -1,5 +1,7 @@
 import dynamic from 'next/dynamic';
 import { CircularProgress } from '@mui/material';
+import DashboardContainer from '@/views/DashboardContainer';
+import styles from './style.module.css';
 
 const MapsContainer = dynamic(() => import('@/views/MapsContainer'), {
   loading: () => (
@@ -20,5 +22,12 @@ const MapsContainer = dynamic(() => import('@/views/MapsContainer'), {
 });
 
 export default function Home() {
-  return <MapsContainer />;
+  return (
+    <div className={styles.maincontainer}>
+      <MapsContainer />
+      <div className={styles.dashboardcontainer}>
+        <DashboardContainer/>
+      </div>
+    </div>
+  );
 }

pages/style.module.css

@@ -0,0 +1,13 @@
+.maincontainer {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    margin-top: 0;
+    height: 50vh;
+    position: absolute;
+}
+
+.dashboardcontainer {
+    overflow-y: scroll;
+    height: 100vh;
+    padding-left: 10px;
+}

tests/simulation/simulation.py

@@ -100,9 +100,9 @@ def display_help():
         j = 0
         time.sleep(2)
         for i in range(1, len(gps_data)):
-            write_to_mongodb(gps_data[i], gps)
             write_to_mongodb(batteries_data[i], batteries)
             write_to_mongodb(wind_sensors_data[i], wind_sensors)
+            write_to_mongodb(gps_data[i], gps)
             lp_len = len(local_path_data[j]["waypoints"]) - 1
             if (
                 local_path_data[j]["waypoints"][lp_len]["latitude"] == gps_data[i]["latitude"]
@@ -118,9 +118,9 @@ def display_help():
         j = 0
         time.sleep(2)
         for i in range(1, len(gps_data)):
-            write_to_mongodb(gps_data[i], gps)
             write_to_mongodb(batteries_data[i], batteries)
             write_to_mongodb(wind_sensors_data[i], wind_sensors)
+            write_to_mongodb(gps_data[i], gps)
             if (
                 local_path_data[j]["waypoints"][1]["latitude"] == gps_data[i]["latitude"]
                 and local_path_data[j]["waypoints"][1]["longitude"] == gps_data[i]["longitude"]

views/DashboardContainer.tsx

@@ -41,7 +41,6 @@ class DashboardContainer extends React.PureComponent<DashboardContainerProps> {
 
     return (
       <div>
-        <h1>Dashboard Page</h1>
         <UPlotLineChartComponent
           data={gpsChartData}
           label='Boat Speed'

views/components/LineChart/UPlotLineChart.tsx

@@ -21,7 +21,7 @@ export default class UPlotLineChartComponent extends React.Component<
   readonly state: IUPlotLineChartState = {
     chart: null,
     options: {
-      width: 800,
+      width: 0,
       height: 250,
       scales: {
         x: {
@@ -50,6 +50,36 @@ export default class UPlotLineChartComponent extends React.Component<
     },
   };
 
+  componentDidMount() {
+    // Set the chart's width dynamically; the height is set manually above within 'options' in state.
+    this.setState((state) => ({...state, options: {...state.options, width: (this.getWindowSize().width / 2) - 40}}));
+
+    window.addEventListener('resize', this.setChartSize);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.setChartSize);
+  }
+
+  /**
+   * Dynamically changes the chart's dimensions whenever the user resizes their window size.
+   *
+   * @param e the event called whenever a user resizes their window.
+   */
+  setChartSize = (e: any) => {
+      this.state.chart.setSize({width: (this.getWindowSize().width / 2) - 40, height: this.state.options.height});
+  }
+
+  /**
+   * @returns the current window size (width, height) of the user's device.
+   */
+  getWindowSize = () => {
+    return {
+            width: window.innerWidth,
+            height: window.innerHeight
+    };
+  }
+
   /**
    * Sets the chart reference in the component's state.
    *

views/components/LineChart/UPlotMultiLineChart.tsx

@@ -22,7 +22,7 @@ export default class UPlotMultiLineChartComponent extends React.Component<
   readonly state: IUPlotMultiLineChartState = {
     chart: null,
     options: {
-      width: 800,
+      width: 0,
       height: 250,
       scales: {
         x: {
@@ -65,6 +65,36 @@ export default class UPlotMultiLineChartComponent extends React.Component<
     },
   };
 
+  componentDidMount() {
+    // Set the chart's width dynamically; the height is set manually above within 'options' in state.
+    this.setState((state) => ({...state, options: {...state.options, width: (this.getWindowSize().width / 2) - 40}}));
+
+    window.addEventListener('resize', this.setChartSize);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.setChartSize);
+  }
+
+  /**
+   * Dynamically changes the chart's dimensions whenever the user resizes their window size.
+   *
+   * @param e the event called whenever a user resizes their window.
+   */
+  setChartSize = (e: any) => {
+      this.state.chart.setSize({width: (this.getWindowSize().width / 2) - 40, height: this.state.options.height});
+  }
+
+  /**
+   * @returns the current window size (width, height) of the user's device.
+   */
+  getWindowSize = () => {
+    return {
+            width: window.innerWidth,
+            height: window.innerHeight
+    };
+  }
+
   /**
    * Sets the chart reference in the component's state.
    *

views/components/Maps/Maps.tsx

@@ -180,7 +180,7 @@ export default class Maps extends React.Component<IMapsProps, IMapsState> {
         center={convertToLatLng(this.props.gpsLocation)}
         zoom={13}
         scrollWheelZoom={true}
-        style={{ height: '100vh', width: '100wh' }}
+        style={{ height: '100vh', width: '100wh'}}
         ref={this.setMapRef}
       >
         <TileLayer