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

Made page responsive
continuous-integration/drone/push Build is passing
Details

Browse Source
shahanneda/create-component-wrapper
Shahan Nedadahandeh 8 months ago
parent 8a85e3c5d9
commit 4755793d18
Signed by: snedadah
GPG Key ID: 8638C7F917385B01
8 changed files with 119 additions and 23 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 7
      components/FullComponentWrapper.module.css
  2. 25
      components/SideComponentWrapper.tsx
  3. 12
      components/WordCloud.tsx
  4. 77
      package-lock.json
  5. 5
      package.json
  6. 1
      pages/playground.tsx
  7. 12
      pages/samplePage.tsx
  8. 3
      utils/isMobile.ts

7
components/FullComponentWrapper.module.css
Unescape View File

@ -13,9 +13,4 @@
.graphWrapper {
margin-top: calc(80rem / 16);
}
/* .textWrapper {
margin: 0 calc(100rem / 16);
} */
}

25
components/SideComponentWrapper.tsx
Unescape View File

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

12
components/WordCloud.tsx
Unescape View File

@ -61,6 +61,7 @@ export const WordCloud = withTooltip(
hideTooltip,
} = useTooltip<WordData>();
console.log("got width", width);
return (
<div className={className}>
<WordCloudWordsMemoized
@ -197,11 +198,14 @@ const shouldNotRerender = (
nextProps: WordCloudWordsProps
) => {
if (
prevProps.tooltipLeft !== nextProps.tooltipLeft ||
prevProps.tooltipTop !== nextProps.tooltipTop ||
nextProps.tooltipLeft === undefined ||
nextProps.tooltipTop === undefined
// if width changes, rerender, else don't rerender for a tooltip change
prevProps.width === nextProps.width &&
(prevProps.tooltipLeft !== nextProps.tooltipLeft ||
prevProps.tooltipTop !== nextProps.tooltipTop ||
nextProps.tooltipLeft === undefined ||
nextProps.tooltipTop === undefined)
) {
console.log("widths ", prevProps.width, nextProps.width);
return true; // do not re-render
}
return false; // will re-render

77
package-lock.json generated
Unescape View File

@ -19,7 +19,8 @@
"@visx/wordcloud": "^2.10.0",
"next": "12.1.6",
"react": "18.1.0",
"react-dom": "18.1.0"
"react-dom": "18.1.0",
"react-responsive": "^9.0.0-beta.10"
},
"devDependencies": {
"@types/node": "17.0.38",
@ -1449,6 +1450,11 @@
"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",
@ -2533,6 +2539,11 @@
"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",
@ -2931,6 +2942,14 @@
"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",
@ -3950,6 +3969,23 @@
"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",
@ -4117,6 +4153,11 @@
"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",
@ -5375,6 +5416,11 @@
"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",
@ -6206,6 +6252,11 @@
"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",
@ -6499,6 +6550,14 @@
"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",
@ -7166,6 +7225,17 @@
"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",
@ -7280,6 +7350,11 @@
"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",

5
package.json
Unescape View File

@ -21,12 +21,13 @@
"@visx/group": "^2.10.0",
"@visx/scale": "^2.2.2",
"@visx/shape": "^2.10.0",
"@visx/text": "^2.10.0",
"@visx/tooltip": "^2.10.0",
"@visx/wordcloud": "^2.10.0",
"@visx/text": "^2.10.0",
"next": "12.1.6",
"react": "18.1.0",
"react-dom": "18.1.0"
"react-dom": "18.1.0",
"react-responsive": "^9.0.0-beta.10"
},
"devDependencies": {
"@types/node": "17.0.38",

1
pages/playground.tsx
Unescape View File

@ -61,7 +61,6 @@ export default function Home() {
value: word.value,
}))}
/>
</div>
);
}

12
pages/samplePage.tsx
Unescape View File

@ -2,6 +2,7 @@ import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
import React from "react";
import useWindowDimensions from "utils/getWindowDimensions";
import { useIsMobile } from "utils/isMobile";
import FullComponentWrapper from "@/components/FullComponentWrapper";
import SideComponentWrapper from "@/components/SideComponentWrapper";
@ -11,7 +12,8 @@ import { WordCloud } from "../components/WordCloud";
import styles from "./samplePage.module.css";
export default function SamplePage() {
const { height, width } = useWindowDimensions();
const { width } = useWindowDimensions();
const isMobile = useIsMobile();
return (
<div className={styles.page}>
@ -21,7 +23,8 @@ export default function SamplePage() {
>
<BarGraphVertical
data={mockCategoricalData}
width={700}
// For components that are in the side wrappers, it looks better if they fill a certain amount of width, so we can make the width dynamic like this
width={isMobile ? width / 1.25 : width / 2}
height={500}
margin={{
top: 20,
@ -41,7 +44,8 @@ export default function SamplePage() {
text: word.key,
value: word.value,
}))}
width={1000}
// For components that we don't want to match the width necessarily we can provide direact values
width={isMobile ? 500 : 1000}
height={500}
/>
</FullComponentWrapper>
@ -54,7 +58,7 @@ export default function SamplePage() {
<BarGraphHorizontal
className={styles.barGraphDemo}
data={mockCategoricalData}
width={width / 2}
width={isMobile ? width / 1.25 : width / 2}
height={500}
margin={{
top: 20,

3
utils/isMobile.ts
Unescape View File

@ -0,0 +1,3 @@
import { useMediaQuery } from "react-responsive";
export const useIsMobile = () => useMediaQuery({ query: "(max-width: 768px)" });
Write Preview
Loading…
Cancel
Save