Compare revisions

z654liu · z654liu · z654liu · 49fcd274 · 49fcd274 · 49fcd274
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
        "@testing-library/jest-dom": "^5.16.1",
        "@testing-library/react": "^12.1.2",
        "@testing-library/user-event": "^13.5.0",
+        "@wojtekmaj/react-datetimerange-picker": "^3.5.0",
        "antd": "^4.18.2",
        "echarts": "^5.2.2",
        "echarts-for-react": "^3.0.2",
@@ -3020,6 +3021,11 @@
      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.3.tgz",
      "integrity": "sha512-QzSuZMBuG5u8HqYz01qtMdg/Jfctlnvj1z/lYnIDXs/golxw0fxtRAHd9KrzjR7Yxz1qVeI00o0kiO3PmVdJ9w=="
    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.4",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
+    },
    "node_modules/@types/q": {
      "version": "1.5.5",
      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
@@ -3035,6 +3041,24 @@
      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
      "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
    },
+    "node_modules/@types/react": {
+      "version": "17.0.43",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.43.tgz",
+      "integrity": "sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-calendar": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@types/react-calendar/-/react-calendar-3.5.0.tgz",
+      "integrity": "sha512-qVSA5M0+SwLRINpE81TMUTh0NwJVed8T+lplJ7v0XAe4EHlMyNeNlkN9suKBxlwIEZ/62QP/m0QjGNCwdOy8PQ==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
    "node_modules/@types/resolve": {
      "version": "1.17.1",
      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -3048,6 +3072,11 @@
      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz",
      "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g=="
    },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+    },
    "node_modules/@types/serve-index": {
      "version": "1.9.1",
      "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
@@ -3493,6 +3522,27 @@
        "url": "https://github.com/wojtekmaj/date-utils?sponsor=1"
      }
    },
+    "node_modules/@wojtekmaj/react-datetimerange-picker": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@wojtekmaj/react-datetimerange-picker/-/react-datetimerange-picker-3.5.0.tgz",
+      "integrity": "sha512-pb/m33/qyTupxNutBWcZcnvN4NXrzIrkwhJLf4nEFtiNt/U/lvg7L9azAm5RfBTE9qR3CZEL3kPciaVw7tmSuw==",
+      "dependencies": {
+        "make-event-props": "^1.1.0",
+        "merge-class-names": "^1.1.1",
+        "prop-types": "^15.6.0",
+        "react-calendar": "^3.3.1",
+        "react-clock": "^3.0.0",
+        "react-datetime-picker": "^3.5.0",
+        "react-fit": "^1.4.0"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/react-datetimerange-picker?sponsor=1"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/@xtuc/ieee754": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -5360,6 +5410,11 @@
      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
    },
+    "node_modules/csstype": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
+      "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw=="
+    },
    "node_modules/damerau-levenshtein": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -5535,6 +5590,11 @@
      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
    },
+    "node_modules/detect-element-overflow": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/detect-element-overflow/-/detect-element-overflow-1.2.0.tgz",
+      "integrity": "sha512-Jtr9ivYPhpd9OJux+hjL0QjUKiS1Ghgy8tvIufUjFslQgIWvgGr4mn57H190APbKkiOmXnmtMI6ytaKzMusecg=="
+    },
    "node_modules/detect-newline": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -6940,9 +7000,9 @@
      "integrity": "sha512-8/sOawo8tJ4QOBX8YlQBMxL8+RLZfxMQOif9o0KUKTNTjMYElWPE0r/m5VNFxTRd0NSw8qSy8dajrwX4RYI1Hw=="
    },
    "node_modules/follow-redirects": {
-      "version": "1.14.7",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
-      "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==",
+      "version": "1.14.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
+      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
      "funding": [
        {
          "type": "individual",
@@ -9266,6 +9326,14 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/make-event-props": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/make-event-props/-/make-event-props-1.3.0.tgz",
+      "integrity": "sha512-oWiDZMcVB1/A487251hEWza1xzgCzl6MXxe9aF24l5Bt9N9UEbqTqKumEfuuLhmlhRZYnc+suVvW4vUs8bwO7Q==",
+      "funding": {
+        "url": "https://github.com/wojtekmaj/make-event-props?sponsor=1"
+      }
+    },
    "node_modules/makeerror": {
      "version": "1.0.12",
      "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
@@ -9316,6 +9384,11 @@
      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
    },
+    "node_modules/merge-refs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/merge-refs/-/merge-refs-1.0.0.tgz",
+      "integrity": "sha512-WZ4S5wqD9FCR9hxkLgvcHJCBxzXzy3VVE6p8W2OzxRzB+hLRlcadGE2bW9xp2KSzk10rvp4y+pwwKO6JQVguMg=="
+    },
    "node_modules/merge-stream": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -9479,9 +9552,9 @@
      }
    },
    "node_modules/minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
    },
    "node_modules/mkdirp": {
      "version": "0.5.5",
@@ -9563,9 +9636,9 @@
      }
    },
    "node_modules/node-forge": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.2.1.tgz",
