moving files around, working on line chart

RENCI · May 7, 2024 · 88583f5 · 88583f5
1 parent fb03178
commit 88583f5
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 17 deletions.
diff --git a/src/app.js b/src/app.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import { Map } from '@components/map';
-import ObservationDialog from "@components/map/observation-dialog";
+import ObservationDialog from "@components/dialog/observation-dialog";
 import { useLayers } from '@context';
 import { Sidebar } from '@components/sidebar';
 

diff --git a/src/utils/base-floating-dialog.js → ...components/dialog/base-floating-dialog.js b/src/utils/base-floating-dialog.js → ...components/dialog/base-floating-dialog.js
@@ -56,14 +56,14 @@ export default function BaseFloatingDialog({ title, dialogObject, dataKey, dataL
                     TransitionComponent={Transition}
                     disableEnforceFocus
                     style={{ pointerEvents: 'none' }}
-                    PaperProps={{ style: { pointerEvents: 'auto'} }}
-                    sx={{ '.MuiBackdrop-root': { backgroundColor: 'transparent' }}}
+                    PaperProps={{ sx: { width: 750,  height: 510, pointerEvents: 'auto'} }}
+                    sx={{ width: 750, height: 510, '.MuiBackdrop-root': { backgroundColor: 'transparent' }}}
                 >
                     <DialogTitle sx={{cursor: 'move', backgroundColor: 'lightblue', textAlign: 'center', fontSize: 14, height: 35, m: 0, p: 1 }} id="draggable-dialog-title"> { title } </DialogTitle>
 
-                    <DialogContent sx={{backgroundColor: 'white'}}>{ dialogObject }</DialogContent>
+                    <DialogContent sx={{backgroundColor: 'white', fontSize: 14, height: 375 }}>{ dialogObject }</DialogContent>
 
-                    <DialogActions sx={{backgroundColor: 'lightgray'}}><Button autoFocus onClick={handleClose}> Close </Button></DialogActions>
+                    <DialogActions sx={{backgroundColor: 'lightgray', height: 35, m: 0, p: 1}}><Button style={{fontSize: 14}} autoFocus onClick={handleClose}> Close </Button></DialogActions>
                 </Dialog>
         </Fragment>
     );

diff --git a/src/utils/observation-chart.js → src/components/dialog/observation-chart.js b/src/utils/observation-chart.js → src/components/dialog/observation-chart.js
@@ -83,14 +83,17 @@ export default function ObservationChart(dataUrl) {
     // render the chart.
     return (
         <Fragment>
-        <LineChart width={500} height={300} data={stationObs} margin={{  top: 0, right: 0, left: 0, bottom: 0 }}>
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis dataKey="time" />
-          <YAxis type="number" domain={['auto', 'auto']} />
-          <Tooltip />
-          <Legend />
-          <Line type="monotone" dataKey="Observations" stroke="#8884d8" strokeWidth={2} dot={false} isAnimationActive={false} />
-          <Line type="monotone" dataKey="NOAA Tidal Predictions" stroke="#82ca9d" strokeWidth={2} dot={false} isAnimationActive={false} />
-        </LineChart></Fragment>
+            <LineChart width={550} height={300} data={stationObs} margin={{  top: 0, right: 0, left: 0, bottom: 0 }}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="time" />
+                <YAxis />
+                <Tooltip />
+                <Legend verticalAlign="top" height={20} />
+                <Line type="monotone" dataKey="Observations" stroke="gray" strokeWidth={2} dot={false} isAnimationActive={false} />
+                <Line type="monotone" dataKey="NOAA Tidal Predictions" stroke="teal" strokeWidth={2} dot={false} isAnimationActive={false} />
+                <Line type="monotone" dataKey="APS Nowcast" stroke="CornflowerBlue" strokeWidth={2} dot={false} isAnimationActive={false} />
+                <Line type="monotone" dataKey="Difference (APS-OBS)" stroke="red" strokeWidth={2} dot={false} isAnimationActive={false} />
+            </LineChart>
+        </Fragment>
     );
-};
+};
diff --git a/src/components/map/observation-dialog.js → src/components/dialog/observation-dialog.js b/src/components/map/observation-dialog.js → src/components/dialog/observation-dialog.js
@@ -1,8 +1,8 @@
 import React, {Fragment} from 'react';
 import PropTypes from 'prop-types';
-import BaseFloatingDialog from "@utils/base-floating-dialog";
+import BaseFloatingDialog from "@dialog/base-floating-dialog";
 import {useLayers} from "@context";
-import ObservationChart from "@utils/observation-chart";
+import ObservationChart from "@dialog/observation-chart";
 
 // define the properties of this component
 ObservationDialog.propTypes = {

diff --git a/webpack.config.js b/webpack.config.js
@@ -102,6 +102,7 @@ module.exports = {
       '@hooks': path.resolve(__dirname, 'src/hooks/'),
       '@images': path.resolve(__dirname, 'src/images/'),
       '@utils': path.resolve(__dirname, 'src/utils/'),
+      '@dialog': path.resolve(__dirname, 'src/components/dialog')
     }
   },