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

Worked on no background + pr comments
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Shahan Nedadahandeh 2022-08-11 21:20:55 -07:00
parent d455d3a92e
commit 29534e574b
Signed by: snedadah
GPG Key ID: 8638C7F917385B01
11 changed files with 119 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/FullComponentWrapper.module.css → components/CenterComponentWrapper.module.css
View File

@ -1,12 +1,18 @@
.wrapper {
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 80%;
align-self: center;
margin: calc(40rem / 16) 0;
margin: calc(40rem / 16) auto;
padding: 0 15%;
}
@media screen and (max-width: 768px) {
.wrapper {
padding: 0 calc(20rem / 16);
}
}

12
components/FullComponentWrapper.tsx → components/CenterComponentWrapper.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
import styles from "./FullComponentWrapper.module.css";
import styles from "./CenterComponentWrapper.module.css";
type FullComponentWrapperProps = {
children: React.ReactNode;
@ -8,18 +8,18 @@ type FullComponentWrapperProps = {
body: string;
};
export default function FullComponentWrapper({
export function CenterComponentWrapper({
heading,
body,
children,
}: FullComponentWrapperProps) {
return (
<div className={styles.wrapper}>
<div className={styles.textWrapper}>
<h3 className={styles.heading}>{heading}</h3>
<section className={styles.wrapper}>
<div>
<h3>{heading}</h3>
<p className={styles.body}>{body}</p>
</div>
<div className={styles.graphWrapper}>{children}</div>
</div>
</section>
);
}

32
components/SideComponentWrapper.module.css
View File

@ -1,9 +1,9 @@
.wrapperCommon {
background-color: var(--secondary-background);
display: flex;
width: 95%;
padding: calc(40rem / 16) calc(50rem / 16);
margin: calc(40rem / 16) 0;
width: 90%;
}
.wrapperRight {
@ -12,6 +12,8 @@
margin-right: 0;
padding-right: 0;
border-radius: calc(200rem / 16) 0 0 calc(200rem / 16);
flex-direction: row-reverse;
padding-right: calc(50rem / 16);
}
.wrapperLeft {
@ -19,20 +21,32 @@
align-self: start;
margin-left: 0;
padding-left: 0;
border-radius: 0 12.5rem 12.5rem 0;
border-radius: 0 calc(200rem / 16) calc(200rem / 16) 0;
flex-direction: row;
padding-left: calc(50rem / 16);
}
.noBackground {
background: none;
margin: calc(40rem / 16);
}
@media screen and (max-width: 768px) {
.wrapperCommon {
margin: auto;
flex-direction: column;
text-align: center;
padding: 0;
border-radius: 0;
width: 100%;
}
.noBackground {
background: none;
margin: calc(40rem / 16) 0;
}
}
.graphWrapper {
margin: calc(20rem / 16);
}
.textWrapper {
margin: 0 calc(50rem / 16);
.internalWrapper {
padding: calc(20rem / 16);
}

33
components/SideComponentWrapper.tsx
View File

@ -1,5 +1,4 @@
import React from "react";
import { useIsMobile } from "utils/isMobile";
import styles from "./SideComponentWrapper.module.css";
@ -8,35 +7,27 @@ type ComponentWrapperProps = {
heading: string;
body: string;
rightAligned?: boolean;
noBackground?: boolean;
};
export default function SideComponentWrapper({
export function SideComponentWrapper({
heading,
body,
children,
rightAligned = false,
noBackground = false,
}: ComponentWrapperProps) {
const isMobile = useIsMobile();
return (
<div className={rightAligned ? styles.wrapperRight : styles.wrapperLeft}>
{rightAligned && !isMobile ? (
<>
<div className={styles.graphWrapper}>{children}</div>
<div className={styles.textWrapper}>
<h3 className={styles.heading}>{heading}</h3>
<p className={styles.body}>{body}</p>
<div
className={`${rightAligned ? styles.wrapperRight : styles.wrapperLeft} ${
noBackground ? styles.noBackground : ""
}`}
>
<div className={styles.internalWrapper}>
<h3>{heading}</h3>
<p>{body}</p>
</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 className={styles.internalWrapper}>{children}</div>
</div>
);
}

77
package-lock.json generated
View File

@ -19,8 +19,7 @@
"@visx/wordcloud": "^2.10.0",
"next": "12.1.6",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-responsive": "^9.0.0-beta.10"
"react-dom": "18.1.0"
},
"devDependencies": {
"@types/node": "17.0.38",
@ -1450,11 +1449,6 @@
"postcss": "^8.4"
}
},
"node_modules/css-mediaquery": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
"integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q=="
},
"node_modules/css-prefers-color-scheme": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz",
@ -2539,11 +2533,6 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/hyphenate-style-name": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
"integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
},
"node_modules/ignore": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
@ -2942,14 +2931,6 @@
"node": ">=10"
}
},
"node_modules/matchmediaquery": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz",
"integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==",
"dependencies": {
"css-mediaquery": "^0.1.2"
}
},
"node_modules/math-expression-evaluator": {
"version": "1.3.14",
"resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.3.14.tgz",
@ -3969,23 +3950,6 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/react-responsive": {
"version": "9.0.0-beta.10",
"resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-9.0.0-beta.10.tgz",
"integrity": "sha512-41H8g4FYP46ln16rsHvs9/0ZoZxAPfnNiHET86/5pgS+Vw8fSKfLBuOS2SAquaxOxq7DgPviFoHmybgVvSKCNQ==",
"dependencies": {
"hyphenate-style-name": "^1.0.0",
"matchmediaquery": "^0.3.0",
"prop-types": "^15.6.1",
"shallow-equal": "^1.2.1"
},
"engines": {
"node": ">=0.10"
},
"peerDependencies": {
"react": ">=16.8.0"
}
},
"node_modules/react-use-measure": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz",
@ -4153,11 +4117,6 @@
"node": ">=10"
}
},
"node_modules/shallow-equal": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
"integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
},
"node_modules/shebang-command": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@ -5416,11 +5375,6 @@
"postcss-selector-parser": "^6.0.9"
}
},
"css-mediaquery": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
"integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q=="
},
"css-prefers-color-scheme": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz",
@ -6252,11 +6206,6 @@
"has-symbols": "^1.0.2"
}
},
"hyphenate-style-name": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
"integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
},
"ignore": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
@ -6550,14 +6499,6 @@
"yallist": "^4.0.0"
}
},
"matchmediaquery": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz",
"integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==",
"requires": {
"css-mediaquery": "^0.1.2"
}
},
"math-expression-evaluator": {
"version": "1.3.14",
"resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.3.14.tgz",
@ -7225,17 +7166,6 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"react-responsive": {
"version": "9.0.0-beta.10",
"resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-9.0.0-beta.10.tgz",
"integrity": "sha512-41H8g4FYP46ln16rsHvs9/0ZoZxAPfnNiHET86/5pgS+Vw8fSKfLBuOS2SAquaxOxq7DgPviFoHmybgVvSKCNQ==",
"requires": {
"hyphenate-style-name": "^1.0.0",
"matchmediaquery": "^0.3.0",
"prop-types": "^15.6.1",
"shallow-equal": "^1.2.1"
}
},
"react-use-measure": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz",
@ -7350,11 +7280,6 @@
"lru-cache": "^6.0.0"
}
},
"shallow-equal": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
"integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
},
"shebang-command": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",