-      "integrity": "sha512-Fcvtbb+zBcZXbTTVwqGA5W+MKBj56UjVRevvchv5XrcyXbmNdesfZL37nlcWOfpgHhgmxApw3tQbTr4CqNmX4w==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
+      "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
      "engines": {
        "node": ">= 6.13.0"
      }
@@ -12035,6 +12108,72 @@
        "react-dom": "^16.3.0 || ^17.0.0-0"
      }
    },
+    "node_modules/react-clock": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-clock/-/react-clock-3.1.0.tgz",
+      "integrity": "sha512-KLV3pDBcETc7lHPPqK6EpRaPS8NA3STAes+zIdfr7IY67vYgYc3brOAnGC9IcgA4X4xNPnLZwwaLJXmHrQ/MnQ==",
+      "dependencies": {
+        "@wojtekmaj/date-utils": "^1.0.0",
+        "get-user-locale": "^1.4.0",
+        "merge-class-names": "^1.1.1",
+        "prop-types": "^15.6.0"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/react-clock?sponsor=1"
+      },
+      "peerDependencies": {
+        "react": "^15.5.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.5.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-date-picker": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/react-date-picker/-/react-date-picker-8.4.0.tgz",
+      "integrity": "sha512-zocntugDUyiHmV2Nq1qnsk4kDQuhBLUsDTz7akfIEJ0jVX925w0K5Ai5oZzWFNQOzXL/ITxafmDMuSbzlpBt/A==",
+      "dependencies": {
+        "@types/react-calendar": "^3.0.0",
+        "@wojtekmaj/date-utils": "^1.0.3",
+        "get-user-locale": "^1.2.0",
+        "make-event-props": "^1.1.0",
+        "merge-class-names": "^1.1.1",
+        "merge-refs": "^1.0.0",
+        "prop-types": "^15.6.0",
+        "react-calendar": "^3.3.1",
+        "react-fit": "^1.4.0",
+        "update-input-width": "^1.2.2"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/react-date-picker?sponsor=1"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-datetime-picker": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/react-datetime-picker/-/react-datetime-picker-3.5.0.tgz",
+      "integrity": "sha512-Df5HQbzUmT+a8IlH4veVZylDgHLbUxjTS+Tv1YoWsJ7La/7K/mAycaSC++bV7myVlfMUrMUPPULavakAsiIFAQ==",
+      "dependencies": {
+        "@wojtekmaj/date-utils": "^1.0.3",
+        "get-user-locale": "^1.2.0",
+        "make-event-props": "^1.1.0",
+        "merge-class-names": "^1.1.1",
+        "prop-types": "^15.6.0",
+        "react-calendar": "^3.3.1",
+        "react-clock": "^3.0.0",
+        "react-date-picker": "^8.4.0",
+        "react-fit": "^1.4.0",
+        "react-time-picker": "^4.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/react-datetime-picker?sponsor=1"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/react-dev-utils": {
      "version": "12.0.0",
      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz",
@@ -12106,6 +12245,23 @@
      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
      "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
    },
+    "node_modules/react-fit": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/react-fit/-/react-fit-1.4.0.tgz",
+      "integrity": "sha512-cf9sFKbr1rlTB9fNIKE5Uy4NCMUOqrX2mdJ69V4RtmV4KubPdtnbIP1tEar16GXaToCRr7I7c9d2wkTNk9TV5g==",
+      "dependencies": {
+        "detect-element-overflow": "^1.2.0",
+        "prop-types": "^15.6.0",
+        "tiny-warning": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/react-fit?sponsor=1"
+      },
+      "peerDependencies": {
+        "react": "^15.5.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.5.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/react-is": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -12205,6 +12361,29 @@
        "node": ">=10"
      }
    },
+    "node_modules/react-time-picker": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/react-time-picker/-/react-time-picker-4.5.0.tgz",
+      "integrity": "sha512-06ViW8t3hGmkrwGvUtaoZ5ud/uSlQwMexn86eL3uoTV6FnIeRhKq0H944L4bA1ne4xIndO4Fro5tGUMmWUA9gw==",
+      "dependencies": {
+        "@wojtekmaj/date-utils": "^1.0.0",
+        "get-user-locale": "^1.2.0",
+        "make-event-props": "^1.1.0",
+        "merge-class-names": "^1.1.1",
+        "merge-refs": "^1.0.0",
+        "prop-types": "^15.6.0",
+        "react-clock": "^3.0.0",
+        "react-fit": "^1.4.0",
+        "update-input-width": "^1.2.2"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/react-time-picker?sponsor=1"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/readable-stream": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -13640,6 +13819,11 @@
      "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
      "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
    },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
    "node_modules/tmpl": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -13922,6 +14106,14 @@
        "yarn": "*"
      }
    },
