From 75c6ba08337759997f13f561441577cb67cb6705 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Thu, 20 May 2021 15:34:05 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20a=20few=20rendering=20bugs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nest_frontend/components/base/BoxChart.js     | 83 +++++++++----------
 .../interactive/BoxVisualizationChart.js      | 10 ++-
 .../interactive/BoxVisualizationStats.js      | 11 ++-
 .../interactive/BoxVisualizationWordcloud.js  | 10 +++
 4 files changed, 66 insertions(+), 48 deletions(-)

diff --git a/nest_frontend/components/base/BoxChart.js b/nest_frontend/components/base/BoxChart.js
index ebb7c93..b461342 100644
--- a/nest_frontend/components/base/BoxChart.js
+++ b/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)
-        console.debug(variable, computedStyle.getPropertyValue(variable))
+        const computedStyle = window.getComputedStyle(document.querySelector("main"))
         return computedStyle.getPropertyValue(variable).trim()
     }
 
     return (
-        <BoxFull
-            childrenProps={{ref: boxContentsRef}}
-            {...props}
-        >
-            {boxContentsRef.current ?
-                <ChartComponent
-                    width={boxContentsRef.current.offsetWidth}
-                    height={boxContentsRef.current.offsetHeight}
-                    options={{
-                        responsive: true,
-                        scales: {
-                            x: {
-                                beginAtZero: true,
-                                grid: {
-                                    borderColor: getCssVar("--bg-light"),
-                                    color: getCssVar("--bg-light"),
-                                },
-                                ticks: {
-                                    color: getCssVar("--fg-primary"),
-                                }
+        <BoxFull {...props}>
+            <ChartComponent
+                options={{
+                    responsive: true,
+                    scales: {
+                        x: {
+                            beginAtZero: true,
+                            grid: {
+                                borderColor: getCssVar("--bg-light"),
+                                color: getCssVar("--bg-light"),
                             },
-                            y: {
-                                beginAtZero: true,
-                                grid: {
-                                    borderColor: getCssVar("--bg-light"),
-                                    color: getCssVar("--bg-light"),
-                                },
-                                ticks: {
-                                    color: getCssVar("--fg-primary"),
-                                }
-                            },
-                        },
-                        elements: {
-                            bar: {
-                                backgroundColor: getCssVar("--fg-primary"),
-                                borderColor: "transparent",
+                            ticks: {
                                 color: getCssVar("--fg-primary"),
-                            },
+                            }
                         },
-                    }}
-                    {...chartProps}
-                />
-             : null}
+                        y: {
+                            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"),
+                        },
+                    },
+                    plugins: {
+                        legend: {
+                            display: false,
+                        }
+                    }
+                }}
+                {...chartProps}
+            />
         </BoxFull>
     )
 }
diff --git a/nest_frontend/components/interactive/BoxVisualizationChart.js b/nest_frontend/components/interactive/BoxVisualizationChart.js
index efda701..147dadd 100644
--- a/nest_frontend/components/interactive/BoxVisualizationChart.js
+++ b/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
diff --git a/nest_frontend/components/interactive/BoxVisualizationStats.js b/nest_frontend/components/interactive/BoxVisualizationStats.js
index df11a20..b51fc77 100644
--- a/nest_frontend/components/interactive/BoxVisualizationStats.js
+++ b/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>
diff --git a/nest_frontend/components/interactive/BoxVisualizationWordcloud.js b/nest_frontend/components/interactive/BoxVisualizationWordcloud.js
index 780e1a3..c61fccd 100644
--- a/nest_frontend/components/interactive/BoxVisualizationWordcloud.js
+++ b/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}/>
     )