adding the APS forecast plot

RENCI · Jun 20, 2024 · 4d6a4c7 · 4d6a4c7
1 parent 6ccf48a
commit 4d6a4c7
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 26 deletions.
diff --git a/src/components/dialog/base-floating-dialog.js b/src/components/dialog/base-floating-dialog.js
@@ -2,15 +2,15 @@ import React, {Fragment} from 'react';
 import Draggable from 'react-draggable';
 import PropTypes from 'prop-types';
 
-import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
 import CssBaseline from '@mui/material/CssBaseline';
 import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogActions';
 import DialogTitle from '@mui/material/DialogTitle';
 import Paper from '@mui/material/Paper';
 import Slide from '@mui/material/Slide';
 import { markUnclicked } from '@utils/map-utils';
+import CloseIcon from '@mui/icons-material/Close';
 
 // define the properties of this component's input
 BaseFloatingDialog.propTypes = {
@@ -54,28 +54,27 @@ export default function BaseFloatingDialog({ title, dialogObject, dataKey, dataL
     return (
         <Fragment>
             <CssBaseline />
-                <Dialog
-                    aria-labelledby="draggable-dialog-title"
-                    open={true}
-                    onClose={handleClose}
-                    PaperComponent={PaperComponent}
-                    TransitionComponent={Transition}
-                    disableEnforceFocus
-                    style={{ pointerEvents: 'none' }}
-                    PaperProps={{ sx: { width: 750,  height: 485, pointerEvents: 'auto'} }}
-                    sx={{ zIndex: 402, width: 750, height: 485, '.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>
+            <Dialog
+                aria-labelledby="draggable-dialog-title"
+                open={ true }
+                onClose={ handleClose }
+                PaperComponent={ PaperComponent }
+                TransitionComponent={ Transition }
+                disableEnforceFocus
+                style={{ pointerEvents: 'none' }}
+                PaperProps={{ sx: { width: 750,  height: 465, pointerEvents: 'auto' } }}
+                sx={{ zIndex: 402, width: 750, height: 465, '.MuiBackdrop-root': { backgroundColor: 'transparent' }}}
+            >
+                <DialogTitle sx={{ cursor: 'move', backgroundColor: 'lightblue', textAlign: 'center',
+                                fontSize: 14, height: 45, p: 1.5 }} id="draggable-dialog-title"> { title }
+                </DialogTitle>
 
-                    <DialogContent
-                        sx={{backgroundColor: 'white', fontSize: 14, m: 0, width: 590, height: 350 }}>{ dialogObject }</DialogContent>
+                <IconButton size="small" autoFocus onClick={ handleClose }
+                            sx={{ position: 'absolute', right: 8, top: 5 }}
+                > <CloseIcon/> </IconButton>
 
-                    <DialogActions
-                        sx={{backgroundColor: 'lightgray', height: 35, m: 0, p: 1}}>
-                        <Button style={{fontSize: 14}} autoFocus onClick={ handleClose }> Close </Button></DialogActions>
-                </Dialog>
+                <DialogContent sx={{ backgroundColor: 'white', fontSize: 11, m: 0, width: 590, height: 350 }}>{ dialogObject }</DialogContent>
+            </Dialog>
         </Fragment>
     );
 };
@@ -89,7 +88,7 @@ export default function BaseFloatingDialog({ title, dialogObject, dataKey, dataL
 */
 function PaperComponent(props) {
     return (
-        <Draggable handle="#draggable-dialog-title" cancel={'[class*="MuiDialogContent-root"]'}>
+        <Draggable  defaultPosition={{x: 110, y: 110}} handle="#draggable-dialog-title" cancel={'[class*="MuiDialogContent-root"]'}>
             <Paper { ...props } />
         </Draggable>
     );

diff --git a/src/components/dialog/observation-chart.js b/src/components/dialog/observation-chart.js
@@ -68,15 +68,16 @@ function CreateObsChart(url) {
             ) : status === 'error' ? (
                 <div>Error: {error.message}</div>
             ) : (
-                <LineChart width={590} height={300} data={data} margin={{ top: 10, right: 0, left: -10, bottom: 0 }}>
+                <LineChart data={data} margin={{ left: -10 }}>
                     <CartesianGrid strokeDasharray="3 3" />
                     <XAxis dataKey="time" allowDuplicatedCategory={false} />
                     <YAxis domain={['auto', 'auto']}/>
                     <Tooltip />
-                    <Legend verticalAlign="bottom" height={30} />
+                    <Legend align={ 'center' } />
                     <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" strokeDasharray="3 1" 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" strokeDasharray="4 1 2" dataKey="APS Forecast" stroke="LimeGreen" strokeWidth={2} dot={false} isAnimationActive={false} />
                     <Line type="monotone" dataKey="Difference (APS-OBS)" stroke="red" strokeWidth={2} dot={false} isAnimationActive={false} />
                 </LineChart>
             )}
@@ -130,6 +131,11 @@ function csvToJSON(csvData) {
             else
                 e["APS Nowcast"] = null;
 
+            if (e["APS Forecast"])
+                e["APS Forecast"] = +parseFloat(e["APS Forecast"]).toFixed(4);
+            else
+                e["APS Forecast"] = null;
+
             if (e["Observations"])
                 e["Observations"] = +parseFloat(e["Observations"]).toFixed(4);
             else