+    "node_modules/update-input-width": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/update-input-width/-/update-input-width-1.2.2.tgz",
+      "integrity": "sha512-6QwD9ZVSXb96PxOZ01DU0DJTPwQGY7qBYgdniZKJN02Xzom2m+9J6EPxMbefskqtj4x78qbe5psDSALq9iNEYg==",
+      "funding": {
+        "url": "https://github.com/wojtekmaj/update-input-width?sponsor=1"
+      }
+    },
    "node_modules/uri-js": {
      "version": "4.4.1",
      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -17002,6 +17194,11 @@
      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.3.tgz",
      "integrity": "sha512-QzSuZMBuG5u8HqYz01qtMdg/Jfctlnvj1z/lYnIDXs/golxw0fxtRAHd9KrzjR7Yxz1qVeI00o0kiO3PmVdJ9w=="
    },
+    "@types/prop-types": {
+      "version": "15.7.4",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
+    },
    "@types/q": {
      "version": "1.5.5",
      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
@@ -17017,6 +17214,24 @@
      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
      "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
    },
+    "@types/react": {
+      "version": "17.0.43",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.43.tgz",
+      "integrity": "sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/react-calendar": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@types/react-calendar/-/react-calendar-3.5.0.tgz",
+      "integrity": "sha512-qVSA5M0+SwLRINpE81TMUTh0NwJVed8T+lplJ7v0XAe4EHlMyNeNlkN9suKBxlwIEZ/62QP/m0QjGNCwdOy8PQ==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
    "@types/resolve": {
      "version": "1.17.1",
      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -17030,6 +17245,11 @@
      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz",
      "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g=="
    },
+    "@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+    },
    "@types/serve-index": {
      "version": "1.9.1",
      "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
@@ -17361,6 +17581,20 @@
      "resolved": "https://registry.npmjs.org/@wojtekmaj/date-utils/-/date-utils-1.0.3.tgz",
      "integrity": "sha512-1VPkkTBk07gMR1fjpBtse4G+oJqpmE+0gUFB0dg3VIL7qJmUVaBoD/vlzMm/jNeOPfvlmerl1lpnsZyBUFIRuw=="
    },
+    "@wojtekmaj/react-datetimerange-picker": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@wojtekmaj/react-datetimerange-picker/-/react-datetimerange-picker-3.5.0.tgz",
+      "integrity": "sha512-pb/m33/qyTupxNutBWcZcnvN4NXrzIrkwhJLf4nEFtiNt/U/lvg7L9azAm5RfBTE9qR3CZEL3kPciaVw7tmSuw==",
+      "requires": {
+        "make-event-props": "^1.1.0",
+        "merge-class-names": "^1.1.1",
+        "prop-types": "^15.6.0",
+        "react-calendar": "^3.3.1",
+        "react-clock": "^3.0.0",
+        "react-datetime-picker": "^3.5.0",
+        "react-fit": "^1.4.0"
+      }
+    },
    "@xtuc/ieee754": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -18753,6 +18987,11 @@
        }
      }
    },
+    "csstype": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
+      "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw=="
+    },
    "damerau-levenshtein": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -18880,6 +19119,11 @@
      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
    },
