Worked on FullComponentWrapper and graph widths
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
This commit is contained in:
parent
ac446f7b07
commit
8a85e3c5d9
|
@ -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);
|
||||||
|
} */
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
|
@ -1,9 +1,9 @@
|
||||||
.wrapperCommon {
|
.wrapperCommon {
|
||||||
background-color: var(--secondary-background);
|
background-color: var(--secondary-background);
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 80%;
|
width: 95%;
|
||||||
padding: calc(40rem / 16) calc(50rem / 16);
|
padding: calc(40rem / 16) calc(50rem / 16);
|
||||||
margin: calc(80rem / 16) 0;
|
margin: calc(40rem / 16) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrapperRight {
|
.wrapperRight {
|
||||||
|
@ -22,6 +22,12 @@
|
||||||
border-radius: 0 12.5rem 12.5rem 0;
|
border-radius: 0 12.5rem 12.5rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.wrapperCommon {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.graphWrapper {
|
.graphWrapper {
|
||||||
margin: calc(20rem / 16);
|
margin: calc(20rem / 16);
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,11 +17,11 @@ export default function SideComponentWrapper({
|
||||||
}: ComponentWrapperProps) {
|
}: ComponentWrapperProps) {
|
||||||
return (
|
return (
|
||||||
<div className={rightAligned ? styles.wrapperRight : styles.wrapperLeft}>
|
<div className={rightAligned ? styles.wrapperRight : styles.wrapperLeft}>
|
||||||
<div className={styles.graphWrapper}>{children}</div>
|
|
||||||
<div className={styles.textWrapper}>
|
<div className={styles.textWrapper}>
|
||||||
<h3 className={styles.heading}>{heading}</h3>
|
<h3 className={styles.heading}>{heading}</h3>
|
||||||
<p className={styles.body}>{body}</p>
|
<p className={styles.body}>{body}</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div className={styles.graphWrapper}>{children}</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,9 +1,20 @@
|
||||||
import type { AppProps } from "next/app";
|
import type { AppProps } from "next/app";
|
||||||
|
import Head from "next/head";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
import "./_app.css";
|
import "./_app.css";
|
||||||
import "./font.css";
|
import "./font.css";
|
||||||
|
|
||||||
export default function App({ Component, pageProps }: AppProps): JSX.Element {
|
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} />;
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,6 +5,8 @@ export default function Home() {
|
||||||
return (
|
return (
|
||||||
<p>
|
<p>
|
||||||
Click <Link href="/playground">here</Link> to visit the playground
|
Click <Link href="/playground">here</Link> to visit the playground
|
||||||
|
<br></br>
|
||||||
|
Click <Link href="/samplePage">here</Link> to visit a sample page
|
||||||
</p>
|
</p>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,9 @@
|
||||||
import { BarGraphVertical } from "components/BarGraph";
|
import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
|
||||||
import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
|
import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
import useWindowDimensions from "utils/getWindowDimensions";
|
||||||
|
|
||||||
|
import FullComponentWrapper from "@/components/FullComponentWrapper";
|
||||||
import SideComponentWrapper from "@/components/SideComponentWrapper";
|
import SideComponentWrapper from "@/components/SideComponentWrapper";
|
||||||
|
|
||||||
import { WordCloud } from "../components/WordCloud";
|
import { WordCloud } from "../components/WordCloud";
|
||||||
|
@ -9,6 +11,8 @@ import { WordCloud } from "../components/WordCloud";
|
||||||
import styles from "./samplePage.module.css";
|
import styles from "./samplePage.module.css";
|
||||||
|
|
||||||
export default function SamplePage() {
|
export default function SamplePage() {
|
||||||
|
const { height, width } = useWindowDimensions();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.page}>
|
<div className={styles.page}>
|
||||||
<SideComponentWrapper
|
<SideComponentWrapper
|
||||||
|
@ -17,7 +21,7 @@ export default function SamplePage() {
|
||||||
>
|
>
|
||||||
<BarGraphVertical
|
<BarGraphVertical
|
||||||
data={mockCategoricalData}
|
data={mockCategoricalData}
|
||||||
width={800}
|
width={700}
|
||||||
height={500}
|
height={500}
|
||||||
margin={{
|
margin={{
|
||||||
top: 20,
|
top: 20,
|
||||||
|
@ -28,16 +32,36 @@ export default function SamplePage() {
|
||||||
/>
|
/>
|
||||||
</SideComponentWrapper>
|
</SideComponentWrapper>
|
||||||
|
|
||||||
<SideComponentWrapper
|
<FullComponentWrapper
|
||||||
heading="What program are you in?"
|
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."
|
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
|
<WordCloud
|
||||||
data={moreMockCategoricalData.map((word) => ({
|
data={moreMockCategoricalData.map((word) => ({
|
||||||
text: word.key,
|
text: word.key,
|
||||||
value: word.value,
|
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>
|
</SideComponentWrapper>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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;
|
Loading…
Reference in New Issue