TylerAdamMartinez · TylerAdamMartinez · Aug 11, 2022 · Aug 16, 2022 · Aug 17, 2022 · Aug 17, 2022
diff --git a/Application/package-lock.json b/Application/package-lock.json
diff --git a/Application/package.json b/Application/package.json
@@ -15,11 +15,16 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.2.1",
+    "@types/jest": "^28.1.6",
+    "@types/node": "^18.7.1",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
     "changedpi": "^1.0.4",
     "chart.js": "^3.8.0",
     "color.js": "^1.2.0",
     "dotenv": "^16.0.1",
     "firebase": "^9.9.2",
+    "framer-motion": "^7.2.0",
     "image-js": "^0.34.1",
     "jspdf": "^2.5.1",
     "react": "^18.2.0",
@@ -35,12 +40,13 @@
     "remark-gfm": "^3.0.1",
     "styled-components": "^5.3.5",
     "tesseract.js": "^2.1.5",
+    "typescript": "^4.7.4",
     "universal-cookie": "^4.0.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "lint": "prettier -c \"src/**/*.js\" && prettier -c \"src/**/*.css\" && eslint \"src/**/*.js\"",
-    "format": "prettier --write \"src/**/*.js\" && prettier --write \"src/**/*.css\"",
+    "lint": "prettier -c \"src/**/*.ts\" && prettier -c \"src/**/*.tsx\" && prettier -c \"src/**/*.css\" && eslint \"src/**/*.ts\" && eslint \"src/**/*.tsx\"",
+    "format": "prettier --write \"src/**/*.ts\" && prettier --write \"src/**/*.tsx\" && prettier --write \"src/**/*.css\"",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

diff --git a/Application/public/Optimal-Accessibility-Logo-min.svg b/Application/public/Optimal-Accessibility-Logo-min.svg
diff --git a/Application/public/Optimal-Accessibility-Logo.svg b/Application/public/Optimal-Accessibility-Logo.svg
diff --git a/Application/public/index.html b/Application/public/index.html
@@ -2,14 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="Optimal-Accessibility-Logo.svg" />
+    <link rel="icon" href="Optimal-Accessibility-Logo-min.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="This website calculates the accessibilty rating of posters"
     />
-    <link rel="apple-touch-icon" href="Optimal-Accessibility-Logo.svg" />
+    <link rel="apple-touch-icon" href="Optimal-Accessibility-Logo-min.svg" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>Optimal Accessibilty</title>
   </head>

diff --git a/Application/src/App.css b/Application/src/App.css
@@ -1,6 +1,9 @@
 .App {
   width: 100%;
   height: 100%;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto 1fr;
 }
 
 a,

diff --git a/Application/src/App.js b/Application/src/App.js
diff --git a/Application/src/App.test.js b/Application/src/App.test.js
diff --git a/Application/src/App.tsx b/Application/src/App.tsx
@@ -0,0 +1,30 @@
+import "./App.css";
+import HomePage from "./Pages/Home/HomePage";
+import DashBoard from "./Pages/DashBoard/DashBoard";
+import NotFound404ErrorPage from "./Pages/NotFound404ErrorPage/NotFound404ErrorPage";
+import PrivateRoutes from "./Components/PrivateRoutes";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import SettingsPage from "./Pages/SettingsPage/SettingsPage";
+import GuestDashboard from "./Pages/GuestDashBoard/GuestDashboard";
+import { AnimatePresence } from "framer-motion";
+// import { analytics } from "./FirebaseConfig";
+
+function App() {
+  return (
+    <AnimatePresence mode="wait">
+      <Router>
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/guest" element={<GuestDashboard />} />
+          <Route element={<PrivateRoutes />}>
+            <Route path="/dashboard" element={<DashBoard />} />
+            <Route path="/settings" element={<SettingsPage />} />
+          </Route>
+          <Route path="*" element={<NotFound404ErrorPage />} />
+        </Routes>
+      </Router>
+    </AnimatePresence>
+  );
+}
+
+export default App;
diff --git a/Application/src/Components/BarGraph.js b/Application/src/Components/BarGraph.js
diff --git a/...c/Components/AccessibilityBarGraphData.js → ...phs/BarGraph/AccessibilityBarGraphData.ts b/...c/Components/AccessibilityBarGraphData.js → ...phs/BarGraph/AccessibilityBarGraphData.ts
@@ -1,9 +1,12 @@
+import { accessibilityScore, chartData } from "../../../oaTypes";
+
 class AccessibilityBarGraphData {
-  constructor(AccessibilityScore) {
-    this.AccessibilityScore = AccessibilityScore;
+  score: accessibilityScore;
+  constructor(barGraphData: accessibilityScore) {
+    this.score = barGraphData;
   }
 
-  get build() {
+  get build(): chartData {
     return {
       labels: ["Text", "Structure", "Color"],
       datasets: [
@@ -15,11 +18,12 @@ class AccessibilityBarGraphData {
             "rgba(218, 54, 74, 1)",
           ],
           borderColor: "rgba(51, 51, 51, 1)",
-          borderWidth: 1,
+          borderWidth: 2.5,
+          hoverOffset: 25,
           data: [
-            this.AccessibilityScore.textRating,
-            this.AccessibilityScore.structureRating,
-            this.AccessibilityScore.colorRating,
+            this.score.textRating,
+            this.score.structureRating,
+            this.score.colorRating,
           ],
           options: {
             responsive: true,

diff --git a/Application/src/Components/Graphs/BarGraph/BarGraph.tsx b/Application/src/Components/Graphs/BarGraph/BarGraph.tsx
@@ -0,0 +1,86 @@
+import {
+  Chart as ChartJs,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+import { Bar, getElementAtEvent } from "react-chartjs-2";
+import { chartData } from "../../../oaTypes";
+import { useRef } from "react";
+
+ChartJs.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+ChartJs.defaults.scale.grid.drawOnChartArea = true;
+ChartJs.defaults.scales.category.max = 100;
+
+interface BarGraphProp {
+  data: chartData;
+  BarGraphCallback: (state: string) => void;
+}
+
+function BarGraph(props: BarGraphProp) {
+  const barGraphRef = useRef(null);
+  const accessibilityScoreMap = ["Text", "Structure", "Color"];
+
+  function BarGraphOnClickHandler(event: any) {
+    const { current: chart } = barGraphRef;
+    if (!chart) return;
+    let index: number | undefined = getElementAtEvent(chart, event).at(
+      0
+    )?.index;
+    if (!index) index = 0;
+    props.BarGraphCallback(accessibilityScoreMap[index]);
+  }
+
+  return (
+    <>
+      <Bar
+        ref={barGraphRef}
+        onClick={BarGraphOnClickHandler}
+        data={props.data}
+        options={{
+          plugins: {
+            legend: {
+              display: false,
+              position: "bottom",
+            },
+            tooltip: {
+              titleFont: {
+                size: 18,
+              },
+              bodyFont: {
+                size: 18,
+              },
+              caretSize: 16,
+            },
+          },
+          scales: {
+            y: {
+              min: 0,
+              max: 100,
+            },
+            x: {
+              ticks: {
+                font: {
+                  size: 20,
+                },
+              },
+            },
+          },
+        }}
+      />
+    </>
+  );
+}
+
+export default BarGraph;