+    "detect-element-overflow": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/detect-element-overflow/-/detect-element-overflow-1.2.0.tgz",
+      "integrity": "sha512-Jtr9ivYPhpd9OJux+hjL0QjUKiS1Ghgy8tvIufUjFslQgIWvgGr4mn57H190APbKkiOmXnmtMI6ytaKzMusecg=="
+    },
    "detect-newline": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -19938,9 +20182,9 @@
      "integrity": "sha512-8/sOawo8tJ4QOBX8YlQBMxL8+RLZfxMQOif9o0KUKTNTjMYElWPE0r/m5VNFxTRd0NSw8qSy8dajrwX4RYI1Hw=="
    },
    "follow-redirects": {
-      "version": "1.14.7",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
-      "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ=="
+      "version": "1.14.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
+      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
    },
    "fork-ts-checker-webpack-plugin": {
      "version": "6.5.0",
@@ -21618,6 +21862,11 @@
        "semver": "^6.0.0"
      }
    },
+    "make-event-props": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/make-event-props/-/make-event-props-1.3.0.tgz",
+      "integrity": "sha512-oWiDZMcVB1/A487251hEWza1xzgCzl6MXxe9aF24l5Bt9N9UEbqTqKumEfuuLhmlhRZYnc+suVvW4vUs8bwO7Q=="
+    },
    "makeerror": {
      "version": "1.0.12",
      "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
@@ -21659,6 +21908,11 @@
      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
    },
+    "merge-refs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/merge-refs/-/merge-refs-1.0.0.tgz",
+      "integrity": "sha512-WZ4S5wqD9FCR9hxkLgvcHJCBxzXzy3VVE6p8W2OzxRzB+hLRlcadGE2bW9xp2KSzk10rvp4y+pwwKO6JQVguMg=="
+    },
    "merge-stream": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -21770,9 +22024,9 @@
      }
    },
    "minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
    },
    "mkdirp": {
      "version": "0.5.5",
@@ -21836,9 +22090,9 @@
      }
    },
    "node-forge": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.2.1.tgz",
-      "integrity": "sha512-Fcvtbb+zBcZXbTTVwqGA5W+MKBj56UjVRevvchv5XrcyXbmNdesfZL37nlcWOfpgHhgmxApw3tQbTr4CqNmX4w=="
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
+      "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA=="
    },
    "node-int64": {
      "version": "0.4.0",
@@ -23481,6 +23735,51 @@
        "prop-types": "^15.6.0"
      }
    },
+    "react-clock": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-clock/-/react-clock-3.1.0.tgz",
+      "integrity": "sha512-KLV3pDBcETc7lHPPqK6EpRaPS8NA3STAes+zIdfr7IY67vYgYc3brOAnGC9IcgA4X4xNPnLZwwaLJXmHrQ/MnQ==",
+      "requires": {
+        "@wojtekmaj/date-utils": "^1.0.0",
+        "get-user-locale": "^1.4.0",
+        "merge-class-names": "^1.1.1",
+        "prop-types": "^15.6.0"
+      }
+    },
+    "react-date-picker": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/react-date-picker/-/react-date-picker-8.4.0.tgz",
+      "integrity": "sha512-zocntugDUyiHmV2Nq1qnsk4kDQuhBLUsDTz7akfIEJ0jVX925w0K5Ai5oZzWFNQOzXL/ITxafmDMuSbzlpBt/A==",
+      "requires": {
+        "@types/react-calendar": "^3.0.0",
+        "@wojtekmaj/date-utils": "^1.0.3",
+        "get-user-locale": "^1.2.0",
+        "make-event-props": "^1.1.0",
+        "merge-class-names": "^1.1.1",
+        "merge-refs": "^1.0.0",
+        "prop-types": "^15.6.0",
+        "react-calendar": "^3.3.1",
+        "react-fit": "^1.4.0",
+        "update-input-width": "^1.2.2"
+      }
+    },
+    "react-datetime-picker": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/react-datetime-picker/-/react-datetime-picker-3.5.0.tgz",
+      "integrity": "sha512-Df5HQbzUmT+a8IlH4veVZylDgHLbUxjTS+Tv1YoWsJ7La/7K/mAycaSC++bV7myVlfMUrMUPPULavakAsiIFAQ==",
+      "requires": {
+        "@wojtekmaj/date-utils": "^1.0.3",
+        "get-user-locale": "^1.2.0",
+        "make-event-props": "^1.1.0",
+        "merge-class-names": "^1.1.1",
+        "prop-types": "^15.6.0",
+        "react-calendar": "^3.3.1",
+        "react-clock": "^3.0.0",
+        "react-date-picker": "^8.4.0",
+        "react-fit": "^1.4.0",
+        "react-time-picker": "^4.5.0"
+      }
+    },
    "react-dev-utils": {
      "version": "12.0.0",
      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz",
@@ -23539,6 +23838,16 @@
      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
      "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
    },
