labo-components/app/components/resourceviewer/mediaColumn/SimpleWordCloud.jsx

B&G UI components

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import IDUtil from '../../../util/IDUtil';
import { createWordList } from '../../shared/WordCloudHelpers';

export default class SimpleWordCloud extends React.PureComponent {
    onClick = item => {
        this.props.onClick(item.id);
    };

    render() {
        const items = createWordList(this.props.words, '', this.props.size);

        const wordCloud = items.map(item => (
            <div
                key={item.id}
                onClick={this.props.onClick ? this.onClick.bind(this, item) : null}
                title={item.score}
                style={{
                    fontSize:
                        3 +
                        // relative size
                        item.size * 10 +
                        // absolute size
                        Math.min(10, (item.score / 10) * 10) +
                        'px'
                }}
            >
                {item.label}
            </div>
        ));
        return (
            <div className={IDUtil.cssClassName('simple-word-cloud')}>
                {wordCloud}
            </div>
        );
    }
}

SimpleWordCloud.propTypes = {
    // the raw words
    words: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
    size: PropTypes.number.isRequired
};