3
package.json
View File

@ -26,8 +26,7 @@
"@visx/wordcloud": "^2.10.0",
"next": "12.1.6",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-responsive": "^9.0.0-beta.10"
"react-dom": "18.1.0"
},
"devDependencies": {
"@types/node": "17.0.38",

2
pages/index.tsx
View File

@ -5,7 +5,7 @@ export default function Home() {
return (
<p>
Click <Link href="/playground">here</Link> to visit the playground
<br></br>
<br />
Click <Link href="/samplePage">here</Link> to visit a sample page
</p>
);

1
pages/samplePage.module.css
View File

@ -1,4 +1,5 @@
.page {
display: flex;
flex-direction: column;
justify-content: center;
}

65
pages/samplePage.tsx
View File

@ -1,11 +1,11 @@
import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
import React from "react";
import useWindowDimensions from "utils/getWindowDimensions";
import { useWindowDimensions } from "utils/getWindowDimensions";
import { useIsMobile } from "utils/isMobile";
import FullComponentWrapper from "@/components/FullComponentWrapper";
import SideComponentWrapper from "@/components/SideComponentWrapper";
import { CenterComponentWrapper } from "@/components/CenterComponentWrapper";
import { SideComponentWrapper } from "@/components/SideComponentWrapper";
import { WordCloud } from "../components/WordCloud";
@ -35,7 +35,7 @@ export default function SamplePage() {
/>
</SideComponentWrapper>
<FullComponentWrapper
<CenterComponentWrapper
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."
>
@ -48,7 +48,7 @@ export default function SamplePage() {
width={isMobile ? width / 1.25 : 1000}
height={500}
/>
</FullComponentWrapper>
</CenterComponentWrapper>
<SideComponentWrapper
heading="What program are you in?"
@ -58,7 +58,7 @@ export default function SamplePage() {
<BarGraphHorizontal
className={styles.barGraphDemo}
data={mockCategoricalData}
width={isMobile ? width / 1.25 : width / 2}
width={isMobile ? width / 1.45 : width / 2}
height={500}
margin={{
top: 20,
@ -68,6 +68,59 @@ export default function SamplePage() {
}}
/>
</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."
noBackground
>
<BarGraphHorizontal
className={styles.barGrapDemo}
data={mockCategoricalData}
width={isMobile ? width / 1.45 : width / 2}
height={500}
margin={{
top: 20,
bottom: 40,
left: 150,
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
>
<BarGraphHorizontal
className={styles.barGraphDemo}
data={mockCategoricalData}
width={isMobile ? width / 1.45 : width / 2}
height={500}
margin={{
top: 20,
bottom: 40,
left: 150,
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."
noBackground
>
<WordCloud
data={moreMockCategoricalData.map((word) => ({
text: word.key,
value: word.value,
}))}
width={isMobile ? width / 1.5 : width / 2}
height={500}
/>
</SideComponentWrapper>
</div>
);
}

4
utils/getWindowDimensions.ts
View File

@ -15,7 +15,7 @@ const getWindowDimensions = (): WindowDimensions => {
};
};
const useWindowDimensions = (): WindowDimensions => {
export const useWindowDimensions = (): WindowDimensions => {
const [windowDimensions, setWindowDimensions] = useState<WindowDimensions>({
width: 0,
height: 0,
@ -33,5 +33,3 @@ const useWindowDimensions = (): WindowDimensions => {
return windowDimensions;
};
export default useWindowDimensions;

4
utils/isMobile.ts
View File

@ -1,3 +1,3 @@
import { useMediaQuery } from "react-responsive";
import { useWindowDimensions } from "./getWindowDimensions";
export const useIsMobile = () => useMediaQuery({ query: "(max-width: 768px)" });
export const useIsMobile = () => useWindowDimensions().width < 768;