diff --git a/website/src/assets/College/collegeLabContent.js b/website/src/assets/College/collegeLabContent.js index 2e6de38..517a493 100644 --- 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: ( +

+ + Historical - Grad Enrollment of Women + +

+ ), + }, + { + body: , + }, + { + body: ( +

+ Source:{" "} + + {" "} + The University of Texas at Austin + +

+ ), + }, + ], + }, + }, { post: { profilePic: teachLogo, diff --git a/website/src/components/posts/CollegeAdmissions/enrollmentGraph/WomenEnrollmentContainer.js b/website/src/components/posts/CollegeAdmissions/enrollmentGraph/WomenEnrollmentContainer.js new file mode 100644 index 0000000..b12c5d0 --- /dev/null +++ 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 ( + + + + + + + + + + + ); +} diff --git a/website/src/components/posts/CollegeAdmissions/enrollmentGraph/enrollmentData.js b/website/src/components/posts/CollegeAdmissions/enrollmentGraph/enrollmentData.js new file mode 100644 index 0000000..5f75825 --- /dev/null +++ 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;