wordcloud is not showing all words

[Ananta Singh]

hey Chris,

my wordcloud is missing many words. I have also applied the solution you suggested but no luck

here is the css used for this

.wordCloudBox {
margin-top: 8px;
min-height: 45vh;
width: 100%;
flex: 1;
}

.sectionDivider {
padding: 10px;
width: 100%;
}

@media screen and (max-width: 780px) {
.wordCloudBox {
min-height: 70vh;
}
}

waiting for your reply Chris....

[Chris Zhou]

Can you reproduce this setup (or something similar) in a Codesandbox with deterministic: true so I can take a look? Thanks.

[Ananta Singh]

hey Chris,
this is my wordcloud.js file...i really hope it'll be helpful

import React, { useEffect } from "react";
import { connect } from 'react-redux';

// @material-ui/core components
import GridItem from "components/Grid/GridItem.js";
import GridContainer from "components/Grid/GridContainer.js";
import Card from "components/Card/Card.js";
import CardHeader from "components/Card/CardHeader.js";
import CardBody from "components/Card/CardBody.js";
import Table from "components/Table/Table.js";
import ReactWordcloud from "react-wordcloud";
import classes from '../Common.module.css';
import classesObj from './WordCloud.module.css';
import { getCloudWords } from '../../redux/actions/wordCloud';
import Loader from "components/Loader/Loader";
import { getQueryParam } from "utils/helper";
import CopyToClip from './../../components/CopyToClip/CopyToClip';
import GoBackButton from './../../components/GoBackBtn/GoBackBtn';

const wordCloudOption = {
deterministic: true,
fontSizes: [14, 68],
rotations: 0,
padding: 3
};

const WordCloud = React.memo(function ({
getCloudWords,
list,
authorized,
loading,
location,
loginSuccess,
title,
history
}) {

useEffect(() => {
    getCloudWords(getQueryParam(location.search, 'url').replace(/^https?:\/\//, ''));
}, [getCloudWords, location.search, loginSuccess]);
console.log({ list, title })

return (
    <GridContainer>
        {
            list && list.length ? <>
                <GridItem xs={12} sm={12} md={12}>
                    <Card>
                        <CardHeader>
                            <div className={classes.headerContent}>
                                <h4 className={classes.cardTitleWhite}>WordCloud for “{title}”</h4>
                            </div>
                        </CardHeader>
                        <CardBody>
                            <CopyToClip disabled={!authorized}
                                text={list.slice(0, 10).map(tag => tag.text).join(', ')}
                                disablePlaceholder='Copy functionality is available only for permium users.'>
                                Copy Words
                            </CopyToClip>

                            <div className={classesObj.wordCloudBox}>
                                <ReactWordcloud words={list} options={wordCloudOption} />
                            </div>

                        </CardBody>
                    </Card>
                </GridItem>
                <div className={classesObj.sectionDivider} />
                <GridItem xs={12} sm={12} md={12}>
                    <Card>
                        <CardHeader>
                            <div className={classes.headerContent}>
                                <h4 className={classes.cardTitleWhite}>Word List for “{title}”</h4>
                            </div>
                        </CardHeader>
                        <CardBody>
                            <Table
                                tableHead={["Weight", "Word"]}
                                tableData={list.slice(0, 10).map(item => [item.value, item.text])}
                            />
                        </CardBody>
                    </Card>
                    <GoBackButton onClick={() => history.push(`/trendingBlogs?id=${getQueryParam(location.search)}`)}>Go Back
                        </GoBackButton>
                </GridItem>
            </> : <Loader active={loading} />
        }
    </GridContainer>
);

});

const mapStateToProps = ({
cloudWords,
auth
}) => ({
list: cloudWords.cloudWords,
title: cloudWords.title,
loading: cloudWords.loading,
authorized: cloudWords.authorized,
error: cloudWords.error,
loginSuccess: auth.loginSuccess
})

const mapDispatchToProps = { getCloudWords };

export default connect(mapStateToProps, mapDispatchToProps)(WordCloud);