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

Add Wordcloud Component #27

Merged
snedadah merged 29 commits from shahanneda/add-wordcloud-2 into main 2022-08-04 02:17:21 -04:00
Conversation 0 Commits 29 Files Changed 9 +15 -6
3 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 8f2c390dbd - Show all commits

9
components/WordCloud.tsx
View File

@ -150,11 +150,11 @@ const WordCloudWords: React.FC<WordCloudWordsProps> = ({
random={fixedValueGenerator}
a258wang commented 2022-08-01 00:00:17 -04:00
Review
Copy Link

I'm not sure if we should add quotes around Inconsolata 🤔

I'm not sure if we should add quotes around `Inconsolata` 🤔
snedadah commented 2022-08-02 22:58:14 -04:00
Review
Copy Link

we need the quotes here, this is in TSX, that issue is only for CSS.

we need the quotes here, this is in TSX, that issue is only for CSS.
a258wang commented 2022-08-04 00:22:18 -04:00
Review
Copy Link

Ahh, my concern is that this string eventually becomes an inline style:

<text transform="translate(8, 0)" fill="var(--primary-accent)" font-size="150" font-family="Inconsolata, monospace" font-weight="500" class="WordCloud_word__4_u0u" text-anchor="middle"><tspan x="0" dy="0em">Python</tspan></text>

Looking at staging the font seems to be okay, but I'm not sure if that's because it's inline or if it's because Inconsolata doesn't have any spaces or if it's because of something else. But also I just tried adding quotation marks to the HTMl and it didn't seem to do anything, so yeah we're probably fine. 😄

Ahh, my concern is that this string eventually becomes an inline style: ```html <text transform="translate(8, 0)" fill="var(--primary-accent)" font-size="150" font-family="Inconsolata, monospace" font-weight="500" class="WordCloud_word__4_u0u" text-anchor="middle"><tspan x="0" dy="0em">Python</tspan></text> ``` Looking at staging the font seems to be okay, but I'm not sure if that's because it's inline or if it's because `Inconsolata` doesn't have any spaces or if it's because of something else. But also I just tried adding quotation marks to the HTMl and it didn't seem to do anything, so yeah we're probably fine. 😄
>
{(cloudWords) =>
a258wang marked this conversation as resolved
a258wang commented 2022-08-01 00:04:14 -04:00
Review
Copy Link

Any particular reason why a rectagular spiral, and not an archimedean spiral? (Maybe it'd be nice to be able to control this as a prop?)

Any particular reason why a rectagular spiral, and not an archimedean spiral? (Maybe it'd be nice to be able to control this as a prop?)
snedadah commented 2022-08-02 23:02:50 -04:00
Review
Copy Link

Added it as a prop, our figma design matches the rectangular which is why I set that one.

Added it as a prop, our figma design matches the rectangular which is why I set that one.
👍 1
cloudWords.map((word, i) => {
cloudWords.map((word, index) => {
return (
<Text
key={`wordcloud-word-${word.text ?? ""}`}
fill={wordColors[i % wordColors.length]}
key={`wordcloud-word-${word.text ?? ""}-${index}`}
fill={wordColors[index % wordColors.length]}
transform={`translate(${word.x ?? 0}, ${word.y ?? 0})`}
fontSize={word.size}
fontFamily={word.font}
@ -173,13 +173,12 @@ const WordCloudWords: React.FC<WordCloudWordsProps> = ({
if (word.text) {
showTooltip(
{ text: word.text, value: data[i].value },
{ text: word.text, value: data[index].value },
eventSvgCoords.x -
word.text.length * TOOLTIP_HORIZONTAL_SHIFT_SCALER,
eventSvgCoords.y
);
}
console.log(e, eventSvgCoords);
}) as React.MouseEventHandler<SVGTextElement>
}
onMouseLeave={(_) => hideTooltip()}

2
package.json
View File

@ -4,7 +4,7 @@
"private": true,
"engines": {
"node": "^16",
"npm": ">=7"
"npm": "^8.0.0"
},
"scripts": {
"dev": "next dev",

10
pages/playground.tsx
View File

@ -49,6 +49,16 @@ export default function Home() {
right: 20,
}}
/>
<h2>
<code>{"<WordCloud />"}</code>
</h2>
<WordCloud
data={moreMockCategoricalData.map((word) => ({
text: word.key,
value: word.value,
}))}
/>
</div>
);
}