www
/
cs-2022-class-profile
16
0
Fork 0
Code Issues 11 Pull Requests 1 Projects Releases Wiki Activity

Worked on FullComponentWrapper and graph widths
continuous-integration/drone/push Build is failing Details

This commit is contained in:
Shahan Nedadahandeh 2022-08-08 20:52:55 -07:00
parent ac446f7b07
commit 8a85e3c5d9
Signed by: snedadah
GPG Key ID: 8638C7F917385B01
9 changed files with 134 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
components/FullComponentWrapper.module.css Normal file
View File

@ -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);
} */

25
components/FullComponentWrapper.tsx Normal file
View File

@ -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>
);
}

10
components/SideComponentWrapper.module.css
View File

@ -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);
}

2
components/SideComponentWrapper.tsx
View File

@ -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>
);
}

13
pages/_app.tsx
View File

@ -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} />;
</>
);
}

2
pages/index.tsx
View File

@ -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>
);
}

29
pages/playground.tsx
View File

@ -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>
);
}

32
pages/samplePage.tsx
View File

@ -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>

37
utils/getWindowDimensions.ts Normal file
View File

@ -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;