feat: stats (#4)

Co-authored-by: Bhoopesh <bhoopesh459@gmail.com>
Co-authored-by: shubham-1806 <shub.agarwal2003@gmail.com>

docs/spec/CodeCharacter-API.yml

@@ -1570,8 +1570,44 @@ paths:
           description: Size of the page
     parameters: []
 
+  '/stats/':
+    get:
+      summary: Get all General Stats for current user and top user
+      tags:
+        - stats
+      responses:
+        '200':
+          description: OK
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  $ref: '#/components/schemas/UserMatchStats'
+      operationId: getStats
+      description: Gets all statistics for the current user
+    parameters: []
+
 components:
   schemas:
+    UserMatchStats:
+      title: UserMatchStats
+      type: object
+      description: User Match Stats model
+      properties:
+        avgAtk:
+          type: number
+          default: 0
+        dc_wins:
+          type: number
+          default: 0
+        coins:
+          type: number
+          default: 0
+      required:
+        - avgAtk
+        - dc_wins
+        - coins
     PasswordLoginRequest:
       title: PasswordLoginRequest
       type: object
@@ -2554,3 +2590,4 @@ tags:
   - name: match
   - name: notification
   - name: user
+  - name: stats

package.json

@@ -62,6 +62,7 @@
     "react-router-dom": "^6.6.1",
     "react-split-pane": "^0.1.92",
     "react-vertical-timeline-component": "^3.6.0",
+    "recharts": "^2.10.3",
     "redux": "^4.2.0",
     "redux-persist": "^6.0.0",
     "vscode-ws-jsonrpc": "^2.0.2",

packages/client/.openapi-generator/FILES

@@ -9,6 +9,7 @@ src/apis/MapApi.ts
 src/apis/MatchApi.ts
 src/apis/NotificationApi.ts
 src/apis/PvpGameApi.ts
+src/apis/StatsApi.ts
 src/apis/UserApi.ts
 src/apis/index.ts
 src/index.ts

packages/client/src/apis/StatsApi.ts

@@ -0,0 +1,91 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * CodeCharacter API
+ * Specification of the CodeCharacter API
+ *
+ * The version of the OpenAPI document: 2023.0.1
+ * Contact: delta@nitt.edu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+import * as runtime from '../runtime';
+import type { UserMatchStats } from '../models';
+
+/**
+ * StatsApi - interface
+ *
+ * @export
+ * @interface StatsApiInterface
+ */
+export interface StatsApiInterface {
+  /**
+   * Gets all statistics for the current user
+   * @summary Get all General Stats for current user and top user
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof StatsApiInterface
+   */
+  getStatsRaw(
+    initOverrides?: RequestInit | runtime.InitOverrideFunction,
+  ): Promise<runtime.ApiResponse<Array<UserMatchStats>>>;
+
+  /**
+   * Gets all statistics for the current user
+   * Get all General Stats for current user and top user
+   */
+  getStats(
+    initOverrides?: RequestInit | runtime.InitOverrideFunction,
+  ): Promise<Array<UserMatchStats>>;
+}
+
+/**
+ *
+ */
+export class StatsApi extends runtime.BaseAPI implements StatsApiInterface {
+  /**
+   * Gets all statistics for the current user
+   * Get all General Stats for current user and top user
+   */
+  async getStatsRaw(
+    initOverrides?: RequestInit | runtime.InitOverrideFunction,
+  ): Promise<runtime.ApiResponse<Array<UserMatchStats>>> {
+    const queryParameters: any = {};
+
+    const headerParameters: runtime.HTTPHeaders = {};
+
+    if (this.configuration && this.configuration.accessToken) {
+      const token = this.configuration.accessToken;
+      const tokenString = await token('http-bearer', []);
+
+      if (tokenString) {
+        headerParameters['Authorization'] = `Bearer ${tokenString}`;
+      }
+    }
+    const response = await this.request(
+      {
+        path: `/stats/`,
+        method: 'GET',
+        headers: headerParameters,
+        query: queryParameters,
+      },
+      initOverrides,
+    );
+
+    return new runtime.JSONApiResponse(response);
+  }
+
+  /**
+   * Gets all statistics for the current user
+   * Get all General Stats for current user and top user
+   */
+  async getStats(
+    initOverrides?: RequestInit | runtime.InitOverrideFunction,
+  ): Promise<Array<UserMatchStats>> {
+    const response = await this.getStatsRaw(initOverrides);
+    return await response.value();
+  }
+}

packages/client/src/apis/index.ts

@@ -10,4 +10,5 @@ export * from './MapApi';
 export * from './MatchApi';
 export * from './NotificationApi';
 export * from './PvpGameApi';
+export * from './StatsApi';
 export * from './UserApi';

packages/client/src/models/index.ts

@@ -1238,6 +1238,31 @@ export interface UpdatePasswordRequest {
    */
   passwordConfirmation: string;
 }
+/**
+ * User Match Stats model
+ * @export
+ * @interface UserMatchStats
+ */
+export interface UserMatchStats {
+  /**
+   *
+   * @type {number}
+   * @memberof UserMatchStats
+   */
+  avgAtk: number;
+  /**
+   *
+   * @type {number}
+   * @memberof UserMatchStats
+   */
+  dcWins: number;
+  /**
+   *
+   * @type {number}
+   * @memberof UserMatchStats
+   */
+  coins: number;
+}
 /**
  * User stats model
  * @export

src/AllRoutes.tsx

@@ -31,7 +31,7 @@ const IncompleteProfile = lazy(
     import('./components/Auth/Auth/Login/IncompleteProfile/incompeleteProfile'),
 );
 const Profile = lazy(() => import('./components/Profile/Profile'));
-
+const Statistics = lazy(() => import('./pages/Statistics/Statistics'));
 export default function AllRoutes(): JSX.Element {
   const dispatch = useAppDispatch();
   const logIn = useAppSelector(isloggedIn);
@@ -46,6 +46,7 @@ export default function AllRoutes(): JSX.Element {
     <Routes>
       <Route path="/" element={<Home />} />
       <Route path="/dashboard" element={<Dashboard />} />
+      <Route path="/statistics" element={<Statistics />} />
       <Route path="/mapdesigner" element={<MapDesignerPage />} />
       <Route path="/history" element={<CommitHistoryPage />} />
       <Route path="/leaderboard" element={<LeaderBoardPage />} />

src/components/GraphFooter/GraphSelector.module.css

@@ -0,0 +1,30 @@
+.title {
+    border: 1px solid #ffffff50 !important;
+    border-radius: 10px;
+    background: #ffffff05 !important;
+    font-size: 1rem;
+    box-shadow: none !important;
+    font-family: monospace !important;
+    align-self: end;
+}
+
+.footer {
+    background-color: #10101080 !important;
+    backdrop-filter: blur(30px);
+    color: white;
+    font-size: 3rem;
+    text-align: center;
+    border: 1px solid #ffffff50 !important;
+    font-family: monospace !important;
+}
+
+.button:hover {
+    background-color: transparent !important;
+    color: #ffffffa0;
+}
+
+.button {
+    color: white;
+    text-align: center;
+    font-size: 1rem;
+}

src/components/GraphFooter/GraphSelector.tsx

@@ -0,0 +1,31 @@
+import { ButtonGroup, Dropdown } from 'react-bootstrap';
+import styles from './GraphSelector.module.css';
+import DropdownMenu from 'react-bootstrap/esm/DropdownMenu';
+const GraphSelecter = ({ graph, selected, setSelected }: GraphFooterProps) => {
+  return (
+    <div>
+      <Dropdown as={ButtonGroup} drop="down-centered">
+        <Dropdown.Toggle className={styles.title}>
+          {graph[selected]}
+        </Dropdown.Toggle>
+        <DropdownMenu className={styles.footer}>
+          {[...graph].map((g, i) => {
+            return (
+              <Dropdown.Item
+                key={g}
+                value={i}
+                className={styles.button}
+                onClick={() => {
+                  setSelected(i);
+                }}
+              >
+                {g}
+              </Dropdown.Item>
+            );
+          })}
+        </DropdownMenu>
+      </Dropdown>
+    </div>
+  );
+};
+export default GraphSelecter;

src/components/GraphFooter/types.d.ts

@@ -0,0 +1,5 @@
+type GraphFooterProps = {
+  graph: string[];
+  selected: number;
+  setSelected: React.Dispatch<React.SetStateAction<number>>;
+};

src/components/GraphToolTips/GraphToolTip.module.css

@@ -0,0 +1,13 @@
+.barChartToolTip {
+    background-color: #1a1a1aca;
+    backdrop-filter: blur(4rem);
+    color: white;
+    font-family: monospace;
+    font-size: 1rem;
+    font-weight: 900;
+    padding: 10px 10px 0px;
+    border-radius: 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}