From c3fe093f5f7f5467e407674b4b3e61afb34301a1 Mon Sep 17 00:00:00 2001 From: hyojin Date: Mon, 11 Sep 2023 17:40:47 +0900 Subject: [PATCH] =?UTF-8?q?Feat:=20gseps=20=ED=99=94=EB=A9=B4=20=EC=9E=91?= =?UTF-8?q?=EC=97=85=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 1 + next.config.js | 12 ++ package-lock.json | 74 +++++++++++ package.json | 8 ++ public/logo.png | Bin 0 -> 10304 bytes src/api/dashboard/resultApi.ts | 12 ++ src/app/dashboard/components/BarChart.tsx | 49 ++++++++ src/app/dashboard/components/Dashboard.tsx | 80 ++++++++++++ src/app/dashboard/components/LineChart.tsx | 99 +++++++++++++++ src/app/dashboard/components/RecentResult.tsx | 26 ++++ src/app/dashboard/components/Result.tsx | 41 ++++++ src/app/dashboard/constants/index.ts | 29 +++++ src/app/dashboard/hooks/useDashboard.1.tsx | 31 +++++ src/app/dashboard/hooks/useDashboard.tsx | 27 ++++ src/app/dashboard/layout.tsx | 7 ++ src/app/dashboard/page.tsx | 8 ++ src/app/dashboard/types/index.ts | 12 ++ src/app/page.tsx | 118 ++---------------- src/components/Layout/Layout.tsx | 6 +- src/hooks/useSilentAuth.tsx | 2 +- 20 files changed, 530 insertions(+), 112 deletions(-) create mode 100644 .env create mode 100644 public/logo.png create mode 100644 src/api/dashboard/resultApi.ts create mode 100644 src/app/dashboard/components/BarChart.tsx create mode 100644 src/app/dashboard/components/Dashboard.tsx create mode 100644 src/app/dashboard/components/LineChart.tsx create mode 100644 src/app/dashboard/components/RecentResult.tsx create mode 100644 src/app/dashboard/components/Result.tsx create mode 100644 src/app/dashboard/constants/index.ts create mode 100644 src/app/dashboard/hooks/useDashboard.1.tsx create mode 100644 src/app/dashboard/hooks/useDashboard.tsx create mode 100644 src/app/dashboard/layout.tsx create mode 100644 src/app/dashboard/page.tsx create mode 100644 src/app/dashboard/types/index.ts diff --git a/.env b/.env new file mode 100644 index 0000000..196445d --- /dev/null +++ b/.env @@ -0,0 +1 @@ +NEXT_PUBLIC_BASE_API_URL="http://13.209.39.139:32171" \ No newline at end of file diff --git a/next.config.js b/next.config.js index 7b09dd4..17a24ae 100644 --- a/next.config.js +++ b/next.config.js @@ -1,5 +1,17 @@ /** @type {import('next').NextConfig} */ const nextConfig = { + reactStrictMode: true, + images: { + domains: ['13.209.39.139'], + // remotePatterns: [ + // { + // protocol: 'http', + // hostname: '13.209.39.139', + // port: '31192', + // pathname: '/api/v1/buckets/gseps-test-a/objects/**', + // }, + // ], + }, compiler: { styledComponents: true, }, diff --git a/package-lock.json b/package-lock.json index ef131e2..2c9d73b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,11 +8,19 @@ "name": "front-boilerplate", "version": "0.0.1", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.4.2", + "@fortawesome/free-regular-svg-icons": "^6.4.2", + "@fortawesome/free-solid-svg-icons": "^6.4.2", + "@fortawesome/react-fontawesome": "^0.2.0", + "@nivo/bar": "^0.83.0", + "@nivo/core": "^0.83.0", + "@nivo/line": "^0.83.0", "@sdt/sdt-ui-kit": "^0.1.20", "@tanstack/react-query": "^4.33.0", "autoprefixer": "10.4.15", "axios": "^1.4.0", "cookies-next": "^3.0.0", + "date-fns": "^2.30.0", "eslint": "8.47.0", "eslint-config-next": "13.4.19", "lodash": "^4.17.21", @@ -2817,6 +2825,29 @@ "react": ">= 16.14.0 < 19.0.0" } }, + "node_modules/@nivo/bar": { + "version": "0.83.0", + "resolved": "https://registry.npmjs.org/@nivo/bar/-/bar-0.83.0.tgz", + "integrity": "sha512-QXN6BcT1PiT/YViyoDU4G5mytbOUP1jYbuQmJhDDxKPMLNcZ/pHfThedRGVfDoD1poHBRJtV6mbgeCpAVmlTtw==", + "dependencies": { + "@nivo/annotations": "0.83.0", + "@nivo/axes": "0.83.0", + "@nivo/colors": "0.83.0", + "@nivo/core": "0.83.0", + "@nivo/legends": "0.83.0", + "@nivo/scales": "0.83.0", + "@nivo/tooltip": "0.83.0", + "@react-spring/web": "9.4.5 || ^9.7.2", + "@types/d3-scale": "^3.2.3", + "@types/d3-shape": "^2.0.0", + "d3-scale": "^3.2.3", + "d3-shape": "^1.3.5", + "lodash": "^4.17.21" + }, + "peerDependencies": { + "react": ">= 16.14.0 < 19.0.0" + } + }, "node_modules/@nivo/colors": { "version": "0.83.0", "resolved": "https://registry.npmjs.org/@nivo/colors/-/colors-0.83.0.tgz", @@ -4503,6 +4534,21 @@ "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==", "dev": true }, + "node_modules/date-fns": { + "version": "2.30.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", + "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", + "dependencies": { + "@babel/runtime": "^7.21.0" + }, + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -10500,6 +10546,26 @@ "prop-types": "^15.7.2" } }, + "@nivo/bar": { + "version": "0.83.0", + "resolved": "https://registry.npmjs.org/@nivo/bar/-/bar-0.83.0.tgz", + "integrity": "sha512-QXN6BcT1PiT/YViyoDU4G5mytbOUP1jYbuQmJhDDxKPMLNcZ/pHfThedRGVfDoD1poHBRJtV6mbgeCpAVmlTtw==", + "requires": { + "@nivo/annotations": "0.83.0", + "@nivo/axes": "0.83.0", + "@nivo/colors": "0.83.0", + "@nivo/core": "0.83.0", + "@nivo/legends": "0.83.0", + "@nivo/scales": "0.83.0", + "@nivo/tooltip": "0.83.0", + "@react-spring/web": "9.4.5 || ^9.7.2", + "@types/d3-scale": "^3.2.3", + "@types/d3-shape": "^2.0.0", + "d3-scale": "^3.2.3", + "d3-shape": "^1.3.5", + "lodash": "^4.17.21" + } + }, "@nivo/colors": { "version": "0.83.0", "resolved": "https://registry.npmjs.org/@nivo/colors/-/colors-0.83.0.tgz", @@ -11761,6 +11827,14 @@ "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==", "dev": true }, + "date-fns": { + "version": "2.30.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", + "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", + "requires": { + "@babel/runtime": "^7.21.0" + } + }, "debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", diff --git a/package.json b/package.json index 26558ae..79bd884 100644 --- a/package.json +++ b/package.json @@ -9,11 +9,19 @@ "lint": "next lint" }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.4.2", + "@fortawesome/free-regular-svg-icons": "^6.4.2", + "@fortawesome/free-solid-svg-icons": "^6.4.2", + "@fortawesome/react-fontawesome": "^0.2.0", + "@nivo/bar": "^0.83.0", + "@nivo/core": "^0.83.0", + "@nivo/line": "^0.83.0", "@sdt/sdt-ui-kit": "^0.1.20", "@tanstack/react-query": "^4.33.0", "autoprefixer": "10.4.15", "axios": "^1.4.0", "cookies-next": "^3.0.0", + "date-fns": "^2.30.0", "eslint": "8.47.0", "eslint-config-next": "13.4.19", "lodash": "^4.17.21", diff --git a/public/logo.png b/public/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..f559c92da8f444f26521f21b5be4574716ca0b83 GIT binary patch literal 10304 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 A&Hw-a literal 0 HcmV?d00001 diff --git a/src/api/dashboard/resultApi.ts b/src/api/dashboard/resultApi.ts new file mode 100644 index 0000000..85517e6 --- /dev/null +++ b/src/api/dashboard/resultApi.ts @@ -0,0 +1,12 @@ +import { ResultDataType } from '@/app/dashboard/types'; +import { afterAxios, fetchApi } from '../config'; + +export interface GetResultApiRequestType {} + +export type GetResultApiResponseType = ResultDataType; + +export const getResultApi = (): Promise => + fetchApi({ + url: 'blokworks/v1/transport/inference/results', + method: 'GET', + }).then(afterAxios); diff --git a/src/app/dashboard/components/BarChart.tsx b/src/app/dashboard/components/BarChart.tsx new file mode 100644 index 0000000..703f269 --- /dev/null +++ b/src/app/dashboard/components/BarChart.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { ResponsiveBar } from '@nivo/bar'; + +function BarChart({ data }: any) { + return ( +
+ + e.id + ': ' + e.formattedValue + ' in country: ' + e.indexValue + } + /> +
+ ); +} + +export default BarChart; diff --git a/src/app/dashboard/components/Dashboard.tsx b/src/app/dashboard/components/Dashboard.tsx new file mode 100644 index 0000000..5b0b224 --- /dev/null +++ b/src/app/dashboard/components/Dashboard.tsx @@ -0,0 +1,80 @@ +'use client'; + +import React from 'react'; +import BarChart from './BarChart'; +import { format } from 'date-fns'; +import Image from 'next/image'; +import useDashboard from '../hooks/useDashboard'; +import { Button } from '@sdt/sdt-ui-kit'; +import { useQueryClient } from '@tanstack/react-query'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faArrowsRotate } from '@fortawesome/free-solid-svg-icons'; + +function Dashboard() { + const { getResult, convertChartData } = useDashboard(); + const queryClient = useQueryClient(); + + return ( +
+
+ logo +
+
+ {getResult.data && ( + <> +
+

Input Image

+
+ origin image +
+

+ Inference Result Image +

+
+ inference image +
+
+
+
+ 촬영일시 :{' '} + {format( + getResult.data?.latest.timestamp, + 'yyyy-MM-dd HH:mm:ss', + )} + +
+ + +
+ + )} +
+
+ Copyright 2023 SDT Inc. All rights reserved. +
+
+ ); +} + +export default Dashboard; diff --git a/src/app/dashboard/components/LineChart.tsx b/src/app/dashboard/components/LineChart.tsx new file mode 100644 index 0000000..8f397f1 --- /dev/null +++ b/src/app/dashboard/components/LineChart.tsx @@ -0,0 +1,99 @@ +import React from 'react'; +import { ResponsiveLine } from '@nivo/line'; + +function LineChart({ data }: any) { + return ( +
+
+ + + {/* */} +
+
+ ); +} + +export default LineChart; diff --git a/src/app/dashboard/components/RecentResult.tsx b/src/app/dashboard/components/RecentResult.tsx new file mode 100644 index 0000000..90618a3 --- /dev/null +++ b/src/app/dashboard/components/RecentResult.tsx @@ -0,0 +1,26 @@ +'use client'; + +import React from 'react'; +import BarChart from './BarChart'; +import { DUMMY_DATA } from '../constants'; +import { format } from 'date-fns'; + +function RecentResult() { + return ( +
+
image
+ + +
+
+
촬영일시
+
+ {format(DUMMY_DATA.latest.timestamp, 'yyyy-MM-dd HH:mm:ss')} +
+
+
+
+ ); +} + +export default RecentResult; diff --git a/src/app/dashboard/components/Result.tsx b/src/app/dashboard/components/Result.tsx new file mode 100644 index 0000000..631e62c --- /dev/null +++ b/src/app/dashboard/components/Result.tsx @@ -0,0 +1,41 @@ +'use client'; + +import React, { useEffect, useState } from 'react'; +import LineChart from './LineChart'; +import { Button, TextInput } from '@sdt/sdt-ui-kit'; + +function Result() { + const [line, setLine] = useState([]); + + const chartData = [...Array(1000)].map((v, i) => ({ + x: i, + y: Math.floor(Math.random() * 100), + })); + const data = [ + { + id: 'korea', + color: 'rgb(217, 38, 107)', + data: chartData, + }, + ]; + + // useEffect(() => { + // setTimeout(() => { + // setLine(chartData); + // }, 3000); + // }, [chartData]); + + return ( +
+
+ 입자의 크기 + + +
+ + +
+ ); +} + +export default Result; diff --git a/src/app/dashboard/constants/index.ts b/src/app/dashboard/constants/index.ts new file mode 100644 index 0000000..23095a4 --- /dev/null +++ b/src/app/dashboard/constants/index.ts @@ -0,0 +1,29 @@ +export const DUMMY_DATA = { + latest: { + imageUrl: + 'http://13.209.39.139:31192/api/v1/buckets/gseps-test-a/objects/download?prefix=MjAyMzA5MDctMTEyNzU2LmpwZw==&version_id=null', + timestamp: 1694073245526, + particleSizeRatio: [ + { + range: 186, + count: 1, + }, + { + range: 102.5, + count: 1, + }, + { + range: 79.5, + count: 8, + }, + { + range: 313.5, + count: 1, + }, + { + range: 146.5, + count: 1, + }, + ], + }, +}; diff --git a/src/app/dashboard/hooks/useDashboard.1.tsx b/src/app/dashboard/hooks/useDashboard.1.tsx new file mode 100644 index 0000000..95aa2fd --- /dev/null +++ b/src/app/dashboard/hooks/useDashboard.1.tsx @@ -0,0 +1,31 @@ +import { useMemo } from 'react'; +import { getResultApi } from '@/api/dashboard/resultApi'; +import { useQuery } from '@tanstack/react-query'; + +export function useDashboard() { + const getResult = useQuery(['result'], () => getResultApi()); + + const [resultData, setPieData] = useState([]); + + useEffect(() => { + setTimeout(() => { + setPieData(PIECHART_DUMMY); + }, 10); + }, []); + + /** + * bar chart convert data + */ + const convertChartData = useMemo(() => { + const data = getResult.data?.latest.particleSizeRatio?.map((result, i) => { + return { + range: Number(result.range).toFixed(2), + count: result.count, + }; + }); + + return data; + }, [getResult.data]); + + return { getResult, convertChartData }; +} diff --git a/src/app/dashboard/hooks/useDashboard.tsx b/src/app/dashboard/hooks/useDashboard.tsx new file mode 100644 index 0000000..73e4da9 --- /dev/null +++ b/src/app/dashboard/hooks/useDashboard.tsx @@ -0,0 +1,27 @@ +import React, { useMemo } from 'react'; +import { getResultApi } from '@/api/dashboard/resultApi'; +import { useQuery } from '@tanstack/react-query'; + +function useDashboard() { + const getResult = useQuery(['result'], () => getResultApi(), { + refetchOnWindowFocus: false, + }); + + /** + * bar chart convert data + */ + const convertChartData = useMemo(() => { + const data = getResult.data?.latest.particleSizeRatio?.map((result, i) => { + return { + range: Number(result.range).toFixed(2), + count: result.count, + }; + }); + + return data; + }, [getResult.data]); + + return { getResult, convertChartData }; +} + +export default useDashboard; diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx new file mode 100644 index 0000000..673bf76 --- /dev/null +++ b/src/app/dashboard/layout.tsx @@ -0,0 +1,7 @@ +export default function LoginLayout({ + children, +}: { + children: React.ReactNode; +}) { + return <>{children}; +} diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx new file mode 100644 index 0000000..1de0357 --- /dev/null +++ b/src/app/dashboard/page.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import Dashboard from './components/Dashboard'; + +function LoginPage() { + return ; +} + +export default LoginPage; diff --git a/src/app/dashboard/types/index.ts b/src/app/dashboard/types/index.ts new file mode 100644 index 0000000..8aaf8d5 --- /dev/null +++ b/src/app/dashboard/types/index.ts @@ -0,0 +1,12 @@ +import { StaticImageData } from 'next/image'; + +export interface ResultDataType { + origin: { + imageUrl: StaticImageData; + }; + latest: { + imageUrl: StaticImageData; + timestamp: number; + particleSizeRatio: { range: string; count: number }[]; + }; +} diff --git a/src/app/page.tsx b/src/app/page.tsx index aa942ce..ffc24d1 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,113 +1,15 @@ -import Image from 'next/image'; +'use client'; + +import React, { useEffect } from 'react'; +import { useRouter } from 'next/navigation'; export default function Home() { - return ( -
-
-

- Get started by editing  - src/app/page.tsx -

- -
+ const router = useRouter(); + const targetRoutePath = '/dashboard'; -
- Next.js Logo -
+ useEffect(() => { + router.push(targetRoutePath); + }, [router]); - -
- ); + return
; } diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx index 65bc123..7fe42e6 100644 --- a/src/components/Layout/Layout.tsx +++ b/src/components/Layout/Layout.tsx @@ -9,9 +9,9 @@ export default function Layout({ children }: { children: React.ReactNode }) { useSilentAuth(); return ( -
-
-
{children}
+
+
+
{children}