Merge pull request #8 from Dantaro/v1.3.0

v1.3.0

.env

@@ -1 +1 @@
-REACT_APP_CURRENT_VERSION=v1.2.0
+REACT_APP_CURRENT_VERSION=v1.3.0

package.json

@@ -1,6 +1,6 @@
 {
     "name": "one-nice-thing",
-    "version": "1.1.2",
+    "version": "1.3.0",
     "private": true,
     "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
@@ -20,7 +20,8 @@
         "react-router-dom": "^5.2.0",
         "react-scripts": "3.4.1",
         "redux": "^4.0.5",
-        "redux-persist": "^6.0.0"
+        "redux-persist": "^6.0.0",
+        "wordcloud": "^1.1.2"
     },
     "scripts": {
         "start": "react-scripts start",

src/component/releasenotes/Releases.js

@@ -13,4 +13,14 @@ export const Releases = {
             automated (and secure) automated cross-device sync process.
         </Typography>
     ),
+    'v1.3.0': (
+        <Typography variant="body1">
+            With release 1.3.0 we've added a new statistic: a word cloud! Now you 
+            can see a visualization what words you use and how frequently you make 
+            use of them! Enjoy this fun feature, inspired by a suggestion email! 
+            As a reminder, if you have any suggestions, bugs, or general thoughts 
+            about One Nice Thing please feel free to send an email from the About 
+            or Statistics page!
+        </Typography>
+    )
 }

src/page/statistics/Statistics.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
 import Typography from '@material-ui/core/Typography'
 import Paper from '@material-ui/core/Paper'
 import { useSelector } from 'react-redux'
@@ -8,6 +8,8 @@ import {
     findLongestNote,
 } from 'util/notelist'
 import { makeStyles } from '@material-ui/core/styles'
+import WordCloud from 'wordcloud'
+import { findWordCounts } from 'util/notelist/NoteListUtil'
 
 const useStyles = makeStyles({
     paper: {
@@ -21,6 +23,25 @@ const useStyles = makeStyles({
     },
 })
 
+const NotelistWordMap = ({id, noteList}) => { 
+    const canvasRef = useRef(null)
+    useEffect(() => {
+        WordCloud(document.getElementById(id), {
+            list: findWordCounts(noteList),
+            rotateRatio: 0,
+            weightFactor: 10,
+            color: () => '#1261A0'
+        })
+    }, [id, noteList]);
+
+    return (<>
+        <Typography variant="body1">
+            Your Word Cloud
+        </Typography>
+        <canvas ref={canvasRef} id={id} /> 
+    </>)
+}
+
 export const Statistics = () => {
     const classes = useStyles()
     const noteList = useSelector((state) => state.noteList)
@@ -55,6 +76,7 @@ export const Statistics = () => {
                     Longest Note:{' '}
                     {`${longestNote} ${longestNote === 1 ? 'word' : 'words'}`}
                 </Typography>
+                <NotelistWordMap id="notelistWordCount" noteList={noteList} />
                 <br/>
                 <Typography variant="body2">
                     Have an idea for other statistics? <a href="mailto:[email protected]">Shoot over an email</a> with your suggestions!

src/util/notelist/NoteListUtil.js

@@ -84,3 +84,34 @@ export const findLongestNote = (noteList) => {
         .map((it) => it.trim().split(/\s+/).length)
         .reduce((acc, it) => (acc > it ? acc : it), 0)
 }
+
+export const findWordCounts = (noteList) => {
+    if (!noteList || noteList.length === 0) {
+        return []
+    }
+
+    const wordCounts = {}
+    noteList
+        .map(it => it.text)
+        .map(it => it.toLowerCase())
+        .forEach(it => {
+            it.split(' ')
+                .map(word => word.replace(/\W/g, ''))
+                .filter(word => word.length > 0)
+                .reduce((acc, cur) => {
+                const currentCount = acc[cur]
+                if (currentCount == null || currentCount == undefined) {
+                    acc[cur] = 1
+                } else {
+                    acc[cur] = currentCount + 1
+                }
+                return acc
+            }, wordCounts)
+        })
+
+    console.log(wordCounts)
+
+    return Object.keys(wordCounts)
+        .map(key => [key, wordCounts[key]])
+
+}