Worked on FullComponentWrapper and graph widths

8 months ago · 8a85e3c5d9
parent ac446f7b07
commit 8a85e3c5d9
9 changed files with 134 additions and 37 deletions
--- a/components/FullComponentWrapper.module.css
+++ b/components/FullComponentWrapper.module.css
@ -0,0 +1,21 @@
+.wrapper {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  width: 80%;
+  align-self: center;
+  margin: calc(40rem / 16) 0;
+}
+
+
+
+.graphWrapper {
+  margin-top: calc(80rem / 16);
+}
+
+
+/* .textWrapper {
+  margin: 0 calc(100rem / 16);
+} */
--- a/components/FullComponentWrapper.tsx
+++ b/components/FullComponentWrapper.tsx
@ -0,0 +1,25 @@
+import React from "react";
+
+import styles from "./FullComponentWrapper.module.css";
+
+type FullComponentWrapperProps = {
+  children: React.ReactNode;
+  heading: string;
+  body: string;
+};
+
+export default function FullComponentWrapper({
+  heading,
+  body,
+  children,
+}: FullComponentWrapperProps) {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.textWrapper}>
+        <h3 className={styles.heading}>{heading}</h3>
+        <p className={styles.body}>{body}</p>
+      </div>
+      <div className={styles.graphWrapper}>{children}</div>
+    </div>
+  );
+}
--- a/components/SideComponentWrapper.module.css
+++ b/components/SideComponentWrapper.module.css
@ -1,9 +1,9 @@
 .wrapperCommon {
  background-color: var(--secondary-background);
  display: flex;
-  width: 80%;
+  width: 95%;
  padding: calc(40rem / 16) calc(50rem / 16);
-  margin: calc(80rem / 16) 0;
+  margin: calc(40rem / 16) 0;
 }

 .wrapperRight {
@ -22,6 +22,12 @@
  border-radius: 0 12.5rem 12.5rem 0;
 }

+@media screen and (max-width: 768px) {
+  .wrapperCommon {
+    flex-direction: column;
+  }
+}
+
 .graphWrapper {
  margin: calc(20rem / 16);
 }
--- a/components/SideComponentWrapper.tsx
+++ b/components/SideComponentWrapper.tsx
@ -17,11 +17,11 @@ export default function SideComponentWrapper({
 }: ComponentWrapperProps) {
  return (
    <div className={rightAligned ? styles.wrapperRight : styles.wrapperLeft}>
-      <div className={styles.graphWrapper}>{children}</div>
      <div className={styles.textWrapper}>
        <h3 className={styles.heading}>{heading}</h3>
        <p className={styles.body}>{body}</p>
      </div>
+      <div className={styles.graphWrapper}>{children}</div>
    </div>
  );
 }
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@ -1,9 +1,20 @@
 import type { AppProps } from "next/app";
+import Head from "next/head";
 import React from "react";

 import "./_app.css";
 import "./font.css";

 export default function App({ Component, pageProps }: AppProps): JSX.Element {
-  return <Component {...pageProps} />;
+  return (
+    <>
+      <Head>
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"
+        />
+      </Head>
+      <Component {...pageProps} />;
+    </>
+  );
 }
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -5,6 +5,8 @@ export default function Home() {
  return (
    <p>
      Click <Link href="/playground">here</Link> to visit the playground
+      <br></br>
+      Click <Link href="/samplePage">here</Link> to visit a sample page
    </p>
  );
 }
--- a/pages/playground.tsx
+++ b/pages/playground.tsx
@ -62,35 +62,6 @@ export default function Home() {
        }))}
      />

-      <SideComponentWrapper
-        heading="What program are you in?"
-        body="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
-      >
-        <BarGraphVertical
-          data={mockCategoricalData}
-          width={800}
-          height={500}
-          margin={{
-            top: 20,
-            bottom: 80,
-            left: 60,
-            right: 20,
-          }}
-        />
-      </SideComponentWrapper>
-
-      <SideComponentWrapper
-        heading="What program are you in?"
-        body="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
-        rightAligned
-      >
-        <WordCloud
-          data={moreMockCategoricalData.map((word) => ({
-            text: word.key,
-            value: word.value,
-          }))}
-        />
-      </SideComponentWrapper>
    </div>
  );
 }
--- a/pages/samplePage.tsx
+++ b/pages/samplePage.tsx
@ -1,7 +1,9 @@
-import { BarGraphVertical } from "components/BarGraph";
+import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
 import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
 import React from "react";
+import useWindowDimensions from "utils/getWindowDimensions";

+import FullComponentWrapper from "@/components/FullComponentWrapper";
 import SideComponentWrapper from "@/components/SideComponentWrapper";

 import { WordCloud } from "../components/WordCloud";
@ -9,6 +11,8 @@ import { WordCloud } from "../components/WordCloud";
 import styles from "./samplePage.module.css";

 export default function SamplePage() {
+  const { height, width } = useWindowDimensions();
+
  return (
    <div className={styles.page}>
      <SideComponentWrapper
@ -17,7 +21,7 @@ export default function SamplePage() {
      >
        <BarGraphVertical
          data={mockCategoricalData}
-          width={800}
+          width={700}
          height={500}
          margin={{
            top: 20,
@ -28,16 +32,36 @@ export default function SamplePage() {
        />
      </SideComponentWrapper>

-      <SideComponentWrapper
+      <FullComponentWrapper
        heading="What program are you in?"
        body="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
-        rightAligned
      >
        <WordCloud
          data={moreMockCategoricalData.map((word) => ({
            text: word.key,
            value: word.value,
          }))}
+          width={1000}
+          height={500}
+        />
+      </FullComponentWrapper>
+
+      <SideComponentWrapper
+        heading="What program are you in?"
+        body="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
+        rightAligned
+      >
+        <BarGraphHorizontal
+          className={styles.barGraphDemo}
+          data={mockCategoricalData}
+          width={width / 2}
+          height={500}
+          margin={{
+            top: 20,
+            bottom: 40,
+            left: 150,
+            right: 20,
+          }}
        />
      </SideComponentWrapper>
    </div>
--- a/utils/getWindowDimensions.ts
+++ b/utils/getWindowDimensions.ts
@ -0,0 +1,37 @@
+// https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs
+import { useState, useEffect } from "react";
+
+type WindowDimensions = {
+  width: number;
+  height: number;
+};
+
+const getWindowDimensions = (): WindowDimensions => {
+  const { innerWidth, innerHeight } = window;
+
+  return {
+    width: innerWidth,
+    height: innerHeight,
+  };
+};
+
+const useWindowDimensions = (): WindowDimensions => {
+  const [windowDimensions, setWindowDimensions] = useState<WindowDimensions>({
+    width: 0,
+    height: 0,
+  });
+
+  const handleResize = () => {
+    setWindowDimensions(getWindowDimensions());
+  };
+
+  useEffect(() => {
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return windowDimensions;
+};
+
+export default useWindowDimensions;