+    "react-fit": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/react-fit/-/react-fit-1.4.0.tgz",
+      "integrity": "sha512-cf9sFKbr1rlTB9fNIKE5Uy4NCMUOqrX2mdJ69V4RtmV4KubPdtnbIP1tEar16GXaToCRr7I7c9d2wkTNk9TV5g==",
+      "requires": {
+        "detect-element-overflow": "^1.2.0",
+        "prop-types": "^15.6.0",
+        "tiny-warning": "^1.0.0"
+      }
+    },
    "react-is": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -23614,6 +23923,22 @@
        }
      }
    },
+    "react-time-picker": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/react-time-picker/-/react-time-picker-4.5.0.tgz",
+      "integrity": "sha512-06ViW8t3hGmkrwGvUtaoZ5ud/uSlQwMexn86eL3uoTV6FnIeRhKq0H944L4bA1ne4xIndO4Fro5tGUMmWUA9gw==",
+      "requires": {
+        "@wojtekmaj/date-utils": "^1.0.0",
+        "get-user-locale": "^1.2.0",
+        "make-event-props": "^1.1.0",
+        "merge-class-names": "^1.1.1",
+        "merge-refs": "^1.0.0",
+        "prop-types": "^15.6.0",
+        "react-clock": "^3.0.0",
+        "react-fit": "^1.4.0",
+        "update-input-width": "^1.2.2"
+      }
+    },
    "readable-stream": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -24679,6 +25004,11 @@
      "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
      "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
    },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
    "tmpl": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -24887,6 +25217,11 @@
      "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg=="
    },
