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/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 ( +
+
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ ); +} diff --git a/pages/samplePage.module.css b/pages/samplePage.module.css index f3761c2..5a817c9 100644 --- a/pages/samplePage.module.css +++ b/pages/samplePage.module.css @@ -8,6 +8,14 @@ padding: 0 calc(70rem / 16); } +.quotationCarouselContainer { + display: flex; + flex-direction: column; + align-items: center; + gap: calc(48rem / 16); + margin: calc(32rem / 16); +} + @media screen and (max-width: 1200px) { .graphContainer { padding: 0 calc(40rem / 16);