Complete timezone functionality

src/App.js

@@ -5,14 +5,21 @@ import './App.css';
 import 'react-calendar/dist/Calendar.css';
 import "antd/dist/antd.css";
 import LineChart from './components/line-chart/line-chart.component';
+import { TIME_ZONE, TIME_ZONES_MAP } from './utils/timezones';
 
 
 const App = () => {
   const [values, setValues] = useState([]);
-  const [dateRange, setDateRange] = useState([new Date(), new Date()]);
-  const [lastUpdatedTime, setLastUpdatedTime] = useState('');
+  const [displayDateRange, setDisplayDateRange] = useState([new Date(new Date().toLocaleString('en-US', { timeZone:  'America/Mexico_City' })),
+                                                                      new Date(new Date().toLocaleString('en-US', { timeZone:  'America/Mexico_City' }))]);
+  const [realDateRange, setRealDateRange] = useState([new Date(new Date().toLocaleString('en-US', { timeZone:  'America/Mexico_City' })),
+                                                                new Date(new Date().toLocaleString('en-US', { timeZone:  'America/Mexico_City' }))]);
+  const [lastUpdatedTime, setLastUpdatedTime] = useState(new Date());
   const [sheetNames, setSheetNames] = useState([]);
   const [sheetName, setSheetName] = useState('e00fce689c24ee215bea2757');
+  const [timeZonesMap, setTimeZonesMap] = useState(TIME_ZONES_MAP);
+  const [timeZone, setTimeZone] = useState(TIME_ZONE);
+
 
   useEffect(() => {
     fetch('https://sheets.googleapis.com/v4/spreadsheets/1QbbeWXxKc1vQP-2UPwsouafyRDZ70Lu1A7QdXk5YbBc/?key=AIzaSyAQuSY5SSe5I3nAGwPIYDH8UI8t5VMdoW0')
@@ -25,22 +32,43 @@ const App = () => {
   }, []);
 
   useEffect(() => {
-    console.log('Update......');
     fetch('https://sheets.googleapis.com/v4/spreadsheets/1QbbeWXxKc1vQP-2UPwsouafyRDZ70Lu1A7QdXk5YbBc/values:batchGet?key=AIzaSyAQuSY5SSe5I3nAGwPIYDH8UI8t5VMdoW0&ranges=' + sheetName)
         .then(response => response.json())
         .then(result => {
           const tempValues = result.valueRanges[0].values;
           setValues(tempValues);
-          setLastUpdatedTime(tempValues[tempValues.length - 1][0]);
+          setLastUpdatedTime(new Date(tempValues[tempValues.length - 1][0]));
         });
   }, [sheetName]);
 
-  const onClick = ({ key }) => {
+  useEffect(() => {
+    const startDate = new Date(realDateRange[0]);
+    const endDate = new Date(realDateRange[1]);
+    setDisplayDateRange([new Date(startDate.setHours(startDate.getHours() + timeZonesMap[timeZone])),
+                               new Date(endDate.setHours(endDate.getHours() + timeZonesMap[timeZone]))]);
+  }, [timeZone]);
+
+
+  const onClickSheetName = ({ key }) => {
     setSheetName(key);
   };
 
-  const dropDownMenu = (
-    <Menu onClick={onClick}>
+  const onClickTimeZone = ({ key }) => {
+    setTimeZone(key);
+  };
+
+  const setDisplayAndRealDateRange = (value) => {
+    setDisplayDateRange(value);
+
+    const startDate = new Date(value[0]);
+    const endDate = new Date(value[1]);
+    setRealDateRange([new Date(startDate.setHours(startDate.getHours() + timeZonesMap[timeZone])),
+                            new Date(endDate.setHours(endDate.getHours() + timeZonesMap[timeZone]))]);
+  };
+
+
+  const dropDownMenuSheetNames = (
+    <Menu onClick={onClickSheetName}>
       {sheetNames.map(sheetName =>
         <Menu.Item key={sheetName}>
           {sheetName}
@@ -49,19 +77,32 @@ const App = () => {
     </Menu>
   );
 
+  const dropDownMenuTimeZones = (
+      <Menu onClick={onClickTimeZone}>
+        {Object.keys(timeZonesMap).map(timeZone =>
+            <Menu.Item key={timeZone}>
+              {timeZone}
+            </Menu.Item>
+        )}
+      </Menu>
+  );
+
+
   return (
       <div>
         <div>
           <LineChart
               values={values}
-              dateRange={dateRange}
+              dateRange={realDateRange}
+              timeZonesMap={timeZonesMap}
+              timeZone={timeZone}
           />
         </div>
 
         <div className='container'>
           <DateTimeRangePicker
-              onChange={setDateRange}
-              value={dateRange}
+              onChange={setDisplayAndRealDateRange}
+              value={displayDateRange}
               maxDate={new Date()}
               required={true}
           />
@@ -69,7 +110,7 @@ const App = () => {
 
         <div className='container'>
           <Dropdown
-              overlay={dropDownMenu}
+              overlay={dropDownMenuSheetNames}
               placement="bottom"
               arrow>
             <Button onClick={e => e.preventDefault()}>
@@ -78,8 +119,19 @@ const App = () => {
           </Dropdown>
         </div>
 
+        <div className='container'>
+          <Dropdown
+              overlay={dropDownMenuTimeZones}
+              placement="bottom"
+              arrow>
+            <Button onClick={e => e.preventDefault()}>
+              {timeZone}
+            </Button>
+          </Dropdown>
+        </div>
+
         <p className='right'>
-          {"Last Updated: " + lastUpdatedTime}
+          {"Last Updated: " + new Date(new Date(lastUpdatedTime).setHours(new Date(lastUpdatedTime).getHours() + timeZonesMap[timeZone])).toLocaleString()}
         </p>
       </div>
   );

src/components/line-chart/line-chart.component.jsx

@@ -2,15 +2,15 @@ import React  from 'react';
 import ReactEcharts from 'echarts-for-react'
 
 
-const LineChart = ({ values, dateRange }) => {
-  const lineOption = getLineOption(values, dateRange);
+const LineChart = ({ values, dateRange, timeZone, timeZonesMap }) => {
+  const lineOption = getLineOption(values, dateRange, timeZone, timeZonesMap);
 
   return (
       <ReactEcharts option={lineOption} />
   );
 }
 
-const getLineOption = (values, dateRange) => {
+const getLineOption = (values, dateRange, timeZone, timeZonesMap) => {
   values = values.slice(1);
   const startDate = dateRange[0];
   const endDate = dateRange[1];
@@ -25,7 +25,8 @@ const getLineOption = (values, dateRange) => {
   const PM10DataList = [];
 
   for (const value of selectedValues) {
-    const date = new Date(value[3]);
+    let date = new Date(value[3]);
+    date = new Date(date.setHours(date.getHours() + timeZonesMap[timeZone]));
     const month = date.getMonth() + 1;
     const day = date.getDate();
     const hour = date.getHours();
@@ -109,7 +110,6 @@ const findStartIndex = (startDate, dateList) => {
 }
 
 const findEndIndex = (endDate, dateList) => {
-  console.log(dateList);
   endDate = endDate.getTime();
   let low = 0;
   let high = dateList.length - 1;
@@ -117,7 +117,6 @@ const findEndIndex = (endDate, dateList) => {
 
   while (low <= high) {
     const mid = Math.floor(low + (high - low) / 2);
-    console.log('findEndIndex: ' + mid);
 
     if (endDate < dateList[mid].getTime()) {
       high = mid - 1;

src/utils/timezones.js

+export const TIME_ZONE = 'UTC-05:00';
+
+export const TIME_ZONES_MAP  = {
+  'UTC': 5,
+  'UTC+01:00': 6,
+  'UTC+02:00': 7,
+  'UTC+03:00': 8,
+  'UTC+04:00': 9,
+  'UTC+05:00': 10,
+  'UTC+06:00': 11,
+  'UTC+07:00': 12,
+  'UTC+08:00': 13,
+  'UTC+09:00': 14,
+  'UTC+10:00': 15,
+  'UTC+11:00': 16,
+  'UTC+12:00': 17,
+  'UTC-01:00': 4,
+  'UTC-02:00': 3,
+  'UTC-03:00': 2,
+  'UTC-04:00': 1,
+  'UTC-05:00': 0,
+  'UTC-06:00': -1,
+  'UTC-07:00': -2,
+  'UTC-08:00': -3,
+  'UTC-09:00': -4,
+  'UTC-10:00': -5,
+  'UTC-11:00': -6,
+  'UTC-12:00': -7
+};