word-cloud-react - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7

dist/WordCloud/WordCloudComponent.js

@@ -6,2 +6,3 @@ import _classCallCheck from "/Users/sazzadsazib/Desktop/Work/Front-end/PackageBuild/word-cloud-react/node_modules/@babel/runtime/helpers/esm/classCallCheck";
 import _inherits from "/Users/sazzadsazib/Desktop/Work/Front-end/PackageBuild/word-cloud-react/node_modules/@babel/runtime/helpers/esm/inherits";
+import _assertThisInitialized from "/Users/sazzadsazib/Desktop/Work/Front-end/PackageBuild/word-cloud-react/node_modules/@babel/runtime/helpers/esm/assertThisInitialized";
 import React, { Component } from 'react';
@@ -16,12 +17,70 @@ import './WordCloudStyle.css';
 
-  function WordCloudComponent() {
+  function WordCloudComponent(props) {
+    var _this;
+
     _classCallCheck(this, WordCloudComponent);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(WordCloudComponent).apply(this, arguments));
-  }
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(WordCloudComponent).call(this, props));
+    _this.state = {
+      fontSizer: [],
+      maxFont: 40,
+      minFont: 10
+    };
+    _this.handleFontSize = _this.handleFontSize.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  } //all font sizes are in px;
 
+
   _createClass(WordCloudComponent, [{
+    key: "handleFontSize",
+    value: function handleFontSize() {
+      var _this2 = this;
+
+      // set max font size
+      this.setState({
+        maxFont: this.props.maxFont ? this.props.maxFont : 40,
+        minFont: this.props.minFont ? this.props.minFont : 10
+      }, function () {
+        // console.log(this.state);
+        //checking if length is not zero
+        if (_this2.props.data.length !== 0) {
+          //if contains more than 1 word
+          if (_this2.props.data.length > 1) {
+            //work need to do
+            var ValueDifference = _this2.props.data[0].value - _this2.props.data[_this2.props.data.length - 1].value;
+            var PxDifference = _this2.state.maxFont - _this2.state.minFont; // console.log(ValueDifference,PxDifference);
+            // console.log(this.props.data);
+
+            _this2.props.data.map(function (item) {
+              var ItemValueDifference = _this2.props.data[0].value - item.value === 0 ? 1 : _this2.props.data[0].value - item.value;
+              var NewFontSize = _this2.state.maxFont - PxDifference / ValueDifference * ItemValueDifference; //get state value for fontSizer;
+
+              var localFontSizer = _this2.state.fontSizer;
+              localFontSizer.push(NewFontSize);
+
+              _this2.setState({
+                fontSizer: localFontSizer
+              });
+
+              return item;
+            });
+          } else {
+            //else set max value to the one word.
+            _this2.setState({
+              fontSizer: [_this2.props.maxFont]
+            });
+          }
+        }
+      }); // console.log(this.state);
+    }
+  }, {
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      // console.log(this.props);
+      this.handleFontSize();
+    }
+  }, {
     key: "render",
     value: function render() {
-      var _this = this;
+      var _this3 = this;
 
@@ -39,4 +98,4 @@ return React.createElement("div", {
           style: {
-            color: _this.props.color[Math.floor(Math.random() * 100) % _this.props.color.length],
-            fontSize: Math.log2(item.value) * 5
+            color: _this3.props.color[Math.floor(Math.random() * 100) % _this3.props.color.length],
+            fontSize: _this3.props.logFunc ? _this3.props.logFunc(item.value) : _this3.state.fontSizer[i]
           }
@@ -47,3 +106,3 @@ }, React.createElement("div", {
           onClick: function onClick() {
-            return _this.props.clickEvent ? _this.props.clickEvent(item) : '';
+            return _this3.props.clickEvent ? _this3.props.clickEvent(item) : '';
           }
@@ -50,0 +109,0 @@ }, " ", item.word, " "), React.createElement(ReactTooltip, {

package.json

 {
   "name": "word-cloud-react",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "dependencies": {
@@ -5,0 +5,0 @@ "react-tooltip": "^3.9.0"

README.md

@@ -1,32 +0,75 @@
-# Word Cloud React · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/sazzadsazib/cohort-react-graph/blob/master/LICENSE)
-A library of to show React cohort graph
-## Installation
-Run the following command:
-`npm start`
+# Word Cloud React · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/sazzadsazib/word-cloud-react/blob/master/LICENSE) [![GitHub license](https://img.shields.io/badge/word--cloud--react-0.1.7-green.svg)](https://github.com/sazzadsazib/word-cloud-react/blob/master/LICENSE) 
+A library of to show Word Cloud in ReactJs
+![alt tag](https://github.com/sazzadsazib/word-cloud-react/blob/master/Docs/word%20cloud%20react.png)
 
-## How to use:
-Install Package<br/>
-``npm i word-cloud-react --save``
-<br/><br/>
-import in your react component: <br/>
-``import { WordCloud } from "word-cloud-react";``
-<br/><br/>
-Use it as:
-`` <WordCloud
-        width={"auto"} 
-        data={
-        [{"value":1811,"word":"hey"},{"value":486,"word":"service"},{"value":433,"word":"recipe"},{"value":390,"word":"feature"},{"value":280,"word":"item"},{"value":277,"word":"type"}]
-        }  
-        color={['#71803F', '#F8AC1D','#598EC0','#E2543E','#1A3051','#F46F73','#8A87BB','#56CFCD','#297373','#FF8552','#F2E863','#C2F8CB','#3A6EA5','#FF6700','#C0C0C0','#4E4381','#523CBD',]}/>``
-        
+## Getting Started
 
-### Props:
- ``width: auto | number , PropType: String | Integer``<br/><br/>
- ``data: [{"value": 100, "word": "hi},{"value": 150, "word": "hello}] , PropType: Array``<br/><br/>
- ``color: ['#71803F', '#F8AC1D'] , PropType: Array``<br/><br/>
- ``clickEvent={(x)=>console.log(x.word)}``
+To install the package run command.
+<br/>
+```npm i word-cloud-react --save``` 
+<br/>
+or using yarn <br/>
+```yarn add word-cloud-react```
+<br/>
+import the packages to your react Component, <br/>
+```import { WordCloud } from "word-cloud-react";```
+<br/>
+Use the component as: 
+```
+<WordCloud 
+            width={"auto"} 
+            maxFont={40} 
+            minFont={10} 
+            logFunc={(x)=> Math.log2(x) * 5} 
+            data={[{"word":"gt feature recipe","value":275},{"word":"searchknorrproduct service feature","value":275},.......]} 
+            clickEvent={(x)=>console.log(x.word)} 
+            color={['#71803F', '#F8AC1D','#598EC0','#E2543E','#1A3051','#F46F73','#8A87BB','#56CFCD','#297373','#FF8552','#F2E863','#C2F8CB','#3A6EA5','#FF6700','#C0C0C0','#4E4381','#523CBD',]}/>
+```
+<br/>
 
-### Color Schemes:
-``color={['#71803F', '#F8AC1D','#598EC0','#E2543E','#1A3051','#F46F73','#8A87BB','#56CFCD','#297373','#FF8552','#F2E863','#C2F8CB','#3A6EA5','#FF6700','#C0C0C0','#4E4381','#523CBD',]``
+### Props
+
+There are different conditional Props available in this component, they are, <br/>
+
+|Name |Type|Sample| Required | Description |
+|---|---|---|---|---|
+|`width`| `"auto"` or `any integer`|`width={"auto"}` or `width={600}`| `true` | The width of the word cloud
+|`maxFont`|`integer`|` maxFont={40} ` | `false` , `default : 40` | Max Font size for font sizing algorithm for the max value
+|`minFont`|`integer`|` minFont={10} ` | `false` , `default : 10` | Min Font size for font sizing algorithm for the min value
+|`logFunc`|`function`|` logFunc={(x)=> Math.log2(x) * 5} ` | `false` , if **logfunction** not provided than **maxFont, minFont algorithm will be used** | If this props provided maxFont and minFont will not work. this will use log function to size your word the function you provide as props.
+|`clickEvent`|`function`|`  clickEvent={(x)=>console.log(x.word)}  ` | `false` | get the function for click event through this props.
+|`color`|`array of string hex color code`|` color={['#71803F', '#F8AC1D','#598EC0','#E2543E']}  ` | `true` | color hex for randomise your word. more color more random it will be. user has control over this color generations not over its randomness
+|`data`|`array`|` data={[{"word":"gt feature recipe","value":275},...]}  ` | `true` | data that you will provide for word cloud
 <br/>
-Please visit: `https://coolors.co` to generate your color theme for word cloud. More you add color to the array more different color will appear randomly
+
+
+### Contribution
+
+If you want to work in this project. fork it, use the files from 
+```
+src/lib/WordCloud
+``` 
+component to work. and,
+```$xslt
+npm run build
+```
+to build.
+
+and send a pull request.
+
+
+
+## Versioning
+
+Current Version: ```0.1.7```
+
+## Authors
+
+* **Sazzad Sazib** - *Frontend Developer* - [Misfit Technologies ](http://misfit.tech/)
+
+
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
+

No alert changes

Improved metrics

Total package byte prevSize

10277

increased by58.45%

Lines of code

117

increased by80%

Number of lines in readme file

76

increased by130.3%

No dependency changes