✨ Add word counting feature to PageRepository

nest_frontend/components/interactive/BoxWordcloud.js

@@ -24,7 +24,7 @@ export default function BoxWordcloud({ words, props }) {
                             "var(--fg-primary)",
                         ],
                         fontFamily: "Bree Serif",
-                        fontSizes: [12, 128],
+                        fontSizes: [16, 48],
                         size: undefined,
                         deterministic: true,
                     }}

nest_frontend/routes/PageRepository.js

@@ -2,24 +2,50 @@ import React from "react"
 import Style from "./PageRepository.module.css"
 import classNames from "classnames"
 import BoxRepositoryTweets from "../components/interactive/BoxRepositoryTweets"
+import BoxWordcloud from "../components/interactive/BoxWordcloud"
 
 
 export default function PageRepository({ className, ...props }) {
+    const tweets = [
+        {
+            "conditions": [],
+            "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere lacinia eleifend. Maecenas a neque augue. Nulla dapibus lobortis gravida. Quisque quis ultricies elit. Donec in tortor augue. Cras eget aliquam felis. Nunc tempor, ipsum in lobortis tristique, nunc ante velit.",
+            "insert_time": "2021-05-18T18:56Z",
+            "location": null,
+            "place": "Casa mia",
+            "poster": "USteffo",
+            "snowflake": "1394698342282809344",
+        },
+    ]
+
+    let preprocessedWords = {}
+    for(const tweet of tweets) {
+        if(!tweet.content) {
+            continue
+        }
+        for(const word of tweet.content.toLowerCase().split(/\s+/)) {
+            if(!preprocessedWords.hasOwnProperty(word)) {
+                preprocessedWords[word] = 0
+            }
+            preprocessedWords[word] += 1
+        }
+    }
+
+    let processedWords = []
+    for(const word in preprocessedWords) {
+        if(!preprocessedWords.hasOwnProperty(word)) {
+            continue
+        }
+        processedWords.push({
+            text: word,
+            value: preprocessedWords[word]
+        })
+    }
+
     return (
         <div className={classNames(Style.PageRepository, className)} {...props}>
-            <BoxRepositoryTweets
-                tweets={[
-                    {
-                        "conditions": [],
-                        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere lacinia eleifend. Maecenas a neque augue. Nulla dapibus lobortis gravida. Quisque quis ultricies elit. Donec in tortor augue. Cras eget aliquam felis. Nunc tempor, ipsum in lobortis tristique, nunc ante velit.",
-                        "insert_time": "2021-05-18T18:56Z",
-                        "location": null,
-                        "place": "Casa mia",
-                        "poster": "USteffo",
-                        "snowflake": "1394698342282809344",
-                    },
-                ]}
-            />
+            <BoxRepositoryTweets className={Style.Tweets} tweets={tweets}/>
+            <BoxWordcloud className={Style.Wordcloud} words={processedWords}/>
         </div>
     )
 }

nest_frontend/routes/PageRepository.module.css

@@ -4,14 +4,22 @@
     grid-template-areas:
             "a b"
             "c d"
+            "e f"
+            "g h"
     ;
 
     grid-gap: 10px;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr auto 1fr auto;
 
     width: 100%;
     height: 100%;
 }
 
-.Wordcloud {
+.Tweets {
     grid-area: a;
+}
+
+.Wordcloud {
+    grid-area: b;
 }