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; +}