+    "update-input-width": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/update-input-width/-/update-input-width-1.2.2.tgz",
+      "integrity": "sha512-6QwD9ZVSXb96PxOZ01DU0DJTPwQGY7qBYgdniZKJN02Xzom2m+9J6EPxMbefskqtj4x78qbe5psDSALq9iNEYg=="
+    },
    "uri-js": {
      "version": "4.4.1",
      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
+    "@wojtekmaj/react-datetimerange-picker": "^3.5.0",
    "antd": "^4.18.2",
    "echarts": "^5.2.2",
    "echarts-for-react": "^3.0.2",

--- a/src/App.css
+++ b/src/App.css
 .container {
  display: flex;
  justify-content: center;
+}
+
+.right {
+  float: right;
 }
\ No newline at end of file
--- a/src/App.js
+++ b/src/App.js
-import './App.css';
 import React, { useState, useEffect }  from 'react';
 import Calendar from 'react-calendar';
+import DateTimeRangePicker from '@wojtekmaj/react-datetimerange-picker';
+import './App.css';
 import 'react-calendar/dist/Calendar.css';
 import LineChart from './components/line-chart/line-chart.component';


 const App = () => {
  const [values, setValues] = useState([]);
-  const [date, setDate] = useState(new Date());
+  const [dateRange, setDateRange] = useState([new Date(), new Date()]);
+  const [lastUpdatedTime, setLastUpdatedTime] = useState('');

  useEffect(() => {
    fetch('https://sheets.googleapis.com/v4/spreadsheets/1QbbeWXxKc1vQP-2UPwsouafyRDZ70Lu1A7QdXk5YbBc/values:batchGet?key=AIzaSyAQuSY5SSe5I3nAGwPIYDH8UI8t5VMdoW0&ranges=Sheet')
        .then(response => response.json())
-        .then(result => setValues(result.valueRanges[0].values))
+        .then(result => {
+          const tempValues = result.valueRanges[0].values;
+          setValues(tempValues);
+          setLastUpdatedTime(tempValues[tempValues.length - 1][0]);
+        })
  }, []);

  return (
      <div>
        <div>
-          <LineChart values={values} date={date} />
+          <LineChart
+              values={values}
+              dateRange={dateRange}
+          />
        </div>

        <div className='container'>
-          <Calendar
-              onChange={setDate}
-              value={date}
-              locale='en'
+          <DateTimeRangePicker
+              onChange={setDateRange}
+              value={dateRange}
+              maxDate={new Date()}
+              required={true}
          />
        </div>
+
+        <p className='right'>
+          {"Last Updated: " + lastUpdatedTime}
+        </p>
      </div>
  );
 }

--- a/src/components/line-chart/line-chart.component.jsx
+++ b/src/components/line-chart/line-chart.component.jsx
@@ -2,38 +2,43 @@ import React  from 'react';
 import ReactEcharts from 'echarts-for-react'


-const LineChart = ({ values, date }) => {
-  const lineOption = getLineOption(values, date);
+const LineChart = ({ values, dateRange }) => {
+  const lineOption = getLineOption(values, dateRange);

  return (
      <ReactEcharts option={lineOption} />
  );
 }

-const getLineOption = (values, date) => {
+const getLineOption = (values, dateRange) => {
  values = values.slice(1);
+  const startDate = dateRange[0];
+  const endDate = dateRange[1];
+  const dateList = values.map(value => new Date(value[3]));
+  const startIndex = findStartIndex(startDate, dateList);
+  const endIndex = findEndIndex(endDate, dateList);
+  const selectedValues = values.slice(startIndex, endIndex + 1);
+
  const xAxisData = [];
  const PM1DataList = [];
  const PM2DataList = [];
  const PM10DataList = [];

-  for (const value of values) {
-    const measureDate = new Date(value[3]);
-
-    if (measureDate.getFullYear() === date.getFullYear() &&
-        measureDate.getMonth() === date.getMonth() &&
-        measureDate.getDate() === date.getDate()) {
-      const hour = measureDate.getHours();
-      let minute = measureDate.getMinutes();
-      if (Number(minute) < 10) {
-        minute = '0' + minute;
-      }
-      xAxisData.push(hour + ':' + minute);
+  for (const value of selectedValues) {
+    const date = new Date(value[3]);
+    const month = date.getMonth() + 1;
+    const day = date.getDate();
+    const hour = date.getHours();
+    let minute = date.getMinutes();

-      PM1DataList.push(Number(value[4]));
-      PM2DataList.push(Number(value[5]));
-      PM10DataList.push(Number(value[6]));
+    if (Number(minute) < 10) {
+      minute = '0' + minute;
    }
+    xAxisData.push(month + '/' + day + ' ' + hour + ':' + minute);
+
+    PM1DataList.push(Number(value[4]));
+    PM2DataList.push(Number(value[5]));
+    PM10DataList.push(Number(value[6]));
  }

  const xAxis = {
@@ -44,17 +49,17 @@ const getLineOption = (values, date) => {
    type: 'value'
  };
  const PM1DataObject = {
-    name: "PM1.0",
+    name: 'PM1.0',
    type: 'line',
    data: PM1DataList
  };
  const PM2DataObject = {
-    name: "PM2.5",
+    name: 'PM2.5',
    type: 'line',
    data: PM2DataList
  };
  const PM10DataObject = {
-    name: "PM10",
+    name: 'PM10',
    type: 'line',
    data: PM10DataList
  };
@@ -65,7 +70,12 @@ const getLineOption = (values, date) => {
      data: ["PM1.0", "PM2.5", "PM10"]
    },
    tooltip: {
-      trigger: 'axis'
+      trigger: 'axis',
+      axisPointer: {
+        label: {
+          show: true
+        }
+      }
    },
    xAxis: xAxis,
    yAxis: yAxis,
@@ -73,4 +83,55 @@ const getLineOption = (values, date) => {
  };
 }

-export default LineChart;
+const findStartIndex = (startDate, dateList) => {
+  startDate = startDate.getTime();
+  let low = 0;
+  let high = dateList.length - 1;
+
+  while (low <= high) {
+    const mid = Math.floor(low + (high - low) / 2);
+    const currentDate = dateList[mid].getTime();
+
+    if (startDate <= currentDate) {
+      if ((mid === 0) || (startDate > currentDate)) {
+        return mid;
+      }
+      else {
+        high = mid - 1;
+      }
+    }
+    else {
+      low = mid + 1;
+    }
+  }
+
+  return low;
+}
+
+const findEndIndex = (endDate, dateList) => {
+  endDate = endDate.getTime();
+  let low = 0;
+  let high = dateList.length - 1;
+  const dateListLength = dateList.length - 1;
+
+  while (low <= high) {
+    const mid = Math.floor(low + (high - low) / 2);
+
+    if (endDate < dateList[mid].getTime()) {
+      high = mid - 1;
+    }
+    else {
+      if ((mid === dateListLength - 1) || (endDate < dateList[mid + 1].getTime())) {
+        return mid;
+      }
+      else {
+        low = mid + 1;
+      }
+    }
+  }
+
+  return low;
+}
+
+
+export default LineChart;
\ No newline at end of file
No results found