From c5dff959e0b99a5286d275332b0f9d1ec06af7b6 Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Tue, 23 Jul 2024 16:45:56 -0400
Subject: [PATCH 1/3] removing the chart settings control as it is no longer
compatible with brian's suggestions
---
src/context/settings.js | 9 ++-------
1 file changed, 2 insertions(+), 7 deletions(-)
diff --git a/src/context/settings.js b/src/context/settings.js
index 83f77197..e46e47f0 100644
--- a/src/context/settings.js
+++ b/src/context/settings.js
@@ -2,8 +2,7 @@ import React, {
createContext,
useCallback,
useContext,
- useMemo,
- useState
+ useMemo
} from "react";
import PropTypes from "prop-types";
@@ -27,9 +26,6 @@ export const SettingsProvider = ({ children }) => {
setMode(darkMode ? 'light' : 'dark');
}, [mode]);
- // used to capture the selected observation chart min/max Y-axis
- const [obsChartY, setObsChartY] = useState([-2, 2.5]);
-
return (
{
darkMode: {
enabled: darkMode,
toggle: toggleDarkMode,
- },
- obsChartY, setObsChartY,
+ }
}}>
{ children }
From a499e346c1c97c4aab427da394d43a3180c335d6 Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Tue, 23 Jul 2024 16:46:06 -0400
Subject: [PATCH 2/3] removing the chart settings control as it is no longer
compatible with brian's suggestions
---
src/components/trays/settings/index.js | 2 --
1 file changed, 2 deletions(-)
diff --git a/src/components/trays/settings/index.js b/src/components/trays/settings/index.js
index dbdd2756..ebdb1c7a 100644
--- a/src/components/trays/settings/index.js
+++ b/src/components/trays/settings/index.js
@@ -4,7 +4,6 @@ import { Tune as SettingsIcon } from '@mui/icons-material';
import { DarkModeToggle } from './dark-mode';
import { BaseMaps } from './basemap';
-// import { ObsChartYAxis } from './chart-yaxis';
export const icon = ;
@@ -14,6 +13,5 @@ export const trayContents = () => (
- {/**/}
);
\ No newline at end of file
From 5f18d34b05af90ec3b2251a5d6c8e2ae9e7f165c Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Tue, 23 Jul 2024 16:52:51 -0400
Subject: [PATCH 3/3] removing the y-axis state variable, adding method to
create a data-based range array for the y-axis
---
src/components/dialog/observation-chart.js | 62 +++++++++++++++++++---
1 file changed, 55 insertions(+), 7 deletions(-)
diff --git a/src/components/dialog/observation-chart.js b/src/components/dialog/observation-chart.js
index 7e62130a..2f5b3b60 100644
--- a/src/components/dialog/observation-chart.js
+++ b/src/components/dialog/observation-chart.js
@@ -2,7 +2,6 @@ import React from 'react';
import axios from 'axios';
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';
// install day.js for UTC visual formatting
@@ -186,14 +185,11 @@ function formatX_axis(value) {
* @constructor
*/
function CreateObsChart(url) {
- // get the settings for the Y-axis min/max values
- const { obsChartY } = useSettings();
-
// 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];
+ // get the domain bounds
+ const maxValue = get_yaxis_ticks(data);
// render the chart
return (
@@ -209,7 +205,7 @@ function CreateObsChart(url) {
formatX_axis(value) }/>
- formatY_axis(value) } domain={ obsChartY } />
+ formatY_axis(value) } />
@@ -223,3 +219,55 @@ function CreateObsChart(url) {
);
}
+
+/**
+ * gets the max value in the data to set the y-axis range and ticks
+ *
+ * @param data
+ * @returns {null|*[]}
+ */
+function get_yaxis_ticks(data) {
+ // insure there is something to work with
+ if (data !== undefined) {
+ // init the max value found
+ let maxVal = 0;
+
+ // get the keys of the first
+ const theKeys = Object.keys(data[0]);
+
+ // remove time from the array
+ theKeys.shift();
+
+ // get the max value in the data for each key
+ theKeys.forEach((aKey) => {
+ // identify the max value in the array of values
+ const newVal = Math.max(...data
+ // make sure we dont run into any null or undefined values in the data
+ .filter(function(o) { return !(o[aKey] === undefined || o[aKey] === null); })
+ // create the array of all the values
+ .map(o => o[aKey]));
+
+ // if there was a new max value found
+ if (newVal > maxVal) {
+ // save the new max value
+ maxVal = newVal;
+ }
+ });
+
+ // round up to the next integer
+ maxVal = Math.ceil(maxVal);
+
+ // init the return value
+ const ret_val = [];
+
+ // create an array of tick marks based on the mav data value
+ for (let i=-maxVal; i <= maxVal; i += .5)
+ ret_val.push(i);
+
+ // return the new y-axis array range
+ return ret_val;
+ }
+ // else return nothing
+ else
+ return null;
+}