Merge pull request #123 from RENCI/issue-119

Issue 119 - Chart reformatting
RENCI · Jul 23, 2024 · 3f215c2 · 3f215c2
2 parents a0da453 + 6bef309
commit 3f215c2
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 25 deletions.
diff --git a/src/components/dialog/base-floating-dialog.js b/src/components/dialog/base-floating-dialog.js
@@ -64,8 +64,8 @@ export default function BaseFloatingDialog({ title, index, dialogObject, dataKey
                 TransitionComponent={ Transition }
                 disableEnforceFocus
                 style={{ pointerEvents: 'none' }}
-                PaperProps={{ sx: { width: 800,  height: 465, pointerEvents: 'auto' } }}
-                sx={{ zIndex: 405, width: 800, height: 465, '.MuiBackdrop-root': { backgroundColor: 'transparent' },
+                PaperProps={{ sx: { width: 800,  height: 505, pointerEvents: 'auto' } }}
+                sx={{ zIndex: 405, width: 800, height: 505, '.MuiBackdrop-root': { backgroundColor: 'transparent' },
                         left: index * 20, top: 20 + index * 43 }}
             >
                 <DialogTitle sx={{ cursor: 'move', backgroundColor: 'lightblue', textAlign: 'center',
@@ -76,7 +76,7 @@ export default function BaseFloatingDialog({ title, index, dialogObject, dataKey
                     <CloseOutlinedIcon color={"primary"}/>
                 </IconButton>
 
-                <DialogContent sx={{ backgroundColor: 'white', fontSize: 11, m: 0, width: "100%", height: 350 }}>{ dialogObject }</DialogContent>
+                <DialogContent sx={{ backgroundColor: 'white', fontSize: 11, m: 0, height: 395 }}>{ dialogObject }</DialogContent>
             </Dialog>
         </Fragment>
     );

diff --git a/src/components/dialog/observation-chart.js b/src/components/dialog/observation-chart.js
@@ -1,12 +1,14 @@
 import React from 'react';
 import axios from 'axios';
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Legend, ResponsiveContainer, Tooltip } from 'recharts';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Legend, ResponsiveContainer, Tooltip, ReferenceLine } from 'recharts';
 import { useQuery } from '@tanstack/react-query';
 import { useSettings } from "@context";
 import dayjs from 'dayjs';
 
-// setup to handle dates as UTC
+// install day.js for UTC visual formatting
 const utc = require("dayjs/plugin/utc");
+
+// init the date formatter to use UTC only
 dayjs.extend(utc);
 
 /**
@@ -115,12 +117,12 @@ function csvToJSON(csvData) {
 
                 // data that is missing a value will not result in plotting
                 if (e["APS Nowcast"])
-                    e["APS Nowcast"] = +parseFloat(e["APS Nowcast"]).toFixed(4);
+                    e["APS Nowcast"] = +parseFloat(e["APS Nowcast"]).toFixed(6);
                 else
                     e["APS Nowcast"] = null;
 
                 if (e["APS Forecast"])
-                    e["APS Forecast"] = +parseFloat(e["APS Forecast"]).toFixed(4);
+                    e["APS Forecast"] = +parseFloat(e["APS Forecast"]).toFixed(6);
                 else
                     e["APS Forecast"] = null;
 
@@ -130,12 +132,12 @@ function csvToJSON(csvData) {
                     e["Observations"] = null;
 
                 if (e["NOAA Tidal Predictions"])
-                    e["NOAA Tidal Predictions"] = +parseFloat(e["NOAA Tidal Predictions"]).toFixed(3);
+                    e["NOAA Tidal Predictions"] = +parseFloat(e["NOAA Tidal Predictions"]).toFixed(4);
                 else
                     e["NOAA Tidal Predictions"] = null;
 
                 if (e["Difference (APS-OBS)"])
-                    e["Difference (APS-OBS)"] = +parseFloat(e["Difference (APS-OBS)"]).toFixed(3);
+                    e["Difference (APS-OBS)"] = +parseFloat(e["Difference (APS-OBS)"]).toFixed(6);
                 else
                     e["Difference (APS-OBS)"] = null;
             }
@@ -149,17 +151,28 @@ function csvToJSON(csvData) {
 /**
  * reformats the data label shown on the x-axis
  *
- * @param time
+ * @param value
  * @returns {string}
  */
-function formatX_axis(time) {
+function formatY_axis(value) {
+    // return the formatted value
+    return value.toFixed(2);
+}
+
+/**
+ * reformats the data label shown on the x-axis
+ *
+ * @param value
+ * @returns {string}
+ */
+function formatX_axis(value) {
     // init the return value
     let ret_val = "";
 
     // empty data will be ignored
-    if (time !== "")
+    if (value !== "")
         // do the reformatting
-        ret_val = dayjs.utc(time).format('MM-DD:HH').split('+')[0] + 'Z';
+        ret_val = dayjs.utc(value).format('MM-DD:HH').split('+')[0] + 'Z';
 
     // return the formatted value
     return ret_val;
@@ -179,20 +192,27 @@ function CreateObsChart(url) {
     // call to get the data. expect back some information too
     const { status, data } = getObsChartData(url.url);
 
+    // set the default y-axis ticks
+    const yaxis_ticks= [-5.0, -4.0, -3.0, -2.0, -1.0, 0.0, 1.0, 2.0, 3.0, 4.0, 5.0];
+
     // render the chart
     return (
         <ResponsiveContainer width="100%" height="100%">
             { status === 'pending' ? (
                 <div>Gathering chart data...</div>
             ) : status === 'error' ? (
-                <div>There was a problem getting observation data for this location.</div>
+                <div>There was a problem with observation data for this location.</div>
             ) : (
-                <LineChart data={ data } margin={{ left: -10 }}>
-                    <CartesianGrid strokeDasharray="3 3" />
-                    <XAxis dataKey="time" allowDuplicatedCategory={ false } tickFormatter={ (time) => formatX_axis(time) }/>
-                    <YAxis tickCount="10" domain={ obsChartY } />
+                <LineChart data={ data } margin={{ left: -25 }} >
+                    <CartesianGrid strokeDasharray="1 1" />
+
+                    <XAxis tick={{ stroke: 'tan', strokeWidth: .5 }} tickSize="10" dataKey="time" tickFormatter={ (value) => formatX_axis(value) }/>
+
+                    <ReferenceLine y={0} stroke="#000000" />
+                    <YAxis ticks={ yaxis_ticks } tick={{ stroke: 'tan', strokeWidth: .5 }} tickFormatter={ (value) => formatY_axis(value) } domain={ obsChartY } />
+
                     <Tooltip />
-                    <Legend align={ 'center' } />
+                    <Legend align="right" />
                     <Line type="monotone" dataKey="Observations" stroke="black" 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} />

diff --git a/src/components/share/buildlink.js b/src/components/share/buildlink.js
@@ -72,7 +72,7 @@ export const BuildLink = () => {
 
     return (
         <Fragment>
-            <IconButton onClick={handleClickOpen}>Share&nbsp;
+            <IconButton width="100" onClick={handleClickOpen}>
                 <ShareRoundedIcon color={'primary'} />
             </IconButton>
             <Dialog

diff --git a/src/components/share/share.js b/src/components/share/share.js
@@ -22,7 +22,7 @@ export const Share = () => {
                     filter: 'opacity(0.9)',
                     '&:hover': { filter: 'opacity(1.0)' },
                     height: 50,
-                    width: 80,
+                    width: 40,
                     padding: '0px',
                     zIndex: 410,
                     borderRadius: 'sm'

diff --git a/src/components/trays/model-selection/catalogItems.js b/src/components/trays/model-selection/catalogItems.js
@@ -185,7 +185,8 @@ export default function CatalogItems(data) {
                                                             key={ mbrIdx }
                                                             checked={ getCheckedState(mbr.group) }
                                                             label={
-                                                                stormOrModelName + mbr['properties'][stormOrModelEle].toUpperCase() + ', ' +
+                                                                stormOrModelName +
+                                                                ((mbr['properties'][stormOrModelEle] === undefined) ? 'Data error' : mbr['properties'][stormOrModelEle].toUpperCase()) + ', ' +
                                                                 numberName + mbr['properties'][numberEle] +
                                                                 ', Type: ' + mbr['properties']['event_type'] +
                                                                 ', Grid: ' + mbr['properties']['grid_type'] +

diff --git a/src/components/trays/settings/index.js b/src/components/trays/settings/index.js
@@ -4,7 +4,7 @@ import { Tune as SettingsIcon } from '@mui/icons-material';
 
 import { DarkModeToggle } from './dark-mode';
 import { BaseMaps } from './basemap';
-import { ObsChartYAxis } from './chart-yaxis';
+// import { ObsChartYAxis } from './chart-yaxis';
 
 export const icon = <SettingsIcon />;
 
@@ -14,6 +14,6 @@ export const trayContents = () => (
   <Stack gap={ 1 } p={ 1 }>
     <DarkModeToggle />
     <BaseMaps />
-    <ObsChartYAxis />
+    {/*<ObsChartYAxis />*/}
   </Stack>
 );
diff --git a/src/context/settings.js b/src/context/settings.js
@@ -28,7 +28,7 @@ export const SettingsProvider = ({ children }) => {
   }, [mode]);
 
   // used to capture the selected observation chart min/max Y-axis
-  const [obsChartY, setObsChartY] = useState([-2, 2]);
+  const [obsChartY, setObsChartY] = useState([-2, 2.5]);
 
   return (
     <SettingsContext.Provider value={{