🐛 Fix a few rendering bugs

nest_frontend/components/base/BoxChart.js

@@ -1,60 +1,57 @@
 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}}
+            <ChartComponent
-            {...props}
+                options={{
-        >
+                    responsive: true,
-            {boxContentsRef.current ?
+                    scales: {
-                <ChartComponent
+                        x: {
-                    width={boxContentsRef.current.offsetWidth}
+                            beginAtZero: true,
-                    height={boxContentsRef.current.offsetHeight}
+                            grid: {
-                    options={{
+                                borderColor: getCssVar("--bg-light"),
-                        responsive: true,
+                                color: getCssVar("--bg-light"),
-                        scales: {
-                            x: {
-                                beginAtZero: true,
-                                grid: {
-                                    borderColor: getCssVar("--bg-light"),
-                                    color: getCssVar("--bg-light"),
-                                },
-                                ticks: {
-                                    color: getCssVar("--fg-primary"),
-                                }
                             },
-                            y: {
+                            ticks: {
-                                beginAtZero: true,
-                                grid: {
-                                    borderColor: getCssVar("--bg-light"),
-                                    color: getCssVar("--bg-light"),
-                                },
-                                ticks: {
-                                    color: getCssVar("--fg-primary"),
-                                }
-                            },
-                        },
-                        elements: {
-                            bar: {
-                                backgroundColor: getCssVar("--fg-primary"),
-                                borderColor: "transparent",
                                 color: getCssVar("--fg-primary"),
-                            },
+                            }
                         },
-                    }}
+                        y: {
-                    {...chartProps}
+                            beginAtZero: true,
-                />
+                            grid: {
-             : null}
+                                borderColor: getCssVar("--bg-light"),
+                                color: getCssVar("--bg-light"),
+                            },
+                            ticks: {
+                                color: getCssVar("--fg-primary"),
+                            }
+                        },
+                    },
+                    elements: {
+                        bar: {
+                            backgroundColor: getCssVar("--fg-primary"),
+                            borderColor: "transparent",
+                            color: getCssVar("--fg-primary"),
+                        },
+                    },
+                    plugins: {
+                        legend: {
+                            display: false,
+                        }
+                    }
+                }}
+                {...chartProps}
+            />
         </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}/>
     )