Adelle/forecasts on sensor page #3264
Conversation
package.json
Outdated
| @@ -28,6 +28,7 @@ | |||
| "query-string": "^9.1.1", | |||
| "react": "^18.3.1", | |||
| "react-app-polyfill": "^3.0.0", | |||
| "react-bootstrap": "^2.10.6", | |||
There was a problem hiding this comment.
Hmm, we already had bootstrap, and tabs here https://github.com/gulfofmaine/Neracoos-1-Buoy-App/blob/main/app/(platformMap)/%40bottom/platform/%5BplatformId%5D/tabs.tsx using reactstrap
There was a problem hiding this comment.
Ack for some reason, reactstrap was being really fussy. I'll try using it again...
There was a problem hiding this comment.
Okay I got it working with reactstrap--just had to create a new reusable component that doesn't change the url and only changes the tab panels below the tabs.
| @@ -4,6 +4,7 @@ export const colors = { | |||
| coastalMeadow: "#2ab78f", | |||
| buoyYellow: "#ffcd22", | |||
| whatOrange: "#ffae6d", | |||
| brighterOrange: "#fc8042", | |||
There was a problem hiding this comment.
Is this from the NERACOOS styles?
There was a problem hiding this comment.
No its not from NERACOOS styles, but to me, it seems like none of the current colors have enough of a contrast to be effective as a third color in the graph:
This is what it looks like with neracoos' whatOrange:
The best contrast for the colors we have is neracoosBlue but that just looks like a bolder version of the "Observed" timeseries.
The brighterOrange that I added looks like this:
Happy to change it to whatever you think is best! Just want it to be clear what timeseries is which (especially for folks who might be visually impaired)
There was a problem hiding this comment.
Is it cycling through the colors or are you picking them?
What about using different dash styles for predicted vs forecast? That's what we are doing on the platform forecasts
https://mariners.neracoos.org/platform/E01/forecast/air_temperature Though now I'm thinking we should probably make the observed solid and the forecasts dashed there
Hohonu uses dashes for their forecasts and dots for their observations
CO-OPs is solid for both
We show prelim (but out of date because I gonna fix something with it...) data dashed on the Climate dashboard
| // import Tab from "react-bootstrap/Tab" | ||
| // import Tabs from "react-bootstrap/Tabs" |
There was a problem hiding this comment.
| // import Tab from "react-bootstrap/Tab" | |
| // import Tabs from "react-bootstrap/Tabs" |
| @@ -4,6 +4,7 @@ export const colors = { | |||
| coastalMeadow: "#2ab78f", | |||
| buoyYellow: "#ffcd22", | |||
| whatOrange: "#ffae6d", | |||
| brighterOrange: "#fc8042", | |||
There was a problem hiding this comment.
Is it cycling through the colors or are you picking them?
What about using different dash styles for predicted vs forecast? That's what we are doing on the platform forecasts
https://mariners.neracoos.org/platform/E01/forecast/air_temperature Though now I'm thinking we should probably make the observed solid and the forecasts dashed there
Hohonu uses dashes for their forecasts and dots for their observations
CO-OPs is solid for both
We show prelim (but out of date because I gonna fix something with it...) data dashed on the Climate dashboard
This PR incorporates Forecasts into the water sensor page and closes #3259
useDatasetsto get datasets by type instead of index so we don't mistakenly show a forecast as a prediction(sorry I had to add bootstrap as a dependency... tabs for literally everything else wasn't working with our page structure)