From e878cfd8c4a2177922265fbd9803e185f533fc81 Mon Sep 17 00:00:00 2001 From: rafaucoin <88778777+rafaucoin@users.noreply.github.com> Date: Fri, 25 Mar 2022 21:58:12 +0100 Subject: [PATCH 1/6] Splash Vaccination --- src/components/home-patient/Chart.jsx | 87 +++++++++++++++++++++ src/components/home-patient/Profile.jsx | 34 ++++++++ src/components/home-patient/Vaccination.jsx | 55 +++++++++++++ src/components/home-patient/index.jsx | 31 ++++++++ src/components/shared/NavBar.jsx | 35 +++++++++ src/components/splash/index.jsx | 30 +++++++ src/index.js | 8 +- 7 files changed, 278 insertions(+), 2 deletions(-) create mode 100644 src/components/home-patient/Chart.jsx create mode 100644 src/components/home-patient/Profile.jsx create mode 100644 src/components/home-patient/Vaccination.jsx create mode 100644 src/components/home-patient/index.jsx create mode 100644 src/components/splash/index.jsx diff --git a/src/components/home-patient/Chart.jsx b/src/components/home-patient/Chart.jsx new file mode 100644 index 0000000..f15aef4 --- /dev/null +++ b/src/components/home-patient/Chart.jsx @@ -0,0 +1,87 @@ +import { Line } from 'react-chartjs-2'; +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend, +} from 'chart.js'; + +ChartJS.register( + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend +); +const data = { + labels: [ + 'Jan', + 'Feb', + 'Mar', + 'Apr', + 'May', + 'Jun', + 'Jul', + 'Aug', + 'Sep', + 'Oct', + 'Nov', + 'Dec', + ], + datasets: [ + { + label: 'My Balance', + fill: false, + lineTension: 0.5, + backgroundColor: '#db86b2', + borderColor: '#B57295', + borderCapStyle: 'butt', + borderDashOffset: 0.0, + borderJoinStyle: '#B57295', + pointBorderColor: '#B57295', + pointBackgroundColor: '#fff', + pointBorderWidth: 1, + pointHoverRadius: 5, + pointHoverBackgroundColor: '#B57295', + pointHoverBorderColor: '#B57295', + pointHoverBorderWidth: 2, + pointRadius: 1, + pointHitRadius: 10, + data: [500, 300, 400, 800, 650, 700, 690, 1200, 1050, 1300], + }, + ], +}; + +const options = { + maintainAspectRatio: true, + scales: { + x: { + grid: { + display: true, + }, + }, + y: { + grid: { + borderDash: [3, 3], + }, + // beginAtZero: true, // this works + }, + }, + plugins: { + legend: { + display: false, + }, + }, +}; + +const Chart = () => ( + +); + +export default Chart; diff --git a/src/components/home-patient/Profile.jsx b/src/components/home-patient/Profile.jsx new file mode 100644 index 0000000..842dec3 --- /dev/null +++ b/src/components/home-patient/Profile.jsx @@ -0,0 +1,34 @@ +import { + Avatar, + Badge, + Box, + Divider, + Heading, + HStack, + Text, + VStack, +} from '@chakra-ui/react'; +import React from 'react'; + +const Profile = () => { + return ( + + + + + + + Rafik Daouha + + + + Male + Age:21 + 1m79 + + + + ); +}; + +export default Profile; diff --git a/src/components/home-patient/Vaccination.jsx b/src/components/home-patient/Vaccination.jsx new file mode 100644 index 0000000..c1a9580 --- /dev/null +++ b/src/components/home-patient/Vaccination.jsx @@ -0,0 +1,55 @@ +import { + Button, + Heading, + HStack, + VStack, + Table, + Tr, + Thead, + Th, + Tbody, + Td, + Tfoot, +} from '@chakra-ui/react'; +import React from 'react'; +import { GrAdd } from 'react-icons/gr'; + +function Vaccination() { + return ( + + + Vaccination + + + + + + + + + + + + + + + + + + + + +
NameDate
inchesmillimetres (mm)
yardsmetres (m)
+ + ); +} + +export default Vaccination; diff --git a/src/components/home-patient/index.jsx b/src/components/home-patient/index.jsx new file mode 100644 index 0000000..99790bd --- /dev/null +++ b/src/components/home-patient/index.jsx @@ -0,0 +1,31 @@ +import { Container, Flex } from '@chakra-ui/react'; +import React from 'react'; +import NavBar from '../shared/NavBar'; +import Chart from './Chart'; +import Profile from './Profile'; +import Vaccination from './Vaccination'; + +const Patient = () => { + return ( + + + + + + + + + ); +}; + +export default Patient; diff --git a/src/components/shared/NavBar.jsx b/src/components/shared/NavBar.jsx index e69de29..f84d266 100644 --- a/src/components/shared/NavBar.jsx +++ b/src/components/shared/NavBar.jsx @@ -0,0 +1,35 @@ +import { HStack, IconButton } from '@chakra-ui/react'; +import React from 'react'; +import { + BiHome, + BiMessageSquare, + BiSearch, + BiDotsHorizontalRounded, +} from 'react-icons/bi'; +import { GrAdd } from 'react-icons/gr'; + +function NavBar() { + return ( + + } /> + } /> + } /> + } /> + } + /> + + ); +} + +export default NavBar; diff --git a/src/components/splash/index.jsx b/src/components/splash/index.jsx new file mode 100644 index 0000000..6c95d6c --- /dev/null +++ b/src/components/splash/index.jsx @@ -0,0 +1,30 @@ +import { + Box, + Button, + Container, + Flex, + Heading, + Text, + VStack, +} from '@chakra-ui/react'; +import React from 'react'; +import { ColorModeSwitcher } from '../../ColorModeSwitcher'; + +export default function Splash() { + return ( + + + + + + You want to track your health ? + In love with Chakra + + + + + + + + ); +} diff --git a/src/index.js b/src/index.js index b9a9c26..2e86784 100644 --- a/src/index.js +++ b/src/index.js @@ -2,11 +2,15 @@ import { ColorModeScript } from '@chakra-ui/react'; import React, { StrictMode } from 'react'; import ReactDOM from 'react-dom'; import App from './App'; +import { ChakraProvider } from '@chakra-ui/react'; +import { extendTheme } from '@chakra-ui/react'; ReactDOM.render( - - + + + + , document.getElementById('root') ); From 82f4cd4f46a24d67e68904de28cc91490f77e193 Mon Sep 17 00:00:00 2001 From: rafaucoin <88778777+rafaucoin@users.noreply.github.com> Date: Fri, 25 Mar 2022 21:59:08 +0100 Subject: [PATCH 2/6] vaccination splash --- package-lock.json | 246 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 3 + src/App.js | 59 ++--------- 3 files changed, 256 insertions(+), 52 deletions(-) diff --git a/package-lock.json b/package-lock.json index f4a30d7..3c37f76 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2794,6 +2794,62 @@ "@sinonjs/commons": "^1.7.0" } }, + "@supabase/functions-js": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-1.2.0.tgz", + "integrity": "sha512-vT/dEuwY7occ5Upuev0vuGCAo/cVltbv+8mOKugA5Lsf9W5S0PlXy4di/cGF6ryvsQfYXr1ebEWNlgKgGUOCtA==", + "requires": { + "cross-fetch": "^3.1.5" + } + }, + "@supabase/gotrue-js": { + "version": "1.22.8", + "resolved": "https://registry.npmjs.org/@supabase/gotrue-js/-/gotrue-js-1.22.8.tgz", + "integrity": "sha512-2mG5M3goHSPwwQzjbgw5lmUNeVexOaPIFcUmUU9p9mwsSzbZ5u2pKbZGVS/9aBaJoD8YvW8khMej9XaGEFQeiQ==", + "requires": { + "cross-fetch": "^3.0.6" + } + }, + "@supabase/postgrest-js": { + "version": "0.37.1", + "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-0.37.1.tgz", + "integrity": "sha512-Lm7eLuYzEr7ppGC84mlqpm8v9Vy8kyR6he6z3avrkccC8pwLOsxaK0bkKiV4LBwkJc7uARMTdlp+IskatHkz2g==", + "requires": { + "cross-fetch": "^3.0.6" + } + }, + "@supabase/realtime-js": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-1.4.0.tgz", + "integrity": "sha512-KHSyb2IengH92RaTmY7hhhJ43ZdDsJfVjFqvXVb0t1MQRgLfrVfcGxbWFPhU3sBvwzsvudRM4jLO0ZrzVezL2w==", + "requires": { + "@types/lodash.clonedeep": "^4.5.6", + "@types/phoenix": "^1.5.4", + "@types/websocket": "^1.0.3", + "lodash.clonedeep": "^4.5.0", + "websocket": "^1.0.34" + } + }, + "@supabase/storage-js": { + "version": "1.6.4", + "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-1.6.4.tgz", + "integrity": "sha512-vYcr1JGRf8Wr4v+lb8Ucl0bELwCZv8lT/PrYuhEKfJff6BI6/nTJp8rRZSRaDESQR8JlpaLaL+dmD/wsNqZnNQ==", + "requires": { + "cross-fetch": "^3.1.0" + } + }, + "@supabase/supabase-js": { + "version": "1.32.1", + "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-1.32.1.tgz", + "integrity": "sha512-GAm7MRcCzrcbzGELHrpU0zHQm58ZJ+b7RBLkJxC7MzdAsNDJv/F7921f4WDbKtLn4cASGImJR2xElLiXK5NqAA==", + "requires": { + "@supabase/functions-js": "^1.2.0", + "@supabase/gotrue-js": "^1.22.8", + "@supabase/postgrest-js": "^0.37.1", + "@supabase/realtime-js": "^1.4.0", + "@supabase/storage-js": "^1.6.4" + } + }, "@surma/rollup-plugin-off-main-thread": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz", @@ -3289,6 +3345,14 @@ "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.180.tgz", "integrity": "sha512-XOKXa1KIxtNXgASAnwj7cnttJxS4fksBRywK/9LzRV5YxrF80BXZIGeQSuoESQ/VkUj30Ae0+YcuHc15wJCB2g==" }, + "@types/lodash.clonedeep": { + "version": "4.5.6", + "resolved": "https://registry.npmjs.org/@types/lodash.clonedeep/-/lodash.clonedeep-4.5.6.tgz", + "integrity": "sha512-cE1jYr2dEg1wBImvXlNtp0xDoS79rfEdGozQVgliDZj1uERH4k+rmEMTudP9b4VQ8O6nRb5gPqft0QzEQGMQgA==", + "requires": { + "@types/lodash": "*" + } + }, "@types/lodash.mergewith": { "version": "4.6.6", "resolved": "https://registry.npmjs.org/@types/lodash.mergewith/-/lodash.mergewith-4.6.6.tgz", @@ -3312,6 +3376,11 @@ "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==" }, + "@types/phoenix": { + "version": "1.5.4", + "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.5.4.tgz", + "integrity": "sha512-L5eZmzw89eXBKkiqVBcJfU1QGx9y+wurRIEgt0cuLH0hwNtVUxtx+6cu0R2STwWj468sjXyBYPYDtGclUd1kjQ==" + }, "@types/prettier": { "version": "2.4.4", "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.4.tgz", @@ -3393,6 +3462,14 @@ "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz", "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI=" }, + "@types/websocket": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/websocket/-/websocket-1.0.5.tgz", + "integrity": "sha512-NbsqiNX9CnEfC1Z0Vf4mE1SgAJ07JnRYcNex7AJ9zAVzmiGHmjKFEk7O4TJIsgv2B1sLEb6owKFZrACwdYngsQ==", + "requires": { + "@types/node": "*" + } + }, "@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -4346,6 +4423,14 @@ "resolved": "https://registry.npmjs.org/buffer-indexof/-/buffer-indexof-1.1.1.tgz", "integrity": "sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g==" }, + "bufferutil": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.6.tgz", + "integrity": "sha512-jduaYOYtnio4aIAyc6UbvPCVcgq7nYpVnucyxr6eCYg/Woad9Hf/oxxBRDnGGjPfjUm6j5O/uBWhIu4iLebFaw==", + "requires": { + "node-gyp-build": "^4.3.0" + } + }, "builtin-modules": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.2.0.tgz", @@ -4437,6 +4522,11 @@ "resolved": "https://registry.npmjs.org/charcodes/-/charcodes-0.2.0.tgz", "integrity": "sha512-Y4kiDb+AM4Ecy58YkuZrrSRJBDQdQ2L+NyS1vHHFtNtUjgutcZfx3yp1dAONI/oPaPmyGfCLx5CxL+zauIMyKQ==" }, + "chart.js": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz", + "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA==" + }, "check-types": { "version": "11.1.2", "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz", @@ -4729,6 +4819,14 @@ "yaml": "^1.10.0" } }, + "cross-fetch": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz", + "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==", + "requires": { + "node-fetch": "2.6.7" + } + }, "cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -5025,6 +5123,15 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz", "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==" }, + "d": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz", + "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==", + "requires": { + "es5-ext": "^0.10.50", + "type": "^1.0.1" + } + }, "damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -5458,6 +5565,35 @@ "is-symbol": "^1.0.2" } }, + "es5-ext": { + "version": "0.10.59", + "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.59.tgz", + "integrity": "sha512-cOgyhW0tIJyQY1Kfw6Kr0viu9ZlUctVchRMZ7R0HiH3dxTSp5zJDLecwxUqPUrGKMsgBI1wd1FL+d9Jxfi4cLw==", + "requires": { + "es6-iterator": "^2.0.3", + "es6-symbol": "^3.1.3", + "next-tick": "^1.1.0" + } + }, + "es6-iterator": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz", + "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=", + "requires": { + "d": "1", + "es5-ext": "^0.10.35", + "es6-symbol": "^3.1.1" + } + }, + "es6-symbol": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz", + "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==", + "requires": { + "d": "^1.0.1", + "ext": "^1.1.2" + } + }, "escalade": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", @@ -6076,6 +6212,21 @@ } } }, + "ext": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/ext/-/ext-1.6.0.tgz", + "integrity": "sha512-sdBImtzkq2HpkdRLtlLWDa6w4DX22ijZLKx8BMPUuKe1c5lbN6xwQDQCxSfxBQnHZ13ls/FH0MQZx/q/gr6FQg==", + "requires": { + "type": "^2.5.0" + }, + "dependencies": { + "type": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/type/-/type-2.6.0.tgz", + "integrity": "sha512-eiDBDOmkih5pMbo9OqsqPRGMljLodLcwd5XD5JbtNB0o89xZAwynY9EdCDsJU7LtcVCClu9DvM7/0Ep1hYX3EQ==" + } + } + }, "fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -8727,6 +8878,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, + "lodash.clonedeep": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", + "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=" + }, "lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -9009,6 +9165,11 @@ "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz", "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==" }, + "next-tick": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz", + "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==" + }, "no-case": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", @@ -9025,11 +9186,45 @@ } } }, + "node-fetch": { + "version": "2.6.7", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz", + "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==", + "requires": { + "whatwg-url": "^5.0.0" + }, + "dependencies": { + "tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=" + }, + "webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=" + }, + "whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=", + "requires": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + } + } + }, "node-forge": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.0.tgz", "integrity": "sha512-08ARB91bUi6zNKzVmaj3QO7cr397uiDT2nJ63cHjyNtCTWIgvS47j3eT0WfzUwS9+6Z5YshRaoasFkXCKrIYbA==" }, + "node-gyp-build": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.3.0.tgz", + "integrity": "sha512-iWjXZvmboq0ja1pUGULQBexmxq8CV4xBhX7VDOTbL7ZR4FOowwY/VOtRxBN/yKxmdGoIp4j5ysNT4u3S2pDQ3Q==" + }, "node-int64": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz", @@ -10339,6 +10534,11 @@ "whatwg-fetch": "^3.6.2" } }, + "react-chartjs-2": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.0.1.tgz", + "integrity": "sha512-q8bgWzKoFvBvD7YcjT/hXG8jt55TaMAuJ1dmI3tKFJ7CijUWYz4pIfOhkTI6PBTwqu/pmeWsClBRd/7HiWzN1g==" + }, "react-clientside-effect": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.5.tgz", @@ -11808,6 +12008,11 @@ "tslib": "^1.8.1" } }, + "type": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz", + "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==" + }, "type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", @@ -11928,6 +12133,14 @@ "tslib": "^1.9.3" } }, + "utf-8-validate": { + "version": "5.0.9", + "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.9.tgz", + "integrity": "sha512-Yek7dAy0v3Kl0orwMlvi7TPtiCNrdfHNd7Gcc/pLq4BLXqfAmd0J7OWMizUQnTTJsyjKn02mU7anqwfmUP4J8Q==", + "requires": { + "node-gyp-build": "^4.3.0" + } + }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -12263,6 +12476,34 @@ "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz", "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==" }, + "websocket": { + "version": "1.0.34", + "resolved": "https://registry.npmjs.org/websocket/-/websocket-1.0.34.tgz", + "integrity": "sha512-PRDso2sGwF6kM75QykIesBijKSVceR6jL2G8NGYyq2XrItNC2P5/qL5XeR056GhA+Ly7JMFvJb9I312mJfmqnQ==", + "requires": { + "bufferutil": "^4.0.1", + "debug": "^2.2.0", + "es5-ext": "^0.10.50", + "typedarray-to-buffer": "^3.1.5", + "utf-8-validate": "^5.0.2", + "yaeti": "^0.0.6" + }, + "dependencies": { + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "requires": { + "ms": "2.0.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + } + } + }, "websocket-driver": { "version": "0.7.4", "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz", @@ -12665,6 +12906,11 @@ "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==" }, + "yaeti": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/yaeti/-/yaeti-0.0.6.tgz", + "integrity": "sha1-8m9ITXJoTPQr7ft2lwqhYI+/lXc=" + }, "yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", diff --git a/package.json b/package.json index 1701bf5..4df062d 100644 --- a/package.json +++ b/package.json @@ -6,12 +6,15 @@ "@chakra-ui/react": "^1.8.6", "@emotion/react": "^11.8.2", "@emotion/styled": "^11.8.1", + "@supabase/supabase-js": "^1.32.1", "@testing-library/jest-dom": "^5.16.3", "@testing-library/react": "^10.4.9", "@testing-library/user-event": "^12.8.3", "axios": "^0.26.1", + "chart.js": "^3.7.1", "framer-motion": "^4.1.17", "react": "^17.0.2", + "react-chartjs-2": "^4.0.1", "react-dom": "^17.0.2", "react-icons": "^3.11.0", "react-router": "^6.2.2", diff --git a/src/App.js b/src/App.js index 60d6d3e..51bc7ac 100644 --- a/src/App.js +++ b/src/App.js @@ -1,61 +1,16 @@ import React from 'react'; -import { - ChakraProvider, - Box, - Text, - Link, - VStack, - Grid, - theme, - FormControl, - Input, - FormHelperText, - FormLabel, - Button, -} from '@chakra-ui/react'; -import { useEffect, useState, useRef } from 'react'; import { ColorModeSwitcher } from './ColorModeSwitcher'; +import { useEffect, useState, useRef } from 'react'; import axios from 'axios'; +import Splash from './components/splash'; +import Patient from './components/home-patient'; +import { Container } from '@chakra-ui/react'; function App() { - const [data, setData] = useState(''); - // useEffect(() => {}, []); - - const add = async e => { - e.preventDefault(); - console.log('done'); - - const response = await axios.post(' http://localhost:3000/products', { - request: data, - }); - console.log(response); - }; - return ( - - - - - -
- Email address - setData(e.target.value)} /> - We'll never share your email. - -
- - Learn Chakra - - - - - + + ; + ); } From b9513f0be6ea374be0e49c55c5f0dd9b9aa30b55 Mon Sep 17 00:00:00 2001 From: rafaucoin <88778777+rafaucoin@users.noreply.github.com> Date: Sat, 26 Mar 2022 00:28:24 +0100 Subject: [PATCH 3/6] improved-patient-data --- package.json | 1 + src/components/home-patient/Chart.jsx | 145 ++++++++++---------- src/components/home-patient/Vaccination.jsx | 40 +++--- src/components/home-patient/index.jsx | 2 +- 4 files changed, 94 insertions(+), 94 deletions(-) diff --git a/package.json b/package.json index e3c6d0a..bb59f5f 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "react-icons": "^3.11.0", "react-router": "^6.2.2", "react-scripts": "^2.1.3", + "test-react-chartjs-2": "^3.0.4", "web-vitals": "^0.2.4" }, "scripts": { diff --git a/src/components/home-patient/Chart.jsx b/src/components/home-patient/Chart.jsx index f15aef4..952191a 100644 --- a/src/components/home-patient/Chart.jsx +++ b/src/components/home-patient/Chart.jsx @@ -1,87 +1,86 @@ -import { Line } from 'react-chartjs-2'; -import { - Chart as ChartJS, - CategoryScale, - LinearScale, - PointElement, - LineElement, - Title, - Tooltip, - Legend, -} from 'chart.js'; - -ChartJS.register( - CategoryScale, - LinearScale, - PointElement, - LineElement, - Title, - Tooltip, - Legend -); -const data = { - labels: [ - 'Jan', - 'Feb', - 'Mar', - 'Apr', - 'May', - 'Jun', - 'Jul', - 'Aug', - 'Sep', - 'Oct', - 'Nov', - 'Dec', - ], - datasets: [ - { - label: 'My Balance', - fill: false, - lineTension: 0.5, - backgroundColor: '#db86b2', - borderColor: '#B57295', - borderCapStyle: 'butt', - borderDashOffset: 0.0, - borderJoinStyle: '#B57295', - pointBorderColor: '#B57295', - pointBackgroundColor: '#fff', - pointBorderWidth: 1, - pointHoverRadius: 5, - pointHoverBackgroundColor: '#B57295', - pointHoverBorderColor: '#B57295', - pointHoverBorderWidth: 2, - pointRadius: 1, - pointHitRadius: 10, - data: [500, 300, 400, 800, 650, 700, 690, 1200, 1050, 1300], - }, - ], -}; +import { Bar, Chart } from 'test-react-chartjs-2'; +import * as zoom from 'chartjs-plugin-zoom'; +import { useEffect, useState } from 'react'; +const labels = [0.75, 1.25, 1.75, 2.25]; +const data = [1, 2, 3, 4]; const options = { - maintainAspectRatio: true, + pan: { + enabled: true, + mode: 'xy', + }, + zoom: { + enabled: true, + drag: false, + mode: 'xy', + }, scales: { x: { - grid: { - display: true, + type: 'linear', + offset: false, + gridLines: { + offsetGridLines: false, }, - }, - y: { - grid: { - borderDash: [3, 3], + title: { + display: true, + text: 'Arrivals per minute', }, - // beginAtZero: true, // this works }, }, + plugins: { - legend: { - display: false, + beforeInit: function (chart, args, options) { + console.log('called'); + }, + afterDatasetDraw: () => { + console.log('called'); }, }, }; -const Chart = () => ( - -); +export default function Chart() { + const [value, setValue] = useState(0); + useEffect(() => { + Chart.register(zoom); + }, []); + + return ( +
+ { + console.log('called'); + }, + }, + ]} + /> -export default Chart; + +
+ ); +} diff --git a/src/components/home-patient/Vaccination.jsx b/src/components/home-patient/Vaccination.jsx index c1a9580..3396b92 100644 --- a/src/components/home-patient/Vaccination.jsx +++ b/src/components/home-patient/Vaccination.jsx @@ -10,6 +10,7 @@ import { Tbody, Td, Tfoot, + Text, } from '@chakra-ui/react'; import React from 'react'; import { GrAdd } from 'react-icons/gr'; @@ -18,7 +19,7 @@ function Vaccination() { return ( - Vaccination + Vaccination - + <> + + Temperature + + + + ); -} +}; + +export default Chart; From debdc4337fa64e6e98811c9aab315fed17e1c566 Mon Sep 17 00:00:00 2001 From: rafaucoin <88778777+rafaucoin@users.noreply.github.com> Date: Sat, 26 Mar 2022 04:27:57 +0100 Subject: [PATCH 6/6] Patient page --- src/components/home-patient/Chart.jsx | 17 ++++++++++--- src/components/home-patient/index.jsx | 7 ++++-- src/components/shared/NavBar.jsx | 35 ++++++++++++++++++++++----- 3 files changed, 48 insertions(+), 11 deletions(-) diff --git a/src/components/home-patient/Chart.jsx b/src/components/home-patient/Chart.jsx index 2f44e3d..6b960e2 100644 --- a/src/components/home-patient/Chart.jsx +++ b/src/components/home-patient/Chart.jsx @@ -11,7 +11,7 @@ import { Tooltip, Legend, } from 'chart.js'; -import { Button, Heading, HStack } from '@chakra-ui/react'; +import { Box, Button, Flex, Heading, HStack, Text } from '@chakra-ui/react'; ChartJS.register( CategoryScale, @@ -83,11 +83,11 @@ const options = { }, }; -const Chart = () => { +const Chart = ({ indicator }) => { return ( <> - Temperature + {indicator} + + Sort by: + + + day + + week + + month + + ); diff --git a/src/components/home-patient/index.jsx b/src/components/home-patient/index.jsx index 202c178..cc336d1 100644 --- a/src/components/home-patient/index.jsx +++ b/src/components/home-patient/index.jsx @@ -14,15 +14,18 @@ const Patient = () => { display="flex" flexDirection="column" my={3} - height="100vh" + gap={5} mb="7vh" borderRadius="xl" > - + + + + ); diff --git a/src/components/shared/NavBar.jsx b/src/components/shared/NavBar.jsx index f84d266..3086474 100644 --- a/src/components/shared/NavBar.jsx +++ b/src/components/shared/NavBar.jsx @@ -1,4 +1,12 @@ -import { HStack, IconButton } from '@chakra-ui/react'; +import { + HStack, + IconButton, + Menu, + MenuButton, + MenuItem, + MenuList, + Button, +} from '@chakra-ui/react'; import React from 'react'; import { BiHome, @@ -23,11 +31,26 @@ function NavBar() { } /> } /> } /> - } - /> + + + } + > + + Profile Settings + + Add Doctors + Add Clinics + Doctors List + Clinics list + Messages + + ); }