🐛 Fix a few rendering bugs

nest_frontend/components/base/BoxChart.js

@@ -1,25 +1,18 @@
 import React, { useRef } from "react"
 import BoxFull from "./BoxFull"
 import ChartComponent from "react-chartjs-2"
+import Loading from "./Loading"
 
 
 export default function BoxChart({chartProps, ...props}) {
-    const boxContentsRef = useRef(null)
     const getCssVar = (variable) => {
-        const computedStyle = window.getComputedStyle(boxContentsRef.current)
+        const computedStyle = window.getComputedStyle(document.querySelector("main"))
-        console.debug(variable, computedStyle.getPropertyValue(variable))
         return computedStyle.getPropertyValue(variable).trim()
     }
 
     return (
-        <BoxFull
+        <BoxFull {...props}>
-            childrenProps={{ref: boxContentsRef}}
-            {...props}
-        >
-            {boxContentsRef.current ?
             <ChartComponent
-                    width={boxContentsRef.current.offsetWidth}
-                    height={boxContentsRef.current.offsetHeight}
                 options={{
                     responsive: true,
                     scales: {
@@ -51,10 +44,14 @@ export default function BoxChart({chartProps, ...props}) {
                             color: getCssVar("--fg-primary"),
                         },
                     },
+                    plugins: {
+                        legend: {
+                            display: false,
+                        }
+                    }
                 }}
                 {...chartProps}
             />
-             : null}
         </BoxFull>
     )
 }

nest_frontend/components/interactive/BoxVisualizationChart.js

@@ -1,19 +1,27 @@
 import React from "react"
 import BoxFull from "../base/BoxFull"
 import BoxChart from "../base/BoxChart"
+import Empty from "./Empty"
 
 
 export default function BoxVisualizationChart({ tweets, ...props }) {
     // TODO: translate this
+
     const hours = [...Array(24).keys()].map(hour => hour.toString())
     const hourlyTweetCount = Array(24).fill(0)
     for(const tweet of tweets) {
         const insertDate = new Date(tweet["insert_time"])
         const insertHour = insertDate.getHours()
-        console.log(insertHour)
         hourlyTweetCount[insertHour] += 1
     }
 
+    if(tweets.length === 0) {
+        return (
+            <BoxFull header={"Hourly graph"} {...props}>
+                <Empty/>
+            </BoxFull>
+        )
+    }
 
     return (
         <BoxChart

nest_frontend/components/interactive/BoxVisualizationStats.js

@@ -5,7 +5,6 @@ import BoxFullScrollable from "../base/BoxFullScrollable"
 
 
 export default function BoxVisualizationStats({ tweets, words, totalTweetCount, ...props }) {
-
     const tweetCount = useMemo(
         () => tweets.length,
         [tweets],
@@ -42,12 +41,16 @@ export default function BoxVisualizationStats({ tweets, words, totalTweetCount,
     )
 
     const wordCount = useMemo(
-        () => words.map(word => word.value).reduce((a, b) => a + b),
+        () => {
-        [words],
+            if(words.length === 0) return 0
+            return words.map(word => word.value).reduce((a, b) => a + b)
+        },
+        [words]
     )
 
     const mostPopularWord = useMemo(
         () => {
+            if(words.length === 0) return "❌"
             return words.sort((wa, wb) => {
                 if(wa.value > wb.value) {
                     return -1
@@ -142,7 +145,7 @@ export default function BoxVisualizationStats({ tweets, words, totalTweetCount,
                     <b>{uniqueUsersCount}</b>
                 </FormLabel>
                 <FormLabel text={"Most active poster"}>
-                    <b>{mostActiveUser.user} ({mostActiveUser.count} tweets)</b>
+                    <b>{mostActiveUser ? `${mostActiveUser.user} (${mostActiveUser.count} tweet${mostActiveUser.count === 1 ? "" : "s"})` : "❌"}</b>
                 </FormLabel>
             </FormLabelled>
         </BoxFullScrollable>

nest_frontend/components/interactive/BoxVisualizationWordcloud.js

@@ -1,11 +1,21 @@
 import React, { useContext } from "react"
 import BoxWordcloud from "../base/BoxWordcloud"
 import ContextLanguage from "../../contexts/ContextLanguage"
+import BoxFull from "../base/BoxFull"
+import Empty from "./Empty"
 
 
 export default function BoxVisualizationWordcloud({ words, ...props }) {
     const { strings } = useContext(ContextLanguage)
 
+    if(words.length === 0) {
+        return (
+            <BoxFull header={strings.wordcloud} {...props}>
+                <Empty/>
+            </BoxFull>
+        )
+    }
+
     return (
         <BoxWordcloud header={strings.wordcloud} words={words} {...props}/>
     )