checkpointing current state of code

RENCI · May 6, 2024 · 294a3b3 · 294a3b3
1 parent 6760c13
commit 294a3b3
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 127 deletions.
diff --git a/src/components/map/observation-dialog.js b/src/components/map/observation-dialog.js
@@ -3,58 +3,12 @@ import PropTypes from 'prop-types';
 import BaseFloatingDialog from "@utils/base-floating-dialog";
 import {useLayers} from "@context";
 import ObservationChart from "@utils/observation-chart";
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 
 // define the properties of this component
 ObservationDialog.propTypes = {
   obs_data: PropTypes.object
 };
 
-const data = [
-  {
-    name: 'Page A',
-    uv: 4000,
-    pv: 2400,
-    amt: 2400,
-  },
-  {
-    name: 'Page B',
-    uv: 3000,
-    pv: 1398,
-    amt: 2210,
-  },
-  {
-    name: 'Page C',
-    uv: 2000,
-    pv: 9800,
-    amt: 2290,
-  },
-  {
-    name: 'Page D',
-    uv: 2780,
-    pv: 3908,
-    amt: 2000,
-  },
-  {
-    name: 'Page E',
-    uv: 1890,
-    pv: 4800,
-    amt: 2181,
-  },
-  {
-    name: 'Page F',
-    uv: 2390,
-    pv: 3800,
-    amt: 2500,
-  },
-  {
-    name: 'Page G',
-    uv: 3490,
-    pv: 4300,
-    amt: 2100,
-  },
-];
-
 export default function ObservationDialog(obs_data) {
 
     // get references to the observation data/list
@@ -69,21 +23,7 @@ export default function ObservationDialog(obs_data) {
 
         return (
             <Fragment>
-                <ResponsiveContainer width="100%" height="100%">
-                    <LineChart
-                        width={500}
-                        height={300}
-                        data={data}
-                        margin={{
-                            top: 5,
-                            right: 30,
-                            left: 20,
-                            bottom: 5,
-                        }}
-                    >
-                    </LineChart>
-                </ResponsiveContainer>
-                {/*<ObservationChart {...args} />*/}
+                <ObservationChart {...args} />
             </Fragment>
         );
     };

diff --git a/src/utils/base-floating-dialog.js b/src/utils/base-floating-dialog.js
@@ -58,13 +58,13 @@ export default function BaseFloatingDialog({ title, dialogObject, dataKey, dataL
                     PaperComponent={PaperComponent}
                     TransitionComponent={Transition}
                     disableEnforceFocus
-                    style={{ pointerEvents: 'none'}}
+                    style={{ pointerEvents: 'none' }}
                     PaperProps={{ style: { pointerEvents: 'auto'} }}
                     sx={{ '.MuiBackdrop-root': { backgroundColor: 'transparent' }}}
                 >
-                    <DialogTitle sx={{cursor: 'move', backgroundColor: 'lightgray', textAlign: 'center'}} id="draggable-dialog-title"> { title } </DialogTitle>
+                    <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: 'lightgreen'}}>{ dialogObject }</DialogContent>
+                    <DialogContent sx={{backgroundColor: 'white'}}>{ dialogObject }</DialogContent>
 
                     <DialogActions sx={{backgroundColor: 'lightgray'}}><Button autoFocus onClick={handleClose}> Close </Button></DialogActions>
                 </Dialog>

diff --git a/src/utils/observation-chart.js b/src/utils/observation-chart.js
@@ -1,5 +1,5 @@
 import React, {Fragment, useState, useEffect} from 'react';
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
 
 import PropTypes from 'prop-types';
 
@@ -45,55 +45,10 @@ function csvToJSON(csvData) {
         }
 
         // TODO: return the data as a json string (for now)
-        return JSON.stringify(ret_val); // Returns JSON string
+        return ret_val;
     }
 }
 
-const data = [
-  {
-    name: 'Page A',
-    uv: 4000,
-    pv: 2400,
-    amt: 2400,
-  },
-  {
-    name: 'Page B',
-    uv: 3000,
-    pv: 1398,
-    amt: 2210,
-  },
-  {
-    name: 'Page C',
-    uv: 2000,
-    pv: 9800,
-    amt: 2290,
-  },
-  {
-    name: 'Page D',
-    uv: 2780,
-    pv: 3908,
-    amt: 2000,
-  },
-  {
-    name: 'Page E',
-    uv: 1890,
-    pv: 4800,
-    amt: 2181,
-  },
-  {
-    name: 'Page F',
-    uv: 2390,
-    pv: 3800,
-    amt: 2500,
-  },
-  {
-    name: 'Page G',
-    uv: 3490,
-    pv: 4300,
-    amt: 2100,
-  },
-];
-
 /**
  * renders the observations as a chart
  *
@@ -127,21 +82,24 @@ export default function ObservationChart(dataUrl) {
     // render the chart.
     return (
         <Fragment>
-            {/*{stationObs}*/}
-            {/*<ResponsiveContainer width="100%" height="100%">*/}
-            {/*    <LineChart*/}
-            {/*        width={500}*/}
-            {/*        height={300}*/}
-            {/*        data={data}*/}
-            {/*        margin={{*/}
-            {/*            top: 5,*/}
-            {/*            right: 30,*/}
-            {/*            left: 20,*/}
-            {/*            bottom: 5,*/}
-            {/*        }}*/}
-            {/*    >*/}
-            {/*    </LineChart>*/}
-            {/*</ResponsiveContainer>*/}
-        </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>
     );
 };