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

Added docs
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Shahan Nedadahandeh 2022-07-21 21:52:11 -07:00
parent ad12be3a7a
commit 1e1e134e08
Signed by: snedadah
GPG Key ID: 8638C7F917385B01
1 changed files with 74 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
components/WordCloud.tsx
View File

@ -11,12 +11,22 @@ import styles from "./WordCloud.module.css";
interface WordCloudProps {
data: Array<WordData>;
/** Width of the graph, in px */
width?: number;
/** Height of the graph, in px */
height?: number;
/** Minimum padding between words, in px */
wordPadding?: number;
/** Weight of the font of the words */
fontWeight?: number;
/** The desired font size of the smallest word, in px.*/
minFontSize?: number;
/** The desired font size of the largest word, in px. */
maxFontSize?: number;
/** A random seed used for placing the words, change this value to get an alternate placement of words */
randomSeed?: number;
/** ClassName of the wrapper of the wordcloud */
wrapperClassName?: string;
}
interface WordData {
@ -25,7 +35,6 @@ interface WordData {
}
const wordColors = [Color.primaryAccent, Color.primaryAccentLight];
const fixedValueGenerator = () => 0.5;
const TOOLTIP_HORIZONTAL_SHIFT_SCALER = 12.0;
export const WordCloud = withTooltip(
@ -37,6 +46,8 @@ export const WordCloud = withTooltip(
fontWeight = 500,
minFontSize = 20,
maxFontSize = 150,
randomSeed = 0.5,
wrapperClassName,
}: WordCloudProps) => {
const {
tooltipData,
@ -48,7 +59,7 @@ export const WordCloud = withTooltip(
} = useTooltip<WordData>();
return (
<>
<div className={wrapperClassName}>
<WordCloudWordsMemoized
width={width}
height={height}
@ -67,6 +78,7 @@ export const WordCloud = withTooltip(
hideTooltip={hideTooltip}
tooltipLeft={tooltipLeft}
tooltipTop={tooltipTop}
randomSeed={randomSeed}
/>
{tooltipOpen && tooltipData ? (
@ -82,7 +94,7 @@ export const WordCloud = withTooltip(
{tooltipData.text} ({tooltipData.value})
</TooltipWithBounds>
) : null}
</>
</div>
);
}
);
@ -95,6 +107,7 @@ type WordCloudWordsProps = WordCloudProps & {
fontWeight: number;
minFontSize: number;
maxFontSize: number;
randomSeed: number;
showTooltip: (
data: WordData,
tooltipLeft: number,
@ -105,15 +118,17 @@ type WordCloudWordsProps = WordCloudProps & {
// but they are not needed to render the component
tooltipLeft?: number;
tooltipTop?: number;
// className?: string;
};
const WordCloudWords: React.FC<WordCloudWordsProps> = ({
width,
height,
data,
wordPadding = 30,
fontWeight = 400,
minFontSize = 20,
maxFontSize = 100,
wordPadding,
fontWeight,
minFontSize,
maxFontSize,
randomSeed,
showTooltip,
hideTooltip,
}) => {
@ -125,61 +140,60 @@ const WordCloudWords: React.FC<WordCloudWordsProps> = ({
range: [minFontSize, maxFontSize],
});
const fontSizeSetter = (datum: WordData) => fontScale(datum.value);
const fixedValueGenerator = () => randomSeed;
return (
<>
<VisxWordcloud
words={data}
width={width}
height={height}
fontSize={fontSizeSetter}
font="Inconsolata, monospace"
padding={wordPadding}
spiral={"rectangular"}
rotate={0}
random={fixedValueGenerator}
>
{(cloudWords) =>
cloudWords.map((w, i) => {
return (
<Text
key={w.text}
fill={wordColors[i % wordColors.length]}
transform={`translate(${w.x ?? 0}, ${w.y ?? 0})`}
fontSize={w.size}
fontFamily={w.font}
fontWeight={fontWeight}
className={styles.word}
textAnchor="middle"
onMouseMove={
((e: React.MouseEvent<SVGTextElement, MouseEvent>) => {
const eventSvgCoords = localPoint(
// ownerSVGElement is given by visx docs but not recognized by typescript
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
e.target.ownerSVGElement as Element,
e
) as Point;
<VisxWordcloud
words={data}
width={width}
height={height}
fontSize={fontSizeSetter}
font="Inconsolata, monospace"
padding={wordPadding}
spiral={"rectangular"}
rotate={0}
random={fixedValueGenerator}
>
{(cloudWords) =>
cloudWords.map((w, i) => {
return (
<Text
key={`wordcloud-word-${w.text ?? ""}`}
fill={wordColors[i % wordColors.length]}
transform={`translate(${w.x ?? 0}, ${w.y ?? 0})`}
fontSize={w.size}
fontFamily={w.font}
fontWeight={fontWeight}
className={styles.word}
textAnchor="middle"
onMouseMove={
((e: React.MouseEvent<SVGTextElement, MouseEvent>) => {
const eventSvgCoords = localPoint(
// ownerSVGElement is given by visx docs but not recognized by typescript
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
e.target.ownerSVGElement as Element,
e
) as Point;
if (w.text) {
showTooltip(
{ text: w.text, value: data[i].value },
eventSvgCoords.x -
w.text.length * TOOLTIP_HORIZONTAL_SHIFT_SCALER,
eventSvgCoords.y
);
}
console.log(e, eventSvgCoords);
}) as React.MouseEventHandler<SVGTextElement>
}
onMouseLeave={(_) => hideTooltip()}
>
{w.text}
</Text>
);
})
}
</VisxWordcloud>
</>
if (w.text) {
showTooltip(
{ text: w.text, value: data[i].value },
eventSvgCoords.x -
w.text.length * TOOLTIP_HORIZONTAL_SHIFT_SCALER,
eventSvgCoords.y
);
}
console.log(e, eventSvgCoords);
}) as React.MouseEventHandler<SVGTextElement>
}
onMouseLeave={(_) => hideTooltip()}
>
{w.text}
</Text>
);
})
}
</VisxWordcloud>
);
};