From 7e9d12389c46d531fddab20971abff0fb76d0413 Mon Sep 17 00:00:00 2001 From: pat Date: Tue, 25 Feb 2020 13:30:08 +0700 Subject: [PATCH 001/192] :zap:Loading --- components/chart/barMap.js | 116 +++++++++++++++++++++---------------- package-lock.json | 31 +++++----- package.json | 2 +- 3 files changed, 80 insertions(+), 69 deletions(-) diff --git a/components/chart/barMap.js b/components/chart/barMap.js index d1f5933e..6132ecf4 100644 --- a/components/chart/barMap.js +++ b/components/chart/barMap.js @@ -52,11 +52,13 @@ const BarMap = () => { }) const [series, setSeries] = useState([]) const [dataName, setDataName] = useState([]) + const [loading, setLoading] = useState(false) useEffect(() => { + setLoading(true) fetchData() - }, []) + }, [listData]) const fetchData = async () => { @@ -73,7 +75,12 @@ const BarMap = () => { setOptions({ xaxis: { categories: _.flatten(list), + }, + fill: { + opacity: 1, + colors: ['#00d084'] } + }) } catch (err) { console.log(err); @@ -82,9 +89,9 @@ const BarMap = () => { const listData = async (token, value) => { try { - var data = await Sheetapi.getSheet(token, value) setSeries([{ name: "จำนวน", data: _.flatten(data) }]) + setLoading(false) } catch (err) { console.log(err); } @@ -93,55 +100,62 @@ const BarMap = () => { return ( -
- -
- -
- -
- -
- -
- -
- -
- -
- -
+ { + loading ?

Loading...

: +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ } + + +
) } diff --git a/package-lock.json b/package-lock.json index a8d5d142..7058e0c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4020,12 +4020,12 @@ } }, "globule": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.1.tgz", - "integrity": "sha512-g7QtgWF4uYSL5/dn71WxubOrS7JVGCnFPEnoeChJmBnyR9Mw8nGoEwOgJL/RC2Te0WhbsEUCejfH8SZNJ+adYQ==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.1.tgz", + "integrity": "sha512-OVyWOHgw29yosRHCHo7NncwR1hW5ew0W/UrvtwvjefVJeQ26q4/8r8FmPsSF1hJ93IgWkyv16pCTz6WblMzm/g==", "requires": { "glob": "~7.1.1", - "lodash": "~4.17.10", + "lodash": "~4.17.12", "minimatch": "~3.0.2" } }, @@ -4433,12 +4433,9 @@ "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=" }, "is-finite": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz", - "integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=", - "requires": { - "number-is-nan": "^1.0.0" - } + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz", + "integrity": "sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==" }, "is-fullwidth-code-point": { "version": "1.0.0", @@ -4585,9 +4582,9 @@ } }, "js-base64": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz", - "integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==" + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.2.tgz", + "integrity": "sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ==" }, "js-levenshtein": { "version": "1.1.6", @@ -5715,9 +5712,9 @@ } }, "node-sass": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.12.0.tgz", - "integrity": "sha512-A1Iv4oN+Iel6EPv77/HddXErL2a+gZ4uBeZUy+a8O35CFYTXhgA8MgLCWBtwpGZdCvTvQ9d+bQxX/QC36GDPpQ==", + "version": "4.13.1", + "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.1.tgz", + "integrity": "sha512-TTWFx+ZhyDx1Biiez2nB0L3YrCZ/8oHagaDalbuBSlqXgUPsdkUSzJsVxeDO9LtPB49+Fh3WQl3slABo6AotNw==", "requires": { "async-foreach": "^0.1.3", "chalk": "^1.1.1", @@ -5726,7 +5723,7 @@ "get-stdin": "^4.0.1", "glob": "^7.0.3", "in-publish": "^2.0.0", - "lodash": "^4.17.11", + "lodash": "^4.17.15", "meow": "^3.7.0", "mkdirp": "^0.5.1", "nan": "^2.13.2", diff --git a/package.json b/package.json index 98dc3cec..bfaa9bcf 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "less": "^3.10.3", "lodash": "^4.17.15", "next": "^9.1.7", - "node-sass": "^4.12.0", + "node-sass": "^4.13.1", "prop-types": "^15.7.2", "react": "^16.9.0", "react-anchor-link-smooth-scroll": "^1.0.12", From a609b1ae903fab65411585b1a2e4ab5d74cc7933 Mon Sep 17 00:00:00 2001 From: pat Date: Tue, 25 Feb 2020 14:17:14 +0700 Subject: [PATCH 002/192] :zap:Loading --- components/chart/barMap.js | 1 + components/layout/Map.js | 10 +++++++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/components/chart/barMap.js b/components/chart/barMap.js index 6132ecf4..a092f43e 100644 --- a/components/chart/barMap.js +++ b/components/chart/barMap.js @@ -84,6 +84,7 @@ const BarMap = () => { }) } catch (err) { console.log(err); + window.location.href("/") } } diff --git a/components/layout/Map.js b/components/layout/Map.js index 834595fd..713739ba 100644 --- a/components/layout/Map.js +++ b/components/layout/Map.js @@ -60,16 +60,20 @@ class StudentMap extends Component { async componentDidMount() { let userOauth = JSON.parse(localStorage.getItem("myOauth")) - this.access_token = userOauth.data.access_token - + this.access_token = `${userOauth != null ? userOauth.data.access_token : window.location.replace("/")}` setTimeout(() => { this.listName('แผนที่!B5:E21') }, 1000) this.loadPaths() + } - + oauthToken = () => { + return ( +
ข้อมูลไม่ถูกต้อง โปรดกลับสู่หน้าหลัก
+ ) } + listName = async (v) => { try { From c74832b58d9a604388d8bbce7c3e3faef9e6cd6c Mon Sep 17 00:00:00 2001 From: pat Date: Tue, 25 Feb 2020 22:25:40 +0700 Subject: [PATCH 003/192] :bug:Map --- components/layout/Map.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/components/layout/Map.js b/components/layout/Map.js index 713739ba..b35e9a01 100644 --- a/components/layout/Map.js +++ b/components/layout/Map.js @@ -67,13 +67,7 @@ class StudentMap extends Component { this.loadPaths() } - oauthToken = () => { - return ( -
ข้อมูลไม่ถูกต้อง โปรดกลับสู่หน้าหลัก
- ) - } - - + listName = async (v) => { try { @@ -124,7 +118,7 @@ class StudentMap extends Component { } return ( - + Date: Tue, 25 Feb 2020 22:32:53 +0700 Subject: [PATCH 004/192] :bug:Map --- components/chart/barMap.js | 109 ++++++++++++++++++++----------------- 1 file changed, 59 insertions(+), 50 deletions(-) diff --git a/components/chart/barMap.js b/components/chart/barMap.js index a092f43e..92ce2477 100644 --- a/components/chart/barMap.js +++ b/components/chart/barMap.js @@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'; import Chart from 'react-apexcharts' import Sheetapi from '../../config/api' import _ from 'lodash' +import Typed from 'react-typed' const BarMap = () => { @@ -102,57 +103,65 @@ const BarMap = () => { { - loading ?

Loading...

: -
- + -
- -
- -
- -
- -
- -
- -
- -
- -
-
+
+ : + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
} From 1f4bc188679dbf0bac3471c7422753f1af69098d Mon Sep 17 00:00:00 2001 From: pat Date: Wed, 26 Feb 2020 02:21:13 +0700 Subject: [PATCH 005/192] :sparkles:material-ui&react-responsive && :lipstick: NavBar --- package-lock.json | 528 +++++++++++++++++++++++++++----------------- package.json | 9 +- pages/_document.js | 3 +- pages/index.js | 10 +- pages/main.js | 88 ++++++-- styles/index.scss | 11 + styles/main.scss | 23 ++ styles/nav.scss | 16 +- styles/sidebar.scss | 12 - 9 files changed, 446 insertions(+), 254 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7058e0c4..6c70fecd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1077,6 +1077,168 @@ "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz", "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==" }, + "@emotion/hash": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.4.tgz", + "integrity": "sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A==" + }, + "@material-ui/core": { + "version": "4.9.4", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.9.4.tgz", + "integrity": "sha512-1wqm3jBC8mGpVHu0wVOYBX7LUzkPsWxkkTtKSn0Hz66T6TDJkke72mkSIL7akNdjnxy+bRc2Vi6NiJ4YutkDcw==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/styles": "^4.9.0", + "@material-ui/system": "^4.9.3", + "@material-ui/types": "^5.0.0", + "@material-ui/utils": "^4.7.1", + "@types/react-transition-group": "^4.2.0", + "clsx": "^1.0.2", + "hoist-non-react-statics": "^3.3.2", + "popper.js": "^1.14.1", + "prop-types": "^15.7.2", + "react-is": "^16.8.0", + "react-transition-group": "^4.3.0" + }, + "dependencies": { + "dom-helpers": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.3.tgz", + "integrity": "sha512-nZD1OtwfWGRBWlpANxacBEZrEuLa16o1nh7YopFWeoF68Zt8GGEmzHu6Xv4F3XaFIC+YXtTLrzgqKxFgLEe4jw==", + "requires": { + "@babel/runtime": "^7.6.3", + "csstype": "^2.6.7" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz", + "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + } + } + }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + } + }, + "react-transition-group": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz", + "integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz", + "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + } + } + } + } + }, + "@material-ui/icons": { + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.9.1.tgz", + "integrity": "sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg==", + "requires": { + "@babel/runtime": "^7.4.4" + } + }, + "@material-ui/styles": { + "version": "4.9.0", + "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.9.0.tgz", + "integrity": "sha512-nJHum4RqYBPWsjL/9JET8Z02FZ9gSizlg/7LWVFpIthNzpK6OQ5OSRR4T4x9/p+wK3t1qNn3b1uI4XpnZaPxOA==", + "requires": { + "@babel/runtime": "^7.4.4", + "@emotion/hash": "^0.7.4", + "@material-ui/types": "^5.0.0", + "@material-ui/utils": "^4.7.1", + "clsx": "^1.0.2", + "csstype": "^2.5.2", + "hoist-non-react-statics": "^3.2.1", + "jss": "^10.0.3", + "jss-plugin-camel-case": "^10.0.3", + "jss-plugin-default-unit": "^10.0.3", + "jss-plugin-global": "^10.0.3", + "jss-plugin-nested": "^10.0.3", + "jss-plugin-props-sort": "^10.0.3", + "jss-plugin-rule-value-function": "^10.0.3", + "jss-plugin-vendor-prefixer": "^10.0.3", + "prop-types": "^15.7.2" + }, + "dependencies": { + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + } + } + } + }, + "@material-ui/system": { + "version": "4.9.3", + "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.9.3.tgz", + "integrity": "sha512-DBGsTKYrLlFpHG8BUp0X6ZpvaOzef+GhSwn/8DwVTXUdHitphaPQoL9xucrI8X9MTBo//El+7nylko7lo7eJIw==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/utils": "^4.7.1", + "prop-types": "^15.7.2" + } + }, + "@material-ui/types": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.0.0.tgz", + "integrity": "sha512-UeH2BuKkwDndtMSS0qgx1kCzSMw+ydtj0xx/XbFtxNSTlXydKwzs5gVW5ZKsFlAkwoOOQ9TIsyoCC8hq18tOwg==" + }, + "@material-ui/utils": { + "version": "4.7.1", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.7.1.tgz", + "integrity": "sha512-+ux0SlLdlehvzCk2zdQ3KiS3/ylWvuo/JwAGhvb8dFVvwR21K28z0PU9OQW2PGogrMEdvX3miEI5tGxTwwWiwQ==", + "requires": { + "@babel/runtime": "^7.4.4", + "prop-types": "^15.7.2", + "react-is": "^16.8.0" + } + }, + "@types/prop-types": { + "version": "15.7.3", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", + "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==" + }, + "@types/react": { + "version": "16.9.22", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.22.tgz", + "integrity": "sha512-7OSt4EGiLvy0h5R7X+r0c7S739TCU/LvWbkNOrm10lUwNHe7XPz5OLhLOSZeCkqO9JSCly1NkYJ7ODTUqVnHJQ==", + "requires": { + "@types/prop-types": "*", + "csstype": "^2.2.0" + } + }, + "@types/react-transition-group": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.2.4.tgz", + "integrity": "sha512-8DMUaDqh0S70TjkqU0DxOu80tFUiiaS9rxkWip/nb7gtvAsbqOXm02UCmR8zdcjWujgeYPiPNTVpVpKzUDotwA==", + "requires": { + "@types/react": "*" + } + }, "@webassemblyjs/ast": { "version": "1.8.5", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz", @@ -2251,44 +2413,6 @@ "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz", "integrity": "sha1-6LL+PX8at9aaMhma/5HqaTFAlRU=" }, - "chart.js": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.8.0.tgz", - "integrity": "sha512-Di3wUL4BFvqI5FB5K26aQ+hvWh8wnP9A3DWGvXHVkO13D3DSnaSsdZx29cXlEsYKVkn1E2az+ZYFS4t0zi8x0w==", - "requires": { - "chartjs-color": "^2.1.0", - "moment": "^2.10.2" - } - }, - "chartjs-color": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.3.0.tgz", - "integrity": "sha512-hEvVheqczsoHD+fZ+tfPUE+1+RbV6b+eksp2LwAhwRTVXEjCSEavvk+Hg3H6SZfGlPh/UfmWKGIvZbtobOEm3g==", - "requires": { - "chartjs-color-string": "^0.6.0", - "color-convert": "^0.5.3" - }, - "dependencies": { - "color-convert": { - "version": "0.5.3", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz", - "integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0=" - } - } - }, - "chartjs-color-string": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz", - "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==", - "requires": { - "color-name": "^1.0.0" - } - }, - "chartkick": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/chartkick/-/chartkick-3.2.0.tgz", - "integrity": "sha512-EkscIyDBdtUJVIuA2kIIjMq+YkNf4jDWr1fYjDUMZ9IakIJFoJ+9Hl+PW/POutElu8iYbebCEHWsrsXu09o4hw==" - }, "chokidar": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.3.1.tgz", @@ -2880,6 +3004,11 @@ "source-list-map": "^2.0.0" } }, + "css-mediaquery": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz", + "integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA=" + }, "css-prefers-color-scheme": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz", @@ -2946,6 +3075,25 @@ "regexpu-core": "^1.0.0" } }, + "css-vendor": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.7.tgz", + "integrity": "sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg==", + "requires": { + "@babel/runtime": "^7.6.2", + "is-in-browser": "^1.0.2" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz", + "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + } + } + }, "cssdb": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz", @@ -3069,6 +3217,11 @@ } } }, + "csstype": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.9.tgz", + "integrity": "sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q==" + }, "currently-unhandled": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz", @@ -3087,20 +3240,15 @@ "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz", "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==" }, - "d3-collection": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz", - "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A==" - }, "d3-color": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.3.0.tgz", - "integrity": "sha512-NHODMBlj59xPAwl2BDiO2Mog6V+PrGRtBfWKqKRrs9MCqlSkIEb0Z/SfY7jW29ReHTDC/j+vwXhnZcXI3+3fbg==" + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.0.tgz", + "integrity": "sha512-TzNPeJy2+iEepfiL92LAAB7fvnp/dV2YwANPVHdDWmYMm23qIJBYww3qT8I8C1wXrmrg4UWs7BKc2tKIgyjzHg==" }, "d3-format": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.1.tgz", - "integrity": "sha512-TUswGe6hfguUX1CtKxyG2nymO+1lyThbkS1ifLX0Sr+dOQtAD5gkrffpHnx+yHNKUZ0Bmg5T4AjUQwugPDrm0g==" + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.3.tgz", + "integrity": "sha512-mm/nE2Y9HgGyjP+rKIekeITVgBtX97o1nrvHCWX8F/yBYyevUTvu9vb5pUnKwrcSw7o7GuwMOWjS9gFDs4O+uQ==" }, "d3-geo": { "version": "1.6.3", @@ -3121,48 +3269,34 @@ } }, "d3-interpolate": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.3.2.tgz", - "integrity": "sha512-NlNKGopqaz9qM1PXh9gBF1KSCVh+jSFErrSlD/4hybwoNX/gt1d8CDbDW+3i+5UOHhjC6s6nMvRxcuoMVNgL2w==", + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz", + "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==", "requires": { "d3-color": "1" } }, - "d3-path": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.8.tgz", - "integrity": "sha512-J6EfUNwcMQ+aM5YPOB8ZbgAZu6wc82f/0WFxrxwV6Ll8wBwLaHLKCqQ5Imub02JriCVVdPjgI+6P3a4EWJCxAg==" - }, "d3-scale": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz", - "integrity": "sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==", + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.2.1.tgz", + "integrity": "sha512-huz5byJO/6MPpz6Q8d4lg7GgSpTjIZW/l+1MQkzKfu2u8P6hjaXaStOpmyrD6ymKoW87d2QVFCKvSjLwjzx/rA==", "requires": { - "d3-array": "^1.2.0", - "d3-collection": "1", + "d3-array": "1.2.0 - 2", "d3-format": "1", - "d3-interpolate": "1", + "d3-interpolate": "^1.2.0", "d3-time": "1", "d3-time-format": "2" } }, - "d3-shape": { - "version": "1.3.5", - "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.5.tgz", - "integrity": "sha512-VKazVR3phgD+MUCldapHD7P9kcrvPcexeX/PkMJmkUov4JM8IxsSg1DvbYoYich9AtdTsa5nNk2++ImPiDiSxg==", - "requires": { - "d3-path": "1" - } - }, "d3-time": { - "version": "1.0.11", - "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.0.11.tgz", - "integrity": "sha512-Z3wpvhPLW4vEScGeIMUckDW7+3hWKOQfAWg/U7PlWBnQmeKQ00gCUsTtWSYulrKNA7ta8hJ+xXc6MHrMuITwEw==" + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz", + "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==" }, "d3-time-format": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.1.3.tgz", - "integrity": "sha512-6k0a2rZryzGm5Ihx+aFMuO1GgelgIz+7HhB4PH4OEndD5q2zGn1mDfRdNrulspOfR6JXkb2sThhDK41CSK85QA==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.2.3.tgz", + "integrity": "sha512-RAHNnD8+XvC4Zc4d2A56Uw0yJoM7bsvOlJR33bclxq399Rak/b9bhvu/InjxdWhPtkgU53JJcleJTGkNRnN6IA==", "requires": { "d3-time": "1" } @@ -3193,11 +3327,6 @@ "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=" }, - "decimal.js-light": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.0.tgz", - "integrity": "sha512-b3VJCbd2hwUpeRGG3Toob+CRo8W22xplipNhP3tN7TSVB/cyMX71P1vM2Xjc9H74uV6dS2hDDmo/rHq8L87Upg==" - }, "decode-uri-component": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz", @@ -4065,11 +4194,6 @@ } } }, - "hamburgers": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/hamburgers/-/hamburgers-1.1.3.tgz", - "integrity": "sha512-qpfnJwZq6ATAGJEriwuyfVNgT++GG+o+3bBfPYF7F3WY452cYKbaYGUuqwhp+3kHLI6CL4VIBfj8bfbp90Lp1A==" - }, "har-schema": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz", @@ -4239,6 +4363,11 @@ "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz", "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=" }, + "hyphenate-style-name": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz", + "integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==" + }, "iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -4453,6 +4582,11 @@ "is-extglob": "^2.1.1" } }, + "is-in-browser": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", + "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=" + }, "is-number": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", @@ -4659,6 +4793,83 @@ "verror": "1.10.0" } }, + "jss": { + "version": "10.0.4", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.4.tgz", + "integrity": "sha512-GqHmeDK83qbqMAVjxyPfN1qJVTKZne533a9bdCrllZukUM8npG/k+JumEPI86IIB5ifaZAHG2HAsUziyxOiooQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "csstype": "^2.6.5", + "is-in-browser": "^1.1.3", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-camel-case": { + "version": "10.0.4", + "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.4.tgz", + "integrity": "sha512-+wnqxJsyfUnOn0LxVg3GgZBSjfBCrjxwx7LFxwVTUih0ceGaXKZoieheNOaTo5EM4w8bt1nbb8XonpQCj67C6A==", + "requires": { + "@babel/runtime": "^7.3.1", + "hyphenate-style-name": "^1.0.3", + "jss": "10.0.4" + } + }, + "jss-plugin-default-unit": { + "version": "10.0.4", + "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.4.tgz", + "integrity": "sha512-T0mhL/Ogp/quvod/jAHEqKvptLDxq7Cj3a+7zRuqK8HxUYkftptN89wJElZC3rshhNKiogkEYhCWenpJdFvTBg==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.0.4" + } + }, + "jss-plugin-global": { + "version": "10.0.4", + "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.0.4.tgz", + "integrity": "sha512-N8n9/GHENZce+sqE4UYiZiJtI+t+erT/BypHOrNYAfIoNEj7OYsOEKfIo2P0GpLB3QyDAYf5eo9XNdZ8veEkUA==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.0.4" + } + }, + "jss-plugin-nested": { + "version": "10.0.4", + "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.0.4.tgz", + "integrity": "sha512-QM21BKVt8LDeoRfowvAMh/s+/89VYrreIIE6ch4pvw0oAXDWw1iorUPlqLZ7uCO3UL0uFtQhJq3QMLN6Lr1v0A==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.0.4", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-props-sort": { + "version": "10.0.4", + "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.4.tgz", + "integrity": "sha512-WoETdOCjGskuin/OMt2uEdDPLZF3vfQuHXF+XUHGJrq0BAapoyGQDcv37SeReDlkRAbVXkEZPsIMvYrgHSHFiA==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.0.4" + } + }, + "jss-plugin-rule-value-function": { + "version": "10.0.4", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.4.tgz", + "integrity": "sha512-0hrzOSWRF5ABJGaHrlnHbYZjU877Ofzfh2id3uLtBvemGQLHI+ldoL8/+6iPSRa7M8z8Ngfg2vfYhKjUA5gA0g==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.0.4" + } + }, + "jss-plugin-vendor-prefixer": { + "version": "10.0.4", + "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.4.tgz", + "integrity": "sha512-4JgEbcrdeMda1qvxTm1CnxFJAWVV++VLpP46HNTrfH7VhVlvUpihnUNs2gAlKuRT/XSBuiWeLAkrTqF4NVrPig==", + "requires": { + "@babel/runtime": "^7.3.1", + "css-vendor": "^2.0.7", + "jss": "10.0.4" + } + }, "kind-of": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", @@ -4818,11 +5029,6 @@ "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz", "integrity": "sha1-JI42By7ekGUB11lmIAqG2riyMXA=" }, - "lodash.debounce": { - "version": "4.0.8", - "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", - "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=" - }, "lodash.isfunction": { "version": "3.0.9", "resolved": "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz", @@ -4855,11 +5061,6 @@ "lodash._reinterpolate": "^3.0.0" } }, - "lodash.throttle": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", - "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=" - }, "lodash.tonumber": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/lodash.tonumber/-/lodash.tonumber-4.0.3.tgz", @@ -4957,10 +5158,13 @@ "object-visit": "^1.0.0" } }, - "math-expression-evaluator": { - "version": "1.2.17", - "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz", - "integrity": "sha1-3oGf282E3M2PrlnGrreWFbnSZqw=" + "matchmediaquery": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz", + "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==", + "requires": { + "css-mediaquery": "^0.1.2" + } }, "md5.js": { "version": "1.3.5", @@ -5242,11 +5446,6 @@ } } }, - "moment": { - "version": "2.24.0", - "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz", - "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==" - }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", @@ -8471,23 +8670,6 @@ "react-s-alert": "^1.3.2" } }, - "react-chartjs-2": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-2.8.0.tgz", - "integrity": "sha512-BPpC+qfnh37DkcXvxRwA1rdD9rX/0AQrwru4VZTLofCCuZBwRsc7PbfxjilvoB6YlHhorwZu40YDWEQkoz7xfQ==", - "requires": { - "lodash": "^4.17.4", - "prop-types": "^15.5.8" - } - }, - "react-chartkick": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/react-chartkick/-/react-chartkick-0.3.2.tgz", - "integrity": "sha512-IhBhgg+UfAurwZB7kzhu4UF6GjJso5XOe/XZmTVDzqTVrahbTCMaM8bY2VzGl3A/BmqZ3S/38vyiPDvxtOJ/tg==", - "requires": { - "chartkick": "^3.1.1" - } - }, "react-circle": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/react-circle/-/react-circle-1.1.1.tgz", @@ -8583,15 +8765,15 @@ "warning": "^4.0.2" } }, - "react-resize-detector": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-2.3.0.tgz", - "integrity": "sha512-oCAddEWWeFWYH5FAcHdBYcZjAw9fMzRUK9sWSx6WvSSOPVRxcHd5zTIGy/mOus+AhN/u6T4TMiWxvq79PywnJQ==", + "react-responsive": { + "version": "8.0.3", + "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.0.3.tgz", + "integrity": "sha512-F9VXyLao7O8XHXbLjQbIr4+mC6Zr0RDTwNjd7ixTmYEAyKyNanBkLkFchNaMZgszoSK6PgSs/3m/QDWw33/gpg==", "requires": { - "lodash.debounce": "^4.0.8", - "lodash.throttle": "^4.1.1", - "prop-types": "^15.6.0", - "resize-observer-polyfill": "^1.5.0" + "hyphenate-style-name": "^1.0.0", + "matchmediaquery": "^0.3.0", + "prop-types": "^15.6.1", + "shallow-equal": "^1.1.0" } }, "react-s-alert": { @@ -8612,17 +8794,6 @@ "topojson-client": "2.1.0" } }, - "react-smooth": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-1.0.2.tgz", - "integrity": "sha512-pIGzL1g9VGAsRsdZQokIK0vrCkcdKtnOnS1gyB2rrowdLy69lNSWoIjCTWAfgbiYvria8tm5hEZqj+jwXMkV4A==", - "requires": { - "lodash": "~4.17.4", - "prop-types": "^15.6.0", - "raf": "^3.4.0", - "react-transition-group": "^2.5.0" - } - }, "react-tooltip": { "version": "3.11.1", "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-3.11.1.tgz", @@ -8795,32 +8966,6 @@ "picomatch": "^2.0.7" } }, - "recharts": { - "version": "1.7.1", - "resolved": "https://registry.npmjs.org/recharts/-/recharts-1.7.1.tgz", - "integrity": "sha512-i4vK/ZSICr+dXGmaijuNybc+xhctiX0464xnqauY+OvE6WvU5v+0GYciQvD/HJSObkKG4wY8aRtiuUL9YtXnHQ==", - "requires": { - "classnames": "^2.2.5", - "core-js": "^2.5.1", - "d3-interpolate": "^1.3.0", - "d3-scale": "^2.1.0", - "d3-shape": "^1.2.0", - "lodash": "^4.17.5", - "prop-types": "^15.6.0", - "react-resize-detector": "^2.3.0", - "react-smooth": "^1.0.0", - "recharts-scale": "^0.4.2", - "reduce-css-calc": "^1.3.0" - } - }, - "recharts-scale": { - "version": "0.4.2", - "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.2.tgz", - "integrity": "sha512-p/cKt7j17D1CImLgX2f5+6IXLbRHGUQkogIp06VUoci/XkhOQiGSzUrsD1uRmiI7jha4u8XNFOjkHkzzBPivMg==", - "requires": { - "decimal.js-light": "^2.4.1" - } - }, "recompose": { "version": "0.26.0", "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.26.0.tgz", @@ -8841,38 +8986,6 @@ "strip-indent": "^1.0.1" } }, - "reduce-css-calc": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz", - "integrity": "sha1-dHyRTgSWFKTJz7umKYca0dKSdxY=", - "requires": { - "balanced-match": "^0.4.2", - "math-expression-evaluator": "^1.2.14", - "reduce-function-call": "^1.0.1" - }, - "dependencies": { - "balanced-match": { - "version": "0.4.2", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz", - "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=" - } - } - }, - "reduce-function-call": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/reduce-function-call/-/reduce-function-call-1.0.2.tgz", - "integrity": "sha1-WiAL+S4ON3UXUv5FsKszD9S2vpk=", - "requires": { - "balanced-match": "^0.4.2" - }, - "dependencies": { - "balanced-match": { - "version": "0.4.2", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz", - "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=" - } - } - }, "reflect.ownkeys": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz", @@ -8996,11 +9109,6 @@ "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz", "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=" }, - "resize-observer-polyfill": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", - "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" - }, "resolve": { "version": "1.12.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz", @@ -9307,6 +9415,11 @@ } } }, + "shallow-equal": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz", + "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==" + }, "shell-quote": { "version": "1.7.2", "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.2.tgz", @@ -9915,6 +10028,11 @@ "setimmediate": "^1.0.4" } }, + "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==" + }, "to-arraybuffer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz", diff --git a/package.json b/package.json index bfaa9bcf..64ca46e6 100644 --- a/package.json +++ b/package.json @@ -9,15 +9,16 @@ "export": "next build && next export" }, "dependencies": { + "@material-ui/core": "^4.9.4", + "@material-ui/icons": "^4.9.1", "@zeit/next-less": "^1.0.1", "@zeit/next-sass": "^1.0.1", "animate.css": "^3.7.2", "apexcharts": "^3.10.0", "axios": "^0.19.0", "bootstrap": "^4.3.1", - "chart.js": "^2.8.0", + "d3-scale": "^3.2.1", "google-maps-react": "^2.0.2", - "hamburgers": "^1.1.3", "less": "^3.10.3", "lodash": "^4.17.15", "next": "^9.1.7", @@ -27,18 +28,16 @@ "react-anchor-link-smooth-scroll": "^1.0.12", "react-apexcharts": "^1.3.3", "react-bootstrap-table": "^4.3.1", - "react-chartjs-2": "^2.8.0", - "react-chartkick": "^0.3.2", "react-circle": "^1.1.1", "react-countup": "^4.2.2", "react-dom": "^16.9.0", "react-google-charts": "^3.0.15", "react-motion": "^0.5.2", + "react-responsive": "^8.0.3", "react-simple-maps": "^0.12.1", "react-tooltip": "^3.11.1", "react-typed": "^1.2.0", "reactstrap": "^8.0.1", - "recharts": "^1.7.1", "rsuite": "^4.1.0" } } diff --git a/pages/_document.js b/pages/_document.js index e346863f..0223ce84 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -16,7 +16,7 @@ class MyDocument extends Document { - + @@ -27,6 +27,7 @@ class MyDocument extends Document { + { useEffect(() => { @@ -12,18 +11,21 @@ const Home = () => { window.localStorage.setItem("myOauth", JSON.stringify(await Sheetapi.postSheetValues())) } fetchData(); + }); return (
+ Eldery DB - -
+ + -
+ +
) } diff --git a/pages/main.js b/pages/main.js index 9625a953..0679c959 100644 --- a/pages/main.js +++ b/pages/main.js @@ -1,8 +1,20 @@ -import React, { useState } from 'react' +import React, { useState, useEffect } from 'react' import dynamic from 'next/dynamic' import Map from '../components/layout/Map'; import Navbar_main from '../components/nav_main'; import Sidebar from '../components/layout/sidebar'; +import { makeStyles } from '@material-ui/core/styles'; +import LinearProgress from '@material-ui/core/LinearProgress'; +import { useMediaQuery } from 'react-responsive'; + +const useStyles = makeStyles(theme => ({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, + }, +})); const BarMap = dynamic( () => import('../components/chart/barMap'), @@ -10,35 +22,73 @@ const BarMap = dynamic( ) const Main = () => { - + const classes = useStyles(); + const isBigScreen = useMediaQuery({ minDeviceWidth: 768 }) + const isMobile = useMediaQuery({ maxWidth: 768 }) + const isSmallScreen = useMediaQuery({ maxWidth: 576 }) + const [loading, setLoading] = useState(true) + const [completed, setCompleted] = React.useState(0); const [status, setStatus] = useState(true) const onConfirm = (order) => { setStatus(order) } + useEffect(() => { + function progress() { + setCompleted(oldCompleted => { + if (oldCompleted === 100) { + return 0; + } + const diff = Math.random() * 20; + return Math.min(oldCompleted + diff, 100); + }); + } + + const timer = setInterval(progress, 500); + return () => { + clearInterval(timer); + setTimeout(() => { + setLoading(false); + }, isBigScreen ? 5000 : isMobile ? 4990 :isSmallScreen ? 4300 : 0) + }; + }); + + return (
- - -
-
-
-

สังคมผู้สูงอายุ

-

จำนวนประชากรผู้สูงอายุภายในจังหวัดภูเก็ต

-
-
- -
+ { + loading ? +
+ +
+ + : + + + +
+
+
+

สังคมผู้สูงอายุ

+

จำนวนประชากรผู้สูงอายุภายในจังหวัดภูเก็ต

+
+
+ +
-
- +
+ +
+
+
-
-
-
-
+ + } +
+ + ) } export default Main; \ No newline at end of file diff --git a/styles/index.scss b/styles/index.scss index e87c4967..eabcd4c6 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -2,6 +2,17 @@ width: 100%; min-height: 100vh; height: auto; + + .MuiLinearProgress-root { + height: 5px; + } + + .MuiLinearProgress-colorPrimary { + background-color: #c4def6; + } + .MuiLinearProgress-barColorPrimary { + background-color: #0693e3; + } } .warp-header { diff --git a/styles/main.scss b/styles/main.scss index 4a103c14..35c5b313 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -1,3 +1,26 @@ +.warp-main { + nav { + transition: all 0.5s; + ul { + justify-content: flex-start; + } + .toggle { + padding-left: 230px; + } + } + + .MuiLinearProgress-root { + height: 5px; + } + + .MuiLinearProgress-colorPrimary { + background-color: #c4def6; + } + .MuiLinearProgress-barColorPrimary { + background-color: #0693e3; + } +} + //Table .warp-table { display: flex; diff --git a/styles/nav.scss b/styles/nav.scss index 413f4cb3..d2581151 100644 --- a/styles/nav.scss +++ b/styles/nav.scss @@ -53,7 +53,7 @@ nav { box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); z-index: 99; - @media (max-width: 993px) { + @media (max-width: 576px) { display: none !important; } @@ -74,7 +74,7 @@ nav { width: 5rem; height: 2.5rem; } - h4{ + h4 { margin: 0; margin-top: 1.8rem; } @@ -107,10 +107,10 @@ nav.nav-other { } .collapsible-menu { - @media (min-width: 993px) { + @media (min-width: 576px) { display: none; } - + height: 4rem; background-color: rgb(255, 255, 255); box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2); @@ -173,11 +173,11 @@ nav.nav-other { li { img { margin-top: 1rem; - width: 5rem; - height: 2.5rem; + width: 4rem; + height: 2rem; } - h4{ - margin-top: 1.8rem; + h4 { + margin-top: 1.5rem; } } } diff --git a/styles/sidebar.scss b/styles/sidebar.scss index a1002bbc..e1370a29 100644 --- a/styles/sidebar.scss +++ b/styles/sidebar.scss @@ -1,16 +1,4 @@ //sidebar -.warp-main { - nav { - transition: all 0.5s; - ul { - justify-content: flex-start; - } - .toggle { - padding-left: 230px; - } - } -} - .sidebar-wrapper { @media (max-width: 768px) { position: absolute; From 6aedfeddf056ef0e9b80b3004b2602d54455b8a1 Mon Sep 17 00:00:00 2001 From: pat Date: Wed, 26 Feb 2020 04:27:43 +0700 Subject: [PATCH 006/192] :bug:css error --- pages/index.js | 9 +++++---- pages/index/contact.js | 1 - styles/hamburgers.scss | 4 ++-- styles/index.scss | 13 +------------ styles/nav.scss | 14 +++++++------- 5 files changed, 15 insertions(+), 26 deletions(-) diff --git a/pages/index.js b/pages/index.js index 017e60fc..85259679 100644 --- a/pages/index.js +++ b/pages/index.js @@ -11,19 +11,20 @@ const Home = () => { window.localStorage.setItem("myOauth", JSON.stringify(await Sheetapi.postSheetValues())) } fetchData(); - - }); + }, []); return (
- Eldery DB - +
+ +
+
diff --git a/pages/index/contact.js b/pages/index/contact.js index 3344c38a..f72c9ebd 100644 --- a/pages/index/contact.js +++ b/pages/index/contact.js @@ -84,7 +84,6 @@ class Contact extends React.Component { }
-
{ diff --git a/styles/hamburgers.scss b/styles/hamburgers.scss index 1dffb0b0..d6629b0d 100644 --- a/styles/hamburgers.scss +++ b/styles/hamburgers.scss @@ -10,14 +10,14 @@ } .btn.hamberger { - margin: 0.5rem 0 ; + margin: 0.3rem 0 ; margin-bottom: 0 !important; display: flex; flex-direction: column; width: 100%; transform: translate(-50%, -50%); cursor: pointer; - padding-bottom: 1rem; + padding-bottom: 0.7rem; } span { diff --git a/styles/index.scss b/styles/index.scss index eabcd4c6..ecdc87f2 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -2,17 +2,6 @@ width: 100%; min-height: 100vh; height: auto; - - .MuiLinearProgress-root { - height: 5px; - } - - .MuiLinearProgress-colorPrimary { - background-color: #c4def6; - } - .MuiLinearProgress-barColorPrimary { - background-color: #0693e3; - } } .warp-header { @@ -25,7 +14,7 @@ img { object-fit: cover; width: 100%; - height: 91vh; + height: 80vh; opacity: 0.6; } diff --git a/styles/nav.scss b/styles/nav.scss index d2581151..e35f6626 100644 --- a/styles/nav.scss +++ b/styles/nav.scss @@ -74,7 +74,7 @@ nav { width: 5rem; height: 2.5rem; } - h4 { + h4{ margin: 0; margin-top: 1.8rem; } @@ -110,7 +110,7 @@ nav.nav-other { @media (min-width: 576px) { display: none; } - height: 4rem; + background-color: rgb(255, 255, 255); box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2); @@ -173,11 +173,11 @@ nav.nav-other { li { img { margin-top: 1rem; - width: 4rem; - height: 2rem; + width: 5rem; + height: 2.5rem; } - h4 { - margin-top: 1.5rem; + h4{ + margin-top: 1.8rem; } } } @@ -191,4 +191,4 @@ nav.nav-other { } } } -} +} \ No newline at end of file From 397d1eba6b2eb446c7b9d715b95d788ce06aca3e Mon Sep 17 00:00:00 2001 From: pat Date: Wed, 26 Feb 2020 04:42:52 +0700 Subject: [PATCH 007/192] :lipstick:.btn.hamberger --- styles/hamburgers.scss | 3 ++- styles/index.scss | 3 +++ styles/nav.scss | 16 +++++++++------- 3 files changed, 14 insertions(+), 8 deletions(-) diff --git a/styles/hamburgers.scss b/styles/hamburgers.scss index d6629b0d..54d8e42e 100644 --- a/styles/hamburgers.scss +++ b/styles/hamburgers.scss @@ -17,7 +17,8 @@ width: 100%; transform: translate(-50%, -50%); cursor: pointer; - padding-bottom: 0.7rem; + padding-bottom: 1.4rem; + padding-left: 1rem; } span { diff --git a/styles/index.scss b/styles/index.scss index ecdc87f2..f40f4dbc 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -16,6 +16,9 @@ width: 100%; height: 80vh; opacity: 0.6; + @media (max-width: 575.98px) { + height: 50vh; + } } .page-content { diff --git a/styles/nav.scss b/styles/nav.scss index e35f6626..fe25c8fe 100644 --- a/styles/nav.scss +++ b/styles/nav.scss @@ -74,7 +74,7 @@ nav { width: 5rem; height: 2.5rem; } - h4{ + h4 { margin: 0; margin-top: 1.8rem; } @@ -110,7 +110,6 @@ nav.nav-other { @media (min-width: 576px) { display: none; } - background-color: rgb(255, 255, 255); box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2); @@ -165,6 +164,7 @@ nav.nav-other { .warp-nav-sidebar { width: 100% !important; + height: 4rem; display: flex; justify-content: center; @@ -173,11 +173,13 @@ nav.nav-other { li { img { margin-top: 1rem; - width: 5rem; - height: 2.5rem; + width: 4rem; + height: 2rem; } - h4{ - margin-top: 1.8rem; + h4 { + font-size: 1.2rem; + margin-top: 1.5rem; + padding-bottom: 0; } } } @@ -191,4 +193,4 @@ nav.nav-other { } } } -} \ No newline at end of file +} From 74f6221a580ede256600c15ba66bf1333f4f0274 Mon Sep 17 00:00:00 2001 From: pat Date: Wed, 26 Feb 2020 04:51:50 +0700 Subject: [PATCH 008/192] :bug:css error --- components/chart/barMap.js | 24 ++++++++---------------- 1 file changed, 8 insertions(+), 16 deletions(-) diff --git a/components/chart/barMap.js b/components/chart/barMap.js index 92ce2477..835c8131 100644 --- a/components/chart/barMap.js +++ b/components/chart/barMap.js @@ -8,8 +8,6 @@ const BarMap = () => { const [options, setOptions] = useState({ chart: { - height: 350, - type: 'bar', stacked: true, toolbar: { show: true @@ -18,9 +16,8 @@ const BarMap = () => { enabled: true } }, - dataLabels: { enabled: false }, responsive: [{ - breakpoint: 480, + breakpoint: 1000, options: { legend: { position: 'bottom', @@ -38,18 +35,6 @@ const BarMap = () => { position: 'right', offsetY: 40 }, - fill: { - opacity: 1, - colors: ['#00d084'] - }, - xaxis: {}, - tooltip: { - y: { - formatter: function (val) { - return val + " คน" - } - }, - }, }) const [series, setSeries] = useState([]) const [dataName, setDataName] = useState([]) @@ -80,6 +65,13 @@ const BarMap = () => { fill: { opacity: 1, colors: ['#00d084'] + }, + tooltip: { + y: { + formatter: function (val) { + return val + " คน" + } + } } }) From 1e480f7a1fb0dae41c5f27b16cc73619d5804593 Mon Sep 17 00:00:00 2001 From: pat Date: Wed, 26 Feb 2020 05:57:57 +0700 Subject: [PATCH 009/192] :zap:Loading --- components/layout/sidebar.js | 2 +- components/nav_index.js | 2 +- components/nav_main.js | 2 +- pages/main.js | 20 ++------------- pages/main/people.js | 48 +++++++++++++++++++++++++++++++++++ static/homepage.svg | 49 ++++++++++++++++++++++++++++++++++++ 6 files changed, 102 insertions(+), 21 deletions(-) create mode 100644 pages/main/people.js create mode 100644 static/homepage.svg diff --git a/components/layout/sidebar.js b/components/layout/sidebar.js index 41bdb6aa..980874c9 100644 --- a/components/layout/sidebar.js +++ b/components/layout/sidebar.js @@ -6,7 +6,7 @@ const Sidebar = props => { const [sidebar, setSidebar] = useState( [ - { name: "รายงานความคืบหน้า", nameicon: "Dashboard", img: "/static/dashboard.svg", link: "/main" }, + { name: "รายงานความคืบหน้า", nameicon: "Dashboard", img: "/static/dashboard.svg", link: "/main/people" }, { name: "ข้อมูลทางสถิติ", nameicon: "Chart", img: "/static/chart.svg", link: "/main/chart" }, { name: "เบี้ยยังชีพผู้สูงอายุ", nameicon: "Allowance", img: "/static/allowance.png", link: "/main/allowance" }, { name: "สวัสดิการจากรัฐ", nameicon: "Benefits", img: "/static/document.svg", link: "/main/doc" }, diff --git a/components/nav_index.js b/components/nav_index.js index 55636794..aa9a6739 100644 --- a/components/nav_index.js +++ b/components/nav_index.js @@ -9,7 +9,7 @@ const Nav_index = props => { const [status, setStatus] = useState(false) const [index, setIndex] = useState( [ - { name: "Dashboard", href: "/main" }, + { name: "หน้าหลัก", href: "/main" }, { name: "Services", href: "/index/services" }, { name: "Contact", href: "/index/contact" }, ] diff --git a/components/nav_main.js b/components/nav_main.js index a883827e..a7b9468c 100644 --- a/components/nav_main.js +++ b/components/nav_main.js @@ -16,7 +16,7 @@ const Navbar_main = props => { const [main, setMain] = useState( [ - { name: "รายงานความคืบหน้า", href: "/main" }, + { name: "รายงานความคืบหน้า", href: "/main/people" }, { name: "ข้อมูลทางสถิติ", href: "/main/chart" }, { name: "เบี้ยยังชีพผู้สูงอายุ", href: "/main/allowance" }, { name: "สวัสดิการจากรัฐ", href: "/main/doc" }, diff --git a/pages/main.js b/pages/main.js index 0679c959..ea855bea 100644 --- a/pages/main.js +++ b/pages/main.js @@ -27,7 +27,7 @@ const Main = () => { const isMobile = useMediaQuery({ maxWidth: 768 }) const isSmallScreen = useMediaQuery({ maxWidth: 576 }) const [loading, setLoading] = useState(true) - const [completed, setCompleted] = React.useState(0); + const [completed, setCompleted] = useState(0); const [status, setStatus] = useState(true) const onConfirm = (order) => { @@ -67,23 +67,7 @@ const Main = () => { -
-
-
-

สังคมผู้สูงอายุ

-

จำนวนประชากรผู้สูงอายุภายในจังหวัดภูเก็ต

-
-
- -
- -
- -
-
-
-
-
+
}
diff --git a/pages/main/people.js b/pages/main/people.js new file mode 100644 index 00000000..4d2fe4af --- /dev/null +++ b/pages/main/people.js @@ -0,0 +1,48 @@ +import React, { useState, useEffect } from 'react' +import dynamic from 'next/dynamic' +import Map from '../../components/layout/Map'; +import Navbar_main from '../../components/nav_main'; +import Sidebar from '../../components/layout/sidebar'; + +const BarMap = dynamic( + () => import('../../components/chart/barMap'), + { ssr: false } +) + +const Main = () => { + + const [status, setStatus] = useState(true) + + const onConfirm = (order) => { + setStatus(order) + } + + + return ( +
+ + + +
+
+
+

สังคมผู้สูงอายุ

+

จำนวนประชากรผู้สูงอายุภายในจังหวัดภูเก็ต

+
+
+ +
+ +
+ +
+
+
+
+
+
+ +
+ ) +} +export default Main; \ No newline at end of file diff --git a/static/homepage.svg b/static/homepage.svg new file mode 100644 index 00000000..d639ef72 --- /dev/null +++ b/static/homepage.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From d7cb1ab0730071cf05ba003539556765b78f009e Mon Sep 17 00:00:00 2001 From: pat Date: Wed, 26 Feb 2020 06:02:12 +0700 Subject: [PATCH 010/192] :bug:css error --- pages/index.js | 1 - pages/index/contact.js | 5 ++--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/pages/index.js b/pages/index.js index 85259679..5a86a386 100644 --- a/pages/index.js +++ b/pages/index.js @@ -24,7 +24,6 @@ const Home = () => {
-
diff --git a/pages/index/contact.js b/pages/index/contact.js index f72c9ebd..5d49ae3b 100644 --- a/pages/index/contact.js +++ b/pages/index/contact.js @@ -71,7 +71,7 @@ class Contact extends React.Component { { userlist.map((item, index) => { return ( - { return ( - ) }) } - From f5e806d83f1b3af04e56a37b09e3a16427e25925 Mon Sep 17 00:00:00 2001 From: pat Date: Fri, 28 Feb 2020 03:44:20 +0700 Subject: [PATCH 011/192] :fire:nav-index --- components/layout/nav.js | 86 ++++++++++++++++++++++++++++ components/nav_index.js | 117 --------------------------------------- pages/index.js | 24 +++++++- 3 files changed, 108 insertions(+), 119 deletions(-) create mode 100644 components/layout/nav.js delete mode 100644 components/nav_index.js diff --git a/components/layout/nav.js b/components/layout/nav.js new file mode 100644 index 00000000..58b78fb9 --- /dev/null +++ b/components/layout/nav.js @@ -0,0 +1,86 @@ +import React, { useState } from 'react' +import Link from 'next/link' +import _ from 'lodash' +import Nav_logo from '../nav_logo' +import { useMediaQuery } from 'react-responsive' + + + +const NavBar = props => { + const tab = props.tab + const isBigScreen = useMediaQuery({ minDeviceWidth: 576 }) + const isSmallScreen = useMediaQuery({ maxDeviceWidth: 575.98 }) + + const [status, setStatus] = useState(false) + + + const collapsible = async () => { + if (!status) { + setStatus(true) + } + else { + setStatus(false) + } + } + + return ( + + { + isBigScreen ? + + : + isSmallScreen ? +
+
+ + +
+
+
    +
  • + { + tab.map((item, indexs) => { + return ( + +

    {item.name}

    + + ) + }) + } +
  • +
+
+
+ : + null + } +
+ + ) +} +export default NavBar; \ No newline at end of file diff --git a/components/nav_index.js b/components/nav_index.js deleted file mode 100644 index aa9a6739..00000000 --- a/components/nav_index.js +++ /dev/null @@ -1,117 +0,0 @@ -import React, { useState } from 'react' -import Link from 'next/link' -import Nav_logo from './nav_logo'; - - - -const Nav_index = props => { - - const [status, setStatus] = useState(false) - const [index, setIndex] = useState( - [ - { name: "หน้าหลัก", href: "/main" }, - { name: "Services", href: "/index/services" }, - { name: "Contact", href: "/index/contact" }, - ] - ) - const [listIndex, setListindex] = useState( - [ - { name: "Services", href: "/index/services" }, - { name: "Contact", href: "/index/contact" } - ] - ) - - const collapsible = async () => { - if (!status) { - setStatus(true) - } - else { - setStatus(false) - } - } - - return ( - - { - props.name == "/" ? - - : - - } - -
-
- - -
-
-
    -
  • - { - index.map((item, indexs) => { - return ( - -

    {item.name}

    - - ) - }) - } -
  • -
-
-
-
- ) -} -export default Nav_index \ No newline at end of file diff --git a/pages/index.js b/pages/index.js index 5a86a386..f7cbb109 100644 --- a/pages/index.js +++ b/pages/index.js @@ -2,10 +2,29 @@ import React, { useState, useEffect } from 'react' import Head from 'next/head' import Sheetapi from '../config/api' import Cover from '../components/layout/cover'; -import Nav_index from '../components/nav_index'; +import NavBar from '../components/layout/nav'; +import { useMediaQuery } from 'react-responsive' + const Home = () => { + const isSmallScreen = useMediaQuery({ maxDeviceWidth: 575.98 }) + + const [home, setHome] = useState( + [ + { name: "หน้าหลัก", href: "/main" }, + { name: "Services", href: "/index/services" }, + { name: "Contact", href: "/index/contact" }, + ] + ) + + const [homeMin, setHomeMin] = useState( + [ + { name: "Services", href: "/index/services" }, + { name: "Contact", href: "/index/contact" }, + ] + ) + useEffect(() => { async function fetchData() { window.localStorage.setItem("myOauth", JSON.stringify(await Sheetapi.postSheetValues())) @@ -20,7 +39,8 @@ const Home = () => { - + + {/* */}
From 3c7ca02daf562737d379bfccc2e008f8f18a5ac7 Mon Sep 17 00:00:00 2001 From: pat Date: Fri, 28 Feb 2020 03:48:22 +0700 Subject: [PATCH 012/192] :fire:nav-index --- pages/index.js | 1 - pages/index/contact.js | 4 ++-- pages/index/services.js | 4 ++-- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/pages/index.js b/pages/index.js index f7cbb109..e81f13bc 100644 --- a/pages/index.js +++ b/pages/index.js @@ -40,7 +40,6 @@ const Home = () => { - {/* */}
diff --git a/pages/index/contact.js b/pages/index/contact.js index 5d49ae3b..47b8da95 100644 --- a/pages/index/contact.js +++ b/pages/index/contact.js @@ -1,8 +1,8 @@ import React from 'react' import { Carousel } from 'rsuite'; -import Nav_index from '../../components/nav_index' import Cardcontact from '../../components/layout/cardcontact' import Sheetapi from '../../config/api' +import NavBar from '../../components/layout/nav'; class Contact extends React.Component { @@ -57,7 +57,7 @@ class Contact extends React.Component { return (
- + {/* */}
diff --git a/pages/index/services.js b/pages/index/services.js index 6a91c50f..dc919191 100644 --- a/pages/index/services.js +++ b/pages/index/services.js @@ -1,7 +1,7 @@ import React from 'react' -import Nav_index from '../../components/nav_index' import { Steps, ButtonGroup, Button, Message } from 'rsuite'; import 'rsuite/lib/styles/index.less'; +import NavBar from '../../components/layout/nav'; const styles = { width: '200px', @@ -41,7 +41,7 @@ class Services extends React.Component { const { step, message } = this.state; return (
- + {/* */}
From 3c3802e588c40bd4a43c98e47b685e9f4d685dbe Mon Sep 17 00:00:00 2001 From: pat Date: Sat, 29 Feb 2020 05:49:36 +0700 Subject: [PATCH 013/192] :lipstick:Main --- components/chart/barMap.js | 2 +- components/layout/dashboard.js | 70 ++++++++++++++++ components/layout/nav.js | 143 ++++++++++++++++++++++++++------- components/nav_main.js | 125 ---------------------------- pages/index.js | 2 +- pages/index/contact.js | 16 ++-- pages/index/services.js | 10 ++- pages/main.js | 86 +++++++++++++++----- pages/main/allowance.js | 17 ++-- pages/main/chart.js | 13 ++- pages/main/doc.js | 57 ++++++------- pages/main/economy.js | 100 +++++++++-------------- pages/main/help.js | 69 ++++++---------- pages/main/hospital.js | 37 +++------ pages/main/people.js | 22 +++-- pages/main/service.js | 72 ++++++----------- pages/main/social.js | 86 ++++++++------------ styles/base.scss | 4 +- styles/main.scss | 2 +- styles/map.scss | 90 ++++++++++++--------- styles/nav.scss | 1 - styles/sidebar.scss | 8 +- 22 files changed, 501 insertions(+), 531 deletions(-) create mode 100644 components/layout/dashboard.js delete mode 100644 components/nav_main.js diff --git a/components/chart/barMap.js b/components/chart/barMap.js index 835c8131..0b0b0379 100644 --- a/components/chart/barMap.js +++ b/components/chart/barMap.js @@ -77,7 +77,7 @@ const BarMap = () => { }) } catch (err) { console.log(err); - window.location.href("/") + window.location.replace("/") } } diff --git a/components/layout/dashboard.js b/components/layout/dashboard.js new file mode 100644 index 00000000..46e91679 --- /dev/null +++ b/components/layout/dashboard.js @@ -0,0 +1,70 @@ +import React, { useState } from 'react' +import NavBar from './nav' +import { useMediaQuery } from 'react-responsive' +import Sidebar from './sidebar' + + +const Dashboard = props => { + + + const [status, setStatus] = useState(false) + const isSmallScreen = useMediaQuery({ maxDeviceWidth: 575.98 }) + + const [main, setMain] = useState( + [ + { name: "Services", href: "/index/services" }, + { name: "Contact", href: "/index/contact" }, + ] + ) + + const [mainMin, setMainMin] = useState( + [ + { name: "รายงานความคืบหน้า", href: "/main/people" }, + { name: "ข้อมูลทางสถิติ", href: "/main/chart" }, + { name: "เบี้ยยังชีพผู้สูงอายุ", href: "/main/allowance" }, + { name: "สวัสดิการจากรัฐ", href: "/main/doc" }, + { name: "การบริการ", href: "/main/service" }, + { name: "สภาพทางสังคม", href: "/main/social" }, + { name: "ด้านเศรษฐกิจ", href: "/main/economy" }, + { name: "โรงพยาบาล", href: "/main/hospital" }, + { name: "ช่วยเหลือ", href: "/main/help" } + ] + ) + + const onConfirmClick = () => { + + if (props.status) { + if (props.confirm) { + props.confirm(false) + } + } + else { + if (props.confirm) { + props.confirm(true) + } + } + } + + const onConfirm = (order) => { + setStatus(order) + + if (props.statusMain) { + props.onStatusMain(false) + } + else { + props.onStatusMain(true) + } + + } + + return ( + + + + + + + ) + +} +export default Dashboard \ No newline at end of file diff --git a/components/layout/nav.js b/components/layout/nav.js index 58b78fb9..936cb3fa 100644 --- a/components/layout/nav.js +++ b/components/layout/nav.js @@ -7,13 +7,13 @@ import { useMediaQuery } from 'react-responsive' const NavBar = props => { + const tab = props.tab + const name = props.name + const [status, setStatus] = useState(false) const isBigScreen = useMediaQuery({ minDeviceWidth: 576 }) const isSmallScreen = useMediaQuery({ maxDeviceWidth: 575.98 }) - const [status, setStatus] = useState(false) - - const collapsible = async () => { if (!status) { setStatus(true) @@ -23,10 +23,24 @@ const NavBar = props => { } } + const onConfirmClick = () => { + + if (props.status) { + if (props.confirm) { + props.confirm(false) + } + } + else { + if (props.confirm) { + props.confirm(true) + } + } + } + return ( { - isBigScreen ? + isBigScreen && name == "index" ? : - isSmallScreen ? -
-
- - -
-
+ isBigScreen && name == "main" ? +
+
+
: - null + isBigScreen && name == "other" ? + + : + isSmallScreen ? +
+
+ + +
+
+
    +
  • + { + tab.map((item, indexs) => { + return ( + +

    {item.name}

    + + ) + }) + } +
  • +
+
+
+ : + null } diff --git a/components/nav_main.js b/components/nav_main.js deleted file mode 100644 index a7b9468c..00000000 --- a/components/nav_main.js +++ /dev/null @@ -1,125 +0,0 @@ -import React, { useState } from 'react' -import Nav_logo from './nav_logo'; -import Link from 'next/link' - - - -const Navbar_main = props => { - - const [status, setStatus] = useState(false) - const [index, setIndex] = useState( - [ - { name: "Services", href: "/index/services" }, - { name: "Contact", href: "/index/contact" }, - ] - ) - - const [main, setMain] = useState( - [ - { name: "รายงานความคืบหน้า", href: "/main/people" }, - { name: "ข้อมูลทางสถิติ", href: "/main/chart" }, - { name: "เบี้ยยังชีพผู้สูงอายุ", href: "/main/allowance" }, - { name: "สวัสดิการจากรัฐ", href: "/main/doc" }, - { name: "การบริการ", href: "/main/service" }, - { name: "สภาพทางสังคม", href: "/main/social" }, - { name: "ด้านเศรษฐกิจ", href: "/main/economy" }, - { name: "โรงพยาบาล", href: "/main/hospital" }, - { name: "ช่วยเหลือ", href: "/main/help" } - ] - ) - - const onConfirmClick = () => { - - if (props.status) { - if (props.confirm) { - props.confirm(false) - } - } - else { - if (props.confirm) { - props.confirm(true) - } - } - } - - const collapsible = async () => { - if (!status) { - setStatus(true) - } - else { - setStatus(false) - } - } - return ( -
- - -
-
- - -
-
-
    -
  • - { - main.map((item, indexs) => { - return ( - -

    {item.name}

    - - ) - }) - } -
  • -
-
-
-
- ) -} -export default Navbar_main; \ No newline at end of file diff --git a/pages/index.js b/pages/index.js index e81f13bc..36d5c6b9 100644 --- a/pages/index.js +++ b/pages/index.js @@ -39,7 +39,7 @@ const Home = () => { - +
diff --git a/pages/index/contact.js b/pages/index/contact.js index 47b8da95..5136b32f 100644 --- a/pages/index/contact.js +++ b/pages/index/contact.js @@ -1,9 +1,8 @@ -import React from 'react' +import React, { useState, useEffect } from 'react' +import NavBar from '../../components/layout/nav' import { Carousel } from 'rsuite'; import Cardcontact from '../../components/layout/cardcontact' import Sheetapi from '../../config/api' -import NavBar from '../../components/layout/nav'; - class Contact extends React.Component { @@ -17,7 +16,9 @@ class Contact extends React.Component { { img: "/static/contact3.jpg" }, { img: "/static/contact4.jpg" }, { img: "/static/contact5.jpg" }, - ] + ], + contact: [{ name: "หน้าหลัก", href: "/main" }, + { name: "Services", href: "/index/services" },] } } @@ -57,7 +58,7 @@ class Contact extends React.Component { return (
- {/* */} +
@@ -71,7 +72,7 @@ class Contact extends React.Component { { userlist.map((item, index) => { return ( - { return ( - ) }) } +
diff --git a/pages/index/services.js b/pages/index/services.js index dc919191..9dbe87d1 100644 --- a/pages/index/services.js +++ b/pages/index/services.js @@ -1,7 +1,7 @@ import React from 'react' +import NavBar from '../../components/layout/nav' import { Steps, ButtonGroup, Button, Message } from 'rsuite'; import 'rsuite/lib/styles/index.less'; -import NavBar from '../../components/layout/nav'; const styles = { width: '200px', @@ -15,7 +15,9 @@ class Services extends React.Component { super(); this.state = { step: 0, - message: 0 + message: 0, + service: [{ name: "หน้าหลัก", href: "/main" }, + { name: "Contact", href: "/index/contact" },] }; this.decline = this.decline.bind(this); this.increase = this.increase.bind(this); @@ -41,7 +43,7 @@ class Services extends React.Component { const { step, message } = this.state; return (
- {/* */} +
@@ -193,4 +195,4 @@ class Services extends React.Component { ) } } -export default Services; +export default Services; \ No newline at end of file diff --git a/pages/main.js b/pages/main.js index ea855bea..18e8290a 100644 --- a/pages/main.js +++ b/pages/main.js @@ -1,11 +1,9 @@ import React, { useState, useEffect } from 'react' -import dynamic from 'next/dynamic' -import Map from '../components/layout/Map'; -import Navbar_main from '../components/nav_main'; -import Sidebar from '../components/layout/sidebar'; +import CountUp from 'react-countup'; import { makeStyles } from '@material-ui/core/styles'; import LinearProgress from '@material-ui/core/LinearProgress'; import { useMediaQuery } from 'react-responsive'; +import Dashboard from '../components/layout/dashboard'; const useStyles = makeStyles(theme => ({ root: { @@ -16,23 +14,16 @@ const useStyles = makeStyles(theme => ({ }, })); -const BarMap = dynamic( - () => import('../components/chart/barMap'), - { ssr: false } -) - -const Main = () => { +const MainPage = () => { const classes = useStyles(); const isBigScreen = useMediaQuery({ minDeviceWidth: 768 }) const isMobile = useMediaQuery({ maxWidth: 768 }) const isSmallScreen = useMediaQuery({ maxWidth: 576 }) - const [loading, setLoading] = useState(true) + const isShowMap = useMediaQuery({ minDeviceWidth: 1224 }) + const [loading, setLoading] = useState(false) const [completed, setCompleted] = useState(0); - const [status, setStatus] = useState(true) - const onConfirm = (order) => { - setStatus(order) - } + const [status, setStatus] = useState(false) useEffect(() => { function progress() { @@ -50,10 +41,14 @@ const Main = () => { clearInterval(timer); setTimeout(() => { setLoading(false); - }, isBigScreen ? 5000 : isMobile ? 4990 :isSmallScreen ? 4300 : 0) + }, isBigScreen ? 5000 : isMobile ? 4990 : isSmallScreen ? 4300 : 0) }; }); + const statusMain = (order) => { + setStatus(order) + } + return (
@@ -65,9 +60,60 @@ const Main = () => { : - - - + +
+
+
+

สังคมผู้สูงอายุ

+

ประชากรผู้สูงอายุภายในจังหวัดภูเก็ต

+
+
+
+
จำนวนประชากรสูงอายุ 60 ปี ขึ้นไป
+
+

%

+ {/*

ต่อจำนวนประชากรทั้งหมด ภายในจังหวัดภูเก็ต

*/} + +
+
+
+ + +
+ +
+
+
+
จำนวนประชากรสูงอายุ ที่ได้รับเบี้ยยังชีพ
+
+

9,792 คน

+
+
+
+ +
+
+
จำนวนประชากรสูงอายุ ที่ได้รับเบี้ยยังชีพผู้พิการ
+
+

575 คน

+
+
+
+ +
+
+
จำนวนประชากรสูงอายุ ที่ไม่มีชื่อในทะเบียน
+
+

6 คน

+
+
+
+
+ +
+ +
+
}
@@ -75,4 +121,4 @@ const Main = () => { ) } -export default Main; \ No newline at end of file +export default MainPage; \ No newline at end of file diff --git a/pages/main/allowance.js b/pages/main/allowance.js index c3603a2e..23f75cd6 100644 --- a/pages/main/allowance.js +++ b/pages/main/allowance.js @@ -1,21 +1,18 @@ -import React, {useState} from 'react' +import React, { useState } from 'react' import CardData from '../../components/layout/cardmain'; -import Navbar_main from '../../components/nav_main'; -import Sidebar from '../../components/layout/sidebar'; +import Dashboard from '../../components/layout/dashboard'; import _ from 'lodash' const Allowance = props => { - - const [status,setStatus] = useState(true) - - const onConfirm = (order) => { + + const [status, setStatus] = useState(false) + + const statusMain = (order) => { setStatus(order) } - return (
- - +
diff --git a/pages/main/chart.js b/pages/main/chart.js index 85c7c66d..c5719b0b 100644 --- a/pages/main/chart.js +++ b/pages/main/chart.js @@ -1,9 +1,9 @@ import React, { useState, useEffect } from 'react' import dynamic from 'next/dynamic' -import Navbar_main from '../../components/nav_main'; -import Sidebar from '../../components/layout/sidebar'; import Footer from '../../components/layout/footer'; import _ from 'lodash' +import Dashboard from '../../components/layout/dashboard'; + const Barchart = dynamic( () => import('../../components/chart/barChart'), @@ -21,17 +21,14 @@ const Piechart2 = dynamic( ) const Chart = () => { + const [status, setStatus] = useState(false) - const [status, setStatus] = useState(true) - - const onConfirm = (order) => { + const statusMain = (order) => { setStatus(order) } - return (
- - +
diff --git a/pages/main/doc.js b/pages/main/doc.js index c39ac3bc..76ff3bac 100644 --- a/pages/main/doc.js +++ b/pages/main/doc.js @@ -1,54 +1,43 @@ -import React from 'react' -import Navbar_main from '../../components/nav_main'; -import Sidebar from '../../components/layout/sidebar'; +import React, { useState } from 'react' import dynamic from 'next/dynamic' import Footer from '../../components/layout/footer'; import _ from 'lodash' +import Dashboard from '../../components/layout/dashboard'; + const PieDoc = dynamic( () => import('../../components/chart/pieDoc'), { ssr: false } ) -class Doc extends React.Component { +const Doc = () => { - constructor(props) { - super(props); - this.state = { - status: true - } - } + const [status, setStatus] = useState(false) - onConfirm = (order) => { - this.setState({ - status: order, - }) + const statusMain = (order) => { + setStatus(order) } - render() { - - return ( - -
- - -
-
-
-

สวัสดิการจากรัฐ

-

ของประชากรผู้สูงอายุภายในตำบลกะทู้ อำเภอกะทู้ จังหวัดภูเก็ต

-
-
- -
-