diff --git a/components/SectionWrapper.module.css b/components/SectionWrapper.module.css new file mode 100644 index 0000000..65db0fa --- /dev/null +++ b/components/SectionWrapper.module.css @@ -0,0 +1,4 @@ +.sectionWrapper h2 { + color: var(--primary-heading); + padding-left: 4rem; +} diff --git a/components/SectionWrapper.tsx b/components/SectionWrapper.tsx new file mode 100644 index 0000000..fede352 --- /dev/null +++ b/components/SectionWrapper.tsx @@ -0,0 +1,15 @@ +import React from "react"; + +import styles from "./SectionWrapper.module.css"; + +type SectionWrapperProps = { + title: string; +}; + +export function SectionWrapper({ title }: SectionWrapperProps) { + return ( +
+

{title}

+
+ ); +} diff --git a/components/StackedBarGraph.module.css b/components/StackedBarGraph.module.css index 4c25e0e..40646db 100644 --- a/components/StackedBarGraph.module.css +++ b/components/StackedBarGraph.module.css @@ -7,7 +7,6 @@ } .legend { - position: absolute; display: flex; font-size: calc(16rem / 16); top: 0; diff --git a/components/StackedBarGraph.tsx b/components/StackedBarGraph.tsx index 9b0bd44..c9f77fd 100644 --- a/components/StackedBarGraph.tsx +++ b/components/StackedBarGraph.tsx @@ -88,7 +88,7 @@ export const StackedBarGraphVertical = withTooltip< strokeDashArray = "10,4", legendLeftOffset = 40, legendTopOffset = 40, - itemMargin = "15px 0 0 0", + itemMargin = "0 0 0 15px", categoryAxisLeftFactor = 1, tooltipOpen, tooltipLeft, @@ -134,6 +134,18 @@ export const StackedBarGraphVertical = withTooltip< return width < 10 ? null : (
+
+ +
+ -
- -
{tooltipOpen && tooltipData ? ( +
+ +
+ -
- -
{tooltipOpen && tooltipData ? ( +
+ + + + + +
+ +
+ + + +
+ +
+ + + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + +
+ +
+ + + +
+ +
+ + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ ); +} diff --git a/pages/friends.tsx b/pages/friends.tsx new file mode 100644 index 0000000..192b9d7 --- /dev/null +++ b/pages/friends.tsx @@ -0,0 +1,233 @@ +import { + F1, + F2, + F3, + F4, + F5, + F6, + F7, + F8, + F9, + F10, + F11, + F12, + F13, + F14, + F15, + F16, +} from "data/friends"; +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 ( +
+
+ + + + + + + +
+ +
+ + + + + + + +
+ +
+ + + + + + + +
+ +
+ + + +
+ +
+ + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + +
+ +
+ + + +
+ ); +} diff --git a/pages/lifestyle-and-interests.tsx b/pages/lifestyle-and-interests.tsx new file mode 100644 index 0000000..63f7f97 --- /dev/null +++ b/pages/lifestyle-and-interests.tsx @@ -0,0 +1,255 @@ +import { + L1, + L2, + L3, + L4, + L5, + L6, + L7, + L8, + L9, + L10, + L11, + L12, + L13, + L14, + L16, + L17, + L18, + L19, +} from "data/lifestyle-and-interests"; +import { pageRoutes } from "data/routes"; +import React from "react"; +import { + barGraphProps, + DefaultProp, + pieChartProps, + barGraphMargin, + barGraphWidth, +} 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 ( +
+
+ + + +
+ +
+ + + +
+ +
+ + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + +
+ ); +} diff --git a/pages/post-grad.tsx b/pages/post-grad.tsx new file mode 100644 index 0000000..5c5c5b9 --- /dev/null +++ b/pages/post-grad.tsx @@ -0,0 +1,137 @@ +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 ( +
+
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ ); +}