{getMaxValuesForYears.map(
(item, idx) => (
@@ -227,7 +226,7 @@ export default function Panel() {
) : (
handleYearClick(
item.year
@@ -235,10 +234,22 @@ export default function Panel() {
}
>
@@ -259,7 +270,7 @@ export default function Panel() {
: 'C'}
-
+
{item.year}
@@ -277,6 +288,7 @@ export default function Panel() {
selectedIndex={
selectedVariableIndex
}
+ isFahrenheit={isFahrenheit}
/>
diff --git a/src/components/RotateOverlay.tsx b/src/components/RotateOverlay.tsx
new file mode 100644
index 0000000..435d716
--- /dev/null
+++ b/src/components/RotateOverlay.tsx
@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+import { DevicePhoneMobileIcon } from '@heroicons/react/24/solid';
+import React from 'react';
+
+const RotateOverlay = () => {
+ const [showOverlay, setShowOverlay] = useState(false);
+
+ useEffect(() => {
+ const handleOrientationChange = () => {
+ const isMobile = window.matchMedia('(max-width: 915px)').matches;
+ const isLandscape = window.innerWidth > window.innerHeight;
+ setShowOverlay(isMobile && isLandscape);
+ };
+
+ window.addEventListener('resize', handleOrientationChange);
+ handleOrientationChange();
+
+ return () => {
+ window.removeEventListener('resize', handleOrientationChange);
+ };
+ }, []);
+
+ if (!showOverlay) return null;
+
+ return (
+
+
+
+
Please rotate your device to portrait mode
+
+
+ );
+};
+
+export default RotateOverlay;
diff --git a/src/components/ScenarioPickerModal.tsx b/src/components/ScenarioPickerModal.tsx
index 1be4a0d..909b050 100644
--- a/src/components/ScenarioPickerModal.tsx
+++ b/src/components/ScenarioPickerModal.tsx
@@ -1,5 +1,5 @@
import React, { useEffect } from 'react';
-import { ArrowRightIcon } from '@heroicons/react/24/outline';
+import { ArrowRightIcon } from '@heroicons/react/24/solid';
import config from '../config.json';
export default function ScenarioPickerModal({
@@ -29,7 +29,7 @@ export default function ScenarioPickerModal({
return (
diff --git a/src/components/ShareModal.tsx b/src/components/ShareModal.tsx
index ca7b731..dc229b2 100644
--- a/src/components/ShareModal.tsx
+++ b/src/components/ShareModal.tsx
@@ -3,7 +3,7 @@ import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@
import { Fragment } from 'react';
import { FacebookShareButton, TwitterShareButton, LinkedinShareButton, EmailShareButton, WhatsappShareButton } from 'react-share';
import { FacebookIcon, TwitterIcon, LinkedinIcon, EmailIcon, WhatsappIcon } from 'react-share';
-
+import { ClipboardDocumentIcon } from '@heroicons/react/24/outline'; // Importing the HeroIcons Clipboard icon
interface ShareModalProps {
isOpen: boolean;
@@ -11,6 +11,11 @@ interface ShareModalProps {
}
export const ShareModal: React.FC = ({ isOpen, onClose }) => {
+ const handleCopyLink = () => {
+ navigator.clipboard.writeText(window.location.href);
+ onClose();
+ };
+
return (
@@ -67,4 +80,4 @@ export const ShareModal: React.FC
= ({ isOpen, onClose }) => {
);
};
-export default ShareModal;
\ No newline at end of file
+export default ShareModal;
diff --git a/src/components/Tour.jsx b/src/components/Tour.jsx
new file mode 100644
index 0000000..a95eb92
--- /dev/null
+++ b/src/components/Tour.jsx
@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import Joyride from 'react-joyride';
+import TourButton from './TourButton';
+import TourTooltip from './TourTooltip';
+import useLocalStorage from '../hooks/useLocalStorage';
+
+export default function Tour() {
+ const [tourComplete, setTourComplete] = useLocalStorage(
+ 'tourComplete',
+ false
+ );
+ const [helpers, setHelpers] = useState({});
+ const [run, setRun] = useState(!tourComplete);
+
+ const steps = [
+ {
+ target: 'body',
+ title: 'Welcome to the',
+ name: 'Mobile Climate Mapper!',
+ content:
+ 'The Mobile Climate Mapper is an extension of NASA’s Earth Information Center exhibit at the Smithsonian National Museum of Natural History. Use this tool to explore how climate change may affect temperatures at any location in the world.',
+ placement: 'center',
+ disableBeacon: true
+ },
+ {
+ target: '.map',
+ content:
+ 'Tap anywhere on the map to view how temperatures are projected to change at that location',
+ placement: 'bottom',
+ disableBeacon: true
+ },
+ {
+ target: '.esri-expand__toggle',
+ content: 'Or search by location',
+ disableBeacon: true
+ },
+ {
+ target: '.dataset-choice',
+ content:
+ 'Select from four greenhouse gas (GHG) emissions scenarios and learn how each impacts our future climate',
+ placement: 'top',
+ disableBeacon: true
+ },
+ {
+ target: '.chart',
+ content:
+ 'View past and projected temperature changes from 1950-2100 based on the selected emissions scenario',
+ disableBeacon: true
+ }
+ ];
+
+ const handleJoyrideCallback = (data) => {
+ if (
+ data.status === 'finished' ||
+ data.status === 'skipped' ||
+ data.action === 'close'
+ ) {
+ setTourComplete(true);
+ setRun(false);
+ helpers.reset();
+ }
+ };
+
+ const handleGetHelpers = (helpers) => {
+ setHelpers(helpers);
+ };
+
+ const handleClick = () => {
+ setRun(!run);
+ };
+
+ return (
+
+
+
+
+ );
+}
diff --git a/src/components/TourButton.jsx b/src/components/TourButton.jsx
new file mode 100644
index 0000000..2a09ef4
--- /dev/null
+++ b/src/components/TourButton.jsx
@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+const StyledButton = styled.button`
+ position: absolute;
+ height: 32px;
+ width: 32px;
+ top: 170px;
+ right: 15px;
+ background-color: #242424;
+ color: #adadad;
+ border: none;
+ cursor: pointer;
+ z-index: 50;
+`;
+
+export default function TourButton({ onClick }) {
+ return ?;
+}
diff --git a/src/components/TourTooltip.jsx b/src/components/TourTooltip.jsx
new file mode 100644
index 0000000..5d19de3
--- /dev/null
+++ b/src/components/TourTooltip.jsx
@@ -0,0 +1,127 @@
+import styled from 'styled-components';
+
+const TooltipContainer = styled.div`
+ background-color: rgb(255, 255, 255);
+ border-radius: 5px;
+ box-sizing: border-box;
+ color: rgb(51, 51, 51);
+ font-size: 16px;
+ max-width: 100%;
+ padding: 15px;
+ position: relative;
+ width: 380px;
+ box-shadow: 8px 8px 5px rgba(0, 32, 63, 0.35);
+`;
+
+const TooltipClose = styled.button`
+ background-color: transparent;
+ border: 0px;
+ border-radius: 0px;
+ cursor: pointer;
+ font-size: 24px;
+ line-height: 1;
+ padding: 15px;
+ appearance: none;
+ position: absolute;
+ right: 0px;
+ top: 0px;
+`;
+
+const TooltipTitle = styled.h1`
+ font-weight: bold;
+ font-size: 24px;
+ margin: 0px;
+`;
+
+const TooltipContent = styled.p`
+ text-align: left;
+ padding: 20px 10px;
+`;
+
+const TooltipFooter = styled.div`
+ align-items: center;
+ display: flex;
+ justify-content: space-between;
+ margin-top: 15px;
+ width: 100%;
+`;
+
+const BackButton = styled.button`
+ background-color: transparent;
+ border: 0px;
+ border-radius: 0px;
+ color: #005ece;
+ cursor: pointer;
+ font-size: 16px;
+ line-height: 1;
+ padding: 8px;
+ appearance: none;
+`;
+
+const PrimaryButton = styled.button`
+ background-color: #3661e1;
+ border: 0px;
+ border-radius: 4px;
+ color: rgb(255, 255, 255);
+ cursor: pointer;
+ font-size: 16px;
+ line-height: 1;
+ padding: 8px;
+ appearance: none;
+`;
+
+const Spacer = styled.div`
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+`;
+
+export default function CustomTooltip(props) {
+ const {
+ backProps,
+ closeProps,
+ continuous,
+ index,
+ primaryProps,
+ step,
+ tooltipProps
+ } = props;
+
+ return (
+
+
+ ×
+
+
+ {step.title && (
+ {`${step.title}`}
+ )}
+ {step.name && (
+ {`${step.name}`}
+ )}
+
+ {step.content}
+
+
+
+ {index > 0 && (
+
+ {backProps.title}
+
+ )}
+
+ {continuous && (
+
+ {primaryProps.title === 'Last'
+ ? 'End Tour'
+ : primaryProps.title}
+
+ )}
+
+
+
+ );
+}
diff --git a/src/config.json b/src/config.json
index 09ef160..492c5a0 100644
--- a/src/config.json
+++ b/src/config.json
@@ -9,8 +9,9 @@
"description": "Carbon dioxide emissions decline to net zero around 2070, followed by varying levels of reductions in existing carbon dioxide in the atmosphere.",
"variable": "tasmax_ssp126",
"unit": "Heatmax",
- "video": "./tasmax_monthly_ssp126_avg12_8192_annual_512x256.mp4",
- "mobileVideo": "./tasmax_monthly_ssp126_avg12_8192_annual_512x256.mp4",
+ "video": "./tasmax_monthly_ssp126_max12_8192_1024x512.mp4",
+ "mobileVideo": "./tasmax_monthly_ssp126_max12_8192_512x256.mp4",
+ "fallbackImage": "./tasmax_monthly_ssp126_first_frame.png",
"service":
"https://gis.earthdata.nasa.gov/eic/rest/services/tasmax_yearly_median/ImageServer",
"datetimeRange": ["1950-01-31T00:00:00Z", "2100-12-31T23:59:59Z"],
@@ -40,8 +41,9 @@
"description": "Carbon dioxide emissions remain around current levels until the middle of the 21st century.",
"unit": "Heatmax",
"variable": "tasmax_ssp245",
- "video": "./tasmax_monthly_ssp245_avg12_8192_annual_512x256.mp4",
- "mobileVideo": "./tasmax_monthly_ssp245_avg12_8192_annual_512x256.mp4",
+ "video": "./tasmax_monthly_ssp245_max12_8192_1024x512.mp4",
+ "mobileVideo": "./tasmax_monthly_ssp245_max12_8192_1024x512.mp4",
+ "fallbackImage": "./tasmax_monthly_ssp245_first_frame.png",
"service":
"https://gis.earthdata.nasa.gov/eic/rest/services/tasmax_yearly_median/ImageServer",
"datetimeRange": ["1950-01-31T00:00:00Z", "2100-12-31T23:59:59Z"],
@@ -71,8 +73,9 @@
"description": "Carbon dioxide emissions roughly double from current levels by 2100.",
"unit": "Heatmax",
"variable": "tasmax_ssp370",
- "video": "./tasmax_monthly_ssp370_avg12_8192_annual_512x256.mp4",
- "mobileVideo": "./tasmax_monthly_ssp370_avg12_8192_annual_512x256.mp4",
+ "video": "./tasmax_monthly_ssp370_max12_8192_1024x512.mp4",
+ "mobileVideo": "./tasmax_monthly_ssp370_max12_8192_512x256.mp4",
+ "fallbackImage": "./tasmax_monthly_ssp370_first_frame.png",
"service":
"https://gis.earthdata.nasa.gov/eic/rest/services/tasmax_yearly_median/ImageServer",
"datetimeRange": ["1950-01-31T00:00:00Z", "2100-12-31T23:59:59Z"],
@@ -101,8 +104,9 @@
"name": "585 - Very High",
"description": "Carbon dioxide emissions roughly double from current levels by 2050.",
"unit": "Heatmax",
- "video": "./tasmax_monthly_ssp585_avg12_8192_annual_512x256.mp4",
- "mobileVideo": "./tasmax_monthly_ssp585_avg12_8192_annual_512x256.mp4",
+ "video": "./tasmax_monthly_ssp585_max12_8192_1024x512.mp4",
+ "mobileVideo": "./tasmax_monthly_ssp585_max12_8192_512x256.mp4",
+ "fallbackImage": "./tasmax_monthly_ssp585_first_frame.png",
"variable": "tasmax_ssp585",
"service":
"https://gis.earthdata.nasa.gov/eic/rest/services/tasmax_yearly_median/ImageServer",
diff --git a/src/contexts/AppContext.jsx b/src/contexts/AppContext.jsx
index ab7716d..6be9dbb 100644
--- a/src/contexts/AppContext.jsx
+++ b/src/contexts/AppContext.jsx
@@ -14,3 +14,8 @@ export const ChartDataContext = React.createContext({
chartData: null,
setChartData: () => {}
});
+
+export const ErrorContext = React.createContext({
+ hasWebGLError: false,
+ setHasWebGLError: () => {}
+});
diff --git a/src/hooks/useLocalStorage.js b/src/hooks/useLocalStorage.js
new file mode 100644
index 0000000..1e8206d
--- /dev/null
+++ b/src/hooks/useLocalStorage.js
@@ -0,0 +1,34 @@
+import { useState, useEffect } from 'react';
+
+export default function useLocalStorage(key, initialValue) {
+ const [storedValue, setStoredValue] = useState(() => {
+ try {
+ const item = window.localStorage.getItem(key);
+ return item ? JSON.parse(item) : initialValue;
+ } catch (error) {
+ console.error(error);
+ return initialValue;
+ }
+ });
+
+ const setValue = value => {
+ try {
+ const valueToStore = value instanceof Function ? value(storedValue) : value;
+ setStoredValue(valueToStore);
+ window.localStorage.setItem(key, JSON.stringify(valueToStore));
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ useEffect(() => {
+ try {
+ const item = window.localStorage.getItem(key);
+ setStoredValue(item ? JSON.parse(item) : initialValue);
+ } catch (error) {
+ console.error(error);
+ }
+ }, [key, initialValue]);
+
+ return [storedValue, setValue];
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 07af8b6..6218bf5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,6 +5,15 @@
@tailwind components;
@tailwind utilities;
+/* Some custom overrides for a few of the elements
+ * in the UI. Long-term these should ideally be handled by
+ * Tailwind CSS like the rest of the components.
+ */
+
+ .esri-view {
+ --esri-view-outline: none;
+ }
+
.esri-ui-top-left {
display: none;
}
@@ -12,16 +21,14 @@
.esri-attribution {
position: fixed !important;
background: transparent;
+ z-index: 5 !important;
@media screen and (max-width: 1024px) {
- bottom: 381px !important;
- }
-
- @media screen and (max-width: 768px) {
- bottom: 370px !important;
+ bottom: 0 !important;
}
}
+
* {
font-family: "Manrope", sans-serif;
@@ -32,4 +39,81 @@
scrollbar-width: none;
-ms-overflow-style: none;
-}
\ No newline at end of file
+}
+
+.y-axis-canvas {
+ overflow: hidden;
+ width: 70px;
+ z-index: 9;
+ position: fixed;
+ bottom: 10px;
+ height: 200px !important;
+ pointer-events: none;
+ left: 23px;
+
+ @media screen and (max-width: 768px) {
+ height: 150px !important;
+ bottom: 30px;
+ left: 10px;
+ }
+
+ @media screen and (max-width: 640px) {
+ bottom: 15px !important;
+ }
+}
+
+.panel-max-values {
+
+ @media screen and (max-width: 768px) {
+ margin-left: 35px !important;
+ margin-right: 35px !important;
+ padding-right: 35px !important;
+ }
+
+ @media screen and (min-width: 768px) {
+ overflow: visible;
+ width: calc(100% - 30px);
+ margin-left: auto;
+ }
+}
+
+
+.blur-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 10;
+ display: none;
+}
+
+.blur-overlay.active {
+ display: block;
+}
+
+.esri-search {
+ z-index: 20;
+}
+
+.esri-ui {
+ z-index: 99;
+}
+
+
+.chartjs-tooltip {
+ position: fixed;
+ background-color: rgba(0, 0, 0, 0.8);
+ color: #fff;
+ padding: 8px;
+ border-radius: 4px;
+ pointer-events: none;
+ transform: translate(-50%, 0);
+ transition: all 0.1s ease;
+ white-space: nowrap;
+ }
+
+ .chartjs-tooltip-hidden {
+ opacity: 0;
+ visibility: hidden;
+ }
\ No newline at end of file
diff --git a/src/utils/colors.ts b/src/utils/colors.ts
index 2f754eb..b8046a6 100644
--- a/src/utils/colors.ts
+++ b/src/utils/colors.ts
@@ -1,264 +1,271 @@
-export const getTemperatureCmap = (maxOrAverage = 'max') => {
- const bounds = maxOrAverage === 'max' ? [-20, 40] : [-20, 45]; // deg C
- const colors = [
- '#14367d',
- '#15397f',
- '#173c82',
- '#183f85',
- '#194287',
- '#1a448a',
- '#1c468e',
- '#1d4993',
- '#1e4c97',
- '#21509a',
- '#21529b',
- '#23549f',
- '#2458a2',
- '#265aa5',
- '#275da7',
- '#275ea7',
- '#2961a9',
- '#2962aa',
- '#2b66ac',
- '#2c68af',
- '#2d6aaf',
- '#2e6cb1',
- '#2f6eb3',
- '#3171b5',
- '#3173b6',
- '#3375b8',
- '#3478ba',
- '#3579bb',
- '#367bbc',
- '#377ebd',
- '#3880be',
- '#3a82c0',
- '#3a84c0',
- '#3b86c2',
- '#3c89c4',
- '#3d8ac5',
- '#3f8dc6',
- '#4090c7',
- '#4192c9',
- '#4294c9',
- '#4397cb',
- '#4498cb',
- '#459acb',
- '#479dcd',
- '#479fce',
- '#48a1d0',
- '#49a3d0',
- '#4aa4d1',
- '#4ba5d1',
- '#4ca7d3',
- '#4daad3',
- '#4dabd4',
- '#4eadd5',
- '#4fafd7',
- '#50b0d8',
- '#50b1d9',
- '#51b3da',
- '#53b6db',
- '#53b8da',
- '#54b9da',
- '#55bbdc',
- '#56bddd',
- '#57bedc',
- '#58c0de',
- '#58c1df',
- '#59c1df',
- '#59c3e0',
- '#5ac5e0',
- '#5bc5e0',
- '#5dc5e0',
- '#63c8e2',
- '#6ccae2',
- '#73cce4',
- '#79cee5',
- '#7ed0e5',
- '#84d1e5',
- '#8ad2e6',
- '#8ed4e7',
- '#93d5e9',
- '#97d5e9',
- '#9ed8ec',
- '#a3d8ec',
- '#a5d8ed',
- '#aad9ed',
- '#aedaed',
- '#b1dbee',
- '#b5dcef',
- '#b9def1',
- '#bce0f2',
- '#bee0f3',
- '#c1e1f4',
- '#c3e2f4',
- '#c5e3f4',
- '#c7e4f3',
- '#c9e5f3',
- '#cbe6f4',
- '#cee7f5',
- '#cfe7f6',
- '#d0e9f6',
- '#d2eaf7',
- '#d3eaf7',
- '#d6ebf8',
- '#d7ecf9',
- '#d9edfa',
- '#dbeefa',
- '#dbf0f9',
- '#ddf0fa',
- '#dff0fa',
- '#e2f2fb',
- '#e4f3fb',
- '#e5f3fb',
- '#e8f5fc',
- '#eaf5fc',
- '#ecf6fc',
- '#eef7fe',
- '#f0f9fe',
- '#f2f9fe',
- '#f2f9fd',
- '#f5fbfd',
- '#f6fbfd',
- '#f8fbfe',
- '#f9fbfe',
- '#f9fcfe',
- '#fafdfe',
- '#f9fdfe',
- '#f9fdfe',
- '#fafdfd',
- '#fbfefd',
- '#fbfefe',
- '#fcfffe',
- '#fdfefe',
- '#ffffff',
- '#ffffff',
- '#fffffe',
- '#fffff3',
- '#ffffe5',
- '#fffed9',
- '#fffdcf',
- '#fefac7',
- '#fef9c3',
- '#fef7bc',
- '#fdf5b6',
- '#fdf1b1',
- '#fcf0ac',
- '#fceea7',
- '#fbeba3',
- '#fbe99d',
- '#fbe796',
- '#fae390',
- '#fae28b',
- '#fadf86',
- '#f9de83',
- '#f9da7f',
- '#f8d87b',
- '#f8d677',
- '#f8d274',
- '#f7d070',
- '#f7ce6d',
- '#f7cb6b',
- '#f6c766',
- '#f6c464',
- '#f5c362',
- '#f5bf5f',
- '#f5bc5b',
- '#f4ba59',
- '#f4b656',
- '#f3b354',
- '#f3b052',
- '#f3ac51',
- '#f2a94e',
- '#f2a64d',
- '#f2a34c',
- '#f19f49',
- '#f19c49',
- '#f09948',
- '#f09646',
- '#f09144',
- '#ef8d43',
- '#ef8942',
- '#ee8541',
- '#ee813f',
- '#ee7c3e',
- '#ed773c',
- '#ed7139',
- '#ec6d38',
- '#ec6837',
- '#ec6135',
- '#ec5d35',
- '#eb5533',
- '#eb5034',
- '#eb4632',
- '#ea3e2f',
- '#ea3a2d',
- '#ea352a',
- '#ea342a',
- '#ea332a',
- '#ea3329',
- '#e93328',
- '#e93327',
- '#e93326',
- '#e93326',
- '#e93326',
- '#e93325',
- '#e93325',
- '#e93325',
- '#e93325',
- '#e93326',
- '#e93327',
- '#ea3328',
- '#ea3329',
- '#ea332b',
- '#ea332c',
- '#ea332d',
- '#ea332d',
- '#ea332e',
- '#ea332e',
- '#ea332f',
- '#ea3330',
- '#e93330',
- '#e33230',
- '#df3030',
- '#de3030',
- '#d92f30',
- '#d52e2e',
- '#d02c2e',
- '#ce2c2f',
- '#ca2b2e',
- '#c62a2e',
- '#c2292d',
- '#bf282d',
- '#bb272d',
- '#b8262c',
- '#b4252c',
- '#af242c',
- '#ac232c',
- '#a8222a',
- '#a5212b',
- '#a02028',
- '#9d1f28',
- '#981e26',
- '#931c23',
- '#8d1b22',
- '#8a1a21',
- '#871920',
- '#81181e',
- '#7d161d',
- '#78151d',
- '#73141b',
- '#6e1319',
- '#6b1218',
- '#661117',
- '#601015',
- '#5d0f13',
- '#580e10',
- '#540d0f',
- '#500d0f'
- ];
- return { bounds, colors, units: 'degC' };
+export const hexColors = [
+ '#14367d',
+ '#15397f',
+ '#173c82',
+ '#183f85',
+ '#194287',
+ '#1a448a',
+ '#1c468e',
+ '#1d4993',
+ '#1e4c97',
+ '#21509a',
+ '#21529b',
+ '#23549f',
+ '#2458a2',
+ '#265aa5',
+ '#275da7',
+ '#275ea7',
+ '#2961a9',
+ '#2962aa',
+ '#2b66ac',
+ '#2c68af',
+ '#2d6aaf',
+ '#2e6cb1',
+ '#2f6eb3',
+ '#3171b5',
+ '#3173b6',
+ '#3375b8',
+ '#3478ba',
+ '#3579bb',
+ '#367bbc',
+ '#377ebd',
+ '#3880be',
+ '#3a82c0',
+ '#3a84c0',
+ '#3b86c2',
+ '#3c89c4',
+ '#3d8ac5',
+ '#3f8dc6',
+ '#4090c7',
+ '#4192c9',
+ '#4294c9',
+ '#4397cb',
+ '#4498cb',
+ '#459acb',
+ '#479dcd',
+ '#479fce',
+ '#48a1d0',
+ '#49a3d0',
+ '#4aa4d1',
+ '#4ba5d1',
+ '#4ca7d3',
+ '#4daad3',
+ '#4dabd4',
+ '#4eadd5',
+ '#4fafd7',
+ '#50b0d8',
+ '#50b1d9',
+ '#51b3da',
+ '#53b6db',
+ '#53b8da',
+ '#54b9da',
+ '#55bbdc',
+ '#56bddd',
+ '#57bedc',
+ '#58c0de',
+ '#58c1df',
+ '#59c1df',
+ '#59c3e0',
+ '#5ac5e0',
+ '#5bc5e0',
+ '#5dc5e0',
+ '#63c8e2',
+ '#6ccae2',
+ '#73cce4',
+ '#79cee5',
+ '#7ed0e5',
+ '#84d1e5',
+ '#8ad2e6',
+ '#8ed4e7',
+ '#93d5e9',
+ '#97d5e9',
+ '#9ed8ec',
+ '#a3d8ec',
+ '#a5d8ed',
+ '#aad9ed',
+ '#aedaed',
+ '#b1dbee',
+ '#b5dcef',
+ '#b9def1',
+ '#bce0f2',
+ '#bee0f3',
+ '#c1e1f4',
+ '#c3e2f4',
+ '#c5e3f4',
+ '#c7e4f3',
+ '#c9e5f3',
+ '#cbe6f4',
+ '#cee7f5',
+ '#cfe7f6',
+ '#d0e9f6',
+ '#d2eaf7',
+ '#d3eaf7',
+ '#d6ebf8',
+ '#d7ecf9',
+ '#d9edfa',
+ '#dbeefa',
+ '#dbf0f9',
+ '#ddf0fa',
+ '#dff0fa',
+ '#e2f2fb',
+ '#e4f3fb',
+ '#e5f3fb',
+ '#e8f5fc',
+ '#eaf5fc',
+ '#ecf6fc',
+ '#eef7fe',
+ '#f0f9fe',
+ '#f2f9fe',
+ '#f2f9fd',
+ '#f5fbfd',
+ '#f6fbfd',
+ '#f8fbfe',
+ '#f9fbfe',
+ '#f9fcfe',
+ '#fafdfe',
+ '#f9fdfe',
+ '#f9fdfe',
+ '#fafdfd',
+ '#fbfefd',
+ '#fbfefe',
+ '#fcfffe',
+ '#fdfefe',
+ '#ffffff',
+ '#ffffff',
+ '#fffffe',
+ '#fffff3',
+ '#ffffe5',
+ '#fffed9',
+ '#fffdcf',
+ '#fefac7',
+ '#fef9c3',
+ '#fef7bc',
+ '#fdf5b6',
+ '#fdf1b1',
+ '#fcf0ac',
+ '#fceea7',
+ '#fbeba3',
+ '#fbe99d',
+ '#fbe796',
+ '#fae390',
+ '#fae28b',
+ '#fadf86',
+ '#f9de83',
+ '#f9da7f',
+ '#f8d87b',
+ '#f8d677',
+ '#f8d274',
+ '#f7d070',
+ '#f7ce6d',
+ '#f7cb6b',
+ '#f6c766',
+ '#f6c464',
+ '#f5c362',
+ '#f5bf5f',
+ '#f5bc5b',
+ '#f4ba59',
+ '#f4b656',
+ '#f3b354',
+ '#f3b052',
+ '#f3ac51',
+ '#f2a94e',
+ '#f2a64d',
+ '#f2a34c',
+ '#f19f49',
+ '#f19c49',
+ '#f09948',
+ '#f09646',
+ '#f09144',
+ '#ef8d43',
+ '#ef8942',
+ '#ee8541',
+ '#ee813f',
+ '#ee7c3e',
+ '#ed773c',
+ '#ed7139',
+ '#ec6d38',
+ '#ec6837',
+ '#ec6135',
+ '#ec5d35',
+ '#eb5533',
+ '#eb5034',
+ '#eb4632',
+ '#ea3e2f',
+ '#ea3a2d',
+ '#ea352a',
+ '#ea342a',
+ '#ea332a',
+ '#ea3329',
+ '#e93328',
+ '#e93327',
+ '#e93326',
+ '#e93326',
+ '#e93326',
+ '#e93325',
+ '#e93325',
+ '#e93325',
+ '#e93325',
+ '#e93326',
+ '#e93327',
+ '#ea3328',
+ '#ea3329',
+ '#ea332b',
+ '#ea332c',
+ '#ea332d',
+ '#ea332d',
+ '#ea332e',
+ '#ea332e',
+ '#ea332f',
+ '#ea3330',
+ '#e93330',
+ '#e33230',
+ '#df3030',
+ '#de3030',
+ '#d92f30',
+ '#d52e2e',
+ '#d02c2e',
+ '#ce2c2f',
+ '#ca2b2e',
+ '#c62a2e',
+ '#c2292d',
+ '#bf282d',
+ '#bb272d',
+ '#b8262c',
+ '#b4252c',
+ '#af242c',
+ '#ac232c',
+ '#a8222a',
+ '#a5212b',
+ '#a02028',
+ '#9d1f28',
+ '#981e26',
+ '#931c23',
+ '#8d1b22',
+ '#8a1a21',
+ '#871920',
+ '#81181e',
+ '#7d161d',
+ '#78151d',
+ '#73141b',
+ '#6e1319',
+ '#6b1218',
+ '#661117',
+ '#601015',
+ '#5d0f13',
+ '#580e10',
+ '#540d0f',
+ '#500d0f'
+];
+
+export const getTemperatureCmap = (maxOrAverage = 'max', units = 'F') => {
+ const boundsFahrenheit = maxOrAverage === 'max' ? [-5, 105] : [-5, 110];
+ const boundsCelsius = maxOrAverage === 'max' ? [-20, 40] : [-20, 45];
+
+ const bounds = units === 'C' ? boundsCelsius : boundsFahrenheit;
+
+ const colors = hexColors;
+
+ return { bounds, colors, units };
};
export const interpolateColor = (color1, color2, factor) => {
@@ -278,29 +285,29 @@ export const interpolateColor = (color1, color2, factor) => {
.join('')}`;
};
-export const getTemperatureColor = (temperature) => {
- const fullColors = getTemperatureCmap().colors;
+export const getTemperatureColor = (temperature, units = 'F') => {
+ const fullColors = getTemperatureCmap('max', units).colors;
+ const bounds = getTemperatureCmap('max', units).bounds;
- const relevantColors = fullColors.slice(173);
-
- const minTemp = 80;
- const maxTemp = 105;
- const numColors = relevantColors.length;
+ const [minTemp, maxTemp] = bounds;
+ const numColors = fullColors.length;
const clampedTemp = Math.min(Math.max(temperature, minTemp), maxTemp);
const factor = (clampedTemp - minTemp) / (maxTemp - minTemp);
const colorIndex = Math.floor(factor * (numColors - 1));
- return relevantColors[colorIndex];
+ return fullColors[colorIndex];
};
-export const hexColors = [
- '#F9E173',
- '#FAE37C',
- '#F8DC5F',
- '#F19D40',
- '#EC7333',
- '#EC6D32',
- '#EC642F'
-];
+export const getTextColor = (hexColor) => {
+ const rgb = parseInt(hexColor.slice(1), 16);
+ const r = (rgb >> 16) & 255;
+ const g = (rgb >> 8) & 255;
+ const b = rgb & 255;
+
+ const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+
+ // Luminance < 128 means the color is considered dark, so we return a white text
+ return luminance < 128 ? '#FFFFFF' : '#01112D';
+};
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 341c6d9..42050f5 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -1,6 +1,6 @@
export const FPS = 1;
export const TOTAL_FRAMES = 150;
-export const TIME_STEP = 1000 / 5;
+export const TIME_STEP = 500;
export const FRAME_DURATION = TIME_STEP / FPS;
export const MANUAL_FORWARD_BACKWARD_STEP_SIZE = 10;
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index 5b07d3c..d45e1df 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -6,10 +6,12 @@ export const isMobileDevice = () => {
};
export const convertToCelsius = (fahrenheit) => {
- return (((fahrenheit - 32) * 5) / 9).toFixed(0);
+ return ((fahrenheit - 32) * 5) / 9;
};
export const convertTemperature = (value, isFahrenheit) => {
if (value === 'N/A') return value;
- return isFahrenheit ? value.toFixed(0) : convertToCelsius(value);
+ return isFahrenheit
+ ? Math.trunc(value)
+ : Math.trunc(convertToCelsius(value));
};
diff --git a/src/utils/sceneHelpers.ts b/src/utils/sceneHelpers.ts
index 8fe8609..d3014f7 100644
--- a/src/utils/sceneHelpers.ts
+++ b/src/utils/sceneHelpers.ts
@@ -8,9 +8,9 @@ export const crosshairSymbol = {
type: 'simple-marker',
style: 'cross',
color: [5, 80, 216],
- size: 10,
+ size: 12,
outline: {
- color: [5, 80, 216],
+ color: [255, 255, 255],
width: 1
}
};