diff --git a/package.json b/package.json index c30b758f..b500f51c 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,8 @@ "@types/node": "18.13.0", "@types/react": "18.0.27", "@types/react-dom": "18.0.10", + "chart.js": "^4.2.1", + "clsx": "^1.2.1", "daisyui": "^2.50.0", "eslint": "8.33.0", "eslint-config-next": "13.1.6", @@ -22,6 +24,7 @@ "lodash": "^4.17.21", "next": "13.1.6", "react": "18.2.0", + "react-chartjs-2": "^5.2.0", "react-dom": "18.2.0", "typescript": "4.9.5" }, diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx new file mode 100644 index 00000000..c2e9ac81 --- /dev/null +++ b/src/components/Navbar.tsx @@ -0,0 +1,36 @@ +/* eslint-disable @next/next/no-img-element */ +export default function Navbar() { + return ( +
+
+ IELTS GPT +
+
+
+ +
+
+ + +
+
+
+ ); +} diff --git a/src/components/UserResultChart.tsx b/src/components/UserResultChart.tsx new file mode 100644 index 00000000..bec30924 --- /dev/null +++ b/src/components/UserResultChart.tsx @@ -0,0 +1,36 @@ +import {Module} from "@/interfaces"; +import {UserResults} from "@/interfaces/results"; +import {moduleLabels} from "@/utils/moduleUtils"; +import {Chart as ChartJS, RadialLinearScale, ArcElement, Tooltip, Legend} from "chart.js"; +import clsx from "clsx"; +import {PolarArea} from "react-chartjs-2"; + +interface Props { + results: UserResults; + resultKey: "score" | "total"; + label: string; + className?: string; +} + +ChartJS.register(RadialLinearScale, ArcElement, Tooltip, Legend); + +export default function UserResultChart({results, resultKey, label, className = ""}: Props) { + const labels = Object.keys(results).map((key) => moduleLabels[key as Module]); + const data = { + labels, + datasets: [ + { + label, + data: Object.keys(results).map((module) => results[module as Module][resultKey]), + backgroundColor: ["rgba(255, 99, 132, 0.5)", "rgba(54, 162, 235, 0.5)", "rgba(255, 206, 86, 0.5)", "rgba(75, 192, 192, 0.5)"], + }, + ], + }; + + return ( +
+ +

{label}

+
+ ); +} diff --git a/src/demo/user_results.json b/src/demo/user_results.json new file mode 100644 index 00000000..0c1c70b8 --- /dev/null +++ b/src/demo/user_results.json @@ -0,0 +1,18 @@ +{ + "reading": { + "total": 12, + "score": 75 + }, + "listening": { + "total": 14, + "score": 85 + }, + "writing": { + "total": 4, + "score": 60 + }, + "speaking": { + "total": 3, + "score": 91 + } +} \ No newline at end of file diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts new file mode 100644 index 00000000..1ee0d49c --- /dev/null +++ b/src/interfaces/index.ts @@ -0,0 +1 @@ +export type Module = "reading" | "listening" | "writing" | "speaking"; diff --git a/src/interfaces/results.ts b/src/interfaces/results.ts new file mode 100644 index 00000000..b7dc1e39 --- /dev/null +++ b/src/interfaces/results.ts @@ -0,0 +1,8 @@ +import {Module} from "@/interfaces"; + +export type UserResults = {[key in Module]: ModuleResult}; + +interface ModuleResult { + score: number; + total: number; +} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 2e91b0c8..204a03f3 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,123 +1,37 @@ -import Head from 'next/head' -import Image from 'next/image' -import { Inter } from '@next/font/google' -import styles from '@/styles/Home.module.css' +import Head from "next/head"; +import Image from "next/image"; +import {Inter} from "@next/font/google"; +import styles from "@/styles/Home.module.css"; +import UserResultChart from "@/components/UserResultChart"; +import JSON_RESULTS from "@/demo/user_results.json"; +import Navbar from "@/components/Navbar"; +import Icon from "@mdi/react"; +import {mdiPlus} from "@mdi/js"; -const inter = Inter({ subsets: ['latin'] }) +const inter = Inter({subsets: ["latin"]}); export default function Home() { - return ( - <> - - Create Next App - - - - -
-
-

- Get started by editing  - src/pages/index.tsx -

-
- - By{' '} - Vercel Logo - -
-
- -
- Next.js Logo -
- 13 -
-
- -
- -

- Docs -> -

-

- Find in-depth information about Next.js features and API. -

- - - -

- Learn -> -

-

- Learn about Next.js in an interactive course with quizzes! -

- - - -

- Templates -> -

-

- Discover and deploy boilerplate example Next.js projects. -

- - - -

- Deploy -> -

-

- Instantly deploy your Next.js site to a shareable URL - with Vercel. -

- -
-
- - ) + return ( + <> + + Create Next App + + + + +
+ +
+ +
+ + +
+
+
+ + ); } diff --git a/src/utils/moduleUtils.ts b/src/utils/moduleUtils.ts new file mode 100644 index 00000000..8414464a --- /dev/null +++ b/src/utils/moduleUtils.ts @@ -0,0 +1,8 @@ +import {Module} from "@/interfaces"; + +export const moduleLabels: {[key in Module]: string} = { + listening: "Listening", + reading: "Reading", + speaking: "Speaking", + writing: "Writing", +}; diff --git a/yarn.lock b/yarn.lock index d6b4c4b8..fcfcea02 100644 --- a/yarn.lock +++ b/yarn.lock @@ -55,6 +55,11 @@ resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45" integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA== +"@kurkle/color@^0.3.0": + version "0.3.2" + resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f" + integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw== + "@mdi/js@^7.1.96": version "7.1.96" resolved "https://registry.yarnpkg.com/@mdi/js/-/js-7.1.96.tgz#9c5a7f8a20ea63c03b09a0dba1768fe8b70eeaf9" @@ -555,6 +560,13 @@ chalk@^4.0.0: ansi-styles "^4.1.0" supports-color "^7.1.0" +chart.js@^4.2.1: + version "4.2.1" + resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.2.1.tgz#d2bd5c98e9a0ae35408975b638f40513b067ba1d" + integrity sha512-6YbpQ0nt3NovAgOzbkSSeeAQu/3za1319dPUQTXn9WcOpywM8rGKxJHrhS8V8xEkAlk8YhEfjbuAPfUyp6jIsw== + dependencies: + "@kurkle/color" "^0.3.0" + chokidar@^3.5.3: version "3.5.3" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd" @@ -575,6 +587,11 @@ client-only@0.0.1: resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1" integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA== +clsx@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" + integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== + color-convert@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3" @@ -2034,6 +2051,11 @@ quick-lru@^5.1.1: resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932" integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA== +react-chartjs-2@^5.2.0: + version "5.2.0" + resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz#43c1e3549071c00a1a083ecbd26c1ad34d385f5d" + integrity sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA== + react-dom@18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"