diff --git a/pages/post-grad.tsx b/pages/post-grad.tsx
new file mode 100644
index 0000000..b3dc10e
--- /dev/null
+++ b/pages/post-grad.tsx
@@ -0,0 +1,138 @@
+import { P1, P2, P3, P4, P5, P6, P7, P8 } from "data/post-grad";
+import { pageRoutes } from "data/routes";
+import React from "react";
+import {
+ barGraphProps,
+ DefaultProp,
+ pieChartProps,
+ barGraphMargin,
+ barGraphWidth,
+ wordCloudWidth,
+} from "utils/defaultProps";
+import { useWindowDimensions } from "utils/getWindowDimensions";
+import { useIsMobile } from "utils/isMobile";
+
+import { BarGraphVertical, BarGraphHorizontal } from "@/components/BarGraph";
+import { BottomNav } from "@/components/BottomNav";
+import { ComponentWrapper } from "@/components/ComponentWrapper";
+import { Header } from "@/components/Header";
+import { PieChart } from "@/components/PieChart";
+import { SectionHeader } from "@/components/SectionHeader";
+import { WordCloud } from "@/components/WordCloud";
+
+import styles from "./samplePage.module.css";
+
+export default function Demographics() {
+ const pageWidth = useWindowDimensions().width;
+ const isMobile = useIsMobile();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -39,10 +58,9 @@ export default function SamplePage() {
data={mockCategoricalData}
width={defaultGraphWidth}
height={defaultGraphHeight}
- margin={defaultBarGraphMargin}
+ margin={defaultVerticalBarGraphMargin}
/>
-
-
-
+
-
-
-
-
({
@@ -134,7 +144,6 @@ export default function SamplePage() {
height={defaultGraphHeight}
/>
-
({
@@ -145,7 +154,6 @@ export default function SamplePage() {
height={defaultGraphHeight}
/>
-
-
-
- ({
- text: word.key,
- value: word.value,
- }))}
- width={defaultGraphWidth}
- height={defaultGraphHeight}
+
+
+
+
-
+ isMobile
+ ? pageWidth / mobileBarGraphFactor
+ : pageWidth / desktopBarGraphFactor;
+
+const mobilePieChartFactor = 1.25;
+const desktopPieChartFactor = 3;
+export const pieChartWidth = (isMobile: boolean, pageWidth: number) =>
+ isMobile
+ ? pageWidth / mobilePieChartFactor
+ : pageWidth / desktopPieChartFactor;
+
+const desktopWordCloudFactor = 1.5;
+const mobileWordCloudWidth = 800;
+export const wordCloudWidth = (isMobile: boolean, pageWidth: number) =>
+ isMobile ? pageWidth / desktopWordCloudFactor : mobileWordCloudWidth;
+
+export const barGraphMargin = {
+ top: 20,
+ bottom: 80,
+ left: 60,
+ right: 20,
+};
+export const DefaultProp: { [key in PropName]: number } = {
+ graphHeight: 500,
+ labelSize: 24,
+ labelWidth: 100,
+};
+
+export const barGraphProps = (isMobile: boolean, pageWidth: number) => {
+ return {
+ width: barGraphWidth(isMobile, pageWidth),
+ height: DefaultProp.graphHeight,
+ margin: barGraphMargin,
+ };
+};
+
+export const pieChartProps = (isMobile: boolean, pageWidth: number) => {
+ return {
+ width: pieChartWidth(isMobile, pageWidth),
+ labelWidth: DefaultProp.labelWidth,
+ labelTextSize: DefaultProp.labelSize,
+ };
+};
diff --git a/utils/inDevEnviroment.ts b/utils/inDevEnviroment.ts
new file mode 100644
index 0000000..872ea50
--- /dev/null
+++ b/utils/inDevEnviroment.ts
@@ -0,0 +1,3 @@
+const inDevEnvironment = process && process.env.NODE_ENV === "development";
+
+export { inDevEnvironment };
diff --git a/utils/isMobile.ts b/utils/isMobile.ts
index 4022df1..a8fbc43 100644
--- a/utils/isMobile.ts
+++ b/utils/isMobile.ts
@@ -1,3 +1,3 @@
import { useWindowDimensions } from "./getWindowDimensions";
-export const useIsMobile = () => useWindowDimensions().width <= 768;
+export const useIsMobile = () => useWindowDimensions().width <= 900;