merge fixing (#112)

Author: RahulKhanna14

website/src/components/posts/Facebook/genderGraph/GenderGraphContainer.js

@@ -7,35 +7,67 @@ import {
   CartesianGrid,
   Tooltip,
   ResponsiveContainer,
+  Legend,
 } from "recharts";
 import data from "./graphData.js";
 
 export default function GenderGraphContainer() {
   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={5} fontSize="1.1rem" />
-        <YAxis fontSize="1.1rem" unit="%" />
-        <Tooltip />
-        <Line
-          type="monotone"
-          dataKey="women enrolled"
-          stroke="#68b068"
-          activeDot={{ r: 8 }}
-          unit="%"
-        />
-      </LineChart>
-    </ResponsiveContainer>
+    <div style={{ textAlign: "center" }}>
+      <h2 style={{ marginBottom: "10px" }}>
+        Historical - Grad Enrollment of Women
+      </h2>
+      <ResponsiveContainer width="100%" height={450}>
+        <LineChart
+          data={data}
+          margin={{ top: 20, right: 40, left: 20, bottom: 5 }}
+        >
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="year" fontSize="1rem" />
+
+          {/* Left Y-Axis (Percentage Enrolled) */}
+          <YAxis
+            yAxisId="left"
+            fontSize="1rem"
+            unit="%"
+            domain={[5, 25]} // Adjust based on range
+            tick={{ fill: "#004f9e" }} // Blue
+          />
+
+          {/* Right Y-Axis (Number Enrolled) */}
+          <YAxis
+            yAxisId="right"
+            orientation="right"
+            fontSize="1rem"
+            domain={[175, 525]} // Adjust based on range
+            tick={{ fill: "#b22222" }} // Red
+          />
+
+          <Tooltip formatter={(value) => value.toLocaleString()} />
+          <Legend verticalAlign="top" height={36} />
+
+          {/* Blue Line (Percent Enrolled) */}
+          <Line
+            yAxisId="left"
+            type="monotone"
+            dataKey="percent"
+            stroke="#004f9e"
+            strokeWidth={2}
+            activeDot={{ r: 6 }}
+            unit="%"
+          />
+
+          {/* Red Line (Number Enrolled) */}
+          <Line
+            yAxisId="right"
+            type="monotone"
+            dataKey="number"
+            stroke="#b22222"
+            strokeWidth={2}
+            activeDot={{ r: 6 }}
+          />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
   );
 }

website/src/components/posts/Facebook/genderGraph/graphData.js

@@ -1,11 +1,15 @@
-const percentages = [15, 13, 19, 30, 37, 30, 28, 28, 23, 18, 18, 20];
-let year = 1960;
-const data = percentages.map((p) => {
-  year += 5; // years will range from 1965 to 2020
-  return {
-    name: year,
-    "women enrolled": p,
-  };
-});
+const data = [
+  { year: 1990, percent: 10, number: 195 },
+  { year: 1992, percent: 12, number: 247 },
+  { year: 1994, percent: 15, number: 279 },
+  { year: 1996, percent: 14, number: 248 },
+  { year: 1998, percent: 16, number: 279 },
+  { year: 2000, percent: 19, number: 342 },
+  { year: 2002, percent: 18, number: 369 },
+  { year: 2004, percent: 20.8, number: 409 },
+  { year: 2006, percent: 19, number: 395 },
+  { year: 2008, percent: 21.2, number: 469 },
+  { year: 2010, percent: 23.6, number: 497 },
+];
 
 export default data;