Sample page and graph wrappers #32
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<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={`${rightAligned ? styles.wrapperRight : styles.wrapperLeft} ${
|
||||
noBackground ? styles.noBackground : ""
|
||||
}`}
|
||||
>
|
||||
<div className={styles.internalWrapper}>
|
||||
<h3>{heading}</h3>
|
||||
<p>{body}</p>
|
||||
</div>
|
||||
<div className={styles.internalWrapper}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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,4 +1,5 @@
|
|||
.page {
|
||||
display: flex;
|
||||
|
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Would be nice to not have to have the page be a flexbox, but I think I'm just being picky at this point LOL
(But if we're really sticking to a flex-direction column flexbox, maybe also consider setting
justify-content: center)Is there a reason for not using flexbox? The alternative is to use "float:right", on the bubbles, instead of "align-self: end", so I just stuck with making everything flex.
My rationale for trying to avoid flexbox here is that this imposes an additional requirement on the outer container, which is separate from the Wrapper component... so inevitably someone someday is going to try to use the Wrapper component and be like "wHy DoEsN't ThIs WoRk?!!!" because they forgot to set
display: flexandflex-direction: columnon the outer container.The alternative to both flexbox and float is what's used on the website: the Bubble component consists of a relatively positioned "container" with an absolutely positioned "bar" (what we see as the "bubble") that's translated sideways and cut off at the edge of the screen. This way, devs don't need to remember to do anything extra when using the component, because everything that's required for the component to work properly is an internal detail.
Yep, I did see the way it was done in the website, however since this technique is quite different than that I don't think it's worth it to restart using that approach, considering that the issue you outlined is not that likely that severe (only us using these components) and the scope of this project isn't really that big.