Merge pull request #274 from boostcampwm2023/develop

[Deploy] week5 목요일 배포

packages/admin/package.json

@@ -12,7 +12,9 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "chart.js": "^4.4.1",
     "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.20.1"
   },

packages/admin/src/App.tsx

@@ -1,22 +1,28 @@
-import { Route, Routes } from 'react-router-dom';
+import { Link, Route, Routes } from 'react-router-dom';
 import './App.css';
 
 import Board from './components/Board/Board.tsx';
 import Nav from './components/Nav.tsx';
 import SystemInfo from './components/SystemInfo/SystemInfo.tsx';
+import ExceptionStatistics from './components/ExceptionStatistics/ExceptionStatistics.tsx';
 
 function App() {
 	return (
 		<>
 			<Nav>
-				<a href="/admin">Home</a>
-				<a href="/admin/board">Board</a>
-				<a href="/admin/system-info">System Info</a>
+				<Link to={'/admin'}>Home</Link>
+				<Link to={'/admin/board'}>Board</Link>
+				<Link to={'/admin/system-info'}>System Info</Link>
+				<Link to={'/admin/exception-statistics'}>Exception Statistics</Link>
 			</Nav>
 			<Routes>
 				<Route path="/admin" element={<div>Home</div>} />
 				<Route path="/admin/board" element={<Board />} />
 				<Route path="/admin/system-info" element={<SystemInfo />} />
+				<Route
+					path="/admin/exception-statistics"
+					element={<ExceptionStatistics />}
+				/>
 			</Routes>
 		</>
 	);

packages/admin/src/components/ExceptionStatistics/ExceptionChart/ExceptionChart.styles.tsx

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+export const Select = styled.select`
+	margin-top: 20px;
+	margin-bottom: 20px;
+	padding: 5px;
+`;

packages/admin/src/components/ExceptionStatistics/ExceptionChart/ExceptionChart.tsx

@@ -0,0 +1,126 @@
+import { Exception, ExceptionConditions } from '../exception.interface.ts';
+import { Bar } from 'react-chartjs-2';
+import { CategoryScale } from 'chart.js';
+import Chart from 'chart.js/auto';
+import React, { useState } from 'react';
+import { Select } from './ExceptionChart.styles.tsx';
+Chart.register(CategoryScale);
+
+interface PropsType {
+	exceptionData: Exception[];
+	condition: ExceptionConditions;
+}
+
+export default function ExceptionChart({
+	exceptionData,
+	condition,
+}: PropsType) {
+	const filteredExceptionData = filter(exceptionData, condition);
+	const uniqueDate = getUniqueDate(filteredExceptionData);
+
+	const [option, setOption] = useState('path');
+
+	const handleChangeOption = (event: React.ChangeEvent<HTMLSelectElement>) => {
+		setOption(event.target.value);
+	};
+
+	return (
+		<div style={{ width: '1024px' }}>
+			<Select onChange={handleChangeOption}>
+				<option value="path">경로 기준으로 보기</option>
+				<option value="error">에러 기준으로 보기</option>
+			</Select>
+			<Bar
+				data={{
+					labels: uniqueDate,
+					datasets: getDatasets(filteredExceptionData, uniqueDate, option),
+				}}
+			/>
+		</div>
+	);
+}
+
+function filter(
+	exceptionData: Exception[],
+	condition: ExceptionConditions,
+): Exception[] {
+	const filterdData = exceptionData.filter((exception: Exception) => {
+		const { startDate, endDate } = condition;
+		const timestamp = new Date(exception.timestamp);
+		if (!startDate && !endDate) return true;
+		if (startDate && !endDate) return timestamp >= startDate;
+		if (!startDate && endDate) return timestamp <= endDate;
+		if (startDate && endDate)
+			return timestamp >= startDate && timestamp <= endDate;
+	});
+	return filterdData;
+}
+
+function getUniqueDate(exceptionData: Exception[]) {
+	const uniqueDate = new Set(
+		exceptionData.map((exception: Exception) => {
+			return exception.timestamp.toLocaleString().slice(0, 10);
+		}),
+	);
+	return [...uniqueDate];
+}
+
+function getDatasets(
+	exceptionData: Exception[],
+	uniqueDate: string[],
+	option: string,
+) {
+	if (option === 'path') {
+		const uniquePathList = new Set(
+			exceptionData.map((exception: Exception) => exception.path),
+		);
+		const datasets = [...uniquePathList].map((path: string) => {
+			const filteredData = uniqueDate.map((date: string) => {
+				return exceptionData.filter(
+					(exception: Exception) =>
+						exception.path === path &&
+						exception.timestamp.toLocaleString().slice(0, 10) === date,
+				);
+			});
+			const randomColor = getRandomColor();
+			return {
+				label: path,
+				data: filteredData.map((data: Exception[]) => data.length),
+				backgroundColor: randomColor,
+				borderColor: randomColor,
+				borderWidth: 1,
+			};
+		});
+		return datasets;
+	}
+
+	const uniqueErrorList = new Set(
+		exceptionData.map((exception: Exception) => exception.error),
+	);
+	const datasets = [...uniqueErrorList].map((error: string) => {
+		const filteredData = uniqueDate.map((date: string) => {
+			return exceptionData.filter(
+				(exception: Exception) =>
+					exception.error === error &&
+					exception.timestamp.toLocaleString().slice(0, 10) === date,
+			);
+		});
+		const randomColor = getRandomColor();
+		return {
+			label: error,
+			data: filteredData.map((data: Exception[]) => data.length),
+			backgroundColor: randomColor,
+			borderColor: randomColor,
+			borderWidth: 1,
+		};
+	});
+	return datasets;
+}
+
+function getRandomColor() {
+	const r = Math.floor(Math.random() * 256);
+	const g = Math.floor(Math.random() * 256);
+	const b = Math.floor(Math.random() * 256);
+
+	return `rgb(${r}, ${g}, ${b})`;
+}