added container with enrollment graph (red data) to college lab (#81) (…

…#90)
uclaacm · May 22, 2024 · 154d30b · 154d30b
1 parent d79b841
commit 154d30b
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 0 deletions.
diff --git a/website/src/assets/College/collegeLabContent.js b/website/src/assets/College/collegeLabContent.js
@@ -2,6 +2,8 @@ import teachLogo from "../teachla-logo.svg";
 import React from "react";
 import "../../main.css";
 import EssayContainer from "../../components/posts/CollegeAdmissions/essay/EssayContainer";
+import WomenEnrollmentContainer from "../../components/posts/CollegeAdmissions/enrollmentGraph/WomenEnrollmentContainer.js";
+
 export default [
   {
     post: {
@@ -42,6 +44,43 @@ export default [
       ],
     },
   },
+  {
+    post: {
+      profilePic: teachLogo,
+      profilePicName: "Profile Picture - TeachLA Logo",
+      header: "enrollment graph",
+      subheader: "amazing graph",
+      bodyText: [
+        {
+          body: (
+            <p className="text-center">
+              <mark className="bold">
+                Historical - Grad Enrollment of Women
+              </mark>
+            </p>
+          ),
+        },
+        {
+          body: <WomenEnrollmentContainer />,
+        },
+        {
+          body: (
+            <p className="gray-text text-center">
+              Source:{" "}
+              <a
+                href="https://cockrell.utexas.edu/media/xt-adaptive-images/1600/images/wep-stats/HistoricalGrad.jpg"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {" "}
+                The University of Texas at Austin
+              </a>
+            </p>
+          ),
+        },
+      ],
+    },
+  },
   {
     post: {
       profilePic: teachLogo,

diff --git a/website/src/components/posts/CollegeAdmissions/enrollmentGraph/WomenEnrollmentContainer.js b/website/src/components/posts/CollegeAdmissions/enrollmentGraph/WomenEnrollmentContainer.js
@@ -0,0 +1,44 @@
+import React from "react";
+import {
+  LineChart,
+  Line,
+  Label,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+import data from "./enrollmentData.js";
+
+export default function WomenEnrollmentContainer() {
+  return (
+    <ResponsiveContainer width="100%" height={400}>
+      <LineChart
+        width={500}
+        height={300}
+        data={data}
+        margin={{
+          top: 5,
+          right: 30,
+          left: 20,
+          bottom: 5,
+        }}
+      >
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis dataKey="name" dy={2} fontSize="1.1rem" />
+        <YAxis fontSize="1.1rem" unit="" orientation="right">
+          <Label value="Women Enrolled" angle={90} position="right" />
+        </YAxis>
+        <Tooltip />
+        <Line
+          type="monotone"
+          dataKey="women enrolled"
+          stroke="#d1001f"
+          activeDot={{ r: 8 }}
+          unit=""
+        />
+      </LineChart>
+    </ResponsiveContainer>
+  );
+}
diff --git a/website/src/components/posts/CollegeAdmissions/enrollmentGraph/enrollmentData.js b/website/src/components/posts/CollegeAdmissions/enrollmentGraph/enrollmentData.js
@@ -0,0 +1,14 @@
+const numbers = [
+  195, 247, 279, 248, 342, 369, 409, 360, 406, 395, 461, 431, 426, 455, 469,
+  472, 497,
+];
+let year = 1988;
+const data = numbers.map((m) => {
+  year += 2;
+  return {
+    name: year,
+    "women enrolled": m,
+  };
+});
+
+export default data;