From a298772b879625396dce4b55fed6488324e0c09d Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Thu, 16 May 2024 09:28:17 -0400
Subject: [PATCH 1/3] tidying up look of the chart

---
 src/components/dialog/observation-chart.js | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/dialog/observation-chart.js b/src/components/dialog/observation-chart.js
index 07b55621..9e960ba3 100644
--- a/src/components/dialog/observation-chart.js
+++ b/src/components/dialog/observation-chart.js
@@ -1,6 +1,6 @@
-import React, {Fragment} from 'react';
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
+import React from 'react';
 import axios from 'axios';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Legend, ResponsiveContainer } from 'recharts';
 import { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 const queryClient = new QueryClient();
@@ -57,17 +57,16 @@ function CreateObsChart(url) {
 
     // render the chart
     return (
-        <Fragment>
+        <ResponsiveContainer width="100%" height="100%">
             { status === 'pending' ? (
-                'Loading...'
+                <div>Loading...</div>
             ) : status === 'error' ? (
-                <span>Error: {error.message}</span>
+                <div>Error: {error.message}</div>
             ) : (
-                <LineChart width={590} height={300} data={data} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
+                <LineChart width={590} height={300} data={data} margin={{ top: 10, right: 0, left: -10, bottom: 0 }}>
                     <CartesianGrid strokeDasharray="3 3" />
-                    <XAxis dataKey="time" />
-                    <YAxis domain={['dataMin', 'dataMax']} />
-                    <Tooltip />
+                    <XAxis dataKey="time" allowDuplicatedCategory={false} />
+                    <YAxis domain={['auto', 'auto']}/>
                     <Legend verticalAlign="bottom" height={30} />
                     <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} />
@@ -75,7 +74,7 @@ function CreateObsChart(url) {
                     <Line type="monotone" dataKey="Difference (APS-OBS)" stroke="red" strokeWidth={2} dot={false} isAnimationActive={false} />
                 </LineChart>
             )}
-        </Fragment>
+        </ResponsiveContainer>
     );
 }
 

From e9094be70d3bcd26e0870bb224e5e44afe6c07bb Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Thu, 16 May 2024 09:46:02 -0400
Subject: [PATCH 2/3] fixing display of line parts when there is no data value

---
 src/components/dialog/observation-chart.js | 26 +++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/dialog/observation-chart.js b/src/components/dialog/observation-chart.js
index 9e960ba3..8540f6c1 100644
--- a/src/components/dialog/observation-chart.js
+++ b/src/components/dialog/observation-chart.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import axios from 'axios';
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Legend, ResponsiveContainer } from 'recharts';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Legend, ResponsiveContainer, Tooltip } from 'recharts';
 import { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 const queryClient = new QueryClient();
@@ -67,6 +67,7 @@ function CreateObsChart(url) {
                     <CartesianGrid strokeDasharray="3 3" />
                     <XAxis dataKey="time" allowDuplicatedCategory={false} />
                     <YAxis domain={['auto', 'auto']}/>
+                    <Tooltip />
                     <Legend verticalAlign="bottom" height={30} />
                     <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} />
@@ -117,10 +118,25 @@ function csvToJSON(csvData) {
         // remove the timezone from the time value
         ret_val.map(function (e){
             e.time = e.time.substring(0, e.time.split(':', 2).join(':').length);
-            if (e["APS Nowcast"]) e["APS Nowcast"] = +parseFloat(e["APS Nowcast"]).toFixed(4);
-            if (e["Observations"]) e["Observations"] = +parseFloat(e["Observations"]).toFixed(4);
-            if (e["NOAA Tidal Predictions"]) e["NOAA Tidal Predictions"] = +parseFloat(e["NOAA Tidal Predictions"]).toFixed(3);
-            if (e["Difference (APS-OBS)"]) e["Difference (APS-OBS)"] = +parseFloat(e["Difference (APS-OBS)"]).toFixed(3);
+            if (e["APS Nowcast"])
+                e["APS Nowcast"] = +parseFloat(e["APS Nowcast"]).toFixed(4);
+            else
+                e["APS Nowcast"] = null;
+
+            if (e["Observations"])
+                e["Observations"] = +parseFloat(e["Observations"]).toFixed(4);
+            else
+                e["Observations"] = null;
+
+            if (e["NOAA Tidal Predictions"])
+                e["NOAA Tidal Predictions"] = +parseFloat(e["NOAA Tidal Predictions"]).toFixed(3);
+            else
+                e["NOAA Tidal Predictions"] = null;
+
+            if (e["Difference (APS-OBS)"])
+                e["Difference (APS-OBS)"] = +parseFloat(e["Difference (APS-OBS)"]).toFixed(3);
+            else
+                e["Difference (APS-OBS)"] = null;
         });
 
         // return the json data representation

From 4df1b4ba56b3ba74dc3d34b4664a256ab2ac286b Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Thu, 16 May 2024 09:47:17 -0400
Subject: [PATCH 3/3] fixing display of line parts when there is no data value

---
 src/components/dialog/observation-chart.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/dialog/observation-chart.js b/src/components/dialog/observation-chart.js
index 8540f6c1..1be97e52 100644
--- a/src/components/dialog/observation-chart.js
+++ b/src/components/dialog/observation-chart.js
@@ -118,6 +118,8 @@ function csvToJSON(csvData) {
         // remove the timezone from the time value
         ret_val.map(function (e){
             e.time = e.time.substring(0, e.time.split(':', 2).join(':').length);
+
+            // data that is missing a value will not result in plotting
             if (e["APS Nowcast"])
                 e["APS Nowcast"] = +parseFloat(e["APS Nowcast"]).toFixed(4);
             else