bar graphs implemented

Author: ughurkarim

website/package-lock.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "apexcharts": "^4.5.0",
+    "chart.js": "^4.5.1",
     "react": "^19.1.0",
     "react-apexcharts": "^1.7.0",
     "react-dom": "^19.1.0",

website/package.json

@@ -3,6 +3,7 @@ import "../main.css";
 import teachLogo from "../assets/teachla-logo.svg";
 import PostsList from "../components/mainContent/PostsList";
 import CounterFrame from "../components/posts/FacialRecognition/CounterFrame";
+import AccuracyChart from "../components/posts/FacialRecognition/AccuracyChart";
 import { VisibilityProvider } from "../components/mainContent/commonLogic";
 
 export default function FacialRecognition() {
@@ -106,6 +107,20 @@ const FacialRecognitionInfo = [
     },
   },
 
+  {
+    post: {
+      profilePic: teachLogo,
+      profilePicName: "Profile Picture - Frame 3",
+      header: "Accuracy of Face Recognition Technologies",
+      subheader: "Hover to See Group Performance",
+      bodyText: [
+        {
+          body: <AccuracyChart />,
+        },
+      ],
+    },
+  },
+
   {
     post: {
       profilePic: teachLogo,